I'm new so don't mind if I ask some pretty dumb questions, I've been trying to create a navigation menu that has links that pop up once the mouse hovers over, it's been great so far, the only problem I have is that the spaces between the links appear to be uneven.
Now I've searched high and low (I'm bad with google) for an answer but just can't seem to find one.
I've tried the following CSS.
padding: 0;
margin: 0 0 0 0;
TL:DR; space between an unorganised row of vertical multiline links is uneven.
Here's the http://jsfiddle.net/1f9b0h6p/ , help please? ;-;
Best regards,
Vernon
Remove unwanted line-height from the ids #top, #top li li, #top li li a and height from the id #top li:hover li
Fiddle Demo
In #top li:hover li{ change the height from 33px to auto. here is the jsfiddle
Related
I am currently learning CSS and HTML and I wanted to build a basic dropdown menu using CSS only. There are some things that I don't understand if someone could help me figure out what is going on.
Here's how it looks
http://liveweave.com/eTdt7V
Why is my Menu 1 being pushed at the top of the nav? How can I avoid that?
Why is my Submenu 1 to the right of the Menu 1? How do I fix it?
The height of my submenu is overflowing over the first UL. Is that supposed to be?
Hopefully someone can help me understand what's going on here that would be a valuable lesson for myself. I know I could find an online tutorial but I feel that starting from scratch is a better leaning opportunity, but right now I am stuck.
Thanks!
Ok here are some point (i still suggest you find some page like w3chool or here or whatever page you can find to learn more or fully understand your problem)
Menu 1 pushed away because you set your 2nd ul with visibility:hidden - it hidden but still take same space (width and height), so if you change that to display:none and remove height:100px in your 1st ul it will become one line and smooth (don't set height to ul, especially when it have 1 or more ul inside, it will ruin your menu)
Your Submenu 1 to the right of the Menu 1 because, uhm not sure how to say so i skip to solution to solve this. To position your submenu, i suggest use position:absolute with margin to position your submenu (beside your main menu if vertical menu or below if horizontal)
This is your new CSS after i modify a bit
body {margin: 0; padding: 0;}
nav {background-color: pink; margin: 0; padding: 0; height: 100px;}
ul {list-style: none; width: 50%; background: yellow; margin: 0 auto}
li {display: inline-block; background-color: green; width: 100px; height: 50px}
a {text-decoration: none;}
ul > li > ul {display: none; position: absolute; margin: 35px 0 0 -40px;}
ul > li:hover > ul {display: block;}
ul > li > ul li {display: block;}
And this the new DEMO
Hope you lucky with learning HTML and CSS!
I am trying to learn basic HTML and CSS. This is the code I have currently:
http://jsfiddle.net/spadez/vvDJ9/3/
There are two issues with the code:
Currently not only is there a large gap between the list items
The list in the header doesn't have the top padding correctly applied. It should sit in the middle of the header.
Here is the relevant bit of the code:
header a { padding: 15px 20px; background-color: #16AD8F; }
This is because your lis are inline-blocks. You can, of course, redo the code and fix that using floats, for example... or get rid of the whitespace by joining lis together (</li><li>..., see here: http://jsfiddle.net/vvDJ9/6/), etc...
But there's a nice little hack to get rid of the space: set font-size: 0; to their parent ul element: http://jsfiddle.net/vvDJ9/5/
#header ul {font-size: 0;}
And to get the top padding correctly, just set your anchors to display: block;: http://jsfiddle.net/vvDJ9/9/
#header a {display: block;}
I have a blog which is hosted at blogger.google.com.Recently i encountered a problem with the dropdown menu called "Categories". The children elements(sub menu items) auto disappear just when i move my cursor over them. I have tried the other answers to similar questions like this but they were not of great help in my case. I just want the dropdown elements to remain at their places when i move my mouse over them so that i can select them.
Can anyone please check the problem?
My website link is http://www.techtreck.in
Try to go to the Categories tab and you will see what exactly i am saying.
Many thanx in advance..
..hope to get a reply soon !!
There is a hidden gap between you main menu and sub menu.Inspecting you css with firebug, I found this in your code :
#top li ul {
background: none repeat scroll 0 0 #111111;
margin-top: 20px;
padding: 5px 0 3px;
width: 187px;
}
Now margin-top: 20px; is too far from main menu. So change it to:
#top li ul {
background: none repeat scroll 0 0 #111111;
margin-top: 14px;
padding: 5px 0 3px;
width: 187px;
}
And it will work fine.
If you move your mouse quick enough it works :P
But it looks like it is due to the gap between the categories and the actual drop down, when you move your mouse down, it goes in the gap so it no longer triggers the onmouseover event, hiding the drop down.
You should move the position of the dropdown up higher, so that it is perfectly align with the categories button.
The gap between the main menu and the submenu is indeed what causes the problem. #kakarott solutions is also what i would do, it is by far the easiest solution. If however the gap is there by design, you could still achieve the desired result by playing with your css. Something like this should do the trick:
remove the background color of the sub ul to make it transparent
change the margins of the sub ul into paddings
change the margins of the sub li into padding as well
set the background color that was on the sub ul on the sub li
add the padding that was on the sub ul to the corresponding padding of the sub li
(I did not test this, but it should do the trick i think, if i did not forget anything)
What this does is make the nested ul transparent and overlapping the parent li. This way the hover state remains triggered when you move the mouse onto the submenu. Visualy there should be no changes.
I am using a combination of ul and li tags for a menu and I use display box and a background color to display it as buttons the problems is as soon as I enclose the a tags using li the buttons seem to be shifting to the right a bit like a indentation or something .
I tried
list-style: none;
but that doesnt work could anyone suggest a workaround this problem..
Thanks any help would be appreciated
Thanks everyone for the effort +1 to all answers
Set padding-left and margin-left on the ul to 0.
Have you reset the default margin and padding styles?
ul,li {
margin:0;
padding:0;
}
You should check the margin and padding of the UL and LI elements, and set them to a specific value. Such as:
margin: 0;
padding: 5px;
A UL is typically styled to display with an indentation from the left, although it might also be the LI in some browsers (I believe).
In Firefox (w/Firebug), Chrome and IE9, you can inspect the applied styles using the developer tools available. This really helps to understand where issues are cropping up like this in your displayed elements.
http://getfirebug.com/html
Also, just in case you haven't seen it before, look at the box model:
http://www.w3.org/TR/CSS2/box.html
A ul and/or li element will be given a default margin and/or padding by the browser. Try adding margin: 0; padding: 0 to your ul, li {}.
Better still, use a CSS Reset to save you the hassle with this, and many other, elements. I recommend this one: http://meyerweb.com/eric/tools/css/reset/
My link is here:
Example Page
I'm using list-style-image: to give my horizontal lists ( very top and bottom ) seperators. I have a class of .first to remove the image from the first li in each list.
Lo and behold in IE6, it doesn't work. What happens is that the bullet images are not being displayed, and also the bottom few pixels of the text appears to be cropped.
Screenshot
I've fixed a few 'haslayout' bugs with this page, but I have a feeling its something to do with my rule hierarchy, although no amount of hacking about seems to work for me.
Can someone shed some light on this perhaps? Thanks.
Also, my colour change works on hover, but not the underline, in the same selector?
EDIT OK, I have used the background image technique that yoavf suggests, which seems to do the trick, but the cropping issue still remains. Looks like a separate issue then...
heres my revised CSS
#site-navigation li {
background-image:url(../img/site-nav-seperator.gif);
background-position:0 4px;
background-repeat:no-repeat;
float:left;
padding-left:15px;
}
#site-navigation li.first {
background-image:none;
}
further edit:
Managed to fix the cropping too, by giving the a tag some line-height.
#site-navigation a {
color:#666666;
display: block;
text-decoration:none;
margin-right: 1em;
line-height: 1.1em;
}
this bit feels like a bodge though :)
I know this isn't really a solution, but I would recommend using background-image instead of list-style image.
You'll achive the same effect, and it will work in all browsers.
Looks like a problem with margins and paddings of your objects inside site-navigation.
If you showed your CSS for those elements, we could check it faster :)