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

    Help with table-less css

    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.



    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.

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

    Code:
    #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.

  • #2
    Registered User
    Join Date
    Aug 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What exactly are you trying to do?

    Also...
    Code:
    #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...
    Code:
    #sidecontainer {
        padding: 3px;
        border: 1px solid #C0C0C0;
        background-color: #F2F2F2;
    }

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks to both of you for the feedback.

    page from under the banner area:

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

    Code:
    #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;
    }

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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">
    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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    dude, you are a legend, thanks alot, very much appreiated.


  •  

    Posting Permissions

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