I would like to position the image and the navigation links so that they are vertically aligned with the HeadContainer and each other.
HTML
<header>
<div id="HeadContainer">
<img src="favicon.png" id="title"/>
<nav>
<p>Home</p>
<p>About</p>
<p>Portfolio</p>
<p>Contact</p>
</nav>
</div>
</header>
CSS:
#HeadContainer {
width:70%;
margin: 0 auto;
display: block;
}
header {
height: 60px;
}
nav {
float: right;
}
nav p {
display: inline;
margin-left: 10px;
font-size: 1.2em;
}
#title {
float: left;
width: 40px;
}
At the moment they are not aligned. How would I align the paragraph tags in the nav with the image?
You should know that inside a navigation you'll hardly have <p> elements. I don't see any reason Google also. So go with: http://jsbin.com/melag/2/edit
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
nav {
float: right;
}
nav ul{
list-style:none;
}
nav ul li{
display:inline-block;
vertical-align:middle;
}
Roko's answer is the tried and true method. I recommend it too. I want to point out that, in HTML 5, the <nav> tag is intended to replace a modified unordered list for navigation menus.
W3 Schools <nav> tag page
Related
I'm trying to add a site banner above the menu on my site using a simple img tag but whenever I do so the menu just overlaps the image. What I want to achieve is the menu to be pushed down by the image above it so it appears right under it.
HTML:
<header>
<img src="site_logo.jpg" alt="">
<img src="banner_small.png" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page
</li>
<li>Classes
</li>
<li>Game modes
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
My first img is for the site logo and the second one is in the menu. I want to position the first img to be on top of the site and push the menu down
CSS:
header {
height: 50px;
background: #333333;
}
header nav {
display: inline-block;
vertical-align: middle;
}
header nav ul {
margin: 0;
padding: 0;
}
#banner,
header ul li {
display: inline-block;
vertical-align: middle;
}
header nav > ul > li {
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
Try to put the images inside div elements:
<div id='x'><img src="site_logo.jpg" alt=""></div>
<div id='y'><img src="banner_small.png" alt="" id="banner"></div>
Then if you want to increse ou decrease the space between elements use the Margin property:
x{margin-bottom:...px;}
y{margin-top:...px; margin-bottom:..px;}
I'm trying to get my menu working with an image on the left side. For some reason whenever I try to align the image in same line with the menu it's not working out. This is what the html looks like, I can't get the CSS working at all. It's either throwing the menu under the image or the background disappears and the content overlaps the menu but the image is in the right place. The image is 50px in height as well so it shouldn't be a problem.
HTML:
<div>
<img src="logo_small2.png" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page</li>
<li>Classes</li>
<li>Game modes</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
header div {
height: 50px;
background: #333333;
}
#banner,
header ul li {
display: inline-block;
}
header nav > ul > li{
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
What happens now is that the banner is in place over the background of the div and the menu is under the banner and the background in a new line. If I replace the img with a simple h1 it works as a charm >.> I'm clueless, please help
Your CSS does not match the HTMl, there is no header shown.
Assuming that the div is, in fact the header, the nav needs to be inline-block too I suspect. It's currently block level and so 100% wide.
Then you can just align the elements.
header {
height: 50px;
background: tomato; /* for demo only */
}
header nav {
display: inline-block;
vertical-align: middle;
}
header nav ul {
margin: 0;
padding: 0;
}
#banner,
header ul li {
display: inline-block;
vertical-align: middle;
}
header nav > ul > li {
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
<header>
<img src="http://www.fillmurray.com/200/50" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page
</li>
<li>Classes
</li>
<li>Game modes
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Possible reason is the width of the image not allowing the inline-block comand:
try this:
img{ float:left; width:50%; vertical-align:middle;}
ul{float:right;width:40%;vertical-align:middle;}
I'm trying to right-align the nav without using float. I read somewhere online that I could set the parent element to text-align: right, but that didn't work when I tried it. I appreciate any help for what I know is an easy problem but one that has confounded me most of the day.
header {
background-color: #AEB7CC;
padding: 0 10px;
}
nav {
display: inline-block;
}
nav li {
display: inline;
}
<header>
hi
<nav>
<ul>
<li>Home
</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</header>
https://jsfiddle.net/a6a367vp/
The solution is that you have to add text-align: right; to the parent element which is the header.
header {
text-align: right;
...
}
Then add display: inline-block; to the children (nav) and the children will be aligned right.
Another solution would be to set a width to nav and a:
header nav {
with: 80%;
}
header a {
width: 20%;
}
header nav ul {
text-align: right;
}
header nav ul li {
display: inline-block;
}
if you want the nav to move to the right, simple method is float:right but since you don't want to use this then text-align:right would place it on right if nav has 100% width for that row.
Therefore, you can do either of these two things.
right now using CSS you can make
nav{width:98%; text-align:right};
or for better results, use JS
var anchorTopWidth = $("a").width() / $('a').parent().width() * 100;
requiredWidth = 100-anchorTopWidth;
$('nav').css({'width': requiredWidth+'%', 'text-align':'right'});
Fiddle: https://jsfiddle.net/a6a367vp/3/
One possible and recommended solution is as follows:
Put the <nav> in a <div> element and then use the text-align property for the specified div. like this:
Html:
<div class="nav_menu">
<nav>
<ul>
<li>Home</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</div>
CSS:
.nav_menu{
text-align: right;
}
Update:
Put the <a> tag in another div and then specify the width for the selected divs. Your final code should be like this:
HTML:
<header>
<div class="atag_div">
hi
</div>
<div class="nav_menu">
<nav>
<ul>
<li>Home</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background-color: #AEB7CC;
padding: 0 10px;
}
nav li {
display: inline;
}
.atag_div{
width: 20%;
display: inline-block;
}
.nav_menu{
width: 78%;
display: inline-block;
text-align: right;
}
jsfiddle:
https://jsfiddle.net/pokies/7Lnfq7es/
On my website, I want a horizontal menu, which is centered on the page. So, the whole menu should be centred.
At this moment, I can create a horizontal list, but the list still stays at the left side. I want it centered.
Can someone please tell me what to change in my code to center it?
My HTML:
<div class=menu>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
My CSS:
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
div.menu{
display: table;
}
div.menu a {
display: block;
margin-left: auto;
margin-right: auto;
width: 60px;
color: navy;
background-color: #FF0000
}
li{
float: left;
}
Add margin:auto to your div.menu to accomplish this
div.menu{
display: table;
margin:auto;
}
JSFiddle: http://jsfiddle.net/0xb7j9zc/
Check out this fiddle http://jsfiddle.net/ByShine/33sz6nrt/4/
HTML
<div class="menu">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
CSS
ul {
text-align: center;
}
ul li {
display: inline-block;
}
I'm assuming you wish to center the menu (align it to the middle of the page). One approach, and I'm sure there's a few out there, is to wrap the 'menu' div into another div tag and set the align attribute to center, like so:
<div align="center">
<div class=menu>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
Here's an example: http://jsfiddle.net/q9ae01qe/
I'm struggling with this problem for over an hour and can't get it right, I know these are basics but none solution from google helped, I don't understand what's the problem. I got that navigation bar and I want to vertically center logo and list elements inside it:
<nav id="mainMenu">
<img class="logo" src="images/logo.png" alt="logo" />
<ul id="menu">
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
css:
http://klaunfizia.pl/damian/style.css
Here's the demo: http://klaunfizia.pl/damian/
#edit:
When I put margin-top:50% for #menu why it refers to entire body instead of nav element?
Notice - the class name are different. From your existing style, remove: #mainmenu, #menu, and #menu li. Here is an example the code -> DEMO
Here is your new html:
<ul class="nav"> <img class="logo" src="images/logo.png" alt="logo" />
<li>Home
</li>
<li>About me
</li>
<li>Portfolio
</li>
<li>Contact
</li>
Here is your new CSS:
.nav {
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
background-color:red;
}
.nav li {
display:inline;
}
.nav a {
display:inline-block;
padding:10px;
text-decoration: none;
color: #000000;
}
Since your "nav" element is fixed try wrapping your "ul" element in a div and setting the css of the margin to the distance you desire.
<div style="margin-top:20px">
<ul id="menu">
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
The vertical spacing of block elements can be a bit tricky as they were never intened to behave that way. So some tricks are always required.
You can center them to the middle by making the list and the logo's position relative, than giving them a 50% top and a negative margin with the half of their height. So just add these properties to the existing ones:
.logo {
position: relative;
top: 50%;
margin-top: -25px;
}
#menu {
position: relative;
top: 50%;
margin-top: -10px;
}
use this:
#mainMenu {
height: 80px;
width: 100%;
background-color: #F00;
position: fixed;
line-height: 80px; /* added */
}
#menu {
float: right;
margin-right: 16%;
display: inline-block; /* added */
}