18 replies [Last post]
bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

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

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 17 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

My Layout

Try setting a height to your #footer. Smile

This is my big chance . . . yep, I blew it . . .

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

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

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

larmyia
Offline
Elder
London
Last seen: 13 years 36 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

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 ?

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

larmyia
Offline
Elder
London
Last seen: 13 years 36 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

My Layout

you've taken off your link? can I have it again so I can see what you're doing?

larmyia

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

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

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

drhowarddrfine
Offline
Leader
Last seen: 12 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

My Layout

One problem is you have the '/' going the wrong way in your css link href.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

back slash

I changed this and I lost all styling so I assume it was right as the style sheet worked/works again.

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 17 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

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."

This is my big chance . . . yep, I blew it . . .

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

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

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

larmyia
Offline
Elder
London
Last seen: 13 years 36 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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.

larmyia
Offline
Elder
London
Last seen: 13 years 36 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 17 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

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.

This is my big chance . . . yep, I blew it . . .

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

?

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

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

larmyia
Offline
Elder
London
Last seen: 13 years 36 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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 Smile

larmyia

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

?

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 ??

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

larmyia
Offline
Elder
London
Last seen: 13 years 36 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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 Wink

larmyia

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

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

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."