I have the following that displays nearly ok.
The logo is fine.
The content is slightly wrong. The images are going to be 200 x 200
what i want is square with text centred underneath it bit of a gap another square with text underneath it. then i want to drop down and do the same again for the other 2 squares.
am i doing this correctly and what do i need to change?
Thanks in advance
HTML
CSS
The logo is fine.
The content is slightly wrong. The images are going to be 200 x 200
what i want is square with text centred underneath it bit of a gap another square with text underneath it. then i want to drop down and do the same again for the other 2 squares.
am i doing this correctly and what do i need to change?
Thanks in advance
HTML
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="e4allcss.css" type="text/css" media="screen"/>
</head>
<body>
<div id="container">
<div id="logo">
<img src="Logo.jpeg" alt="logo" width="481" height="98"/>
</div>
<div id="content">
<img src="Square.jpg" alt="Square" />
<p>Start Here</p>
</div>
<div id="content">
<img src="Square.jpg" alt="Square" />
<p>Teaching </p>
</div>
<div id="content">
<img src="Square.jpg" alt="Square" />
<p>Managing </p>
</div>
<div id="content">
<img src="Square.jpg" alt="Square" />
<p>Extras</p>
</div>
</div>
</body>
</html>CSS
Code:
@charset "UTF-8";
/* CSS Document */
* html #maincol
{
height: 400px;
}
body
{
background-color: #000;
}
#container
{
width:900px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:transparent;
}
#logo
{
padding-left:40px;
display:block;
top:0px;
left:40px;
height:120px;
}
#content
{
display:block;
min-height:200px;
height:auto !important;
height:300px;
min-width:200px;
width:auto !important;
width:300px;
text-align:center;
}
#content p {
color:#fff;
}