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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts

    How do i go about coding this?

    ive designed a whole template for my site.
    but i dont know if i should use the div ids for it?

    is there any other way of coding it?

    whenever i do the div ids it splits everything up i want every thing to be locked.


    here is the link to it.
    this is the Tables code.
    im struggling with coding it in css.
    http://www.plattenumdesigns.com/imag...-template.html

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I don't get what you mean? You have one big table.
    Why do you need divs? What do you mean by div ids?

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by TinyScript View Post
    I don't get what you mean? You have one big table.
    Why do you need divs? What do you mean by div ids?

    what i mean is like div wraps and containers.

    i dont know if i should use those or something different

  • #4
    New Coder
    Join Date
    Feb 2006
    Location
    California, USA
    Posts
    42
    Thanks
    4
    Thanked 1 Time in 1 Post
    Well, the web is moving towards CSS/XHTML designs.. And now with HTML5 on the verge as well, its more and more uncommon to see table structured sites.

    Here is a quote from another thread.

    Quote Originally Posted by abduraooft View Post
    Know why tables for layout is stupid and get inspired by the beauty of CSS based design from CSS-Zen garden

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello platenumdesign,
    That's pretty easy to do by nesting divs. I'll give you a start here. I was going to do more but this will give you the idea and you'll learn more doing it yourself
    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: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrapper {
    	width: 1000px;
    	height: 801px;
    	margin: 30px auto;
    	background: url(http://www.plattenumdesigns.com/images/new-template_02.jpg) no-repeat left;
    }
    #wrap {
    	width: 1000px;
    	height: 801px;
    	background: url(http://www.plattenumdesigns.com/images/new-template_11.jpg) no-repeat right;
    }
    #content {
    	width: 1000px;
    	height: 801px;
    	background: url(http://www.plattenumdesigns.com/images/new-template_01.jpg) no-repeat top;
    }
    	
    </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="wrap">
                <div id="content">
                <!--end content--></div>
            <!--end wrap--></div>
        <!--end wrapper--></div>
    </body>
    </html>
    All you need to finish this to look like your tabled example is a center div and a footer. Specify the width for you center div and position it with margins. You can put a menu like this at the top of it - http://nopeople.com/CSS/h_ul_menu-wi...ges/index.html then position your bg image down the height of your menu.
    The footer can either go at the bottom of #wrapper or you can make #wrapper longer to contain it, either way would work fine.
    Last edited by Excavator; 03-06-2009 at 08:01 AM.
    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

  • #6
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts
    i tried puttin the middle piece in but it wont move up or down without taking the whole template with it
    http://www.plattenumdesigns.com/imag...-template.html

    did i do something wrong?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Normally, you'd just center #main with your 710px wide image for a background. Centering won't work because your images are different widths, the left one is 153px and the right one is 136px.
    So margin:0 auto; doesn't work.

    The 1000px width doesn't work either. 153 + 710 + 136 = 999px wide.

    One other thing that affects you here is uncollapsing margins. See http://nopeople.com/CSS/uncollapsing-margin/index.html for an explanation of that.

    Then try this for your CSS -
    Code:
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrapper {
    	width: 999px;
    	height: 801px;
    	margin: 30px auto;
    	background: url(http://www.plattenumdesigns.com/images/new-template_02.jpg) no-repeat left;
    }
    #wrap {
    	width: 999px;
    	height: 801px;
    	background: url(http://www.plattenumdesigns.com/images/new-template_11.jpg) no-repeat right;
    }
    #content {
    	width: 999px;
    	height: 801px;
    border-top: 1px solid #000; /*fixes UNcollapsing margin*/
    	background: url(http://www.plattenumdesigns.com/images/new-template_01.jpg) no-repeat top;
    }
    
    #main {
    background: url(http://www.plattenumdesigns.com/images/new-template_13.png);
    width:710px; /*750px???*/
    height:650px;
    margin: 67px 0 0 153px;
    }
    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

  • Users who have thanked Excavator for this post:

    plattenumdesign (03-06-2009)

  • #8
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts
    first i would like to thank you for your help so far.

    ive been trying to learn how to nest divs for the past month now but cant seem to figure it out right.

    anyways i placed that code into my css section and it worked.

    i placed my footer at the bottom but will it be stuck there
    or do i have to put it somewhere else in my code?

    http://www.plattenumdesigns.com/imag...-template.html

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Footer looks good. Should stay there fine... since it's a fixed height layout you don't want it to move anyway.

    Now is a good time to visit the validator and fix some errors, before you start adding your menu bar.
    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

  • #10
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts
    no errors in css, but html has 3 errors

    also what div container do i place the menu bar into?

  • #11
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts
    ive tried adding my images to my nav bar but nothing is showing up.

    here is the css and html code.



    Code:
    a.button1{background-image:http://www.plattenumdesigns.com/images/new-template_03.png;
    	width: 98px;
    	}
    Code:
      <div id="nav">
         <ul>
        <li><a href="index.html" class="button1"></a> </li>
        <li><a href="designs.html" class="button2"Designs</a></li>
        <li><a href="layouts.html" class="button3"Layouts</a></li>
        <li><a href="templates.html" class="button4"Templates</a></li>
        <li><a href="requests.html"class="button5"Home</a></li>
        <li><a href="affiliates.html" class="button6"Affiliates</a></li>
    	<li><a href="contact.html" class="button7" Requests</a></li>
        </ul>
    
    </div>

  • #12
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    If you want to specify a URI in CSS, you must use url(http://example.com).

  • #13
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by CyanLight View Post
    If you want to specify a URI in CSS, you must use url(http://example.com).

    lol i did forget to put that in there.

    but it still isnt showing up, idk what i am doing wrong?

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Try this, straight off that demo menu I linked you to -
    CSS
    Code:
      #nav {
        list-style-type: none;
    	overflow: auto;
    	background: #000;	
        }
        #nav li {
        height: 49px;
        float: left;
        display: block;
        }
    #nav a {
    	display: block;
    	height: 49px;
    	text-indent:-9999px; /*this will move the link text off the screen*/
    }	
    	#button1{background: url(http://www.plattenumdesigns.com/images/new-template_03.png);
    	width: 98px;
    	}
    markup-
    Code:
    <div id="main">
    	 <div id="nav">
         <ul>
        <li><a href="index.html" id="button1">home</a></li>    <li><a href="designs.html" class="button2" designs=""></a></li>
        <li><a href="layouts.html" class="button3" layouts=""></a></li>
        <li><a href="templates.html" class="button4" templates=""></a></li>
        <li><a href="requests.html" class="button5" home=""></a></li>
        <li><a href="affiliates.html" class="button6" affiliates=""></a></li>
    	<li><a href="contact.html" class="button7" requests=""></a></li>
        </ul>
    
    </div>
    </div>
    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

  • #15
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    6
    Thanked 0 Times in 0 Posts
    it still isnt showing up after i placed that code in


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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