Why nest div tags

If the outer div has a style of position: relative; and the inner div has a style of position: absolute; then the inner div will be positioned relatively to the outer div rather than the whole page.

This can be very useful when trying to center items on a page amongst other things.

I think it has more to do with semantics. if you make up your page semantically (aside from being easier to do it that way), if people don't have support for your css, or they are using screen readers, or text only browsers, your page will be logical and understandable.

and then to make it pretty, you can move the divs around.

larmyia

I see. Thank you.

A word of caution Smudgie; from looking at your other posts CSS and your mention of DW I would surmise that you- at this moment- are seduced by DW's idea of 'Layers' or as they are more correctly referred to position absolute elements. You have an entire layout using position absolute and I can see how that would lead you to think that nesting was pointless when those absolute divs are able to be positioned anywhere on the page.

Take care, in general attempting a complete layout using position absolute is not a good idea and seldom will you see layouts constructed this way. Nesting elements is a basic fundamental step in constructing stable layouts that flow and where the elements have a defined relationship to each other. Position absolute breaks this relationship as the element is removed from the flow and does not interact with other elements.

For a better understanding it's worth reading in detail about all the positioning properties and how the flow of a page works.

Hugo.

Oh dear, I thought I was getting the hang of this. Could this be the reason for my latest problem?!!

Some kind sole on the forum advised me to make my links as follows so that I should add different attributes to each:

a.newslettertext{
position:absolute;
left:16px;
top:52px;
width:150px;
height:25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
a.newslettertext:hover {
color: #000066;
}

I didn't create my side menu this way, so when I go back and try and do this, (I have about 8 links) all my text becomes jumbled. It seems to ignore the the <br> tags when it is a class. Why can't I have more than one link in a div using this method.

Any advice?

Thanks

can we have a link to your site??

Attached code.

Ignore the fact that the body area is in a table. The problem is getting the links under the text 'Take a look at just some' to show ,and still have set hover links on the side menu.

thanks

oh no! If I was a doctor I'd have to diagnose you with an EXTREME case of divititis! there are far too many here.

<div id="navigation">
<div id="buttons1"><a href="http://www.powerplastics.co.uk" accesskey="1"><img src="images/home.gif" alt="Home (Accesskey: 1)" width="50" height="17" border="0"></a></div>
<div id="buttons2"><a href="http://www.powerplastics.co.uk/pages/personnel.html" target="_blank" accesskey="2"><img src="images/personnel.gif" alt="Personnel (Accesskey: 2)" name="Image1" width="66" height="17" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','images/personnelroll.gif',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="buttons3"><a href="http://www.powerplastics.co.uk/pages/location.html" target="_blank" accesskey="3"><img src="images/location.gif" alt="Location (Accesskey: 3)" name="Image6" width="56" height="17" border="0" id="Image6" onMouseOver="MM_swapImage('Image6','','images/locationroll.gif',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="buttons4"><a href="http://www.powerplastics.co.uk/trademanual/ppmanual2004.html" target="_blank" accesskey="4"><img src="images/poolcat.gif" alt="Pool Catalogue (Accesskey: 4)" name="Image2" width="97" height="17" border="0" id="Image2" onMouseOver="MM_swapImage('Image2','','images/poolcatroll.gif',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="buttons5"><a href="http://www.powerplastics.co.uk/news/news.html" target="_blank" accesskey="5"><img src="images/hotnews.gif" alt="Hot News (Accesskey: 5)" name="Image3" width="61" height="17" border="0" id="Image3" onMouseOver="MM_swapImage('Image3','','images/hotnewsroll.gif',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="buttons6"><a href="http://www.covers4pools.co.uk" target="_blank" accesskey="6"><img src="images/covers.gif" alt="Covers 4 Pools (Accesskey: 6)" name="Image4" width="143" height="17" border="0" id="Image4" onMouseOver="MM_swapImage('Image4','','images/coversroll.gif',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="buttons7"><a href="http://www.powerplastics.co.uk/sitemap/sitemap.html" target="_blank" accesskey="7"><img src="images/sitemap1.gif" alt="Site Map (Accesskey: 6)" name="Image5" width="59" height="17" border="0" id="Image5" onMouseOver="MM_swapImage('Image5','','images/sitemap2.gif',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="buttons9"><a href="http://www.powerplastics.co.uk/pages/contact_us.html" target="_blank" accesskey="8"><img src="images/mail1.gif" alt="Contact (Accesskey: 6)" name="Image7" width="56" height="17" border="0" id="Image7" onMouseOver="MM_swapImage('Image7','','images/mail2.gif',1)" onMouseOut="MM_swapImgRestore()"></a></div>
</div>

everything shouldn't be given a div (you've done it with your imgs as well I notice). use it to section areas. give all the nav a div. the main content a div...something like:

<div id="wrap">

  <div id="header">
  </div>
 
  <div id="menu">
  </div>

  <div id="content">
  </div>

  <div id="footer">
  </div>

</div>

for a menu, I'd recomend using <ul>. check out http://css.maxdesign.com.au/listamatic/index.htm

and validate. validate. validate.

I know you probably just want a quick fix but frankly you need to sort out a lot of other problems, and often these will sort out the things that are really bothering you.

sorry if it's not what you want to hear! if you still don't get divs lmk and I'll try to go into more detail.

larmyia

S**t!

I'm going have to revert back to tables for now as I said I'd have this finished today. BUT will have a look at this again. I must get this cracked. You wouldn't believe that've I've been on a basic course regarding creating pages using CSS would you!!!!! I think the trainer needs to revise their course.

Can someone post me both the html and css of a simple layout so I can see the structure and how I should be working?

Thanks

there's a lot of good stuff in a list apart and there's a lot in our very own How To Section, especially the articles about validation and doctypes.

moving away from tables can seem daunting, but once you get the hang on it you'll never ever misuse a table again. one thing I will say is that it does require a change in thinking and I think that may be where your excessive use of <div>s is coming into play.

I'm sure someone else can suggest a site with very simple code. what I find helps with new concepts is to just look at sites that you like and pick them apart. check they validate and play around with it.

do you have the firefox web developers toolbar? that's really helpful with learning and problem solving.

oh, and you may or may not know...develop for firefox, validate, then if there are probs in IE it's probably because of IE and not your code.

good luck. and sorry I couldn't help more with this project

larmyia

Thanks for your guidence.

smudgie, I don't know if this'll help but I thought of an analogy for divs. think of a website as a house. the house itself is the main wrap <div>, and the rooms are all the major section <div>s (like menu, header, footer, content). now, you wouldn't put a tv, fridge, or table in a room by itself would you? similarly you wouldn't put a link or an image in a <div> by itself.

has that clarified it any?

larmyia,

Am I right to assume my layout should look like the image I've attached, and from there I have to figure out how I place my navigation and images in the right place without using div tags?

Ta

Did you mean with or without? Your diagram looks about right, but not sure how you'd go about achieving that layout without using div tags.

Tyssen, I think he means he'll use the div tags where he's stated, but it won't be like his old page with literally everything in a div tag.

smudgie, you've got the right idea. depending on how things go you might need to wrap the whole thing in a div (usually called wrap). You dont' need to put your navigation in a div, but you can...just not every link. but then if you use a <ul>, you can give that an id, and use that to add style to the nav from your css. same with your img. add an id or class to it, and use THAT to style it.

work up some code and let us have a look at it. start with as little divs as you can and add them in when you think it's really necessary (tho tbh there really shouldn't be that much call for man more of them).

looking forward to seeing your code

larmyia

Thanks for your support. I'll be working on this a bit at a time over the next week and weekend, I'll post the code as I go. I had to tell the client to carry on using the table version for now, not good practice but it buys me some time.

Thanks.