Very simple problem!

Discussion in 'Web Design and Development' started by nStyle, Feb 1, 2010.

  1. nStyle macrumors 6502a

    Joined:
    Dec 6, 2009
    #1
    Hi.

    I am working on a new layout for my site.

    http://www.basedonstyle.com/test/

    ...will be where my test stuff goes.

    I am having trouble getting the nav text to move up a couple pixels? I have a span around the text that "should" fix it... though somehow it does not...

    Any help appreciated!
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Find:

    HTML:
    #navcor {
    	position: relative
    	top: -5px;
    }
    
    Change to:

    HTML:
    #navcor {
        position: relative;
        top: -15px
    }
    First, you left off the ; after "relative" then I simply added on 10 more pixels to top so it's -15 (you set font size to 15px for your header div earlier, so it's essentially top justified).

    -jim
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    I'd suggest improving the markup, then it will be easier to use CSS on it to get the desired effect.
     
  4. nStyle thread starter macrumors 6502a

    Joined:
    Dec 6, 2009
    #4
    Thanks!... wow I can't believe I left out something so simple.

    How could the markup be improved thus far?

    Also, do you guys know how I could make it to where only text links will be affected with a specific property?
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Something along these lines. This will help with your second question there as well as it'll be easier to create a CSS selector that only goes after what you want.
    HTML:
    <body>
    <div id="all">
    <div id="header">
      <div id="logo"><a href="#"><img src="logo.jpg" /></a></div>
    </div><!-- /header -->
    <div id="nav">
      <ul>
        <li><a href="#">about</a></li>
        <li><a href="#">photography</a></li>
        <li><a href="#">design</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </div><!-- /nav -->
    </div><!-- /all -->
    </body>
     
  6. nStyle thread starter macrumors 6502a

    Joined:
    Dec 6, 2009
    #6
    If I do that it turns it into a vertical list that I can't do anything about?

    I want it horizontal.

    Also - How can I make two more divs directly under the header div? I want the 2nd div to be the main content and the 3rd div to be a running fixed footer.

    I am confused!! I have been reading a lot and watching videos but it never seems to work.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Here's one of many tutorials on making a list into a horizontal navigation bar. This is a very common approach to marking up navigation so it'll be good for you to learn this and understand how CSS can transform your HTML into a lot of different layouts. The CSS Zen Garden was one of the original sites to show off the power of CSS and remains to be source of inspiration.

    As far as adding the other div tags, just put them in. You'll likely want to keep them inside the #all div. For fixed footers, you can find some CSS tutorials easily via Google.
     
  8. nStyle thread starter macrumors 6502a

    Joined:
    Dec 6, 2009
    #8
    Ok... I am having more and more problems.

    I got my list set up without it being vertical and all that.

    The spacing between the words is rather weird though.

    Also... I can't get the logo to come and stick next to the links like it was.

    My final two problems are the "main" and "footer" content divs. They are just appearing at the top of the page... I can't figure out why they aren't starting on new lines!

    I have read an entire book on this stuff, even looked at that website you gave me.

    I can't figure out my problems for the life of me.

    You can see my progress via the link in the first post.
     
  9. nStyle thread starter macrumors 6502a

    Joined:
    Dec 6, 2009
    #9
    Here is what I kinda want it to look like (filling out all browser space)

    http://www.basedonstyle.com/test/sketch.jpg

    Of course I can take care of the fancies and the background and all that, I just need to get the basic structure down. I am having trouble with that.
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Here's the CSS. I commented out parts. The attached image shows what it looks like with this CSS. Look through it and try changing parts to see how it effects your layout. Tinkering is the best way to learn CSS.
    Code:
    body {
      margin:0;
      padding:0;
      background:#000;
    }
    #all {
      height:100%;
      width:100%;
    }
    #header {
    /*
      left:0;
      position:fixed;
    */
      text-align:right;
    /*
      top:0;
      width:100%;
    */
      background:#fff;
    }
    a {
      color:#333333;
    /*
      display:block;
    */
      text-decoration:none;
    /*
      width:100px;
    */
    }
    a:hover {
      color:#666666;
    }
    a:active {
      position:relative;
      top:1px;
    }
    a img {
      border:0 none;
    }
    #nav {
      display:inline;
      margin-right:0;
      margin-top:0;
    }
    #nav ul {
      float:right;
      list-style:none outside none;
      margin:0.3em 0 0;
      padding:0;
    /*
      width:45%;
    */
    }
    #nav li a {
      padding:0 1em;
    }
    #nav li {
      display:inline;
    /*
      float:left;
    */
      padding:0;
    }
    #main {
      background-color:#000000;
      height:100%;
      width:100%;
    }
    #footer {
      background-color:#FF0033;
      bottom:0;
      height:24px;
      position:absolute;
      right:0;
      width:100%;
    }
    #logo {
      display:inline;
    /*
      float:right;
    */
      text-align:right;
    /*
      width:55%;
    */
    }
    /*
    #navigation li {
      float:left;
    }
    */
     

    Attached Files:

  11. nStyle thread starter macrumors 6502a

    Joined:
    Dec 6, 2009
    #11
    Thank you very much.

    I fixed it but somehow the black main content is still not there. I would like it to fill in between the header and footer if possible. I thought height and width to 100% would be enough since the all is set to width height 100 100.

    Also somehow it lost the top margin of 0. I tried setting this in the all, the header, and even both the nav and the logo. It made no difference, the top margin would never come. This is what confuses me the most about CSS. I learn something, then do it, and it doesn't work... Setting the top margin of the entire header to 0 should shift everything up inside of the header div so that it is aligned with the top of the page I would think.
     
  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    Looks like you deleted too much,
    Code:
    #header {
      ...
      background:#fff; /* this line is missing */
    }
    As far as the height 100% not doing what you think it should, that's a common misconception. It's not 100% of the window, but 100% of the surrounding element. The body tag is the main parent and it's height is determined by the amount of content. The footer sits at the bottom only because it's forced there with the CSS.

    If it's still not looking the way my attachment shows, let me know what browser you're using.
     
  13. nStyle thread starter macrumors 6502a

    Joined:
    Dec 6, 2009
    #13
    I am using Safari. It works in Firefox.

    Also, I tried putting a BG in the main div. no luck. I might try the body I guess.

    isnt there a way to stretch the main div height from the header to the footer?

    Also... is there any way to make my text in the footer be vertically aligned? I tried vertical-align: middle. I used relative positioning but I was hoping for a more concrete way.
     
  14. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #14
    Safari doesn't like this line,
    Code:
    @charset "UTF-8";
    You don't need it either so just delete it. Your HTML already has a meta tag declaring the character set.
     
  15. nStyle thread starter macrumors 6502a

    Joined:
    Dec 6, 2009
    #15
    angelwatt:

    Thanks so much for all the help!

    Do you know anything about my background problem? I want it to stretch from header to footer.. but not scroll. Is there a way around that little bit?
     
  16. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #16
    The bg.jpg image seems to just be a black image. Your main area has a black background. What are you expecting exactly?
     
  17. nStyle thread starter macrumors 6502a

    Joined:
    Dec 6, 2009
    #17
    The bg is 900 x 1024.

    It is a gradient I saved for the BG.

    Right now it is there but it scrolls with no content.

    In firebug when I move my mouse over div id="main" it selects everything on the page (header, main, footer). Im thinking this is part of my prob. not sure how to fix.

    Something else weird happened. I tried adding a div within "main" It shifts my header down and has some weird reactions! it offsets everything weird.
     
  18. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #18
    The shifting down is because of the "position:fixed" you're using on #main. Avoid using fixed positioning because it isn't supported by all browsers and will give you more headaches. The bg image still looks solid black to me.

    You should get some content for the page. Creating the layout with no content really becomes meaningless and you'll likely end up having to redo some of the CSS as the content will have an effect on things too.
     
  19. nStyle thread starter macrumors 6502a

    Joined:
    Dec 6, 2009
    #19
    There is no fixed positioning on the main. There is only fixed on the header and footer so they stay still even when I scroll...

    There is no positioning at all on main or description. It looks like the #main would appear as a new block (and the #description div would appear within the #main) but it doesn't..

    The bg image is there I promise. Right click and view background image. Its very subtle but it is there.

    Whats happening is the #header AND #main are on the same block right now and they are being pushed from the top with a margin (no idea why).

    I think I need to get the main on its own block (under the header) to stop all these problems but I am not sure how.
     

Share This Page