SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    First Attempt at CSS redesign

    I'm having a few problems with my first attempt at converting a site to all CSS.

    My style sheet is as follows:

    Code:
    body {
     background-image: url(bg.gif);
     margin: 0px
     }
    #header { 
     position: absolute;
     left: 50%;
     margin-left: -375px;
     width: 750;
     background-color: #990000;
     border-bottom: solid white 1px;
     }
    #logo {
     display: inline;
     width: 448;
     height: 120px;
     }
     
    #nav {
     display: inline;
     width: 151px;
     height: 120px;
     padding: 10px;
     border-left: solid white 1px;
     }
    #navitem {
     padding-left: 5px;
     padding-right: 5px;
     padding-top: 2px;
     padding-bottom: 2px;
     }
    #navitem A {
     font-weight: bold;
     font-family: verdana;
     font-size: 8pt;
     color: #ffffff;
     text-decoration: none;
     }
    my HTML page is as follows

    Code:
    <div id="header">
      <div id="logo"><img src="header.jpg" width=448 height=120 alt="Ewebbed Design"></img></div>
      <div id="nav">
       <div id="navitem"><a href="index.html">Web Design</a></div>
       <div id="navitem"><a href="index.html">Web Development</a></div>
       <div id="navitem"><a href="index.html">Web Services</a></div>
       <div id="navitem"><a href="index.html">E-Commerce</a></div>
       <div id="navitem"><a href="index.html">Printed Media</a></div>
      </div>
      <div id="nav">
       <div id="navitem"><a href="index.html">Home</a></div>
       <div id="navitem"><a href="index.html">About Us</a></div>
       <div id="navitem"><a href="index.html">Portfolio</a></div>
       <div id="navitem"><a href="index.html">Contact Us</a></div>
      </div>
    </div>
    but the output looks like:



    if you notice - there is a space at the top of the 2 nav sections, and 1 below the logo section. any idea on how I would do this.

    Also - on another note - how would I make the navitem div's change background colour when rolled over, their CSS looks like this:

  2. #2
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry - I mean, any idea on how I would get rid of those spaces - and what causes them?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Singapore
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe its the 10px padding in your
    #nav
    ...

  4. #4
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope - I've tried removing that, but thats not it - as the padding is internal within the div box, and that white line - the left border will go all the way up the side of it.

    this seems to be outside of the box.

    Cheers

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Singapore
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Um, for the gap, i suspect its the
    { display:inline }
    because i fiddled with your code, used
    { float:left }
    and the gaps were gone...

    Don't count on me for this...

    For that little gap below your logo image, I believe its caused by IE's unnecessary extra space creation.

    To test this gap, try putting in the image alone and a div that has borders and
    { margin-top: #px }
    then use mspaint to count the pixel gaps...

    I used this to test this extra space:
    <img src="header.png" />
    <div style="border:1px solid #000000;margin-top:10px">
    try
    </div>

    PS i'm new, so i'll need time to learn the forum's features...

  6. #6
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mcg_sg
    PS i'm new, so i'll need time to learn the forum's features...
    You may find this invaluable for doing so:

    http://www.sitepointforums.com/misc.php?do=bbcode

    Andy.

  7. #7
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    because i fiddled with your code, used
    { float:left }
    and the gaps were gone...
    Genius - this worked fine, not actually sure what this float attribute does though. can anyone explain.

    Any ideas on what syntax I need to get the #navitem divs to change background colour on mouse over. - I guess this will only work in IE - but thats no problem.

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Singapore
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not actually sure what this float attribute does though. can anyone explain.
    I think http://www.w3schools.com/css/pr_class_float.asp will explain it better...

    You may find this invaluable for doing so...
    Thanks! It helped.


Bookmarks

Posting Permissions

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