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 5 of 5

Thread: Simple Div help

  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Simple Div help

    I have been using tables for my page layouts and I am sick of putting off learning another way, I need to move on and up! The reason I rely on them is because I really don't know any other way.

    So I'm going to try using divs to get the same effect, hoping it works out even better. But the problem is I don't know how to use them correctly. Heres what I'm trying and the div background colors are not showing up

    The CSS
    Code:
    .header { width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #000000; }
    
    
    .body { width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
          background: #ffffff; }
    Heres the html
    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>
    <link rel="stylesheet" type="text/css" media="all" href="test.css" />
    <style type="text/css">
    body {background-color: #ff99cc;}
    A:link {text-decoration: none}
    A:visited {text-decoration: none}
    A:active {text-decoration: none}
    A:hover {text-decoration: none}
    </style>
    </script>
    </head>
    <body>
    <div id="header"><center><img src="images/ctemptbann.jpg"><br><img src="images/intim.jpg"></div>
    <div id="body">
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    When you are defining the css style using '.' use attribute class for the tag
    so
    Code:
    <div id="header">
    should be
    Code:
    <div class = "header">
    and
    Code:
    <div id="body">
    should be
    Code:
    <div class = "body">
    If you want to use attribute "id", then use '#' instead of '.'

    So
    Code:
    .header { width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #000000; }
    should be

    Code:
    #header { width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #000000; }
    And you are closing script tag without opening it

  • Users who have thanked jolly_nikki for this post:

    ilovetechno (10-22-2009)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello ilovetechno,
    This might help you get started. It still doesn't validate (see validation links in my sig below) because <center> is deprecated. If you could post a link to the test site so we could see the images in #header I'm sure that could be fixed.
    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: 14px "Comic Sans MS";
    	background: #ff99cc;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    #header { 
    	height: 50px;
    	background: #000000;
    }
    #wrap {
    	height: 500px;
    	background: #ffffff; 
    }
    	a:link,
    	a:visited,
    	a:hover,
    	a:active {text-decoration: none}
    </style>
    </head>
    <body>
        <div id="container">
    		<div id="header"><center><img src="images/ctemptbann.jpg"><br><img src="images/intim.jpg"></div>
    			<div id="wrap"></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

  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Is there a better tag to use than the center tag? Is there something I could add to the CSS so I wouldn't have to use it?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Yes, to center something, give it a width and apply margin:0 auto; to it.
    Code:
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    That makes #container 800px wide, 30px space at top and bottom and auto margins on right and left.
    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


  •  

    Posting Permissions

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