- This topic is empty.
-
AuthorPosts
-
February 20, 2013 at 11:01 am #42866johnjfMember
I’m trying to create a fluid layout, it’s my first one. Not sure if I’m understanding it correctly though.
When I create my layout I use percentages? such as
wrapper 100% max-width 980px.I set the rest of my divs id or classes with different percentages to fit such as header 100%, content 100% max width: 670px, sidebar etc;
I set the background color but it doesn’t appear. To do this do I add the overflow hidden?
I also have my navigation div which is .nav_main and I just put an unordered list in it with no class name. It has a drop down list but I’m having a problem styling it to work. This is what I have so far.
.nav_main {
clear: left;
float: left;
background: #b73434;
width: 100%;
overflow: hidden;
}.nav_main ul {
padding:0;
margin:0;
list-style: none;
background:#000;
height:36px;
}.nav_main ul li {
float: left;
position:relative;
}.nav_main ul li a, .nav_main ul li a:visited {
display:block;
color:#fff;
width:104px;
height:auto;
line-height:20px;
padding:10px;
text-align:center;
}.nav_main ul li a:hover {
display:block;
color:#000;
background:#FFF;
line-height:20px;
padding:10px;
}.nav_main ul li ul, .nav_main ul li:hover ul li ul {
display: none;
}.nav_main ul li:hover ul {
display:block;
position: absolute;
top:36px;
left:0;
height:auto;
}.nav_main ul li:hover ul li a {
display:block;
text-align:left;
border-bottom:1px solid #FFF;
}.nav_main ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:124px;
top:0;
}My problem is all I can see is the first link but the rest seem to be hidden behind my next div which will be my .content_main DIV.
What am I doing wrong and how do I get it to appear?
February 20, 2013 at 11:07 am #125414tomrogers123MemberAny chance of a [CodePen](http://codepen.io/) so we can fix it and send back to you?
February 20, 2013 at 12:20 pm #125402Paulie_DMemberHere’s one I have saved :http://codepen.io/Paulie-D/pen/29afe4b2f00f534fe238ffec0f855384
I have given each level of nav uls its own class for simplification of the CSS.
Also, it uses ‘inline-block’ for the list items instead of floats as I am convert to that method.
February 20, 2013 at 1:59 pm #125428johnjfMemberThanks for the help guys and thanks Paulie_D. This navigation works perfectly.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.