SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help with css issue

    Hello, I am having trouble with this redesign I am working on, I have enclosed the link to view it below.
    I want the picture and the menu without any spaces and for the life of me cannot figure it out.
    Here is the css of the picture area;
    Code:
    #pic{
    	background-color:#a1a1a1
    	background-image: url(../img/picbar.png);
    	padding: 0;
    	margin: 0;
    	width: 100%;
    }

    Here is the link http://www.csdca.com/priv

    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    uk
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jonabyte View Post
    Hello, I am having trouble with this redesign I am working on, I have enclosed the link to view it below.
    I want the picture and the menu without any spaces and for the life of me cannot figure it out.
    With all the dl, dt, dds going on you've just simply forgot to zero out the basic ul padding/margin.

    add this to your styles:

    #menu {
    padding: 0;
    margin: 0;
    }

    Also you should add a COMPLETE doctype to your page:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

  3. #3
    Founder of Primal Skill Ltd. feketegy's Avatar
    Join Date
    Aug 2006
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes and you should use a general reset css like the one found in YUI library

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by feketegy View Post
    Yes and you should use a general reset css like the one found in YUI library
    I completely agree, using some kind of reset method always makes development easier.

    If there's no forms being used then I'd always use the global reset method

    Code:
    * {
      padding: 0; margin: 0;
    }
    If you're dealing with complex forms then I'd suggest using the YUI library that feketegy has suggested or Eric Meyer's reset.

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I tried those suggestions, but there still is a small gap between the picture and navigation.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    uk
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jonabyte View Post
    Thanks I tried those suggestions, but there still is a small gap between the picture and navigation.
    Change the height of your #menu li to 1em and see what happens, as below.

    #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:1em; z-index:100;}

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because you're menu is floated inside the #menu div and therefore the #menu isn't expanding to contain it's children.

    Add the following
    Code:
    #menu {list-style-type:none; margin:0; height:28px; padding:0; overflow: hidden;}
    You'll probably also need to give a height of 1&#37; to IE6 only using conditional comments apply hasLayout.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    uk
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add the following

    #menu {list-style-type:none; margin:0; height:28px; padding:0; overflow: hidden;}

    If you do that I think you may find the dropdowns are 'hidden' as well.

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, I think you're confusing overflow: hidden; with display: none;

    Do a google on hasLayout, one of the solutions to this is overflow: hidden; which is an acceptable and common way of solving this problem

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    uk
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    Nope, I think you're confusing overflow: hidden; with display: none;

    Do a google on hasLayout, one of the solutions to this is overflow: hidden; which is an acceptable and common way of solving this problem
    I only tested in Firefox mac and overflow: hidden; doesnt work......................the drop menus fail to show.

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by osgood View Post
    I only tested in Firefox mac and overflow: hidden; doesnt work......................the drop menus fail to show.
    Ah, sorry, I thought you meant the top level menu's were missing but on closer inspection I've spotted the problem.

    Looks like overflow hidden will hide the children if they expand outside the #menu div

    In that case, the easiest fix would be to float the parent container so that it expand to enclose the children.

    Just float #nav_top left and it should sort the problem.

    Code:
    #nav_top{
        float: left;
        width: 100&#37;;
        background-color: #1c244b;
        background-image: url(../img/navbar.png);
        background-repeat: repeat-x;
    }


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
  •