I wrote following html page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">
/* styles for navigation */
#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
list-style:none;
margin: 0 auto;
width: 19.5em;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
float:left;
}
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>House</li>
<li>Baby</li>
<li>More</li>
<li>About</li>
</ul>
</div>
<!-- end #content -->
</body>
</html>
and the output is following
I made a small change in the section
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .5em;
}
changed the margin from .25em to .5 em and now it appears as following
If you see the about thing has come out, I am not clear as what thing has caused this behaviour, just by changing margin how can this happen?
as per suggestions below I tried changing
if I remove the width column, and in case I remove the float:left column then all the boxes are vertical
i.e.if I do
#nav ul {
list-style:none;
margin: 0 auto;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
}
it comes as following
why is this happening
Your #nav ul element has a width of 19.5em.
Your #nav ul li a elements have 0.5em padding and 0.5em margin. Width-wise this adds up to 2em + 2px (border) per element. This means that the 4 of your elements have 8em + 8px width without any text.
This allows a total of 11.5em width to contain the text found within your elements. If the cumulative text exceeds 11.5em then your elements will wrap onto the next line.
To fix this, simply increase the width of your #nav ul element:
#nav ul {
width: 25em; /* Adjust accordingly. */
}
That's because your #nav ul has a fixed width width: 19.5em.
Now if you change the width or padding or margin of the inside li elements you need to change the total widht of your ul.
By adding margin to your tags, you've increased the overall width of the elements inside of the , but you've still got your restricted to 19.5em.
You can either remove the width declaration from your or increase its width.
it's because the content is wider than the width of the containing element. adjust it so:
#nav ul {
list-style:none;
margin: 0 auto;
width: 19.5em; <- change this to 21em
}
on an aside, why not use html5 element instead of a div with an ID?
When you double your margin in EM, it will go passed the width that you have for the entire nav. Also, you have float:left hidden in your CSS. I would suggest getting rid of the float:left and doing display:inline-block instead, like so.
#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
display: inline-block;
list-style:none;
margin: 0 auto;
}
#nav ul li {
display: inline-block;
font-weight: normal;
text-transform: uppercase;
}
#nav ul li a {
display: inline-block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
HTML
<div id="nav">
<ul>
<li>House</li>
<li>Baby</li>
<li>More</li>
<li>About</li>
</ul>
</div>
The only changes you must to do is to apply this css agains you have:
#nav ul {
display: block;
list-style: none;
text-align: center;
}
#nav ul li {
display: inline-block;
text-transform: uppercase;
}
Related
I'm trying to use a horizontal list in a web part in SharePoint. I've gone over this code over and over and can't find the issue. For some reason, the list still displays vertically. Any ideas?
CSS
ul{
padding: 0;
list-style: none;
width:100%;
text-align:center;
height: 100px;
background: #ffffff no-repeat center;
}
ul li{
display:inline-block;
float: left; padding: 25px 25px 0 125px;
margin: 0;
position: relative;
font-size: 25px; font-weight: bold; color: #FFFFFF;
text-align: center;
}
ul li a{
display: block;
color: #FFF; padding: 10px 5px;
text-decoration: none;
}
ul li a:hover{
}
ul li ul.dropdown{
min-width: 150px; /* Set width of the dropdown */
width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
float: left;
}
ul li:hover ul.dropdown{
display: inline; /* Display the dropdown */
background: #FFFFFF;
left: 0;
width:100%;
margin:0;
padding:0;
}
ul li ul.dropdown li{
display: inline;
float: left;
background: #FFFFFF;
}
HTML List (still in progress; just testing before I fix all the text/links)
<ul>
<li>Home</li>
<li>About</li>
<li>
Current Performance ▾
<ul class="dropdown">
<li>Grafenwoehr</li>
<li>Hohenfels</li>
<li>Katterbach</li>
<li>Stuttgart</li>
<li>Vilseck</li>
</ul>
</li>
<li>Contact</li>
</ul>
I haven't done this stuff in years but my boss wants me to try and make this work. -_-
You have a dropdown here
ul li ul.dropdown {
width: 100%;
}
which has a 100% width relative to
ul li {
position: relative;
}
which is the culprit here. Removing the "Position:relative" above fixes your problem.
Your ul.dropdown does float horizontally, but its width forces the elements to order vertically. To test this out you can set its min-width to something like 900px: DEMO
As your ul.dropdown is a child of its parent li, which is set to display: inline-block; position: relative;, its bound to its borders using width: 100%.
To solve this problem you can remove position: relative of your li elements to remove this border. Now its width: 100% relates to your body.
WORKING DEMO
Try display:block on the UL.dropdown and display:inline-block on the UL.dropdown LI.
just remove (position: relative;) from "ul li" list will come horizontally.
code will be like:
ul li{
display:inline-block;
float: left;
padding: 25px 25px 0 125px;
margin: 0;
font-size: 25px;
font-weight: bold; color: #FFFFFF;
text-align: center;
}
just replace this code with yours.
Thank You
Hy, I am very new to html programming and I am trying to make a site. The problem is that I don't understand why I get a white space, in the right of my menu and image,even though I set the width to 100%.I am using Google Chrome.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
<title>Home</title>
</head>
<body>
<nav>
<ul>
<li>Contact
</li>
<li>Muzica</li>
<li>Evenimente
<ul>
<li>Intalnire cu fanii</li>
<li>Concerte</li>
<li>Lansari</li>
</ul>
</li>
<li>Bio
<ul>
<li>Formatia</li>
<li>Istoric</li>
</ul>
</li>
</ul>
</nav>
<div>
<img src = "beregratis.jpg" height=100% width=100% />
</div>
</body>
</html>
Here is the css code:
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}
nav ul
{
width:100%;
margin-left:-10px;
margin-top:-10px;
margin-right:0px;
background: #A0A0A0 ;
border-style:solid;
border-color:#404040;
padding: 0 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul li
{
float: right;
}
nav ul li:hover
{
background: #4b545f;
}
nav ul li:hover a
{
color: white;
}
nav ul li a
{
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
nav ul ul
{
width:auto;
background: #4b545f;
border-radius: 0px;
margin-top:0px;
margin:auto;
margin-left:0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li
{
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a
{
padding: 15px 40px;
color: #757575;
}
div
{
margin-top: -20px;
margin-left: -10px;
}
And here's the link to the image:
http://www.beregratis.ro/images/bere_gratis_2011_02.jpg
1) Add
html, body {
margin: 0;
padding: 0;
}
This will take away the browser defaults for the html and body element.
2) For the menu please remove the
margin-left:-10px; under nav ul.
The -10px margin left is pulling the menu to the left
First of all, you should add html,body{margin:0;} as some browsers add margin to that element.
Main issue you are experiencing :
You are adding a negative margin-left on several elements (.nav ul and .div) so they can't go all the way right and therefore there is a whitespace on the right of image and nav bar.
Here is your code I corrected in this FIDDLE
try with a css reset, there is many of them, like this one http://nicolasgallagher.com/about-normalize-css/
or just ad this at the begin of the stylesheet *{margin:0; padding:0;} that whill reset all the elements to margin and padding 0, if u have this kind of trouble the best u cand do is use the developer tool from your browser, go to metrics, and see whats that blank space, in google chrome for example, if that space apears in green its a paddin, if it is orange is a margin
Try to use a CSS reset for all browsers behave the same way. I just tried to delete the negative margin-left in ul and the space disappeared. Here is the code http://jsfiddle.net/qE69s/
I'm trying to make a navigation bar with only a right border, but when I do this, there's like an invisible left border on the hover, which does not fully make the border the color I want it to be. (a part of the left side is blue instead of light blue)
This is the CSS
#navbar{
width:900px;
margin:0 auto;
background-color:#3f67c0;
height:60px;
}
#navbar ul {
list-style-type: none;
text-align: left;
margin:0px;
padding:0px;
}
#navbar ul li {
display: inline-block;
}
#navbar ul li a {
display:block;
border-right:#FFF solid 1px;
border-left:none;
border-top:none;
boder-bottom:none;
padding: 20px 40px 20px 40px;
text-decoration: none;
color: #fff;
}
#navbar ul li a:hover {
color: #FFF;
background-color: #35b5eb;
}
This is the HTML
<div id="navbar">
<ul>
<li>HOME</li>
<li>CLAIM</li>
<li>PROOF</li>
<li>HELP</li>
</ul>
</div>
This is caused by the space in the HTML as well as a combination of display: inline-block and its display: block child. The best solution is to remove said space
<li>HOME</li
><li>CLAIM</li>...
You could also use font-size: 0 on the ul and the necessary font-size on the <li> or <a>, or use float: left on the <li> instead of display: inline-block, but these may result in other artifacts
http://jsfiddle.net/ExplosionPIlls/zPjCS/
I am trying to create a menubar with a few links in it. Here is my relevant code:
CSS:
#menuBar {
overflow: auto;
padding: 0px 0px;
margin: 15px 0px;
}
div#menuItem ul li {
padding: 0px 20px 0px 20px;
list-style-type: none;
display: inline;
}
div#menuItem ul a {
font-size:14px;
}
HTML
<div id="menuBar">
<div id="menuItem">
<ul>
<li> HOME </li>
<li> ABOUT </li>
</ul>
</div> <!-- Menuitem closes -->
</div>
So, the Problem here is that the minimum height of the menuBar remains fixed. I want it to show up a little smaller. I try setting the padding of #menuBar {padding -5px 0px }. But, nothing happens.
How do I do that. And if I completly removing the code for padding. The height of the div becomes so small that it is just enough to accomodate the text.
put a height to the div... either by using the line-height or height properties.
Try floating the div#menuItem ul li left, then add display:block to your a element and an explicit line-height value.
div#menuItem ul li {
padding: 0px 20px 0px 20px;
list-style-type: none;
display: inline;
float:left;
}
div#menuItem ul a {
display: block;
font-size:14px;
line-height: 1;
text-decoration: none;
}
Good evening,
I would like to have a navigation bar which is centralised to the screen without gaps between the button. I realised the gaps can be closed by having a 'float:left'. however, this would result in the navigation bar being flushed to the left. without 'float:left', there will be gaps yet centralised. would appreciate if someone could help me out. thank you!
my css codes are as follow:
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
display: inline;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: #086ba9;
float: left
}
#nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
following is my partial html code:
<div id="nav">
<ul>
<li>Home</li>
<li>Crawler</li>
<li>Visual Analytics</li>
</ul>
</div>
Cheers,
ZH
Here is working code:
http://jsfiddle.net/surendraVsingh/vU4C8/1/
Changes to be done in CSS:
#nav ul {
list-style-type: none;
padding: 0;
display:inline-block; /* Add This*/
}
Note: display:inline-block is added so that ul will only take width according to its li's unlike other block elements which take 100% width.
i don't know if this approach is "healthy" or not but it did the trick for me
#nav ul a{margin:0 -2px;}