PDA

View Full Version : Newbie:Help with HTML and CSS



arpit
Feb 24th, 2012, 12:00 PM
Hi Friends,

I am very new to website designing. I have a query. I am looking to build my website. The website which i am trying to replicate is www.Windchimes.co.in I especially liked the upper layout. and i am trying to understand how these people have build this.

here is the url which takes to the image file of upper navigation

http://windchimes.co.in/images/nav/nav.jpg
Its strange to look at this. I am not able to co-relate how this entire picture is working

Awaiting your your help

Cheers,
Arpit

Riku
Feb 24th, 2012, 12:49 PM
Basicly there is wrapping div for all navigation divs and then divs for each navigation button;


HTML;


<div id="navigation">

<div id="about"><a href="aboutus.html"></a></div>

<div id="services"><a href="services.html"></a></div>

<div id="clients"><a href="clients-home.html"></a></div>

<div id="careers"><a href="current-openings.html"></a></div>

<div id="sm"><a href="socialmedia.html"></a></div>

<div id="blog"><a href="http://windchimes.co.in/blog"></a></div>

<div id="contact"><a href="contact.html"></a></div>

</div>

And CSS has put it on its place and navigation a elements have an hover effect which moves the background image.

CSS;


#navigation {
float: right;
height: 160px;
overflow: hidden;
padding-right: 15px;
width: 633px;
}
#about {
background-image: url("../images/nav/nav.jpg");
background-position: 0 0;
display: block;
float: left;
height: 160px;
width: 90px;
}
#about a {
background-image: url("../images/nav/nav.jpg");
background-position: 0 0;
display: block;
float: left;
height: 160px;
width: 90px;
}
#about a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: 0 -160px;
display: block;
float: left;
height: 160px;
width: 90px;
}
#about_h {
background-image: url("../images/nav/nav.jpg");
background-position: 0 -320px;
display: block;
float: left;
height: 160px;
width: 90px;
}
#services {
background-image: url("../images/nav/nav.jpg");
background-position: -90px 0;
display: block;
float: left;
height: 160px;
width: 97px;
}
#services a {
background-image: url("../images/nav/nav.jpg");
background-position: -90px 0;
display: block;
float: left;
height: 160px;
width: 97px;
}
#services a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -90px -160px;
display: block;
float: left;
height: 160px;
width: 97px;
}
#services_h {
background-image: url("../images/nav/nav.jpg");
background-position: -90px -320px;
display: block;
float: left;
height: 160px;
width: 97px;
}
#clients {
background-image: url("../images/nav/nav.jpg");
background-position: -187px 0;
display: block;
float: left;
height: 160px;
width: 87px;
}
#clients a {
background-image: url("../images/nav/nav.jpg");
background-position: -187px 0;
display: block;
float: left;
height: 160px;
width: 87px;
}
#clients a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -187px -160px;
display: block;
float: left;
height: 160px;
width: 87px;
}
#clients_h {
background-image: url("../images/nav/nav.jpg");
background-position: -187px -320px;
display: block;
float: left;
height: 160px;
width: 87px;
}
#careers {
background-image: url("../images/nav/nav.jpg");
background-position: -273px 0;
display: block;
float: left;
height: 160px;
width: 86px;
}
#careers a {
background-image: url("../images/nav/nav.jpg");
background-position: -273px 0;
display: block;
float: left;
height: 160px;
width: 86px;
}
#careers a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -273px -160px;
display: block;
float: left;
height: 160px;
width: 86px;
}
#careers_h {
background-image: url("../images/nav/nav.jpg");
background-position: -273px -320px;
display: block;
float: left;
height: 160px;
width: 86px;
}
#sm {
background-image: url("../images/nav/nav.jpg");
background-position: -360px 0;
display: block;
float: left;
height: 160px;
width: 97px;
}
#sm a {
background-image: url("../images/nav/nav.jpg");
background-position: -360px 0;
display: block;
float: left;
height: 160px;
width: 97px;
}
#sm a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -360px -160px;
display: block;
float: left;
height: 160px;
width: 97px;
}
#sm_h {
background-image: url("../images/nav/nav.jpg");
background-position: -360px -320px;
display: block;
float: left;
height: 160px;
width: 97px;
}
#blog {
background-image: url("../images/nav/nav.jpg");
background-position: -457px 0;
display: block;
float: left;
height: 160px;
width: 74px;
}
#blog a {
background-image: url("../images/nav/nav.jpg");
background-position: -457px 0;
display: block;
float: left;
height: 160px;
width: 74px;
}
#blog a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -457px -160px;
display: block;
float: left;
height: 160px;
width: 74px;
}
#blog_h {
background-image: url("../images/nav/nav.jpg");
background-position: -457px -320px;
display: block;
float: left;
height: 160px;
width: 74px;
}
#contact {
background-image: url("../images/nav/nav.jpg");
background-position: -527px 0;
display: block;
float: left;
height: 160px;
width: 101px;
}
#contact a {
background-image: url("../images/nav/nav.jpg");
background-position: -527px 0;
display: block;
float: left;
height: 160px;
width: 101px;
}
#contact a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -527px -160px;
display: block;
float: left;
height: 160px;
width: 101px;
}
#contact_h {
background-image: url("../images/nav/nav.jpg");
background-position: -527px -320px;
display: block;
float: left;
height: 160px;
width: 101px;
}

That's how its done on your desire site. I would make an JavaScript animation myself and do most of the work with class instead of giving every div own ID.

Hope this helps and gets you started.

-Riku

arpit
Feb 24th, 2012, 08:49 PM
Hi Riku,

Thanks for your help. Maybe i need to enhance my skills to understand that as i am still not able to get it. It made me realize that Designing classes were good for nothing. I appreciate the valuable time you have given to solve this.

Thanks Buddy

Cheers,
Arpit


Basicly there is wrapping div for all navigation divs and then divs for each navigation button;


HTML;


<div id="navigation">

<div id="about"><a href="aboutus.html"></a></div>

<div id="services"><a href="services.html"></a></div>

<div id="clients"><a href="clients-home.html"></a></div>

<div id="careers"><a href="current-openings.html"></a></div>

<div id="sm"><a href="socialmedia.html"></a></div>

<div id="blog"><a href="http://windchimes.co.in/blog"></a></div>

<div id="contact"><a href="contact.html"></a></div>

</div>

And CSS has put it on its place and navigation a elements have an hover effect which moves the background image.

CSS;


#navigation {
float: right;
height: 160px;
overflow: hidden;
padding-right: 15px;
width: 633px;
}
#about {
background-image: url("../images/nav/nav.jpg");
background-position: 0 0;
display: block;
float: left;
height: 160px;
width: 90px;
}
#about a {
background-image: url("../images/nav/nav.jpg");
background-position: 0 0;
display: block;
float: left;
height: 160px;
width: 90px;
}
#about a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: 0 -160px;
display: block;
float: left;
height: 160px;
width: 90px;
}
#about_h {
background-image: url("../images/nav/nav.jpg");
background-position: 0 -320px;
display: block;
float: left;
height: 160px;
width: 90px;
}
#services {
background-image: url("../images/nav/nav.jpg");
background-position: -90px 0;
display: block;
float: left;
height: 160px;
width: 97px;
}
#services a {
background-image: url("../images/nav/nav.jpg");
background-position: -90px 0;
display: block;
float: left;
height: 160px;
width: 97px;
}
#services a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -90px -160px;
display: block;
float: left;
height: 160px;
width: 97px;
}
#services_h {
background-image: url("../images/nav/nav.jpg");
background-position: -90px -320px;
display: block;
float: left;
height: 160px;
width: 97px;
}
#clients {
background-image: url("../images/nav/nav.jpg");
background-position: -187px 0;
display: block;
float: left;
height: 160px;
width: 87px;
}
#clients a {
background-image: url("../images/nav/nav.jpg");
background-position: -187px 0;
display: block;
float: left;
height: 160px;
width: 87px;
}
#clients a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -187px -160px;
display: block;
float: left;
height: 160px;
width: 87px;
}
#clients_h {
background-image: url("../images/nav/nav.jpg");
background-position: -187px -320px;
display: block;
float: left;
height: 160px;
width: 87px;
}
#careers {
background-image: url("../images/nav/nav.jpg");
background-position: -273px 0;
display: block;
float: left;
height: 160px;
width: 86px;
}
#careers a {
background-image: url("../images/nav/nav.jpg");
background-position: -273px 0;
display: block;
float: left;
height: 160px;
width: 86px;
}
#careers a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -273px -160px;
display: block;
float: left;
height: 160px;
width: 86px;
}
#careers_h {
background-image: url("../images/nav/nav.jpg");
background-position: -273px -320px;
display: block;
float: left;
height: 160px;
width: 86px;
}
#sm {
background-image: url("../images/nav/nav.jpg");
background-position: -360px 0;
display: block;
float: left;
height: 160px;
width: 97px;
}
#sm a {
background-image: url("../images/nav/nav.jpg");
background-position: -360px 0;
display: block;
float: left;
height: 160px;
width: 97px;
}
#sm a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -360px -160px;
display: block;
float: left;
height: 160px;
width: 97px;
}
#sm_h {
background-image: url("../images/nav/nav.jpg");
background-position: -360px -320px;
display: block;
float: left;
height: 160px;
width: 97px;
}
#blog {
background-image: url("../images/nav/nav.jpg");
background-position: -457px 0;
display: block;
float: left;
height: 160px;
width: 74px;
}
#blog a {
background-image: url("../images/nav/nav.jpg");
background-position: -457px 0;
display: block;
float: left;
height: 160px;
width: 74px;
}
#blog a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -457px -160px;
display: block;
float: left;
height: 160px;
width: 74px;
}
#blog_h {
background-image: url("../images/nav/nav.jpg");
background-position: -457px -320px;
display: block;
float: left;
height: 160px;
width: 74px;
}
#contact {
background-image: url("../images/nav/nav.jpg");
background-position: -527px 0;
display: block;
float: left;
height: 160px;
width: 101px;
}
#contact a {
background-image: url("../images/nav/nav.jpg");
background-position: -527px 0;
display: block;
float: left;
height: 160px;
width: 101px;
}
#contact a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: -527px -160px;
display: block;
float: left;
height: 160px;
width: 101px;
}
#contact_h {
background-image: url("../images/nav/nav.jpg");
background-position: -527px -320px;
display: block;
float: left;
height: 160px;
width: 101px;
}

That's how its done on your desire site. I would make an JavaScript animation myself and do most of the work with class instead of giving every div own ID.

Hope this helps and gets you started.

-Riku

Riku
Feb 25th, 2012, 09:21 AM
I just tell you fastly about the CSS you see there maybe it helps you get started with your own project!



#navigation {
float: right;
height: 160px;
overflow: hidden;
padding-right: 15px;
width: 633px;
}
#about {
background-image: url("../images/nav/nav.jpg");
background-position: 0 0;
display: block;
float: left;
height: 160px;
width: 90px;
}
#about a {
background-image: url("../images/nav/nav.jpg");
background-position: 0 0;
display: block;
float: left;
height: 160px;
width: 90px;
}
#about a:hover {
background-image: url("../images/nav/nav.jpg");
background-position: 0 -160px;
display: block;
float: left;
height: 160px;
width: 90px;
}
#about_h {
background-image: url("../images/nav/nav.jpg");
background-position: 0 -320px;
display: block;
float: left;
height: 160px;
width: 90px;
}

Took shorter version of CSS code now because it loops just different divs and values.

Navigation is the div that wraps all navigation elements together so they stay in same place and site doesn't break so easily. It has float: right; so it goes to the right side.

#about holds the a element in its place and with all those divs floating on left makes them go inline.

#about a specifies styles of the link.

#about a:hover specifies what happens when user mouse overs the link.

#about_h currently at girlfriend's laptop so no firebug here, but just my guess here its the new div name for #about when link is active (goes down just above the content).