Take a look at this website I am working on: new.AudioManiacProductions.com
A screenshot from Dreamweaver showing the divs can be found here: new.AudioManiacProductions.com/images/stack.png
Notice how to navigation bar is not centered and the "home" has an intent on the left side.
I want the nav bar to stretch the whole span of it's parent container and be centered both vertically and horizontally.
Here's my CSS for the navigation section of the page, the nav list item, and the links.
#nav {
width: 100%;
height: 40px;
margin: 0 auto;
padding: 0px;
text-align: center;
color: #FFF;
list-style: none;
line-height: auto;
verticle-align: middle;
}
#nav li {
padding: 0px;
display: block;
width: 20%;
list-style-type: none;
float: left;
text-align: center;
overflow: hidden;
line-height: auto;
verticle-align: middle;
}
#nav li a {
font-size: 18px;
font-weight: 600px;
text-decoration: none;
font-weight:800;
color:#FFF;
}
#nav li a:hover, a:visited {
color: #00F;
}
And here is my HTML:
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Packages</li>
<li>Quote</li>
<li>Contact Us</li>
</ul>
</div>
Any help is greatly appreciated!
Browsers set padding-left by default on UL tags. Remove the padding and that should help out.
#nav ul {
padding-left: 0;
}
or just clear all padding:
#nav ul {
padding: 0;
}
Related
Okay after a lot of googling I finally found out how to centre the menu links in the middle of the nav bar. After that I came across another problem...adding a logo in the navigation bar.
My problem is, the logo doesn't come into the navigation bar, it instead goes above the bar.
I would like to have the logo floating to the left in the nav bar.
I have tried a few things, including adding display: inline-block/inline to all the main elements, but no difference. Though I tried adding display: inline to the nav ul, but the background of the nav bar disappears (see second image) and I can't add a background via adding height and width.
P.s Excuse me If there are few amateur mistakes, I have only started to code a few months ago.
Thanks for your time!
How the nav bar looks now:
How the nav bar looks with display: inline;
Here is my HTML and CSS:
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
<nav>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"></img>
<ul>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
Just insert it inside your ul.
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
The easiest way is to probably do a position:absolute
https://jsfiddle.net/fj1r6b1e/
#logo {
height: 50px;
width: auto;
position:absolute;
}
Also, img tag should be written like this <img src="..." /> instead of <img></img>
Give the logo img position: fixed. This will not affect the position/centering of the menu items.
https://jsfiddle.net/kjmm3du5/
Been trying to get this to work for a while now. I'm trying to create the menu for my new site, Ive set up the nav, ul, and li tags. Naturally, I have the actual buttons slightly larger than the text displaying, and I wish to have the A fill out the LI tag.
nav {
width: 100%;
min-width: 800px;
background-color: #EDEDED;
}
nav a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
nav ul {
list-style: none;
margin: auto auto auto 10vw;
height: 2em;
display: block;
}
nav ul li {
display: inline-block;
background-color: #DEDEDE;
vertical-align: middle;
padding: 0 50px 0 50px;
height: 2em;
line-height: 2em;
}
nav ul li:hover {
background-color: #FF0000;
}
<nav>
<ul>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
</ul>
</nav>
I feel like ive tried everything in:
How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?
Stretching <a> tag to fill entire <li>
Expand an <a> tag to fill the space
and I really feel like my code should give the same result. Can someone please point out what mistake I've made?
You had the right idea by adding display:block on the anchors, however the padding on your list item was affecting the result. Move that padding onto the anchors and you're all set.
nav {
width: 100%;
min-width: 800px;
background-color: #EDEDED;
}
nav a {
color: #000;
text-decoration: none;
height: 100%;
width: 100%;
display: block;
padding: 0 50px 0 50px;
box-sizing:border-box;
}
nav ul {
list-style: none;
margin: auto auto auto 10vw;
height: 2em;
display: block;
}
nav ul li {
display: inline-block;
background-color: #DEDEDE;
vertical-align: middle;
height: 2em;
line-height: 2em;
}
nav ul li:hover {
background-color: #FF0000;
}
<nav>
<ul>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
</ul>
</nav>
Remove the padding from the ul li:
nav ul li {padding:0px;}
If necessary add it to the nav ul li a:
nav ul li a {padding:0px 50px;}
I am styling a ul so that I can make a menu that sits on the left side. They will basically be square boxes with icons (using ionicons). The only problem I run into is, I can't get a perfect square and cannot center the icons. Here is what I have now.
.menu_simple ul {
margin: 0;
padding: 100px 0 0 0;
width:185px;
list-style-type: none;
position: fixed;
font-size: 60px;
}
.menu_simple ul li a {
text-decoration: none;
color: white;
padding: 10.5px 60px;
background-color: #F0541E;
display:block; width: 120px; height: 120px;
vertical-align: middle;
}
.menu_simple ul li a:visited {
color: white;
}
.menu_simple ul li a:hover, .menu_simple ul li .current {
color: white;
background-color: #d84b1b
;
}
Also, the html I am currently using looks is this:
<div class="menu_simple">
<ul>
<li><i class="ion-ios-person-outline" style="color:#FFFFFF;" href="#"></i></li>
<li><a class="ion-ios-baseball-outline" style="color:#FFFFFF;" href="#"></a></li>
<li><a class="ion-ios-calendar-outline" style="color:#FFFFFF;" href="#"></a></li>
<li><a class="ion-ios-plus" style="color:#FFFFFF;" href="#"></a></li>
<li><a class="ion-log-out" style="color:#FFFFFF;" href="#">a</a></li>
</ul>
</div>
It currently looks like this:
Thanks everyone. After a little research, this ended up working for me:
.menu_simple ul {
margin: 0;
padding: 100px 0 0 0;
width:185px;
list-style-type: none;
position: fixed;
font-size: 60px;
}
.menu_simple ul li a {
color: #FFF;
padding: 0px;
margin: 0px;
background-color: #F0541E;
display: block;
width: 120px;
height: 120px;
vertical-align: middle;
display: table-cell;
text-align: center;
}
Unless you have removed it with a normalize.css reset or something similar you will need to set padding and margin to zero for your li's in your css. By default li elements in an unordered or ordered list get some left margin to set them apart from their parent 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!
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;
}