...

View Full Version : What's wrong with this DIV coding?



MetiDesigns
05-18-2008, 12:36 PM
Hello,
I'm a beginner at DIV coding, and I own a designing company.
I'm learning coding at moment, so i don't know everything about it.

Now,
I'm coding my layout, and i've got a problem.
I've added two navigations, (Latest Layouts and Latest Graphics), and i've changed the nav images to:
LATEST LAYOUT NAVIGATION:
TOP= layout_top.gif
MID= layout_middle.gif
BOT= layout_bottom.gif

LATEST GRAPHICS NAVIGATION:
TOP= graphic_top.gif
MID= graphic_middle.gif
BOT= layout_bottom.gif

If you want the whole code of the layout, here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="sv">
<title>MetiDesigns.com Coming Soon!</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type="text/css">
<!--
body {
text-align: center;
background-color: #ffffff;
}
# layouts {
width: 390px;
}
#top {
background: url(layout_top.gif);
height: 80px;
}
#mid {
background: url(layout_middle.gif);
}
#bot {
background: url(layout_bottom.gif);
height: 10px;
}
body {
text-align: center;
background-color: #ffffff;
}

#graphics {
width: 390px;
}

#top {
background: url(graphic_top.gif);
height: 80px;
}
#mid {
background: url(graphic_middle.gif);
}
#bot {
background: url(graphic_bottom.gif);
height: 10px;
}
-->
</style>
</head>
<body>
<div id="layouts" style="width: 191px; height: 73px;">
<div id="top" style="width: 191px; height: 31px"></div>
<div id="mid">Expandable :)<br /></div>
<div id="bot" style="width: 191px; height: 12px"></div>

<div id="graphics" style="width: 191px; height: 36px;">
<div id="top" style="width: 191px; height: 31px"></div>
<div id="mid">Expandable :)<br /></div>
<div id="bot" style="width: 191px; height: 12px"></div>
</body>
</html>

What's wrong?
Why won't it be
Latest Layout
Latest Graphic

??

Hope you understand what i mean.


meti

jhaycutexp
05-18-2008, 12:55 PM
so whats you're problem? you don't see the the image that you're supposed to see??

have you put the images in your images directory??

VIPStephan
05-18-2008, 01:37 PM
What's wrong?

[…]

Hope you understand what i mean.


Uhm, not really… But I can tell you some errors: An ID has to be unique in a document. You can’t use the same ID more than one time on a page. For that purpose classes were made.
Oh and while I was writing this post I noticed that you forgot to close some divs.

Secondly: If you write #top {…} it will affect all elements with the ID “top”. Additionally, latter rules will override former rules.
So, effectively in your CSS:


# layouts {
width: 390px;
}
#top {
background: url(layout_top.gif);
height: 80px;
}

[…]

#graphics {
width: 390px;
}

#top {
background: url(graphic_top.gif);
height: 80px;
}

…although it’s wrong to use the same ID multiple times with CSS there’ll be no big issue. But the way you’ve written it the second #top rule will override the first one, hence both elements with the ID “top” will have the same graphic that was specified in the latest rule.

Correctly it should look like this:


<div id="layouts">
<div class="top"></div>
<div class="mid"></div>
<div class="bot"></div>
</div>

<div id="graphics">
<div class="top"></div>
<div class="mid"></div>
<div class="bot"></div>
</div>

and


# layouts {
width: 390px;
}
#layouts .top {
background: url(layout_top.gif);
height: 80px;
}
#layouts .mid {
background: url(layout_middle.gif);
}
#layouts .bot {
background: url(layout_bottom.gif);
height: 10px;
}

#graphics {
width: 390px;
}

#graphics .top {
background: url(graphic_top.gif);
height: 80px;
}
#graphics .mid {
background: url(graphic_middle.gif);
}
#graphics .bot {
background: url(graphic_bottom.gif);
height: 10px;
}


See the difference?

effpeetee
05-18-2008, 01:40 PM
You have this in twice.



#top {
background: url(graphic_top.gif);
height: 80px;
}
#mid {
background: url(graphic_middle.gif);
}
#bot {
background: url(graphic_bottom.gif);
height: 10px;
}

Divs can only be used once. If you need to use it more, then you should use classes. Even so, only the last version will be used if the div has the same name. That's why they call it "Cascading Style Sheets." There are some comment tags inside the style section that need removing.

Validating the code shows a number of errors.

http://validator.w3.org/#validate_by_input


Frank.

MetiDesigns
05-18-2008, 03:29 PM
thanks. this helped me alot :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum