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 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question making switch from tables to css

    Ok. So i dont want to make all my pages of my new site using my template that uses tables to format. i want to make the switch to css for page layout.

    i want it to look like: www.nylafilms.com/nylabeta3 without using table command.

    i am very novice at this so bear with me.

    the layout is relatively simple. but id like to maintain the width of the banner image, nav bar, left column and right column. left and right columns will have an unspecified length as it depends on particular contents of each particular page. and id like to maintain the layout as a whole to stay centered on browser window, no matter what user sizes it as. thats it. any help is greatly appreciated.

    my main issue with making the site as it is now, was that it would maintain proper layout in all browsers. hopefully css makes that easier.

    thanks.

    David

  • #2
    New Coder
    Join Date
    Dec 2009
    Location
    Sleaford, LINCOLNSHIRE
    Posts
    58
    Thanks
    0
    Thanked 1 Time in 1 Post
    <style type="text/css">
    <!--
    #apDiv1 {
    margin:auto
    width:200px;
    height:115px;
    z-index:1;
    left: 0px;
    top: 9px;
    color: #FFF;
    }
    #menu {
    margin:auto
    width:777px;
    height:48px;
    z-index:1;
    left: 97px;
    top: 266px;
    background-color: #000000;
    }
    body,td,th {
    color: #FFF;
    }
    body {
    background-color: #000;
    }
    #content {
    position:absolute;
    width:594px;
    height:115px;
    z-index:1;
    top: 317px;
    left: 358px;
    }
    #menunav {
    margin:auto
    width:317px;
    height:115px;
    z-index:2;
    left: 637px;
    top: 362px;
    }
    #apDiv2 {
    position:absolute;
    width:172px;
    height:115px;
    z-index:2;
    left: 479px;
    top: 1px;
    }
    -->
    </style>
    <div id="apDiv1">
    <div align="center"><img src="http://www.nylafilms.com/nylabanner02.jpg" width="777" height="250">
    <div id="menu">NAVIGATION GOES HERE</div>
    </div>
    </div>
    <div id="content">CONTENT GOES HERE
    <div id="apDiv2">
    <div align="right">NAVIGATION HERE</div>
    </div>
    </div>


    try messing around with that i made a start but thats the basics of what you will be working with, its very easy to edit in dreamweaver but just takes a bit getting used to
    i had the same problem at the start getting away from tables but the results are fantastic when you kno what your doing
    Last edited by oracleguy; 12-24-2009 at 08:00 PM.

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you. very detailed. i appreciate it.

    David

  • #4
    New Coder
    Join Date
    Dec 2009
    Location
    Sleaford, LINCOLNSHIRE
    Posts
    58
    Thanks
    0
    Thanked 1 Time in 1 Post
    no problem hope it helps you, only been using Div's and stuff like that recently but its so hard not to just hit insert>table haha

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    so i made the changes given above. the format is still very wacky. not sure if i misinterpreted some of the code, or left out stuff, etc.

    but again, the main thing i want to maintain is the centering of all the content no matter how wide the users browser window is made.

    here is my first attempt at the new css-only code:
    www.nylafilms.com/nylabetaCSS

    thanks.
    David

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Plenty of help here.

    and here.

    Frank
    Last edited by effpeetee; 12-29-2009 at 04:51 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    What you have is basically a two column layout. Refer to http://bonrouge.com/2c-hf-content1st.php and learn how this is achieved.

    You can center a block element by assigning a width and setting left and right margins to auto. So in the example I linked to there is a container element that holds all sections and this container is getting the width and margins.

    Basic structure/approach:

    Code:
    -container
    --header
    --content
    ---main content
    ---sub content (e. g. sidebar)
    --(footer)
    • container gets width (this is setting the page width)
    • main content is floated left and gets a width
    • sub content is floated right and gets a width (note that these two widths must add up to be equal or lower than the container width)
    • footer (if applicable) clears the floats (clear: both) so it stays below the two content sections.
    Last edited by VIPStephan; 12-29-2009 at 05:35 PM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Hello hwoodfilm,
    Several things you will want to change there.

    First and foremost - You will need a DocType, see the link in my sig about DocTypes.

    There is no need for absolute positioning. DW steers new coders toward using ap and those apdiv1 div names and it's too bad because there are much better ways to do it.

    The nylabanner02.jpg that we're leeching from nylafilms.com is resized in the markup to 777x250. It's actual size is 1320x325. It does not make sense to force the enduser to spend the extra bandwidth loading an image he never sees.
    When you get your own image, you should size it to fit your site.

    Here is a start that is valid CSS, valid code and works in all browsers (although to be truthful, it's only been tested in FF3.5, IE8 and IE7)
    I've commented on some of the CSS to explain what it's doing -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100% "Comic Sans MS";
    	background: #000;
    }
    * { /*CSS reset to zero out browser defaults*/
    	margin: 0; 
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	width: 777px;
    	margin: 0px auto; /*centers the site*/
    	background: #999;
    	overflow: auto; /*to clear the floats*/
    	font-size: 0.8em;
    	background: #000;
    }
    #menu {
    	height:48px;
    	background: #ccc; /*for testing only*/
    }
    #content {
    	width:545px;
    	height:300px;  /*for testing only - remove this when you put actual content in this div*/
    	float: left;
    	background: #fc6;  /*for testing only*/
    }
    #column {
    	height: 300px;  /*for testing only - remove this when you put actual content in this div*/
    	margin: 0 0 0 545px;
    	background: #f60; /*for testing only*/
    }
    </style>
    </head>
    <body>
        <div id="container">
            <img src="http://www.nylafilms.com/nylabanner02.jpg" alt="logo" width="777" height="250" />
            	<div id="menu">NAVIGATION GOES HERE</div>
            <div id="content">
            	LEFT CONTENT GOES HERE
            <!--end content--></div>
            <div id="column">
            	RIGHT COLUMN HERE
            <!--end column--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you. brilliant.

    David


  •  

    Posting Permissions

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