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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Location
    New York
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unhappy Using DIVs instead of tables

    I am kind of new to CSS, I took a class, have about three books I work out of and right now Im trying to build a simple site. I am a graphic designer.

    I started with tables, which got my design pretty close to where I wanted it. BUt I felt that using divs would be cleaner and more up to date.

    It wrecked my whole layout and I am near tears and highly frustrated at being baffled by something so simple. It may be becuase I dont sleep enough.

    I have gone and reviewed css from Css Zen Garden to not much help.

    My main issue is i have a roll over navigation of four buttons which are to rest at the top center of the page. I cant get this to align like that within the div NOR a table.

    My other links seem to go right where I want them.

    I decided to put the Nav buttons in a div, and leave the rest of the links in a table which resulted in this: http://www.kurtcom.com/mers/ct_index_div.html

    The roll overs for the PICS, and MAP are not showing up...and the table is far right. The bullets are still attached to the top nav, even though i have it not to be in the css.

    How do I control the div to be center? and the Size and width of the div, as I put these elements in the css to which did nothing.

    How do i get that table to align center?

    The roll overs i think I can figure out to why they are not showing up.

    I am aware this may all seem stupendously simple, but i really need some guidance, as im going to kill someone.

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    to centre the Nav links, use margins. "0 auto" for new Browsers and text-align: center for IE6 and older.
    Also, set list-style: none to lose the markers on the li's.

    Code:
    #nav    {
        width: 568px;
        height: 29px;
        margin: 0 auto;
        text-align: center; // for older IE
        padding: 0;
    }
    ul { list-style: none; }
    start with that and re-post to continue the repairs. One thing at a time so you can learn them slowly.

  • Users who have thanked jlhaslip for this post:

    mers (02-29-2008)

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    If you want a div to be centered, set a width and set margins to auto. Example:
    CSS:
    Code:
    * {margin:0px; padding:0px;}             /*Resets margins and padding*/
    #div {margin:0 auto; width:800px;}    /*centers the div*/
    HTML:
    Code:
    <div id="div">
    This text is centered in the browser
    </div>
    And you should use an UL to arrange the navigation-points rather than divs.
    Last edited by CaptainB; 02-28-2008 at 11:18 PM.

  • Users who have thanked CaptainB for this post:

    mers (02-29-2008)

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    63
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Hehe some people beat me to more specific stuff, so all I'll say is install Firebug for Firefox - makes working with CSS tons easier!
    Web hosting by coders, for coders: php hosting - Magento eCommerce hosting - perl hosting - check us out!

  • #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
    Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" content-type="text/xhtml; charset=UTF-8">
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    html {
    font: small/1.1 "Lucida Grande", Tahoma, sans-serif;
    color: #c0c0c0;
    }
    body {
    background: #000000 url(http://www.kurtcom.com/mers/cl_site-images/index_main.jpg) no-repeat top center;
    }
    #container {
    width:667px;
    margin:auto;
    height:600px;
    position:relative;
    }
    #dj_nav {
    width:566px;
    margin:10px auto 0;
    list-style:none;
    }
    #dj_nav a {
    margin: 0;
    padding: 0;
    display: block;
    height: 28px;
    width: 566px;
    background: url(http://www.kurtcom.com/mers/cl_site-images/dj_menu.png);
    text-indent: -9999px;
    overflow: hidden;
    font-size: 1&#37;;
    float: left;
    }
    li#dor a {
    left: 0;
    width: 137px;
    background-position: 0 0;
    }
    li#ale a {
    width: 114px;
    background-position: -137px 0;
    }
    li#sof a {
    width: 219px;
    background-position: -230px 0;
    }
    li#mdl a {
    width: 92px;
    background-position: -470px 0;
    }
    li#dor a:hover {
    background-position: 0 -29px;
    }
    li#ale a:hover {
    background-position: -137px -29px;
    }
    li#sof a:hover {
    background-position: -230px -29px;
    }
    li#mdl a:hover {
    background-position: -470px -29px;
    }
    a.logo {
    padding: 0;
    background: url(http://www.kurtcom.com/mers/cl_site-images/logo_link.png) no-repeat center;
    width: 667px;
    height: 90px;
    text-indent: -9999px;
    display: block;
    clear:both;
    }
    a.logo:hover {
    background: url(http://www.kurtcom.com/mers/cl_site-images/logo_link-hover.png);
    width: 667px;
    height: 90px;
    }
    a.add {
    margin: 95px 0 0 25px;
    background: url(http://www.kurtcom.com/mers/cl_site-images/location_link.png);
    width: 254px;
    height: 54px;
    text-indent: -9999px;
    float: left;
    }
    a.add:hover {
    background: url(http://www.kurtcom.com/mers/cl_site-images/location_link-hover.png);
    width: 254px;
    height: 54px;
    }
    a.pol {
    margin: 95px 0 0 25px;
    background:url(http://www.kurtcom.com/mers/cl_site-images/photo_link.png);
    width:56px;
    height:84px;
    float:right;
    text-indent:-9999px;
    }
    a.pol:hover {
    background:url(http://www.kurtcom.com/mers/cl_site-images/photo_hover.png);
    }
    #main {
    width:620px;
    margin:auto;
    }
    #footer {
    text-align:center;
    position:absolute;
    bottom:30px;
    left:0;
    width:100%;
    }
    </style>
    <title>Club Transistor</title>
    </head>
    <body>
    <div id="container">
    	<div id="navigation">
    		<ul id="dj_nav">
    			<li id="dor"><a href="http://www.kurtcom.com/dorian.html">Dorian</a></li>
    			<li id="ale"><a href="http://www.kurtcom.com/alex.html">Alex</a></li>
    			<li id="sof"><a href="http://www.kurtcom.com/softouch.html">Soft Touch</a></li>
    			<li id="mdl"><a href="http://www.kurtcom.com/mdlf.html">MDLF</a></li>
    		</ul>
    	</div>
    	<a class="logo" href="http://www.kurtcom.com/nav_home.html">Nav Home</a>
    	<div id="main"> <a class="add" href="http://www.kurtcom.com/map.html">Map</a> <a class="pol" href="http://www.kurtcom.com/photos.html">Pics</a> </div>
    	<div id="footer">Club Transistor &copy; 2008. All rights Reserved.<br>
    		Site Design by <a href="http://www.arturobandinilives.com">ABL!</a></div>
    </div>
    </body>
    </html>
    Its probably not completely what you want but its a start.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    mers (02-29-2008)

  • #6
    New to the CF scene
    Join Date
    Feb 2008
    Location
    New York
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Smile thank you =)

    Thank you to everyone who replied. =) Im going to work on it right now using what people replied with.

    lets hope i get it right.

  • #7
    New to the CF scene
    Join Date
    Feb 2008
    Location
    New York
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Smile hurrah and ugh ;)

    Aerospace....your code worked perfectly. I am so happy but also so disgusted with myself that I didn't figure it out on my own. This is SO helpful though, thank you so much. Now I can compare and see my mistakes and this simplifies what I couldn't simplify from the books.


  •  

    Posting Permissions

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