- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hey,
I am having some problems with a navigation I am creating.
Basically I have a parent header with a fixed width of 350px and my nav with a width of 100%.
Within my nav there are li elements which when I set the padding for (as the class named .nav-big) it seems to be basing off the full document rather than just the nav and therefore is expanding across the page – this is why the padding at the moment is;
header {
float: left;
width: 350px;
height: auto;
margin-top: 1%;
margin-right: 1%;
outline: 1px solid #000;
}
nav {
float: left;
margin: 0;
padding: 0;
width: 100%;
outline: 1px solid yellow;
}
nav ul{
position: relative;
list-style: none;
margin: 0;
padding: 0;
text-align:center;
}
nav ul li {
margin: 6% 0;
padding: 0;
display: block;
font-family: “Kalinga”;
font-size: 28pt;
color: #7f7f7f;
position: relative;
}
nav ul h3 {
outline: 1px solid red;
margin: 0;
padding-top: 10%;
line-height: 0;
font-size: 20pt;
z-index: 100
}
.nav-big {
margin: 0;
outline: 1px solid blue;
position: relative;
padding: 15% 20% 0 20%;
z-index: 1000
}
Thanks :)
I done this [codepen](http://codepen.io/unasAquila/pen/qsnky) and it seems to do exactly what your asking it to do in the css so could you replicate with a new codepen