Welcome Guest [Log In] [Register]
Important Links
Contests & Events
Latest Announcements
Forum Guidelines
Meet the Staff
Update Log
  • SOTM #3 [Winner]
  • TOTM #3 [Winner]
  • October Updates!
  • Become a Contributor!
  • Affiliate with us!
    Add Reply
    [C] HTML Website Help
    Topic Started: Jul 11 2015, 03:56 PM (633 Views)
    Vocal.
    Member Avatar
    Resource Administrator

    So my header is not touching the sides of my browser. I have tried making the width 100% but that doesn't do anything. So what is going on? (Screenshot attached).
    Attached to this post:
    Attachments: sitetrouble.png (67.96 KB)
    Edited by Vocal., Jul 11 2015, 04:20 PM.

    [Foundation's Ultimate Theme Guide]

    Exclusive Themes!
    [Crystal] [ZETAOne] [Foundation Purple]


    Posted Image Posted Image Posted Image

    Posted Image Posted Image

    Off
    Profile
    Quote
    Top
     
    + DPM
    Member Avatar


    By default body has a margin value. So add to your CSS:
    Code:
     
    body {
    margin:0;
    }
    Off
    Profile
    Quote
    Top
     
    Vocal.
    Member Avatar
    Resource Administrator

    Thanks! I am new to this so I had no clue. :P

    Edited by Vocal., Jul 11 2015, 04:21 PM.

    [Foundation's Ultimate Theme Guide]

    Exclusive Themes!
    [Crystal] [ZETAOne] [Foundation Purple]


    Posted Image Posted Image Posted Image

    Posted Image Posted Image

    Off
    Profile
    Quote
    Top
     
    Vocal.
    Member Avatar
    Resource Administrator

    I am not marking this complete until I finish coding because I have already ran into another problem. There is more space between 'Contact Us' and the other links. (Image attached).

    CSS:

    Code:
     
    #submenu {
    float: right;
    list-style-type: none;
    }

    #submenu ul li{
    text-decoration: none;
    display: inline;
    }

    #submenu ul li a {
    text-decoration: none;
    color: #000000;
    padding-right: 20px;
    }
    Attached to this post:
    Attachments: siteproblem2.png (2.41 KB)
    Edited by Vocal., Jul 11 2015, 04:23 PM.

    [Foundation's Ultimate Theme Guide]

    Exclusive Themes!
    [Crystal] [ZETAOne] [Foundation Purple]


    Posted Image Posted Image Posted Image

    Posted Image Posted Image

    Off
    Profile
    Quote
    Top
     
    Vocal.
    Member Avatar
    Resource Administrator

    Bumping. :r

    [Foundation's Ultimate Theme Guide]

    Exclusive Themes!
    [Crystal] [ZETAOne] [Foundation Purple]


    Posted Image Posted Image Posted Image

    Posted Image Posted Image

    Off
    Profile
    Quote
    Top
     
    junkbot
    Member Avatar


    By default I believe ul or li has a margin or a padding. :) Set those to 0 ;)
    Off
    Profile
    Quote
    Top
     
    Vocal.
    Member Avatar
    Resource Administrator

    I tried that and it didn't work. :/

    [Foundation's Ultimate Theme Guide]

    Exclusive Themes!
    [Crystal] [ZETAOne] [Foundation Purple]


    Posted Image Posted Image Posted Image

    Posted Image Posted Image

    Off
    Profile
    Quote
    Top
     
    Titch
    Member Avatar


    Can you also post the HTML?

    Posted Image



    Released Themes
    Innovate | Zeta Rehashed | Ontorus (Blue) | Endless Horizons | Lyrical | Too Simple | Rasterize | Pokee

    Requests Completed
    3

    Off
    Profile
    Quote
    Top
     
    Vocal.
    Member Avatar
    Resource Administrator

    Sure thing!

    Code:
     
    !DOCTYPE html>
    <html>
    <head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="site.css">
    </head>
    <body>
    <div id="header"></div>

    <div id="avatar"></div>

    <div id="logo">Personal Website</div>

    <div id="tagline">A tagline for your website.</div>

    <div id="submenu">
    <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About Me</a></li>
    <li><a href='#'>Blog<a/></li>
    <li><a href='#'>Contact Me</a></li>
    </ul>
    </div>

    [Foundation's Ultimate Theme Guide]

    Exclusive Themes!
    [Crystal] [ZETAOne] [Foundation Purple]


    Posted Image Posted Image Posted Image

    Posted Image Posted Image

    Off
    Profile
    Quote
    Top
     
    -The-
    Member Avatar
    #the { display: all; }

    Out of interest, have you tried putting all the <li> on one line? I think I read somewhere that this is a hack for some kind of space, but I can't remember whether it works or not.
    Code:
     
    <li><a href='#'>Home</a></li><li><a href='#'>About Me</a></li><li><a href='#'>Blog<a/></li><li><a href='#'>Contact Me</a></li>


    Edit: With a quick Google search, I also found this little snippet off a forum:
    Paul_O_B
     
    The easiest way to cure the whitespace bug in lists (without harming the formatting of the html) is simply to float the list item and the anchor within - although that means setting widths for both unless they are content width.

    Formattimg the html to close the whitespace is a fragile solution because code is often reformatted after the event and then you get your whitespace back. :)
    Edited by -The-, Jul 14 2015, 10:38 AM.
    -The- | Foundation Manager
    Skype: JamesAdams1001 | PM me | Ask Me Anything
    Suggest Anything. Ask Anything. Foundation.
    Posted Image Posted Image Posted Image Posted Image
    Off
    Profile
    Quote
    Top
     
    Vocal.
    Member Avatar
    Resource Administrator

    I put them all on the same line and it did move them closer to 'Contact Me' However, I am not sure how to do the other thing.

    [Foundation's Ultimate Theme Guide]

    Exclusive Themes!
    [Crystal] [ZETAOne] [Foundation Purple]


    Posted Image Posted Image Posted Image

    Posted Image Posted Image

    Off
    Profile
    Quote
    Top
     
    + DPM
    Member Avatar


    Code:
     
    <li><a href='#'>Blog<a/></li>
    You wrote <a/> when you meant to write </a> :P
    Off
    Profile
    Quote
    Top
     
    Vocal.
    Member Avatar
    Resource Administrator

    Thanks! That totally fixed it. :facepalm:

    [Foundation's Ultimate Theme Guide]

    Exclusive Themes!
    [Crystal] [ZETAOne] [Foundation Purple]


    Posted Image Posted Image Posted Image

    Posted Image Posted Image

    Off
    Profile
    Quote
    Top
     
    Vocal.
    Member Avatar
    Resource Administrator


    Support Issue Resolved!

    This support request has been resolved and has been marked as complete. This is only to help sort the forum, the topic will remain open in case you experience more issues with this topic.

    If you have another support request with another issue, please post a new topic.


    Vocal. l Foundation Staff

    [Foundation's Ultimate Theme Guide]

    Exclusive Themes!
    [Crystal] [ZETAOne] [Foundation Purple]


    Posted Image Posted Image Posted Image

    Posted Image Posted Image

    Off
    Profile
    Quote
    Top
     
    1 user reading this topic (1 Guest and 0 Anonymous)
    « Previous Topic · Support Zone · Next Topic »
    Add Reply


    Foundation Affiliates (Click Here)

    Discuss Academy Foundation