...

View Full Version : Container DIV help



Buckmeister
05-07-2006, 10:49 PM
Ok i have lots of DIV's inside DIV's and i finally ran into a problem when trying to float some things. The only DIV's i can't get to wrap around my content are the ones im using for a border effect, anyone know what im doing wrong? Any help appreciated. Thanks.

Link:
http://www.prime-creations.com/test/testfont.html

Code:

<!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-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #212121;
}

p.text {
font-family:verdana;
font-size: 1em;
color: #000;
letter-spacing: 1px;
text-align:left;
margin:0;
padding:0;
}

p.text a {
font-size: 1.8em;
font-family:georgia;
color:#991518;
}

hr#articlehr {
color: #991518;
height: 1px;
border:0;
background-color: #991518;
width: 100%;
padding:0;
margin:0;
}

hr#menu {
color: #991518;
height: 1px;
border:0;
background-color: #991518;
width: 100%;
padding:0;
margin:0 10px 0 0;
}

div#article {
width: 400px;
padding:1em 0 1em 1em;
float:left;
position:relative;
}

p.maintext {
font-family:verdana;
font-size: 0.7em;
color: #444;
letter-spacing: 1px;
text-align:left;
margin:0;
padding:1em 0 1em 0;
}

div#white {
background-color:#FFF;
padding:0;
margin:0;
position:relative;
}

div.border1 {
border: 5px solid #909090;
margin:0;
padding:0;
position:relative;
}

div.border2 {
border: 5px solid #595959;
margin:0;
padding:0;
margin-left: 5%;
margin-right: 5%;
position:relative;
}

div.border3 {
border: 5px solid #212121;
margin:0;
padding:0;
position:relative;
}

div#logo {
background:url(logobg.jpg) repeat-x #000000;
display:block;
height: 88px;
margin: 0;
padding:0;
}

#nav {
text-decoration: none;
font-family: Verdana;
font-size: 16px;
color: #FFF;
margin:0px;
padding: 0px;
background-image:url(navbg.jpg);
background-repeat:repeat-x;
padding: 10px 0px 10px 0px;
}

#nav ul {
margin:0;
list-style:none;
}

#nav li {
display:inline;
margin:0;
text-decoration: none;
font-family: Verdana;
font-size: 16px;
color: #FFF;
padding: 0;
}

li#fill {
background-image:url(navbg.jpg);
background-repeat:repeat-x;
padding: 10px 0px 10px 0px;
}

li#gap {
background-image:url(navspacer.jpg);
background-repeat:repeat-y;
padding: 10px 0px 10px 0px;
}

#nav a {
background-image: url(button.jpg);
background-repeat:repeat-x;
background-position: 0 0;
padding: 10px 12px 10px 12px;
margin: 0px;
text-decoration: none;
font-family: Verdana;
font-size: 16px;
color: #fff;
letter-spacing:2px;
}

#nav a:hover {
background-position: 0 -40px;
font-variant:small-caps;
color:#FFE8E9;
}

#nav a:active {
background-position: 0 -80px;
}

#menutext {
margin: 5px 0 0 0;
width: 100px;
float: right;
position:relative;
}

#menutext ul {
margin:0;
padding:0;
list-style-type: none;
text-align: left;
}

#menutext ul li a {
background: transparent url(list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font-family:verdana;
font-size: 0.8em;
text-decoration: none;
color: #999;
}

#menutext ul li a:hover {
background: transparent url(list-on.gif) left center no-repeat;
color: black;
}

#menutext ul li a#current {
background: transparent url(list-active.gif) left center no-repeat;
color: #666;
}

</style>

</head>

<body>

<div class="border2">

<div class="border3">

<div class="border1">

<div class="border3">

<div id="white">

<div id="logo">

</div>

<div id="nav" align="center">

<ul>
<li id="gap">&nbsp;</li><li><a href="testfont.html">Home</a></li><li id="gap">&nbsp;</li><li><a href="testfont.html">Portfolio</a></li><li id="gap">&nbsp;</li><li><a href="testfont.html">Services</a></li><li id="gap">&nbsp;</li><li><a href="testfont.html">Inquiries</a></li><li id="gap">&nbsp;</li><li><a href="testfont.html">About</a></li><li id="gap">&nbsp;</li>
</ul>

</div>

<div id="article">

<p class="text"><a>W</a>elcome</p>

<hr noshade="noshade" id="articlehr" />

<p class="maintext">
Hello and welcome to WebsiteGoesHere.com we strive to provide you with the best web services possible. From entire site creation to banner design we cover all of your needs and with each job priced individually we offer the lowest prices around.
</p>

<p class="maintext">
Hello and welcome to WebsiteGoesHere.com we strive to provide you with the best web services possible. From entire site creation to banner design we cover all of your needs and with each job priced individually we offer the lowest prices around.
</p>

<p class="maintext">
Hello and welcome to WebsiteGoesHere.com we strive to provide you with the best web services possible. From entire site creation to banner design we cover all of your needs and with each job priced individually we offer the lowest prices around.
</p>

<hr noshade="noshade" id="articlehr" />

</div>

<div id="menutext">

<hr noshade="noshade" id="menu" />

<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>

<hr noshade="noshade" id="menu" />

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

drhowarddrfine
05-07-2006, 11:45 PM
anyone know what im doing wrong?
You answered your own question.

i have lots of DIV's inside DIV's
You shouldn't create divs and then fill them in. You create your content and then decide what needs divs around them. This could all be done on paper before you put any code down. It's hard to follow what goes with what now.

Buckmeister
05-08-2006, 04:00 PM
Yes but i use those div's for my border effect, i Don't know any better ways of getting that effect without using tables and i wan't to stay away from using graphics.

drhowarddrfine
05-08-2006, 07:24 PM
Google for css borders and you'll get lots of examples without using divs. Haven't tried them myself. Here's a nice one. (http://www.tanfa.co.uk/css/borders/)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum