Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Container DIV help

    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:
    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>

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Google for css borders and you'll get lots of examples without using divs. Haven't tried them myself. Here's a nice one.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •