...

View Full Version : Help with table-less css



Shadows55
10-05-2006, 12:12 AM
Hi people, I'm new here and need some assistance/advice from css fluent designers.

I'm trying to learn designin sites without the use of tables but having a headache at the mo, heres my problem.

http://www.wjdev.net/left_blocks.jpg

As you can see, I want the blocks seated underneath each other in their respective column/div as a table would be if I was to use a <br /> to seprate them.



<div id="leftcol">

<div id="sidecontainer">
<span class="title">Site Nav</span>
<div id="line"></div>
-- <a href="/home" title="Home">Home</a><br />
-- <a href="/faq" title="FAQ">FAQ</a><br />
-- <a href="/about" title="Contact">About</a><br />
-- <a href="/contact" title="Contact">Contact</a><br />
-- <a href="/linkus" title="Link to us">Link Us</a><br />
-- <a href="/topsites" title="Top Sites">Top Sites</a><br />
-- <a href="/stats" title="Stats">Statistics</a><br />
-- <a href="/webmasters" title="Web Masters">Web Masters</a><br />
-- <a href="/users_list" title="Members List">Members List</a><br />
-- <a href="/b_affiliate" title="Voting Booth">Become Affiliate</a><br />
</div>
</div>

<div id="sidecontainer">
<span class="title">Second Left Block</span>
<div id="line"></div>
Under first block
</div>
</div>

</div>



Here is the code I'm using for the sidecontainer



#sidecontainer {
padding: 3px;
border-bottom: 1px solid #C0C0C0;
border-top: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
background-color: #F2F2F2;
}


Could someone please give me any advice.

i am the nut
10-05-2006, 12:45 AM
What exactly are you trying to do?

Also...

#sidecontainer {
padding: 3px;
border-bottom: 1px solid #C0C0C0;
border-top: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
background-color: #F2F2F2;
}

can be changed to...

#sidecontainer {
padding: 3px;
border: 1px solid #C0C0C0;
background-color: #F2F2F2;
}

_Aerospace_Eng_
10-05-2006, 12:48 AM
Can you post the rest of your html and CSS? As it is now you are using the same ID twice. IDs can only be used one time. It seems like you might also be overcomplicating things as well.

Shadows55
10-05-2006, 01:00 AM
thanks to both of you for the feedback.

page from under the banner area:



<div id="leftcol">

<div id="sidecontainer">
<span class="title">Site Nav</span>
<div id="line"></div>
-- <a href="/home" title="Home">Home</a><br />
-- <a href="/faq" title="FAQ">FAQ</a><br />
-- <a href="/about" title="Contact">About</a><br />
-- <a href="/contact" title="Contact">Contact</a><br />
-- <a href="/linkus" title="Link to us">Link Us</a><br />
-- <a href="/topsites" title="Top Sites">Top Sites</a><br />
-- <a href="/stats" title="Stats">Statistics</a><br />
-- <a href="/webmasters" title="Web Masters">Web Masters</a><br />
-- <a href="/users_list" title="Members List">Members List</a><br />
-- <a href="/b_affiliate" title="Voting Booth">Become Affiliate</a><br />
</div>
</div>

<div id="sidecontainer">
<span class="title">Second Left Block</span>
<div id="line"></div>
Under first block
</div>
</div>

</div>

<div id="midcol">
Mid
</div>

<div id="rightcol">
Right
</div>


CSS file



#leftcol, #midcol, #rightcol {
position: relative;
float: left;
border: 0px;
height: auto;
}
#leftcol {
margin: 10px 0 0 10px;
width: 18%;
}
#midcol {
margin: 10px auto 0 5px;
width: 58%;
}
#rightcol {
margin: 10px 5px 0 5px;
width: 18%;
}
#sidecontainer {
padding: 3px;
border-bottom: 1px solid #C0C0C0;
border-top: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
background-color: #F2F2F2;
}
#line {
width: 100%;
height: 1px;
padding: 0;
font-size: 0;
margin: 0;
overflow: hidden;
background-color: #C0C0C0;
}

_Aerospace_Eng_
10-05-2006, 01:32 AM
<!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">
html,body {
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#000;
background:#FFF;
margin:0;
padding:0;
}

a,a:link,a:visited {
color:#000;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

#leftcol,#midcol,#rightcol {
position:relative;
float:left;
border:0;
display:inline;
}

#leftcol {
width:18%;
margin:10px 0 0 10px;
}

#midcol {
width:58%;
margin:10px auto 0 5px;
}

#rightcol {
width:18%;
margin:10px 5px 0;
}

.sidecontainer {
border:1px solid silver;
background-color:#F2F2F2;
padding:3px;
margin-bottom:10px;
}

.line {
height:1px;
font-size:0;
overflow:hidden;
background-color:silver;
margin:0;
padding:0;
}

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

.title {
font-size:125%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="container">
<div id="leftcol">
<div class="sidecontainer">
<h1 class="title">Site Nav</h1>
<div class="line"></div>
<ul id="nav">
<li>-- <a href="/home" title="Home">Home</a></li>
<li>-- <a href="/faq" title="FAQ">FAQ</a></li>
<li>-- <a href="/about" title="Contact">About</a></li>
<li>-- <a href="/contact" title="Contact">Contact</a></li>
<li>-- <a href="/linkus" title="Link to us">Link Us</a></li>
<li>-- <a href="/topsites" title="Top Sites">Top Sites</a></li>
<li>-- <a href="/stats" title="Stats">Statistics</a></li>
<li>-- <a href="/webmasters" title="Web Masters">Web Masters</a></li>
<li>-- <a href="/users_list" title="Members List">Members List</a></li>
<li>-- <a href="/b_affiliate" title="Voting Booth">Become Affiliate</a></li>
</ul>
</div>
<div class="sidecontainer">
<h1 class="title">Second Left Block</h1>
<div class="line"></div>
Under first block
</div>
</div>
<div id="midcol"> Mid </div>
<div id="rightcol"> Right </div>
</div>
</body>
</html>

Shadows55
10-05-2006, 03:03 AM
dude, you are a legend, thanks alot, very much appreiated.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum