I have dropdown menu and its made via a list and position absolute, however the dropdown links are very very very small area and do not cover the text completely.
How can I fix this?
Example http://outreviews.com/v%202/index.html (the dropdown menus)
Remove the padding from the sub menu's UL and LI and give the A element "display:block" This will make the A element take up the entire width of the menu.
You can fiddle with the padding to get it the way you want it.
If you add:
ul li a {
display: inline-block;
width: 100%;
height: 100%;
}
It should work okay, and since even IE allows display: inline-block; on natively in-line elements it should be relatively cross-browser friendly (certainly under a valid doctype).
It's worth remembering that padding on the parent li will also reduce the possible width of the child a element, and the display: inline on the same parent li is also likely to cause you a little trouble (since display: block; on the a would be so much simpler).
Edited to note that #Chris Bentley correctly noted the points in my final paragraph (above the hr) just prior to my answer.
make the following changes:
in #headermenu li change the padding:20px; to padding :0 20px;
add delete the top:55px; from #headermenu li ul
What you can do is make the li elements display:list-item and the a elements display:block. That's what's being done on the site you're linking to.
Related
I started a new job this week and one of my duties will be fixing/updating the website.
Our front page has six floated elements with mouse behaviors wrapped in a UL. In Firefox and IE, it appears just fine.
In Chrome, the last li element is lower than the others by about 20 or so pixels (I tried removing the style that was on the "last" element which changed the top margin (-18), but it didn't change anything).
The site is at rlba.com. If anyone has any suggestions, I'd appreciate it.
To answer your question...
Set #flashContainer2 ul, line 274 in your styles.css file, to have a width of 942px and a display of block. This will correct the behavior you are experiencing.
But please listen to j08691 and alireza safian in your comments and fix your question so that other people can learn from this.
There is no reason for your ul to be display:inline, especially if you have a defined height, so remove your display attribute and let it be the default (display:block;).
Then remove the default browser padding on the ul to have it be flush with the left side of your site's content container.
#flashContainer2 ul {
width: 940px;
height: 420px;
/* display: inline; - remove this */
padding: 0; /* add this */
}
And lastly, your li tags in the ul are 155px wide with padding-right of 2px (so the li is effectively 157px) but the ul is 940px wide. 157x6 = 942px. So you could either remove the width on "#flashContainer2 ul" so it grows to the container and becomes 942px wide, or remove the 2px padding from the last element so all of the li's fit in the ul.
#flashContainer2 .lastInList {
padding-right: 0; /* add this */
}
I'm confused about why my paragraph doesn't begin in a new line based on the overflow property of the previous element.
Check out my plunker, change the overflow property in line 11 to hidden and it will work fine. On visibile, it screws up the view.
I know doing a clearfix can fix this issue, but what I'm interested in is why overflow is doing this to my view;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
overflow: visible; /* Change this to visible/hidden*/
}
The problem is that because your ul has float: left; the text element goes by default on its right. So when you add the overflow: hidden; property it clears the area around the list.
There is also a great read for floating elements.
Let me clear you something overflow:hidden make the UL clear because it is shorter form of :after{clear:both;content:"";display:block;}
but in overflow:hidden it clears it self and take it's height but nothing will be shown outside of this.
In this example you have floating elements and the parents UL is not taking its width and height that is why paragraph goes beside to it. when you add overflow:hidden then UL takes its height and width because it is shorter form of has layout property :after{clear:both;content:"";display:block;}
Hope so you will be cleared by this
Thanks
It is due to the property of float left in anchor. Remove overflow property from ul, it will work excellent.
Add the following properties in css to:
ul{ font-size:0px;}
ul li{ vertical-align:top; display:inline-block;}
ul li a{ font-size:16px; float:none;}
I have an issue with inline list elements.
The issue is that when I limit the width of my menu, which contains inline list elements, to put it onto multiple lines (for mobile devices) the right-side of elements is being cut off.
Here's a JSFiddle showing this: http://jsfiddle.net/vk2bK/7/
The menu in the orange with:
width: 210px;
background-color: #ffc20e;
In this JSFiddle the right-side of the 2nd list element is cut off. There's lots of space beside it in the div with the class 'menu', so it's not because of that. I assume it's because of some inline list property I'm unaware of.
How do I prevent the right-sides of inline list elements being cut off when the list expands onto a second line?
Simple CSS fix should do it.
You need to modify the li elements so they are inline block with a defined width:
.menu li {
display: inline-block;
width: 90px;
}
See it here: http://jsfiddle.net/vk2bK/21/
EDIT
I played around with it, see if this is what you want: http://jsfiddle.net/vk2bK/22/
ok i found a solution : JsFiddle
.menu a {
display: inline-block;
}
.menu a {
width:80px;
background-color: #7dc242;
line-height: 30px;
margin: 3px;
}
i removed the lists and made all elements inline-block u can edit their width and height if u need to.
I am trying to solve this issue for a few days now. I am unable to place the Child1, 2 and 3 between the 25px orange spot. The parent and child menu is a CSS based ul - li menu, where I set the <a> as an inline-block and set the width and height but it still ignores those parameters. I am out of ideas on how to solve this matter. Thank you for your help in advance.
Due to the length of the code I decided to upload the "whole" source code:
source.zip
The problem is that your <a> tags on the sub-menu have the padding:15px from the main menu. You will need to set it to 0. You can then set the line-height of the element to match the orange bar's height to center it vertically.
Add this to fix it:
#header .cssMenuA a{
padding:0;
line-height:25px;
}
It looks like the Child 1, 2, 3 a tags have padding applied to them, which is pushing them down past the orange. See screenshot:
Try removing the padding from the a tags (bodystyle.css, line 78), and reapplying it only to the parent menu items.
You have 15px of padding around all of the <a> elements in the nav list (including PARENT), but this also applies to the "Childs." Add the rule:
#header li li a {
padding-top: 0;
}
This may not look exactly like you want because the <a> is set at 25px high, but the font is smaller than that. Also add
#header li li a span {
line-height: 25px;
}
learning html/css here. I can't seem to understand how to tweak this drop down menu. I'm trying have to tweak it to hold an image and a name, then to have the links.
Right now the image is getting cut off due to the <li> height, when I change the <li> height to 100% it get some weird behavior that I don't understand. Any help would be really appreciated to learn whats going on.
image getting cut off
http://jsfiddle.net/FyU89/
odd behavior after I add height: 100%
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
height: 100%
}
http://jsfiddle.net/FyU89/1/
Add to your css
ul.menu-drop li {
display: inline-block;
}
Fiddle link
Update:
Upon adding the new css rule you'll find the name disappears from next to the image on Chrome, at least it does for me. To fix that add a float: left on your image and the name will appear next to the image on Chrome, Firefox, and IE; you can then style it more to your liking. Fiddle link with the float change.
just going through your css and code, it appears that these drop downs would inherit the height from their parent (.menu), which is set to 30px. the images seem like they are set to have a height of 48px; this maybe causing your cutoff.
Add this to your css code:
ul.menu-drop li {
height: 50px;
}
That sets the height of your list within the menu-drop menu thing so its big enough for the picture.