13 replies [Last post]
Ian Hoare
Offline
newbie
France
Last seen: 15 years 42 weeks ago
France
Joined: 2005-07-22
Posts: 8
Points: 0

Sorry folks, but I can't work out what's happening here. I have a dumb problem where for once IE6 displays what I want, while FF and Opera don't. I want to set a header DIV, with two sub DIVs floated left and right, common to all pages in a site I'm improving for a friend.

From what I understand of nesting DIVs I ought to get it with the code I've written (I use Hippie 98 and that too displays what I want). However I'm not so arrogant as to assume that Opera and Firefox are both wrong!

So please, pretty please, will someone tell me what I'm doing wrong - I've chewed off the fingers of one hand, but I really NEED the others to go on working!

http://www.correzienholidays.co.uk/newindex.htm

artketchup
Offline
Regular
Last seen: 17 years 15 weeks ago
Joined: 2005-06-16
Posts: 15
Points: 0

Nesting DIVs - again

you need to add a 3rd div with clear both. so your css and html would look like this:

.clear {clear: both;}

<div id="hdr">
    <div id="lfthdr">
    <img src="images/logo.jpg" width="100" height="80" ALT="The Farmhouse">
    </div>

    <div id="righthdr">
    <font color="#0066CC" size="7" face="Geneva, Arial, Helvetica, sans-serif"> 
    La Tronche - Bousseyroux</font><BR>
    <font color="#009933" size="3" face="Verdana, Arial, Helvetica, sans-serif"><strong><br>
      Restored French Farmhouse Nr Argentat sur Dordogne, Correze</strong></font>
<div class="clear"></div>
    </div>
</div>

Also you should look at making your navigation a list, take a look at this http://css.maxdesign.com.au/listutorial/ I think it would be a big help to you.

And Please lose the green it’s scary!

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 6 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Nesting DIVs - again

Hi Ian
The code at the bottom will render the page identically in IE6 and Firefox. I have not updated my Opera for some considerable time but there is only a slight difference between the top of the pic and top of the text in the "This house has..." section.

I have only done this to give you a fighting chance. It is not perfect by any means but was the best I could considering where I was starting from. I have to say you have done an awful lot wrong. The page doesn't validate:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.correzienholidays.co.uk%2Fnewindex.htm
There are many errors suggesting your code is er... ancient. Was that produced by Hippie98 - seven years old. Time to look for another way to code, I think. You have over-engineered the page in my view.

I won't go on, but, if this is not just a one-off job as a favour for a mate, you would be well advised to visit the How To section of this forum,
http://www.csscreator.com/css-forum/forum15.html
read *all* the articles and try to apply what you have learnt to the page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML>
<HEAD>
<title>Restored French Farmhouse Nr Argentat sur Dordogne, Correze</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<STYLE type="text/css" media="all">

body { background: #00ff80;
color: #5d665b; 
font-family: Verdana, Geneva, Arial, sans-serif; 
line-height: 1.25em;
}

#hdr {
/*position: relative; */
border: solid;
padding: 1em;
width: 96%; /* makes allowance for l/r padding */
margin-bottom: 2em;
}

#lfthdr { 
/*position: relative; */
float: left;
}

#righthdr { 
/*position: relative; */
float: right;
padding-top: 15px;
}
.clear /*not the best way to clear - see article on forum about clearing floated containers */
{
	clear: both;
}
#navcol {
/*position: relative;*/ /* not necessary */
float: left;
width: 20%;
padding-right:5px;
padding-left:5px;
}
/*         changes     */
.maincol {float: right;
width: 76%;
padding-right: 5px;
}
.maincol2 {float: right;
width: 76%;
padding-right: 5px;
}
.division {
float: left;
width: 48%;
padding-left: 0px;
}
/*    new                 */
.imgleft{
	float: left;
	padding-right: 2em;
}
.imgright{
	float: right;
	padding-left: 2em;
}
p.right{
	text-align: right;
	padding-right: 5px;
	padding-bottom: 20px;
}
/*   end new */
/*.piccol {
position: relative;
float: left; 
width: 25%;
padding-left: 20px;
text-align: center;
}*/
</STYLE>
</HEAD>

<BODY>
<div id="hdr">
    <div id="lfthdr">
    <img src="http://www.correzienholidays.co.uk/images/logo.jpg" width="100" height="80" ALT="The Farmhouse">
    </div>

    <div id="righthdr">
    <font color="#0066CC" size="7" face="Geneva, Arial, Helvetica, sans-serif"> 
    La Tronche - Bousseyroux</font><BR>
    <font color="#009933" size="3" face="Verdana, Arial, Helvetica, sans-serif"><strong><br>
      Restored French Farmhouse Nr Argentat sur Dordogne, Correze</strong></font>
    </div>
	 <div class="clear"></div> <!-- ************************* -->
</div>

<!-- <HR WIDTH="100%">  may not be necessary now  and will always render differently in browsers-->

<div id="navcol">
<!--<a href="index.htm">Home</a><BR>-->
<a href="accomodation.htm">Accommodation</a><BR>
<a href="the_area.htm">The Area</a><BR>
<a href="availability.htm">Availability</a><BR>
<a href="prices.htm">Prices</a><BR>
<a href="to_book.htm">To Book</a><BR>
<a href="contact_us.htm">Contact Us</a>
<!-- no need for all those BRs with float:right on maincol -->
</div>

<div class="maincol">
<img class="imgright" src="http://www.correzienholidays.co.uk/images/map.gif" width="110" height="112" ALT="France" />
<p>Nestling in a valley 5kms from the village of Forg&egrave;s and 11kms from the town of Argentat,
this 19th Century farmhouse is situated alongside its own barn, outbuildings, a beautiful garden 
of approximately 1 acre and 12 acres of pastureland. It has been designed to accommodate two families, giving a high standard of comfort, space and above all, privacy.</p>
<p class="right">For a detailed map click <a href="javascript:;" onClick="MM_openBrWindow('images/detailed_map.gif','popup','resizable=yes,width=270,height=200')">HERE</a>
</p>
<img class="imgleft" src="http://www.correzienholidays.co.uk/images/house.jpg" width="215" height="142" ALT="The pool and buildings" />
<p>The house has 4 bedrooms (sleeps 9), 2 bathrooms, large kitchen/diner and living room all with exposed beams. It is situated in extensive grounds with a beautiful garden in a secluded and tranquil location on the edge of a small hamlet. This is a really excellent area for walking, cycling, or just getting away from it all! Exclusive use of a heated floodlit swimming pool, available from May to September.</p>
</div>
<!---  this is not a good way to make space - consider using css-positioning instead -->
<BR>
&nbsp;<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>

<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>


<!-- START OF ADDME LINK -->
<a href="http://www.addme.com"><img src="http://www.correzienholidays.co.uk/images/button2.gif" 
alt="Search Engine Submission and Internet Marketing" width="88" height="31" border="0"></a> 
<!-- END OF ADDME LINK -->
</body>

</HTML>

Ian Hoare
Offline
newbie
France
Last seen: 15 years 42 weeks ago
France
Joined: 2005-07-22
Posts: 8
Points: 0

Nesting DIVs - again

Thanks very much to Artketchup and Lorraine for relying so promptly.

On reading through the forum more carefully, I see I should perhaps have sent this request to "beginners". All the more credit to you both for having answered so patiently.

To Artketchup first of all. Green is gone! I was doubtful about it Wink

As for making the navigation links a list, I did do it that way, but the indenting made it too wide which screwed up the display on an availability page. (more later).

To Lorraine.

I was appalled when I tried the validation, as I'd had no errors - under HTML loose. Can I just ask you to clarify what you mean by "over engineered"?. Thanks also for the suggestions as to where to get tutorial help.

======
To give a little background, I run a B&B and this is the busiest time of the year for me. So when a friend came in desperation I said I'd do what I could to help. His daughter had knocked up the site using Dream weaver but then well meaning help had locked her out. Sigh. Anyway, I've VERY little time, but wanted at least to do three things for them. 1 Remove the appalling (>40k) bloat that dreamweaver had created by using CSS, 2 do the essential upgrades and 3 make the site easy to maintain.

I was NOT trying to do anything clever at this stage, simply make the simplest & fastest fix. The border round the header DIV and the HR were both put in to try to point up what was going wrong with the way in which the hdr DIV and the navcol div were inter-reacting.

whew. In haste - got people arrivng any minute.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 6 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Nesting DIVs - again

Ian Hoare wrote:
Can I just ask you to clarify what you mean by "over engineered"?.

Of course - once you've got your visitors all tucked up for the night and have the opportunity to look at my example, you will see that all the content has been done in maincol. The over-engineering is in using too many divs to achieve the same effect. Ironically, nay even sarcastically, known as "divitis".

Then, after breakfast, when you have shovelled your visitors off for the day Laughing out loud , check out this link for how to style navigation lists:
http://css-discuss.incutio.com *
There's a lot of good stuff here. So before you get side-tracked, move down the page to "Styling Lists".
Have fun
Lorraine
* edit - You may well find those mentioned by artketchup below are in this section.

artketchup
Offline
Regular
Last seen: 17 years 15 weeks ago
Joined: 2005-06-16
Posts: 15
Points: 0

Nesting DIVs - again

go read http://css.maxdesign.com.au/listutorial/ it has all the info you will need to get rid of the indents on your list http://css.maxdesign.com.au/listutorial/03.htm and will show you just about anything else you could possably want with to do with a list!

plus the other tutorrials http://css.maxdesign.com.au/ and the Listamatic's have alot of stuf in them if you are just beginning or if you have been around for abit

artketchup
Offline
Regular
Last seen: 17 years 15 weeks ago
Joined: 2005-06-16
Posts: 15
Points: 0

Nesting DIVs - again

i haven't seen that site before Lorraine, will have to have a good look over that one. Laughing out loud

Ian Hoare
Offline
newbie
France
Last seen: 15 years 42 weeks ago
France
Joined: 2005-07-22
Posts: 8
Points: 0

Nesting DIVs - again

Well there we are. Thanks again Artketchup and Lorraine. Guests breakfasts are long finished, I'm back from the market with ducky bits and local cheeses (not that you wanted to know that) and have finished fiddling with

http://www.correzienholidays.co.uk/newindex.htm

It now validates correctly both as HTML 4 loose and CSS. I think that my before and after might qualify as one of the more improved codes we've seen here. Lorraine will be pleased to see that I incorporated a more recommended method of clearing beneath the header and that I followed her suggestion of using absolute positioning for the buttons. (I've added the W3C validation buttons too).

Once again, my apologies for posting the question in this forum instead of "newbies", put it down to impatience and frustration.

Thanks very much

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 6 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Nesting DIVs - again

Quote:
I followed her suggestion of using absolute positioning for the buttons.

In my own defence, m'lord gurus, I did not advocate absolute positioning.

Ian, what you have done works on the home page but could cause grief if the "footer" is absolutely positioned on other pages. I see you haven't done that on any of the others, yet. B..U..T.. before you even think of it go back to http://css-discuss.incutio.com, CSS layouts, 2-column layouts and study those that have 2-cols, header and "footer" in them.

Well done, so far. At least your friend has something on the web, but I see he's almost fully booked.

Ian Hoare
Offline
newbie
France
Last seen: 15 years 42 weeks ago
France
Joined: 2005-07-22
Posts: 8
Points: 0

Nesting DIVs - again

Lorraine wrote:
Quote:
I followed her suggestion of using absolute positioning for the buttons.

In my own defence, m'lord gurus, I did not advocate absolute positioning.

Ian, what you have done works on the home page but could cause grief if the "footer" is absolutely positioned on other pages. I see you haven't done that on any of the others, yet. B..U..T.. before you even think of it go back to http://css-discuss.incutio.com, CSS layouts, 2-column layouts and study those that have 2-cols, header and "footer" in them.

Thanks very much Lorraine. However, I'm not going to put that link elsewhere. (I've also changed the code to relative positioning.)

I think I've abused your courtesy enough here, though I've got a couple of other probs that I've come up against. I'll be posting the relevant page ref and detailing the probs in "Beginners", which I should have chosen for this post in the beginning.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 6 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Nesting DIVs - again

Cheers, Ian
Don't hesitate to come back Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Nesting DIVs - again

Ian wrote:
I think I've abused your courtesy enough here, though I've got a couple of other probs that I've come up against. I'll be posting the relevant page ref and detailing the probs in "Beginners", which I should have chosen for this post in the beginning.]

Lorraine can take it Smile but as for advocating position absolute *snigger*

No problem with the choice of sub forum, can be moved easily, did notice earlier, but slipped my mind then, so I'll move it now to keep things tidy, even though a bit late in the day.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 6 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Nesting DIVs - again

I need a decent dollop of abuse every now and then.

Ian Hoare
Offline
newbie
France
Last seen: 15 years 42 weeks ago
France
Joined: 2005-07-22
Posts: 8
Points: 0

Nesting DIVs - again

Hugo wrote:
Ian wrote:
I think I've abused your courtesy enough here, though I've got a couple of other probs that I've come up against. I'll be posting the relevant page ref and detailing the probs in "Beginners", which I should have chosen for this post in the beginning.]

Lorraine can take it Smile but as for advocating position absolute *snigger*

No problem with the choice of sub forum, can be moved easily, did notice earlier, but slipped my mind then, so I'll move it now to keep things tidy, even though a bit late in the day.

Hugo.

Thanks very much Hugo.