First of all let me apologize for asking such a newbie question. I have tried to search on the site for similar questions/answers but none of the fixes have worked. So here goes:
I have created a horizontal navigation bar from a popular YouTube tutorial and have got everything working just fine with the exception of one problem: I would really like to center this navigation bar which is within the navigation containing div. I know there must be an easy solution, but for the life of the edges Figured out.
I also had another question about the CSS: why did the author make CSS rules that included the ul tag before the id tag. For example, why did he write ul#navMenu instead of #navMenu ul?
Here's the HTML:
<body>
<div id="wrapper">
<div id="header"> <h1>The New Site
</h1></div>
<div id="navigation">
<ul id="navMenu">
<li>Home</li>
<li>hyperlink 2
<ul class="sub1">
<li>hyperlink 2.1</li>
<li>hyperlink 2.2
<ul class="sub2">
<li>hyperlink 2.2.1</li>
<li>hyperlink 2.2.2</li>
<li>hyperlink 2.2.3</li>
</ul>
</li>
<li>hyper link 2.3</li>
</ul>
</li><!--close hyperlink 2 -->
<li>hyperlink 3</li>
<li>hyperlink 4</li>
<li>hyperlink 5</li>
<li>hyperlink 6</li>
</ul><!--close main ul – navMenu -->
</div><!--close of navigation -->
<div id="main-text"> Etc........
And here's CSS: *Note: I had to put a . Before all of the ul#mainNave rules so that they would show up.
.* {
margin: 0px;
padding: 0px;
}
.body {
background-color:#FF9;
}
#wrapper {
width: 1000px;
margin: 0px auto;
padding: 0px;
background-color:#FCC;
}
#header {
margin: 0px;
padding: 0;
width: 100%;
height: 100px;
float: left;
background-color:#FEA601;
}
#navigation {
margin: 0px;
padding: 0px;
width: 100%;
height: 50px;
float: left;
vertical-align: middle;
background-color:#7979FF;
}
/*CSS for navigation hyperlinks*/
#navigation {
margin: 0 auto;
}
.ul#navMenu {
list-style-type: none;
}
.ul#navMenu, ul.sub1, ul.sub2 {
list-style-type: none;
font-size: 10pt;
}
.ul#navMenu li {
width: 135px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
.ul#navMenu a {
text-decoration: none;
display: block;
width: 135px;
height: 25;
line-height: 25px;
background-color: #000;
border: 1px solid #FFF;
border-radius: 0px;
color:#FFF;
}
.ul#navMenu .sub1 a {
margin-top: 0px;
}
.ul#navMenu .sub1 li {
}
.ul#navMenu .sub2 a {
margin-left: 0px;
}
.ul#navMenu li:hover > a {
background-color:#666;
}
.ul#navMenu li:hover a:hover {
background-color: #666;
}
.ul#navMenu ul.sub1 {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
.ul#navMenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 137px;
}
.ul#navMenu li:hover .sub1 {
display: block;
}
.ul#navMenu .sub1 li:hover .sub2 {
display: block;
}
/*end of navigation rules*/
/*Body rules*/
#main-text {
background-color:#FEC94B;
width: 970px;
Padding: 15px;
Height: auto;
float: left;
}
#footer {
width: 100%;
float: left;
height: 50px;
line-height: 50px;
background-color: #000;
color: #FFF;
text-align: center;
font-size: 10px;
}
#wrapper #navigation #navMenu {
text-align: center;
}
Thank you so much in advance and I greatly look forward to solving this problem.
Doug
Edit: I'm not sure what wrong but a lot of the CSS code did not show up – it all started with ul#navMenu.... Which happen to be part of my question as to why the author was writing CCS code like this.
JSFIDDLE
The reason it isn't centered at the moment is in your css, here:
ul#navMenu li {
...
float: left;
}
Change it to inline-block, like so:
ul#navMenu li {
display: inline-block;
/* old IE hack to get inline-block to work */
zoom: 1;
*display: inline;
}
Add text-align to the container:
ul#navMenu {
...
text-align: center;
}
And that will allow them to center, instead of forcing them left. Ensure the parent container(s) have text-align: center; on them.
See the updated jsFiddle
Finally, css selectors:
ul#navMenu - selects the ul that has the ID of navMenu
#navMenu ul - selects the ul that is the child of an element with the id of navMenu
ul#navMenu - ensures it only addresses any ul elements with id of navMenu, but could also be written simply #navMenu
ul#navMenu li - selects all the li elements that are the child of the ul with the id of navMenu - could also be written #navMenu li, since an ID should only occur once on a page.
Related
I'm very new to Dreamweaver, CSS and HTML. So I apologise if there's any obvious mistakes or solutions.
I'm trying to figure out how to separate words in my navigation menu. Because they always seem to be centred. I've tried adding "word-spacing" and other adjustments but wasn't able to come to a solution.
Just wondering if anyone's able to offer any suggestions in how I can fix this.
Any help is much appreciated,
Thank you.
CSS
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
float: left;
text-color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
width: 100%;
}
HTML
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
Remove width:100% from li so menu start from left side
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
float: left;
color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
}
ul li + li{
margin-left:10px;
}
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
or You want menu start from center remove float:left from li and add display: inline-block
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
display: inline-block;
color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
}
ul li + li{
margin-left:10px;
}
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
Trying to apply styles to all of the elements except the last one. But it doesn't work. Tried all this:
ul li:not(ul li:nth-last-child)
ul li:not(nth-last-child)
ul li:not(:nth-last-child)
ul {
list-style: none;
margin: 0;
float: left;
width: 100%;
text-align: center;
}
ul li {
height: 54px;
width: 54px;
border-radius: 60px;
}
/* /// THIS PART IS NOT WORKING PROPERLY
RIGHT NOW IT REMOVES MARGIN FOR ALL THE ELEMENTS/// */
ul li:not(ul li:nth-last-child) {
margin-left: 10px;
}
.red {background: #fc4c4f;}
.blue {background: #4fa3fc;}
.yellow {background: #ECD13F;}
<ul>
<li class="red selected"></li>
<li class="blue"></li>
<li class="yellow"></li>
</ul>
try the following. I assume that you dont want to apply the css to the last ul li element.
ul > li:not(:last-child){
margin-left: 15px;
}
:nth-last-child actually expects a parameter which to look for.
CSS3 :nth-last-child() Selector
Trying to apply styles to all of the elements except the last one.
Why not use last-child?
ul {
list-style: none;
margin: 0;
float: left;
width: 100%;
text-align: center;
}
ul li {
height: 54px;
width: 54px;
border-radius: 60px;
}
ul li:not(:last-child) {
margin-left: 10px;
}
.red {
background: #fc4c4f;
}
.blue {
background: #4fa3fc;
}
.yellow {
background: #ECD13F;
}
<ul>
<li class="red selected"></li>
<li class="blue"></li>
<li class="yellow"></li>
</ul>
i am trying to make a responsive navigation bar with these 4 elements. however, if i drag the browserwindow to a certrain point it starts placing one of the 4 below the rest. but i dont know what i'm doing wrong.
The HTML:
<div id="nav">
<ul>
<li class="blue">Home</li>
<li class="blue">Trailer</li>
<li class="red">Gallery</li>
<li clas="red">Contact Us</li>
</ul>
</div>
The CSS:
#nav {
width: 100%;
background-color:transparant;
}
#nav ul {
width: 85%;
max-width: 1200px;
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center;
}
#nav ul li {
display: inline-table;
width: 24%;
padding: 4px;
background-color:#242424;
border-radius: 5px;
}
#nav ul li a {
color:white;
text-decoration: none;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
border-radius: 5px;
}
You are maybe having problems with your padding.
For that, add the box-sizing property in your lis and the padding will be included in the width of the element, like:
#nav ul li {
display: inline-table;
width: 24%;
padding: 4px;
background-color:#242424;
border-radius: 5px;
box-sizing: border-box;
}
Fiddle: http://jsfiddle.net/begyu5v3/
Info: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
And there's those undesirable white spaces between your lis. In this link, there are some ways to avoid this problem, like font-size:
#nav ul {
font-size: 0;
}
#nav ul li {
font-size: 16px;
}
Give it a try and let me know if it helps!
hey guys I am having a few issues with my menu, theres a weird padding that pushes my menu to the right a few pixels but I managed to fix it on the main parents, originally they were both pushing out the same amount.
Pic
and heres a better view
I am running through my css and adding padding-left:0px;
Heres my code if anyone can assist me.
<div class="css_menu_two_line">
<ul class="two_line_menu">
<li>Menu 1</li><li>
Menu 2</li><li class="current">Menu 3 SHOW
<ul>
<li>Submenu 3-1</li>
<li>Submenu 3-2</li>
<li>Submenu 3-3</li>
<li>Submenu 3-4</li>
<li>Submenu 3-5</li>
</ul>
</li><li>Menu 4</li><li>Menu 5</li>
</ul>
</div>
css:
.css_menu_two_line {
width:100%;
overflow:hidden;
}
.two_line_menu {
padding-left: 0;
position: relative;
margin-bottom: 40px;
background:#77f url('img_bg.gif') repeat-x;
}
.two_line_menu a {
display: block;
color: #fff;
text-decoration: none;
padding:10px;
}
.two_line_menu li:hover a {
color: #fff;
background: #aaf;
}
.current a {
color: #fff;
background: #aaf;
}
.two_line_menu li { display: inline-block; }
.two_line_menu li ul { display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px; }
.two_line_menu li:hover ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px;
}
.two_line_menu li ul li:hover a { color: #000; }
fiddle: http://jsfiddle.net/uf2cnakc/
You need to take away the padding from .two_line_menu li ul. To do this we can add the following style padding: 0;.
A lot of HTML elements have default styles, so beware of this.
Your CSS for this class should now look something like this:
.two_line_menu li ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px;
padding: 0; /* Just added */
}
Demo Here
Your CSS contained display:inline which has block child element and position absolute as well. Try this CSS property.
.two_line_menu li { display: block; float:left; }
.two_line_menu li ul{ position:absolute; left:0; padding:0; width:100%; background: #aaf; top:38px; }
.two_line_menu li ul li{ float:left;}
I've got a list here for my page's footer, that I want displayed horizontally.
But because I've turned it into an inline list to go horizontally, the background images get cut off vertically. The biggest one is 27px high.
So I'm stuck.. I know why the following is doing what it's doing. But how do I get around it?
Here's the html:
<div id="footer">
<ul>
<li id="footer-tmdb">Film data courtesy of TMDB</li>
<li id="footer-email">Contact Us</li>
<li id="footer-twitter">Follow Us</li>
</ul>
</div>
and the CSS:
#footer ul {
height: 27px;
}
#footer ul li {
display: inline;
list-style: none;
margin-right: 20px;
}
#footer-tmdb {
background: url('../images/logo-tmdb.png') no-repeat 0 0;
padding-left: 140px;
}
#footer-email {
background: url('../images/icon-email.png') no-repeat 0 3px;
padding-left: 40px;
}
#footer-twitter {
background: url('../images/icon-twitter.png') no-repeat 0 0;
padding-left: 49px;
}
Here's what it looks like:
As you can see, half of the images are cut off.
The simpler the solution, the better, please.
#footer ul li {
display: block;
float: left;
height: 27px;
list-style: none;
margin-right: 20px;
}
Use inline-block
#footer li {
height: 27px;
display: inline-block;
}
Try this:
#footer ul {
overflow: auto
}
#footer ul li {
display: block;
list-style: none;
margin-right: 20px;
float: left;
}
Try this:
#footer li,
#footer ul {
height: 27px;
}