Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS simple problem…

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #30730
    maximus1979
    Member

    Hello folks!

    This is my first post, so I’d like to thank everyone and especially Chris for putting all of this together. Great resource for me so far, thanks a bunch.

    Now, on to my little problem…

    In Chris’ video “Converting a Photoshop Mockup (part 1 of 3)” he uses a simple technique to get the header / banner area going. In his video, he crops a small pic of the stripe and repeats it on X across the top, creating an elastic stripe and then adds the actual “banner”.

    I’ve followed the steps 1 by 1 to the letter and everything is fine EXCEPT, when I add my banner, it is actually about 20px LOWER than the original stripe…

    I tried adding a ‘padding’ of 20px across the top but it actually lowers the “banner” further, instead of the stripe…

    I’m still fairly new to all of this so I’m quite confused as to why this is happening… I’m using the EXACT same code, same pics, dimensions… I’ve also tried loading it up on different browsers and that does nothing.

    HTML

    
    "http://www.w3.org/TR/xhtml1-transitional.dtd">




    Testing 1 2 3








    CSS

    • {
    margin: 0;
    padding: 0;
    }

    body {
    font-size: 65%;
    font-family: Verdana, sans-serif;
    background: url(images/body-bg.jpg) repeat-x top;

    }

    div#page-wrap {
    width: 580px;
    margin: 0 auto;
    }

    ul#nav {
    height: 236px; width: 800px;
    margin: 0 auto;
    background: url(images/header-bg.jpg) no-repeat;
    list-style: none;
    }

    ul#nav li a {
    display: block;
    width: 130px;
    float: left;
    margin-top: 185px;
    color: black;
    font-weight: bold;
    text-decoration: none;
    }

    ul#nav li a:hover, ul#nav li a:active {
    color: red;

    Any ideas??

    Thanks a lot in advance for any help you guys will provide!

    Max

    #74754
    TheDoc
    Member

    The best way we can provide you with help is if you can provide a link to the problem.

    If you can’t do that, then you can post the HTML and CSS in question. Just be sure to wrap the code in < pre > and < code > tags (minus the spaces) for easy readability and to make sure none of the code gets stripped out when you make your post!

    #74755
    maximus1979
    Member

    sorry i added the css AFTER my original post…

    You can also check here for another example, of the same problem, when i try to recreate the same design with a different set of pics, etc.

    Thanks

    #74765
    maximus1979
    Member

    Is this enough info?

    #74769
    Poppoll
    Member

    Replace the first line in style.css
    • {
    with: *{

    #74804
    maximus1979
    Member

    ok, changed the bullet to an asterix with no effect… :(

    Edit: It actually worked when i view the URL, but on my local machine I still have the same problem… ?

    Confused…

    #74805
    Poppoll
    Member

    Look here
    CSS in the source.

    Clear the browser cache

    #74807
    maximus1979
    Member

    See, I got that result the first time I opened the URL, now it’s back to this

    You seem to have put the css directly into the html file, is that correct?

    Cache cleared, no changes…

    #74661
    Poppoll
    Member

    Maxi
    Have a second look at Test
    You find the css in the html source.

    #74542
    maximus1979
    Member

    Thanks Poppoll, I appreciate the effort you’re making to help me. I understand that you put the css inside the HTML file, and modified some of the code.

    There are a couple of things to consider though:

    1- This is a work in progress, and the changes you made also affected other parts of the site (footer for example) and will affect other content as I progress on this website.

    2- I’m learning as I go along, so although I very much appreciate your help, you “fixed” the problem and did not provide an explanation why and how this will affect future content. So next time I’m working on a site, I will likely run into the same problem.

    I’m not on here looking for someone to do the work FOR me, I’m hoping someone can clarify WHY/HOW my project is not cohesive even though I basically followed along and did EXACTLY as Chris did, yet it works fine for Chris in the tutorial (downloaded the finished product and his code is a perfect match to mine)… ??

    #74522
    Poppoll
    Member

    Maxi
    The errors came from the code you added afterwards.
    In the first css i did not had

    p,li {
    font-size: 1.2em;
    line-height: 1.3em;
    margin-bottom: 0.8em;
    }

    change to:

    p,li a{
    font-size: 1.2em;
    line-height: 1.3em;
    margin-bottom: 0.8em;
    }

    In the html this is not valid:


    change to


    You have:

    Change to

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.