1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

First Attempt.. A Couple Questions

Discussion in 'CSS' started by Notch, Jan 30, 2006.

  1. #1
    I am diving in feet first and trying to create a site from scratch using CSS.

    I have attached the code I have so far. Here is my questions:

    1. If you look at the navigation bar and the footer you can see the text is justified to the bottom. I would like it aligned vertically in the middle, not centered, but in the middle (both the nav and footer have a height of 25px).

    2. I want the text in the content area to be different than what is in the nav area. Also, in IE the text in the nav area is not formatting like it is in Firefox.

    3. I tried to make a solid border only on the left and right of the holder. It shows up in IE, but not in Firefox.

    Like I said, this is my first attempt and I have been reading how-to's and sort of flying by the seat of my pants, so if anyone can steer me in the right direction or provide some input here it would be appreciated.

    Thanks! Here is the code:

    style.css
    body { 
    background-color: #abacc0; 
    background-image: url(images/bg.jpg);
    background-repeat: repeat-x;
    }
    
    a {color: #ffffff;
    text-decoration: none;
    }
    a:visited {color:#cccccc;
    text-decoration: none;
    }
    a:hover {color: #ffff00;
    text-decoration: none;
    }
    a:active { color:#ff0000;
    text-decoration: none;
    }
    
    p {
    font-family : verdana, arial, helvetica, sans-serif;
    font-size : 12px;
    font-weight : 400;
    font-style : normal;
    color : #2f3369;
    }
    
    h2 {
    font : small-caps bold 16px/20px helvetica, arial, sans-serif;
    color : #2f3369;
    }
    
    #holder {
    position : absolute;
    left : 225px;
    top : 0;
    width : 800px;
    background-color : #ffffff;
    border-style : solid;
    border-width : 4px;
    border-top-width : 0;
    border-bottom-width : 0;
    }
    
    #header {
    position : fixed;
    left : 225px;
    top : 0;
    width : 800px;
    background-color : #efefef;
    padding-left : 0px;
    padding-right : 0px;
    }
    
    #navigation {
    position : fixed;
    left : 225px;
    top : 75px;
    width : 800px;
    height : 25px;
    text-decoration : none;
    background-color : #333366;
    padding-left : 0px;
    padding-right : 0px;
    vertical-align : middle;
    }
    
    #content {
    position : fixed;
    left : 225px;
    top : 100px;
    bottom: 25px;
    width : 800px;
    background-color : #ffffff;
    padding-left : 0px;
    padding-right : 0px;
    }
    
    #footer {
    position : fixed;
    left : 225px;
    width : 800px;
    height : 25px;
    bottom: 0px;
    background-color : #efefef;
    padding-left : 0px;
    padding-right : 0px;
    }
    
    Code (markup):
    index.html
    <!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>CSS Test Site</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta name="resource-type" content="document" />
    <meta name="description" content="My CSS test site for testing my CSS coding" />
    <meta name="keywords" content="css, test, site, code, coding, cascading, style, sheets, html, web, site, page, design" />
    <meta name="copyright" content="&copy; 2006 Notch Computer Services" />
    </head>
    
    <body background="#666699">
    
    <div id="holder">
    <div id="header">
    <img src="images/header.jpg" alt="header image" />
    <div id="navigation">
    <p align="right"><a href="index.html">HOME</a> | <a href="aboutus.html">ABOUT US</a> | <a href="services.html">SERVICES</a> | <a href="clients.html">CLIENTS</a> | <a href="mailto:notch@inotch.com">CONTACT</a> </p>
    <div id="content">
    <h2>This is the Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te 
    feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div id="footer">
    <p align="right">&copy; 2006 Notch Computer Systems</p>
    </div> 
    </div>
    </div>
    </div>
    </div>
    
    </body>
    </html>
    Code (markup):
     
    Notch, Jan 30, 2006 IP
  2. tommie

    tommie Guest

    Messages:
    114
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try to use <divs> as if it were tables, for example: your header start at the top, and you end it at the bottom. Give your header a fixed height whatever you want and use the </div> tag sooner.Same goes for the rest as well.
    I dont know what left: 225px is supposed to do. Good luck, code seems pretty neat for the rest!
     
    tommie, Jan 31, 2006 IP