I'm trying to start with a simple website and I want to know how I can align my navigation bar. My navigation bar is in the form of a list. I'm not sure why the list's position seems a bit out of place when implementing it. So far, I've double-checked for closed tags and any modifications in styling my list. I expected the output of the page to have an even gap at its borders, but the list is instead crooked by a few pixels.
#mainnav {
margin: 0 auto;
padding: 0;
text-align: center;
}
#mainnav ul {
display: inline-block;
list-style: none;
}
#mainnav ul li {
float: left;
margin: 0px 20px 0px 0px;
/* spacing in-between the boxes */
padding: 10px 20px 10px 20px;
/* spacing inside the boxes */
}
<nav>
<div id="mainnav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>VPNHOLE</li>
<li>PROJECTS</li>
<li>MISC.</li>
</ul>
</div>
</nav>
Edit: Attached is a short video showing the change in the bar's position with and without setting padding to zero (from marked answer). It is somewhat difficult for me to visually represent the position of the navigation bar (the gray background probably gets pushed off the screen when aligning). https://youtu.be/J5XwdJn1pDA
If I correctly understood the task - it should help
ul{
padding: 0;
}
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I can't figure out how to remove this space from my navbar and the picture..
The CSS code I have for the navbar and the image is:
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner is the image id.
And the html goes like so:
<header>
<img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
<h1 id="pagetitle">Cycling Tours</h1>
<nav>
<ul>
<li>About Us</li>
<li>Ask Us</li>
<li>Destinations</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Seminars</li>
<li>Trip Prep</li>
</ul>
</nav>
</header>
Looking for a universal fit as I have other things with white space between them as well.
Thanks.
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
what space you are talking about ?
Keep in mind h1 by default has white space around it
every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.
h1 {
margin: 0;
padding: 0;
}
look at this jsfiddle https://jsfiddle.net/zn7wtdLp/
This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.
Nav Items
There are two popular solutions:
Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).
So my CSS would look something like this:
ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
Images
If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:
header img {
display: block;
margin: 0 auto;
}
The problem is display:inline. This treats the elements like text, so if you have
<li>...</li>
<li>...</li>
you have the problem you mentioned, because the linebreaks cause a space.
Try to put your list elements like this:
<li>...</li><li>...</li>
For other solutions see here
So I've center aligned the text "Jonathon Smith Photography". Directly below it in a different DIV, I've center aligned an inline list (my navbar) containing "Portfolio Contact Bio". However they appear to be centered at different points? The "Jon smith photography" text has no other properties to it. The list items in the navbar (not the navbar div itself) have a background color as well as padding above/below/left/right of it. However, when I disable the color/padding properties, the texts still appear to be centered at different points. Now I'm guessing the list's centerpoint that is off since it's a little more complex than the plain text. How do I get them to align properly?
HTML:
<div id="title">Johnathon Smith Photography</div>
<div id="navbar">
<ul>
<li>Portfolio</li>
<li>Contact</li>
<li>Bio</li>
</ul>
</div>
CSS:
#title {
text-align: center;
}
#navbar ul li {
background-color: #00225A;
display: inline;
list-style-type: none;
color: #fff;
padding-top: 0.2em;
padding-right: 1em;
padding-bottom: 0.2em;
padding-left: 1em;
}
#navbar {
text-align: center;
}
Add this:
#navbar ul {
padding-left: 0;
}
The ul has a padding in the left by default.
Simple horizontal nav bar for artist portfolio website. I am in the process of changing it from a jpg based site to actually coded, and need to match the nav bar on the following page:
http://cynthia-shaffer.com/animal.html
Notice "Natural Elements", "Animal Photos", and "Henna Tattoos" the text is stacked (2 lines as opposed to 1). I want to replicate this in my ul, but can't seem to figure it out.
my code
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Natural Elements</li>
<li>Animal Photos</li>
<li>Henna Tattoos</li>
<li>Murals</li>
<li>Supplementary</li>
<li>Non-Profit</li>
</ul>
</div>
CSS:
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#nav ul li { display: inline; }
#nav ul li a
{
text-decoration: none;
font-family:"Lithos";
font-size:12px;
color:c0944d;
padding: .3em 1em;
}
So the question is how to get the word "elements" to appear below "natural", without breaking the integrity of the list.
thanks in advance!!
Apply display:inline-block for the <a> tags and set the maximum desired width of a menu item using the max-width property, this will cause the text to automatically wrap when it exceeds the specified max-length
#nav ul li a {
text-decoration: none;
font-family:"Lithos";
font-size:12px;
color:c0944d;
padding: .3em 1em;
display:inline-block;
max-width:50px;
}
side note: it's better to apply display:inline-block while changing display from block, for aligning items horizontally - if you apply display:inline like you've applied to the <li> , the element will not accept width and height properties...
JSFiddle
I have a strange issue. Everything displays fine in both Chrome and IE, but not FireFox. See below:
The code for the navigation seen above is as follows
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</nav>
And the CSS
nav {
margin: 0 0 10px 0;
text-align: center;
background: #0054a6;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
nav li {
display: inline-block;
margin: 10px -4px 10px 0;
}
nav li a {
padding: 12px 75px;
text-decoration: none;
background: #0054a6;
color: #ffffff;
}
nav li a:hover {
background: #ffffff;
color: #000000;
}
Why is the container not the same height as it's contents? I'm not looking for a fix, just an explanation as to why it does this with my code.
You're seeing the effects of top and bottom padding on an inline element, your anchors. See this previous answer for some background. I've also made a little fiddle here which boils down your problem to something fairly obvious, I hope. (Basically, if the vertical padding exceeds the line-height on an inline element, the element can extend beyond the bounds of the container.)
So, your anchor elements are breaking out of their container, because they're inline, but with top and bottom padding set. To fix this (and as a bonus make their entire container clickable, rather than just the text) I'd turn them into blocks:
nav li a {
display: block; /* Fix breakout problem */
padding: 12px 75px;
text-decoration: none;
background: #0054a6;
color: #ffffff;
}
You should also wrap your li elements in a ul; they're not allowed to be children of the nav element.
(I'd probably consider getting rid of that wrapping div, too, and just targeting the nav element for your styling. I'm not sure it's adding anything. This JSFiddle is my final adjustment to your code.)
I have a simple drop down menu.
When i add other elements under the menu (like text for exemple) they are still visible even if the drop down menu is oppened. The drop down menu is somehow merged with the content under it, resulting in ugly superimposed content.
Here is my css :
ul#menu, ul#menu ul{
margin: 0px;
padding: 0px;
}
ul#menu li{
width: 160px;
margin: 4px 0px 0px 4px;
padding: 5px;
list-style: none;
position: relative;
float: left;
background: #eef;
border: #bbf solid 1px;
}
ul#menu li ul li{
width: auto;
margin: 4px 0px 0px 0px;
float:none;
display: none;
background: #ddf;
border: #bbf solid 1px;
}
ul#menu li:hover ul li{
display: block;
}
ul#menu li:hover{
background: #ddf;
}
ul#menu li ul li:hover{
background: #ccf;
}
ul#menu li img{
margin-right: 10px;
}
Here is my html :
<ul id="menu">
<li>
<span><img src="images/logos/file_small.png">Bilan</span>
<ul>
<li id="creer"><img src="images/logos/add_small.png">Créer</li>
<li id="consulter"><img src="images/logos/other_small.png">Consulter / Modifier</li>
</ul>
</li>
<li>
<span><img src="images/logos/chartbar_small.png">Extract</span>
<ul>
<li><img src="images/logos/pdf_small.png">Pdf</li>
<li><img src="images/logos/xls_small.png">Excel</li>
</ul>
</li>
<li>
<span><img src="images/logos/first_small.png">Module Conso/Gene</span>
</li>
</ul>
I hope you can help. :)
http://jsfiddle.net/chrisvenus/GRfDT/2/ is a fiddle with your modifications and a solution.
What I did was firstly altered the margin to make sure the text appeared in the right place (ie increasing the top margin).
Then I modified the z-index on that text to put it behind the menu stuff. You could also have modified the z-index of the menus and it might even be best practice to put a z-index on both.
<div style="position: absolute; margin-top: 50px; z-index: -1"> SOME CONTENT </div>
z-index is basically designed for exactly this purpose - determining what order the content is in from background to foreground. For more information on it see http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index
Also I shoudl note that kinakuta, although replying before your problem was fully explained, is right about the fact that you should probably be making your menu absolute rather than the content that follows it. Mainly because I suspect it will mean neater HTML overall since it will stop you having to either have a container with all your other content or making far more things absolute than you want or worst case nto making everythign take it into account so some things get moved about or overlayed by your absoluted text in other ways...
something like this: http://jsfiddle.net/chrisvenus/GRfDT/3/ (the same as before but with some swaps about where the position: absolute is)
The main issue I see is that when your menu "displays" it's pushing things below it down. You want to set the position of the nested list to absolute to remove it from the flow of the page:
#menu li ul { position: absolute; }
This will make the menu appear over the text/content instead of pushing it down.
One more thing - you'll want to add some positioning to that same ul - left 0; and top 25px; (or something around there to fit how you want it to look.)