- This topic is empty.
-
AuthorPosts
-
March 24, 2012 at 11:40 pm #37327
cpyle0819
ParticipantHello,
I’ve been investigating the nav bar on this oh so wonderful site and for learning purposes (I’ve no plans to reproduce it, it’s for my own personal education) I’ve been trying to recreate it. I’ve been updating this post as I go to kind of keep a record for myself. I think I’ve almost got this bad boy figured out but I’ve got one more little hitch. On whatever page that’s currently active, under the nav button (Articles for this example), there is a little bar of a slightly different color that exists to highlight that page as active. I see basically how it was put there but mine is not showing up. The top CSS is (what I deem to be at least) the relevant bit while the bottom is its entirety.
Thanks!HTML
test site
CSS (Relevant Bits)
.main-nav a:before {
content:"";
display:block;
height:40px;
background: url(../images/nav-sprite.png) top center no-repeat;
}
.main-nav li:before {
content:"";
position:absolute;
top:100%;
left:0;
right:0;
height:8px;
}
All of it
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
html {
background:url(../images/bglines.png);
margin:0;
padding:0;
}
header {
background-color:rgba(0, 0, 0, 0.65);
display:block;
-webkit-box-shadow:inset 0 -5px 8px -5px rgba(0, 0, 0, 0.65);
overflow:hidden;
}
div {
display:block;
}
header .inside {
width:80%;
margin:0 auto;
position: relative;
}
body {
font: 16px "myriad-pro-1", "myriad-pro-2", "Lucida Grande", Sans-Serif;
line-height:1.4;
color:#333;
overflow-x: hidden;
margin:0;
}
nav {
display:block;
}
a {
color:#fff;
}
.main-nav {
list-style:none;
}
.main-nav a:before {
content:"";
display:block;
height:40px;
background: url(../images/nav-sprite.png) top center no-repeat;
}
.main-nav a {
border-top: 0;
display:block;
text-align:center;
position:relative;
z-index:2;
padding:5px 10px 10px;
text-decoration:none;
text-transform:uppercase;
letter-spacing:0.5px;
overflow:hidden;
font: bold 15px "kulturista-web-1","kulturista-web-2",Serif;
}
.main-nav-wrap {
display:block;
}
.main-nav li {
float:left;
width: 12.5%;
position:relative;
}
.main-nav span {
display:block;
text-align:center;
font-size:9px;
white-space:nowrap;
}
.main-nav li:before {
content:"";
position:absolute;
top:100%;
left:0;
right:0;
height:8px;
}
.articles a{
-webkit-transition: background-color 0.4s ease;
}
.home .main-nav .articles a {
color:#000;
}
.home .main-nav .articles, .articles a:hover {
background:#F90;
-webkit-transition: background-color 0.1s ease;
}
.home .main-nav .articles:before{
background:#cf7000;
}
.forums a:before {
background-position:center -40px;
}
.forums a{
-webkit-transition: background-color 0.4s ease;
}
.forums a:hover {
background:#F03;
-webkit-transition: background-color 0.1s ease;
}
.snippets a:before {
background-position: center -80px;
}
.snippets a{
-webkit-transition: background-color 0.4s ease;
}
.snippets a:hover {
background:#98bf0d;
-webkit-transition: background-color 0.1s ease;
}
.videos a:before {
background-position: center -120px;
}
.almanac a:before {
background-position: center -160px;
}
.gallery a:before {
background-position: center -200px;
}
.downloads a:before {
background-position: center -240px;
}
.deals a:before {
background-position: center -280px;
}
}March 29, 2012 at 6:32 pm #100233Participantbump (Same questions, I rephrased myself and I’ve also come a good deal further in the coding since the original post.)
March 29, 2012 at 8:17 pm #100237TheDoc
MemberIt’s because all of your items inside of the header are being floated (thus taken out of the flow of the document).
A quick fix is to add overflow: hidden; to the header.
March 29, 2012 at 8:18 pm #100238chrisburton
Participant@TheDoc has your answer
Also, in your CSS, make sure you close with a semi-colon (see background)
.main-nav a:before {
content:"";
display:block;
height:40px;
background: url(../images/nav-sprite.png) top center no-repeat
}March 29, 2012 at 8:24 pm #100241ParticipantOverflow:hidden fixed it, thanks!
And thanks for pointing out the background “;”, it was at the end of the properties so it wasn’t hurting anything….yet.March 29, 2012 at 9:54 pm #100246ParticipantBump (almost got it and I’ll stop pestering the community :)
March 29, 2012 at 10:01 pm #100249ParticipantExpress your problem
March 30, 2012 at 7:42 am #100290ParticipantI updated the link above to show what I have and what I want.
March 30, 2012 at 10:41 am #100310ParticipantUnfortunately doing that expands my header down with it.
http://coreypyle.vacau.com/March 30, 2012 at 11:48 am #100313xpy
ParticipantActualy you need to remove overflow:hidden from the header and add some height…
header{ background-color: rgba(0, 0, 0, 0.65);
display: block;
height: 81px;
width: 100%;}March 30, 2012 at 1:45 pm #100314ParticipantThat’s working fine for the preview in the browser but not working when it’s live.
Uh, scratch that. Had an upload issue. Working now, thanks xpy and everyone else.March 30, 2012 at 2:46 pm #100326ParticipantFinished it if anyone was interested. :)
Finished Nav -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.
