Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with Navigation Bar and CSS code.

    Hi! I'm new to coding and this forum.

    I'm working on a navigation bar for a online chemistry book for bilingual students. Not sure that's relevant but I'd figure you'd like to know about the project i'm working on. Anyway, I don't have photoshop or images so I coded my navigation bar completely using CSS. However, I can't seem to figure out how to get rid of a bunch of white (needless) space to the left of the navigation bar. I was wondering if someone with a lot more experience can take a quick look and offer some advice. I believe you can get the css style sheet just by viewing the source code and clicking on it.

    Thanks in advance!
    Sid


    Nav Bar

  • #2
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Link to Navigation Bar ----> Nav Bar

  • #3
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    91
    Thanks
    14
    Thanked 1 Time in 1 Post
    Hello sid09000k and welcome to the codingforums!

    I believe the problem you're having is related to what the browser automatically generates as default CSS.

    Here is what is known as a 'reset.css', which basically specifies all the main margins and paddings as 0 and so forth, thus providing us with a suitable working ground for all basic elements we tend to code with in HTML.

    Code:
    /* html5doctor.com Reset v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) - http://cssreset.com */
    html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
    body{line-height:1}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
    nav ul{list-style:none}
    blockquote,q{quotes:none}
    blockquote:before,blockquote:after,q:before,q:after{content:none}
    a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
    ins{background-color:#ff9;color:#000;text-decoration:none}
    mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
    del{text-decoration:line-through}
    abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
    table{border-collapse:collapse;border-spacing:0}
    hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
    input,select{vertical-align:middle}
    Reference: HTML5 Doctor CSS Reset and all others on CSSReset.com

    Save that code to a file named reset.css and then upload it to the same location as your other CSS file. Include it at the top in the head tag like your other one:
    <link href="_css/reset.css" rel="stylesheet" type="text/css" />
    This should fix the problem. If it still occurs then please post a response!

    Hope to see you around the forum more!

    Kind Regards
    Owen Ayres
    Last edited by Owener94; 07-20-2014 at 09:09 PM. Reason: Reference.

  • #4
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Owen,

    THAT WORKED! Oh, I need to learn about that. I would have never figured that out. Thank you!!!! And thank you for the warm welcome to the site. I was really looking for a site like this!!

    kind regards,

    Sid

  • #5
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Owen,

    Now I'm wondering, should I include that reset.css to all my work?

    regards,

    Sid

  • #6
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    91
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sid09000k View Post
    Owen,

    Now I'm wondering, should I include that reset.css to all my work?

    regards,

    Sid
    Hello Sid

    It is generally considered good practice, yes. Different browsers can generate different default CSS styles, so it would become slightly unpredictable and difficult to get a website looking identical across all browsers without a reset.css file. It is personally one of the first things I sort out before developing a new website, as if you forget at the start it can cause unnecessary confusion!

    Happy coding

    Kind Regards
    Owen Ayres

  • #7
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Owen,

    Thank you for the advice! I'll keep posting updates of my project as I go along. I could use some constructive criticism. Again, thank you.


    kind regards,

    Sid


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •