I'm still building *wails*
I have the major blocks outlined on the page, but I can't for the life of me get my content to sit right.
what I'm trying to acheive is a centered set sized box with: header,
sub box with menu up the top (horizontal)
below this I want
picture, text
unordered list, picture
picture, unordered list.
end of the centered box
what I get is a mess, the last picture overlaps the end box, the unordered lists wrap around the picture above it.
I really don't know what I'm doing, I can't find an example which is doing what I want, and I don't want to resort to shoving a table in the middle of all my nice CSS.
Any help would be much appreciated.
code so far (I know the contentleft, contentright and textblock have to be wrong)
CSS sheet
the page
I'm building two seperate css sheets, one for ie and one for everything else, and I have a php script to automatically choose them, so help making it work for both would be great
----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..
I have the major blocks outlined on the page, but I can't for the life of me get my content to sit right.
what I'm trying to acheive is a centered set sized box with: header,
sub box with menu up the top (horizontal)
below this I want
picture, text
unordered list, picture
picture, unordered list.
end of the centered box
what I get is a mess, the last picture overlaps the end box, the unordered lists wrap around the picture above it.
I really don't know what I'm doing, I can't find an example which is doing what I want, and I don't want to resort to shoving a table in the middle of all my nice CSS.
Any help would be much appreciated.
code so far (I know the contentleft, contentright and textblock have to be wrong)
CSS sheet
Code:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFCC00;
text-align: center;
font-size: small;
}
.box {
text-align: left; /* so that text is not centered anymore */
background-color: #FFFFFF;
border: 1px solid #000000;
width: 760px;
height: 100%;
position: static;
margin: 0 auto; /* meaning top and bottom margins are 0, left and right are auto, which centers the box in standard browsers */
}
.imagespace {
padding: 10px 0px 2px 10px;
position: static;
}
.menu-box {
text-align: center;
background-color: #FFFFFF;
border: 1px solid #000000;
width: 720px;
height: 24px;
position: static;
margin: 0 auto;
display: block;
vertical-align: middle;
padding: 2px 10px;
}
.imagespace2 {
position: static;
padding: 10px 0px 2px;
}
}
.imagespace3 {
position: static;
padding: 10px 10px 2px 0px;
}
.nav {
padding: 2px;
height: 17px;
width: 112px;
border: 1px solid #000000;
}
a.nav {
background: #FFCC00;
height: 2em;
line-height: 2em;
float: left;
width: 112px;
display: block;
border: 1px solid #000000;
color: #000000;
text-decoration: none;
text-align: center;
font-size: 11px;
font-weight: bold;
margin: 0 0px 0 54px;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
a.nav:visited {
background: #FFFFCC;
}
a.nav:hover {
background: #6699FF;
}
a.nav:active {
background: #FFFFCC;
}
a.main {
color: #000000;
text-decoration: none;
}/*normal links in the text*/
a.main:visited {
color: #000000;
text-decoration: none;
}
a.main:hover {
color: #000000;
text-decoration: underline;
}
a.main:active {
color: #000000;
text-decoration: underline;
}
.contentleft {
display: block;
margin: 20px;
float: left;
width: 200px;
}
.contentright {
margin: 20px;
float: right;
display: block;
width: 150px;
padding: 0px;
}
.textblock {
text-align: left;
vertical-align: top;
display: block;
width: 400px;
}the page
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>CSS Layout trial 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel='stylesheet' type='text/css' href=firefox.css>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div class="box">
<img src="images/Motel.gif" width="155" height="91" class="imagespace">
<img src="images/Motel_Title.gif" width="375" height="91" class="imagespace2">
<img src="images/qualmark_3star.gif" width="81" height="91" class="imagespace2">
<img src="images/MANZ.gif" width="115" height="91" class="imagespace3">
<br>
<div class="menu-box">
<a class="nav" href="#">Home</a>
<a class="nav" href="#">Book Online</a>
<a class="nav" href="#">Location</a>
<a class="nav" href="#">Local Attractions</a>
</div>
<br>
<br>
<img src="images/interior3.jpg" alt="Interior Motel Unit" width="200" height="133" class="contentleft">
<h2 class="textblock">The Motel welcomes all guests with friendly hospitality</h2><br>
<img src="images/interior2.jpg" width="150" height="200" class="contentright">
<ul class="textblock">
<li>Self catering serviced apartments</li>
<li> 1 and 2 bedroom units with separate lounges</li>
<li> Large warm comfortable units</li>
<li>Fully equipped kitchens including microwave, oven and toaster.</li>
<li> Sky TV</li>
<li> Queen sized beds in all units with electric blankets</li>
<li> Convenient off street parking</li>
<li> Guest laundry</li>
<li> Children's
play area<br />
</li>
</ul><br>
<img src="images/interior1.jpg" width="200" height="150" class="contentleft">
<ul class="textblock">
<li> AA Tourism Host Accommodation.</li>
<li>Highchair and cot available</li>
<li>All ground floor </li>
<li>Non smoking</li>
</ul>
<br><br>
</div>
<a href="#">link</a>
</body>
</html>I'm building two seperate css sheets, one for ie and one for everything else, and I have a php script to automatically choose them, so help making it work for both would be great
----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..
Please let us know what it's supposed to look like.