SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS Help

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Help

    Help, for most of you i would think this is simply but being a part time hobby person, icant get my head round this. I use explorer (i know - not the choice of most !! lol) and laid the site out how i want it too look before i get all the site code in behind it. when i got to fire fox and opera i have problems. It appears to put a margin or padding on top of the headers and list in the navigation, thus moving it outta line with the boxes etc it should be in. Also i cant work out how to space the lists in nav and footer correctly



    here the stylesheet that I am using.

    Quote Originally Posted by Stylesheet.css

    body {
    background: #cccccc;}



    #header {
    border: 1px solid black;
    padding: 0px;
    margin: 0px;}

    .signin {
    background: #839263 url(pics/signup.jpg) repeat-x right;
    padding-left: 6px;
    border: 1px solid black;}

    .navigation {
    padding; 0px;
    margin; 0px;
    font-weight: bold;
    color: #ffffff;
    font-size: 15pt;
    border: 1px solid black;
    background: #839263 url(pics/button.jpg) repeat-x right;
    }

    .navigation li {
    display: inline;
    word-spacing: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center; }

    .navigation li a {
    font-variant: small-caps ;
    text-decoration: none;
    color: #606060;}

    .navigation li a:hover {
    font-variant: small-caps ;
    color: #000000;}

    .peasnews {
    border: 1px solid black;
    margin: 0px;
    background: #CDD5B8}

    .peasnews p{
    padding-left: 6px;}

    .randompea {
    border: 1px solid black;
    margin: 0px;
    background: #CDD5B8}

    .randompea p{
    padding-left: 6px;}


    h2 {
    width: 100%;
    font-variant: small-caps ;
    background : #839263;
    text-align: center;}

    .leftimg {
    float: left;
    border : 1px solid black;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom : 5px;}

    .rightimg {
    float: right;
    border : 1px solid black;
    margin-left: 15px;
    margin-bottom : 5px;}

    .footer {
    font-size: 15pt;
    font-variant: small-caps ;
    border: 1px solid black;
    text-align: center;
    background : #839263;
    }

    .footer li {
    display: inline;
    word-spacing: 50px;
    margin: 0;
    padding: 0;
    }

    .footer li a {
    text-decoration: none;
    color: #000000;}

    .video {
    font-size: 15pt;
    font-variant: small-caps ;
    border: 1px solid black;
    text-align: center;
    background: #CDD5B8

    }

    .pes {
    font-size: 15pt;
    font-variant: small-caps ;
    border: 1px solid black;
    text-align: center;
    background: #CDD5B8
    }

    .golf {
    font-size: 15pt;
    font-variant: small-caps ;
    border: 1px solid black;
    text-align: center;
    background: #CDD5B8
    }

    .golf h2, .pes h2 {
    font-size: 14pt}

    .forum {
    font-size: 15pt;
    font-variant: small-caps ;
    border: 1px solid black;
    text-align: center;
    background: #CDD5B8
    }

    .peasnews, .footer, #header, .navigation, .logo , .signin , .randompea, .video, .pes, .golf, .forum {
    position: absolute;
    }
    .wrapper {
    left: 115px;
    width: 1000px;}


    .navigation {
    top: 180px;
    left: 120px;
    width: 1000px;
    height: 20px;}

    #header {
    Width: 800px;
    height: 150px;

    top: 15px;
    left: 120px;}

    .signin {
    Width: 190px;
    height: 150px;
    top: 15px;
    left : 930px;}

    .peasnews {
    top: 230px;
    left: 390px;
    height: 620px;
    width: 410px;
    }

    .randompea {
    top: 550px;
    left: 820px;
    height: 300px;
    width: 300px;
    }

    .footer {
    top: 870px;
    left: 120px;
    width: 1010px;
    height: 30px;}

    .video {
    top: 230px;
    left: 820px;
    width: 300px;
    height: 300px; }

    .pes {
    top: 650px;
    left: 250px;
    width: 120px;
    height: 200px; }

    .golf {
    top: 650px;
    left: 120px;
    width: 120px;
    height: 200px; }

    .forum {
    top: 230px;
    left: 120px;
    width: 250px;
    height: 400px; }
    I dont think the HTML is relevant to the problems so i havent posted this as long post already. Would some one be able too point me in the right direction please ?

    Many thanks in advance

    Mungo

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you will find your own solution in Collapsing Margins, anyway try e.g. to change the "The Peas" top margin to top padding.

    Edit:

    If it is not a collapsing margin issue, it would be easy to find the cause if you could post all the code or link to the page.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    I think you will find your own solution in Collapsing Margins, anyway try e.g. to change the "The Peas" top margin to top padding.

    Edit:

    If it is not a collapsing margin issue, it would be easy to find the cause if you could post all the code or link to the page.
    Many thanks I changed the margin and took the padding line out and it brought up the title, then worked out the rest of the details from there, I had to put in new selector for navigation ul as wasnt recognising the li

    so thank you - its all hunky dorey now

  4. #4
    SitePoint Enthusiast rreebaba's Avatar
    Join Date
    Jul 2008
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much that give me the link Collapsing Margins. It's help me too.


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
  •