Forums

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

Home Forums CSS HTML and CSS code help

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #39256
    mandeep62
    Member

    Hello everyone,

    I am new to web designing. I was looking at the code of some website, and having hard time understanding its code.

    I’m trying to create navigation bar as exactly of the website. I’m attaching the picture of navigation bar which i want to create.
    Image and video hosting by TinyPic

    Here is the HTML code


     
      

     

       


    CSS code
    #navigation {
    width: 100%;
    height: 85px;
    background: url(images/nav-bg.png) repeat-x;
    position: absolute;
    top: 0px;
    z-index: 100;
    position:fixed;
    }
    #navigation #menu {
    width: 950px;
    position: relative;
    padding: 0 20px 0 0;
    }

    #nav-item div {
    margin: 32px 0 0 0;
    width: 80px;
    height: 16px;
    position: relative;
    overflow: hidden;
    }

    div#nav-item img {
    position: absolute;
    }

    #nav-item {
    float: right;
    width: 80px;
    height: 16px;
    }

    #nav-item-fb {
    float: right;
    width: 80px;
    height: 20px;
    padding: 31px 0 0 10px;
    }

    .company-nav a {
    font-family: Helvetica;
    float: right;
    height: 16px;
    width: 100px;
    margin: 33px 0px 0px 0px;
    background: url(images/company-nav.png) no-repeat;

    }

    .company-nav a:hover {
    background-position: 0 -17px;
    }

    .work-nav {
    float: left;
    height: 16px;
    width: 100px;
    margin: 33px 0px 0px 10px;
    background: url(images/work-nav.png) no-repeat;
    }

    .work-nav a:hover {
    background-position: 0 -17px;
    }

    #nav .contact-nav {
    float: right;
    width: 75px;
    text-align: center;
    margin: 0px 0px 0px 8px;
    }

    #nav .blog-nav {
    float: right;
    width: 55px;
    text-align: center;
    margin: 0px 0px 0px 0px;
    }

    Can someone explain which CSS code above styles which div elements in HTML? Just need only explanation about what

    I would really appreciate a lot.

    #107492
    Paulie_D
    Moderator

    There looks to be a lot of unnecessary code in the HTML which probably isn’t helping.

    It looks as though the coder was intending to use images inside some of the list items as links but ended up not doing it and the kind of substituted background images.

    However, if you really need to look.

    Certain elements can have ‘names’ and these are indicated with an ID in the HTML. In the CSS, these are targeted by using the hash tag (#).

    Other elements don’t have to have names but can have classes (usually meaning that the ‘type’ of element will appear more than once. These are targeted by using the (dot) as in “.classname “.

    You can can also get more specific by only targeting classes that appear inside elements by combining the two.

    So #elementname .classname only targets items with a class of ‘classname’ inside the element with an ID of “elementname”

    For instance, #nav .blog-nav means an element with a class of ‘blog-nav’ inside the element with an Id of ‘nav’.

    #107493
    Paulie_D
    Moderator

    Regardless, that menu is pretty simple and for the most part does not require images (unless the designer/coder REALLY wants to) and the HTML is, I have to say, fairly old-school.

    http://codepen.io/Paulie-D/pen/gidKj

    #107494
    trinzia
    Participant

    #navigation is styling id=navigation. # means id.

    ID is for items which are only used once in page.

    .blog-nav is styling any item with class = “blog-nav”.

    Class is for items that are repeated.

    #nav .blog-nav is styling any item like id=”nav” … class=”blog-nav”.

    These choose from hierarchy.

    You will find more by searching on CSS selectors, to look for tutorials.

    #107496
    mandeep62
    Member

    Thanks Paulie and trinzia.

    How can I put images of navigation bar items, like ” menu” home” etc.

    I have different images of these list items. I also have created list items. Just need to put different images images as links.

    #107497
    stevedeer
    Member

    I can recommend the book…’css, the missing manual’… it sounds as though you are at the very beginning here and words of advice will only confuse you more!

    #107498
    Paulie_D
    Moderator

    Unless there is a specific reason why you want to use an image I wouldn’t but there are a number of ways.

    The best way is to have a single image for all your menu items (this is called a sprite) and then position a part of the sprite so it covers the list item.

    Alternatively, you give each list item a class and then set a background image for that class.

    Kind of like this: http://codepen.io/Paulie-D/pen/BIAoe

    The downside of using images is that you have to make new images every time the menu changes.

    #107499
    Paulie_D
    Moderator
    #107502
    mandeep62
    Member

    Thanks all.

    I would buy that book.

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