seany123 Posted December 16, 2014 Share Posted December 16, 2014 Hello, im new to css and i need a little help creating a navigation bar which is horizontal, i want it to fill its containing divs height. here is the simple html <div id="nav-bar"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> here is the css being used #nav-bar { background-color: #494c51; width: auto; position: relative; height: 44px; border-style: solid; <!-- background-color: #242528; This is the color of the hover --> border-color: #000; border-width: thin; } #nav-bar ul, li { padding: 0; list-style-type: none; display: inline; line-height: 44px; <!-- this aligns the ul/li into the middle virtically --> height: 44px; border-bottom-color: red; border-style: solid; } so #nav bar has a height of 44px which is working, so i assumed i could set height of #nav-bar ul, li to 100% and it would work, but it doesnt, i have also tried putting these values in a new div but that didnt work either. can anyone help me with this? thanks Link to comment https://forums.phpfreaks.com/topic/293126-make-ulli-stretch-100-of-containing-div-height/ Share on other sites More sharing options...
cyberRobot Posted December 17, 2014 Share Posted December 17, 2014 The following will apply the styles to the <ul> tag in the "nav-bar" <div>...and to every <li> tag on your page: #nav-bar ul, li { Instead, I recommend splitting the styles. You could try something like this: #nav-bar ul { list-style: none; margin: 0; padding: 0; } #nav-bar li { display:inline-block; line-height: 44px; height: 37px; border: 4px solid #000000; border-bottom-color: red; } Hopefully the above also answers your question. Also note that CSS comments are different than the ones in HTML. More information can be found here: http://css-tricks.com/snippets/css/comments-in-css/ Link to comment https://forums.phpfreaks.com/topic/293126-make-ulli-stretch-100-of-containing-div-height/#findComment-1499845 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.