Fri, 2005-10-07 23:34
Hi,
I am typing to create a site, I am planning on using css and xhtml. I am creating it and testing it in FireFox first then hacking it for IE.
The first issue is that the footer image is not displaying at the bottom of the page, because I can see the background image under it. What have i done wrong.??
Regards
Bach
Fri, 2005-10-07 23:39
#1
My Layout
Try setting a height to your #footer. 
Sat, 2005-10-08 11:35
#2
Sorted
Hi,
I have sorted that now thanks, the height seems to have done the trick.
I have placed some text to which I would like the align from the top of the image hows is this done in css.
Bach
Sat, 2005-10-08 12:35
#3
My Layout
you need to float the img left, add some padding, and clear your footer.
something like this should do the trick:
#content img {
float: left;
padding-right: 20px;
}
#footer {
clear: left;
height: 69px;
background: url("img/layout/img_footer.gif") no-repeat bottom;
}
oh, i'd be inclined to give the img an id, and use that in the above code.
btw, I like your green combinations.
larmyia
Sat, 2005-10-08 14:00
#4
ID
I have added an id to the img an created the following css style
.office {
float: left;
padding-right: 20px;
}
This does not work, I am guessing i have done something wrong ?
Sat, 2005-10-08 14:45
#5
My Layout
you've taken off your link? can I have it again so I can see what you're doing?
larmyia
Sat, 2005-10-08 15:01
#6
Hi
Little issue with that the code is here
Site Code:
<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-GB" />
<link rel="stylesheet" href="css\layout.css" type="text/css" />
</head>
<body>
<!--Page Layout -->
<div id="page">
<div id="header">
<!--Header Image-->
</div>
<!--Content--><div id="content">
<ul id="navlist">
<li id="home"><a href="index.html">Home</a></li>
<li id="vol"><a href="volunteer.html">Volunteer</a></li>
<li id="his"><a href="history.html">History</a></li>
</ul>
<div><img id="office" src="img/building.gif" alt="Bridgend Samaritian Office" /></div>
<p>Removing all of the styling rules from HTML might seem like a backward
step, rather than an exciting new progression of the language–you
may well be wondering why we didn’t have separate style sheets from
the start if they are such a great idea. To understand why HTML evolved
the way it did– that is, why HTML introduced all this stylistic markup
such as the font elements and bgcolor attributes if they were only going
to be removed, you need to look at how HTML developed into the language
you know and use today. As is often the case, the answer appears obvious
with hindsight–if only we could have foreseen that the problem would occur
in the first place.</p>
<p>HTML was originally designed as a markup language to describe the structure and semantics of a document.
The elements and attributes of HTML were supposed to indicate things such as the title of a document,
what part of the text was a heading, what of the text was a paragraph, what data belonged in a
table, and so on. In its earliest form, the Web was intended to transmit scientific documents so that the
research community had quick and easy access to published work. Here is an example of a document
that might have been generated for the scientific community (see the file ch01_eg01.html for the
download):</p>
<!--Content end--></div>
<div id="footer">
<!--Footer-->
</div>
<!-- Page Layout --></div>
</body>
</html>
CSS Code:
body {
background-color: #DFF0B2;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
}
#page {
background-color: white;
background: url("img/layout/img_bg.gif") repeat-y top;
border: none;
text-align: left;
margin: 10px auto;
padding: 0;
width: 760px;
}
#header {
height: 204px;
background: url("img/layout/img_header.gif") no-repeat top;
}
#footer {
clear: left;
height: 69px;
background: url("img/layout/img_footer.gif") no-repeat bottom;
}
#content {
margin: 0 35px auto;
}
#navlist {
margin: 0;
padding: 0 0 20px 10px;
}
#navlist li {
margin: 0;
padding: 0;
display: inline;
list-style: none;
}
#navlist a {
float: left;
line-height: 13px;
margin: 5px 20px 10px 10px;
text-decoration: none;
color: #9c9;
}
#navlist a:active, #navlist a:hover {
background: url("img/img_button.gif") no-repeat bottom center;
}
.office {
float: left;
padding-right: 20px;
}
Thanks
Sat, 2005-10-08 15:43
#7
My Layout
One problem is you have the '/' going the wrong way in your css link href.
Sat, 2005-10-08 16:25
#8
back slash
I changed this and I lost all styling so I assume it was right as the style sheet worked/works again.
Sat, 2005-10-08 16:53
#9
My Layout
<link rel="stylesheet" href="css\layout.css" type="text/css" />
If "layout.css" is in the root directory you only need href="layout.css" Changing the \ to a / means that "layout.css" is located in a folder called "css" in the root directory. That is why you "lost all styling."
Sat, 2005-10-08 17:06
#10
Confused.
Hi,
The site link. The style sheet is working with the link as it was.
The issue is with the navigation and img you tried to help me with eariler
bach
Sat, 2005-10-08 17:18
#11
My Layout
aha. you have given your img the id of office, but in the css you put it as a class! change the css to #office.
Sat, 2005-10-08 17:21
#12
My Layout
just had a look at the link you've resupplied. you also need to give your main content div an id so you can clear it from your floated nav bar.
larmyia
Sat, 2005-10-08 17:28
#13
My Layout
#office {
clear: left;
float: left;
padding-right: 20px;
}
ID's should look like "#office" instead of ".office" and {clear: left;} will let your image clear your navigation.
Sat, 2005-10-08 18:25
#14
?
larmyia,
Am a little confused, the image worked so thanks for all your replies guys.
The navigation the content div have a id so i can clear it from the nav bar ??
Any chance you can explain further
Bach
Sat, 2005-10-08 18:27
#15
My Layout
no probs.
your layout is something like this:
<div id="page">
<div id="header">
</div> <===header div
<div id="content">
<ul id="navlist">
</ul>
<div> <====this is where your img is located
</div>
<p></p>
<p></p>
</div> <===content div
<div id="footer">
</div> <===footer div
</div> <===page div at the very least I think you need to wrap your img and <p>s in one div (ie id="maincontent"), then clear THIS div from your floating nav. you've not named <p>s and therefore they are difficult to clear, and they are just floating out there...not currently clearing your nav bar.
hope that is clearer
larmyia
Sat, 2005-10-08 19:01
#16
?
Are you saying to create another element in the css page, and place this id in the p tags and img tags ??
not sure what you mean by clear the nav
any chance of dummy code,
#content {
text-align: left;
}
how would i clear the nav ??
Sat, 2005-10-08 20:04
#17
My Layout
bach, I think you need to read up on floats and clearing. there's loads of good stuff out there so I'll let you google it.
I think you have the wrong end of the stick with regards to the extra div...this is what it should look like...
<!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"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-GB" /> <link rel="stylesheet" href="css\layout.css" type="text/css" /> </head> <body> <!--Page Layout --> <div id="page"> <div id="header"> <!--Header Image--> </div> <!--Content--><div id="content"> <ul id="navlist"> <li id="home"><a href="index.html">Home</a></li> <li id="vol"><a href="volunteer.html">Volunteer</a></li> <li id="his"><a href="history.html">History</a></li> </ul> <div id="maincontent"> <img id="office" src="img/building.gif" alt="Bridgend Samaritian Office" /> <p>Removing all of the styling rules from HTML might seem like a backward step, rather than an exciting new progression of the language–you may well be wondering why we didn’t have separate style sheets from the start if they are such a great idea. To understand why HTML evolved the way it did– that is, why HTML introduced all this stylistic markup such as the font elements and bgcolor attributes if they were only going to be removed, you need to look at how HTML developed into the language you know and use today. As is often the case, the answer appears obvious with hindsight–if only we could have foreseen that the problem would occur in the first place.</p> <p>HTML was originally designed as a markup language to describe the structure and semantics of a document. The elements and attributes of HTML were supposed to indicate things such as the title of a document, what part of the text was a heading, what of the text was a paragraph, what data belonged in a table, and so on. In its earliest form, the Web was intended to transmit scientific documents so that the research community had quick and easy access to published work. Here is an example of a document that might have been generated for the scientific community (see the file ch01_eg01.html for the download):</p> </div> <!--Content end--></div> <div id="footer"> <!--Footer--> </div> <!-- Page Layout --></div> </body> </html>
see where I added the #maincontent div and took out the img div??
then the css will be
#maincontent {clear: left}
this will clear the nav and your img and p will then sit below it.
try it and lmk how it goes.
and don't forget to validate 
larmyia
Sun, 2005-10-09 10:54
#18
conent
larmyia,
Thanks for that, I have decided to place the navlist outside the existing content and clear this.
Thanks for your help and everyone else who posted on this matter.
Regards
Bach