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"> </li><li><a href="testfont.html">Home</a></li><li id="gap"> </li><li><a href="testfont.html">Portfolio</a></li><li id="gap"> </li><li><a href="testfont.html">Services</a></li><li id="gap"> </li><li><a href="testfont.html">Inquiries</a></li><li id="gap"> </li><li><a href="testfont.html">About</a></li><li id="gap"> </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>
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"> </li><li><a href="testfont.html">Home</a></li><li id="gap"> </li><li><a href="testfont.html">Portfolio</a></li><li id="gap"> </li><li><a href="testfont.html">Services</a></li><li id="gap"> </li><li><a href="testfont.html">Inquiries</a></li><li id="gap"> </li><li><a href="testfont.html">About</a></li><li id="gap"> </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>