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/
Related
I am having trouble with my drop down menu, the second level items overlap each other and each item has a different width. I have searched this site and tried fixes to similar problems, but haven found anything that works. I am not a programer, but am trying to add this to my website. Here is my code:
#menu ul,
#menu li,
#menu span,
#menu a {
margin: 0;
padding: 0;
position: relative;
}
#menu ul {
list-style: none;
position: absolute;
top: 1.1em;
}
#menu
{
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul > ul > li
{
float: left;
}
#menu ul ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
width: 100px;
text-align: left;
*width: 100%; /* IE7 hack*/
}
#menu li:hover ul {
display: block;
}
#menu:after,
#menu ul:after {
content: '';
display: block;
clear: both;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}
/*#menu ul li a:hover
{
text-decoration: none;
}*/
#menu ul li a.active
{
background: #171e35 url('images/menuactive.gif') repeat-x top
left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Menu</title>
<!-- zenlike1.0 by nodethirtythree design http://www.nodethirtythree.com -->
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css"
href="test.css">
</head>
<body>
<div id="menu"><!-- HINT: Set the class of any menu link below to "active" to make it appear active -->
<ul>
<li>Home</li>
<li>Department
<ul>
<li>Patrol </li>
<li>Investigations</li>
<li>Records </li>
<li><a href="#" class="active">Prosecution
</a></li>
</ul>
</li>
<li>Forms</li>
<li>Gallery</li>
<li>Media</li>
<li>Contact</li>
</ul>
</div>
<br>
</body>
</html>
Fiddle
Created a class submenu and added display:block. This allows us to assign a width and height value DOM objects and stops your menu items from overlapping. In your case I assigned the class submenu to the malfunctioning menu items to avoid any conflicts with preexisting code.
Simplified version fiddle
Since you're not a programmer I took the liberty to polish up your code and remove the lines that weren't doing anything. The simplified link above has the same functionality as your code (with solution) but with less confusing classes. It may make it easier for you to continue working on your site!
To fix alignment on your website, replace the CSS for ul#menu ul with:
ul#menu ul {
display: none;
position: absolute;
top: 28px;
margin-left: 70px;
width: 100px;
text-align: left;
}
To address the submenu appearing behind your content add z-index:10 to #menu
Give the sub nav links more line-height.
Add this rule to your styles:
#menu ul li ul li {
line-height: 2em;
}
Then, to close the gap created between the main nav and the sub nav (which will prevent you from hovering over sub nav links) add a bit of padding-bottom to your existing main nav rule:
Adjust this rule in your styles:
#menu ul li a
{
/* original */
/* padding: 0.5em 1.0em 0.9em 1.0em; */
/* new */
padding: 0.5em 1.0em 1.1em 1.0em;
color: #fff;
text-decoration: none;
}
The solution above is a straight answer to your question and solves the problem you raise.
However, I would suggest you consider a better overall solution for your navigation development. Currently, it seems a bit disjointed and patched together.
Here's a great video tutorial for building clean, elegant and robust nav menus.
https://youtu.be/k14bxM1cWoM?list=PLl1MmKpV0eieAACJx-rTMnmKYfcBOjqKN
Try this style,
<style>
#menu {
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
padding: 0px 30px;
line-height: 45px;
text-decoration: none;
color: #FFFFFF;
}
#menu li:hover {
text-decoration: none;
background: #171e35;
}
#menu .active{
background: #171e35;
}
#menu li{
position: relative;
}
#menu ul ul{
position:absolute;
left: 0;
display: none;
width: 300px;
}
#menu li li{
float:none;
}
#menu li:hover > ul{
display:block;
}
</style>
Just add this css on your style
#menu ul ul li a {
width:100%;
float:left
}
I have a dropdown list item in my navbar and can't get the dropdown section to align underneath the parent link. I am trying to use just css and know I've done it before, it's just stumping me at the moment. None of the other examples I've come across use the same menu format so it's been troubling trying to force fit pieces of code. Please help me with this easy solution
HTML
<div id="navbar">
<li>Home</li><!--
--><li>Link2</li><!--
--><li>Link3</li><!--
--><li><a href="#">Link4
<ul>
<li>SubLink1</li><br />
<li>SubLink2</li><br />
<li>SubLink3</li><br />
<li>SubLink4</li>
</ul>
</a></li><!--
--><li>Link5</li>
</div>
CSS
#navbar {
width:75%;
margin:0px auto;
text-align:right;
position:relative;
top:218px;
}
#navbar li {
list-style:none;
display:inline;
position:relative;
}
#navbar a {
background-color:#862D59;
font-size:18px;
width:60px;
margin:0px;
padding:10px 15px;
color:#FFF;
text-decoration:none;
text-align:center;
}
#navbar a:hover {
background-color:#602040;
border-bottom:solid 4px #969;
}
#navbar li ul {
display:none;
}
#navbar li:hover ul {
position:absolute;
display:block;
}
Working Example
https://jsfiddle.net/o6Ldutp5/
Firstly, you should use a reset css of some kind to remove the default margin / padding attached to ul & li.
Then validate your HTML, it contained a number of errors such as missing the opening ul etc.
Then it's just a matter of using position:absolute and appropriate values.
top:100% will place the menu directly below the li parent (with position:relative) regardless of the height of the li.
left:0 will align the left edge of the submenu to the left side of the parent li.
#navbar {
margin: 0px auto;
text-align: right;
}
ul,
li {
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
display: inline-block;
position: relative;
}
#navbar a {
background-color: #862D59;
font-size: 18px;
width: 60px;
margin: 0px;
padding: 10px 15px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
}
#navbar a:hover {
background-color: #602040;
border-bottom: solid 4px #969;
}
#navbar li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
#navbar li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Home
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
<ul>
<li>SubLink1
</li>
<li>SubLink2
</li>
<li>SubLink3
</li>
<li>SubLink4
</li>
</ul>
</li>
<li>Link5
</li>
</ul>
</div>
I've written my own minimal CSS without the styling, try replacing your whole CSS with this -
I've also edited your HTML by removing the comments and <br /> tags
div#navbar li {
display: inline-block;
}
div#navbar li ul {
width: 200px;
position: absolute;
display: none;
top: 10px;
}
div#navbar li ul li {
display: block;
width: 150px;
}
div#navbar li:hover ul {
display: block;
}
ul,ol,li {
margin-left: 0;
padding-left: 0;
}
Here is the fiddle
The problem is over, I'm now going on with my website development, thanks.
The problem is on my website (I'm viewing it in Chrome): http://albertorestifo.com/
Between the elements of the navigation menu, there is a undesired space between the border and the next list element. It is visible when you hover on "gallery".
Here the HTML:
<nav>
<ul>
<li class='active'>Home</li>
<li>Gallery</li>
<li>About Me</li>
<li>Contact Me</li>
</ul>
</nav>
And here the CSS:
header nav, header nav ul, header nav ul li, header nav ul li a { height: 100%; } header nav ul li a { display: block; }
header nav ul li {
display: inline-block;
line-height: 150px;
padding: 0 20px;
border-left: 1px solid #2d2d2d;
}
header nav ul li:last-child { border-right: 1px solid #2d2d2d; }
header nav ul li:hover, header nav ul li.active {
background-color: #0072bc;
}
header nav ul li a {
text-decoration: none;
color: white;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
}
Plus a small reset:
ul, ul li { margin: 0; padding: 0; }
I point out that I'm using Normalize.css, so every browser should display it.
I have no idea how to fix this, it never happened to me in the past!
demo:http://jsfiddle.net/EaAvx/
It is because your list-items are inline-block elements.
Use any of the following solutions:
Change HTML to this: removing the white space in your markup..
<li class='active'>Home</li><li>Gallery</li><li>About Me</li><li>Contact Me</li>
or..
<li class='active'>Home</li><!--
--><li>Gallery</li><!--
--><li>About Me</li><!--
--><li>Contact Me</li>
As an alternative to removing the white space, you can always add a negative margin:
header nav ul li {
margin:0px -2px;
}
or set the font-size to 0px on the parent..
Note, there is still a 1px gap because of this in your CSS:
border-left: 1px solid #2d2d2d;
... if you wanted to, you could avoid all of these 'hacks' and just change the element from inline-block to a floating element.
That's because you have li as inline-block.
Set this:
nav > ul {
font-size:0;
}
nav li {
font-size:16px;
}
And done.
You can remove all whitespaces, compress codes and that works pretty well. Even cross browser.
You could fix that like this, here's a FIDDLE
header nav ul li {
float: left;
list-style: none;
line-height: 150px;
padding: 0 20px;
border-left: 1px solid #2d2d2d;
}
use all selector to set padding and margin then use box-sizing
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0;
margin:0;
}
Demo: http://jsfiddle.net/EaAvx/2/
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'm using an HTML/CSS menu from the article SuckerFish Dropdowns. My particular menu has a grey background. I am trying to get the menu's background to have a fixed width. I tried adding a width parameter to the #navbar section in the CSS but that didn't seem to do anything. How do I get this fixed width behavior?
HTML
<ul id="navbar">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li>System Set-Up & Status
</li>
<li>NMEA Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li></ul>
</li>
<li>UDP Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li><li></li></ul>
</li>
<li>Baro / PoE
</li>
<li>Advanced
</li>
<li>MOB
</li>
</ul>
CSS
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc;
color: #000000;
text-decoration: none; }
#navbar li a:hover {
background-color: #999999; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #c0c0c0;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #999999; }
The CSS snippet is here and the HTML snippet is here
jsfiddle of question:
The #navbar is taking the appropriate width, but it does not have a background-color set so by default it is transparent.
Remove background-color from #navbar li a and add it to #navbar instead. You will also have to remove the height and clear your floats for it to work properly:
#navbar {
background-color: #cccccc;
margin: 0;
padding: 0;
overflow: hidden; /*clear floats */
}
Working example: http://jsfiddle.net/UfuG2/
Since you're floating your menu list items, you'll want to put a clearfix on the unordered list. Then you can set the width and background-color on the ul. Check out http://jsfiddle.net/qT7xs/.