- This topic is empty.
-
AuthorPosts
-
August 8, 2012 at 6:20 am #39256mandeep62Member
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.
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.
August 8, 2012 at 6:53 am #107492Paulie_DMemberThere 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’.
August 8, 2012 at 6:55 am #107493Paulie_DMemberRegardless, 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.
August 8, 2012 at 6:56 am #107494trinziaParticipant#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.
August 8, 2012 at 7:14 am #107496mandeep62MemberThanks 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.
August 8, 2012 at 7:52 am #107497stevedeerMemberI 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!
August 8, 2012 at 7:56 am #107498Paulie_DMemberUnless 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.
August 8, 2012 at 7:58 am #107499Paulie_DMemberDitto to the Missing Manual
http://www.amazon.co.uk/CSS-The-Missing-Manual-Manuals/dp/0596526873August 8, 2012 at 9:09 am #107502mandeep62MemberThanks all.
I would buy that book.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.