Heres my website unbotttled.com and the categories sub menu does not align with its parent categories? Is it to do with the padding, is there another way to solve this other than removing the padding? Any help would be greatly appreciated. Thanks in advance.
The <a> and the <ul> are both being padded by the containing <li> "Categories". To help you understand - If you look closely the drop down is getting lined up to the left edge of "Categories" because of the containg <li>'s padding:15px.
There are a few ways to fix this, using a negative margin is one:
#menuleft ul li:hover ul {
display: block;
position: fixed;
visibility: visible;
width: 130px;
padding: 0;
padding-top: 20px;
margin-left: -15px;
Having a thorough understanding of the CSS Box Model is imperative for modern Web Development. It's fairly easy to understand.
Learn about it here: http://www.w3.org/TR/CSS2/box.html
It is not positioned correctly because the li it is inside of has padding of 15px. So it is to the right by 15px.
Add this CSS to the ul sub-menu margin-left:-15px
Related
i'm working on a horizontal scrolling site. The elements on the site are al placed in a UL > LI structure, to create multiple blocks.
The problem that i am having is the i want 2 sets of UL after eachother, but they will overlap. Tried searching for this on the internet, but none have made what i did.
And example of what i trying to do can be found here: http://jsfiddle.net/DHbtx/2/
There you will see that the 2 UL overlap because of the "float: left" and no block elements. i have tried adding an :after pseudo element, but didn't work (from: Multi-column issue with horizontal scroll)
li:last-of-type:after {
content: '';
display: block;
width: 15px;
height: 1px;
float: right;
margin-right: -15px;
margin-top: -1px;
}
Could anyone help me with this problem? I really appreciate any help you can provide.
Try giving the ul elements a width, say 50%.
ul
{
width: 50%;
...
}
FIDDLE
I've read replies for similar problems to mine, and I believe I've tried the steps mentioned but I'm still having problems with my dropdown menu disappearing when mouse off.
I've removed the formatting of the dropdown just so the code is bare bones, please take a look:
http://freerange.wesleypearce.co.uk
If you mouse over past productions you'll see my problem.
Thanks in advance for what probably is quite a simple fix, it's just alluding me!
Cheers,
Wes.
In the rule for your dropdown uls, use padding-top: <#>px; rather than top: 45px; to put spacing between the menu header and your list. The top value should be no more than the height of the menu header, otherwise you'll create a gap between it and the list, which will remove the list's visibility as soon as the cursor moves off the header and over the gap.
Try this one on style.css line 89
I have changed the top position of ul. The problem is there is a gap between your a tag (Past Products) and dropdown ul
#menu ul ul {
margin: 0 auto;
position: absolute;
top: 40px;
visibility: hidden;
width: 90px;
}
You're pushing your submenu too far from your main menu item, just declare it 100% to push your submenu exactly below your main menu item to fix the problem:
#menu ul ul {
top: 100%; /* fix */
}
I'll admit from the outset that I'm a self-semi-trained hack when it comes to html and css.
The problem I need help with is a drop down menu that is not centering in the container div. I need to have the menu behave like the one in the live site http://wedevents.com.au/index.htm
PROBLEM PAGE EXAMPLE: http://www.wedevents.com.au/index.asp (it's a work in progress so please forgive the mess)
Thaks for any help!
Regards,
Rick
I'm assuming you mean you want the links across the top to be centered on the page?
Floating the ul left won't help that :p. On ul.topnav, remove float:left and change the following properties:
margin: 0 auto;
padding: 0 85px;
width: 630px;
height: 36px;
I would adjust the width on your .topnav and adjust the padding as well.
Then on your ul.topnav li ul.subnav add this left:-31px; this shall make your drop down center below the weddings option
Create another div that will contain your ul class=topnav, set the width that fit in the page wrapper and add this as the property of ul:
margin: 0 auto;
I have a template that uses an unordered list to create the menu. See here
When I translate the website using Google translate the menu breaks if the translations are too long, causing the floated list items to drop down. Translating it into French seem to cause the problem.
See here
Is there a way I can force the text to wrap if it is too long for the menu?
I don't mind if I have to change the unordered list to something else, but I would prefer not to use a table.
use word-wrap property of css
word-wrap: break-word;
The short version: we're going to use display: table-cell.
The long version is.. long:
On .access, remove the padding rule.
On .sf-menu, remove float: left and add display: table.
On .sf-menu li, remove float: left and add display: table-cell and vertical-align: middle.
On #header and #footer, add position: relative.
On .access, remove height: 32px and margin-top: -32px and add position: absolute and width: 100%.
On #header .access, add bottom: 0.
Move the border-left from sf-menu a to sf-menu li.
Change the selector .sf-menu a.first to .sf-menu .first.
This part isn't great, but to get back that 20px padding on the left (and right), add an extra li at the start: <li class="noHover" style="width: 20px; border-left: 0"> </li>; and at the end: <li class="noHover" style="width: 20px; border-left: 0"> </li>. You might not need the s. You'll need to do the same thing with #footer.
To stop the :hover on the "padding" lis, add something like this:
.sf-menu li.noHover:hover {
background: none !important
}
On #footer, add padding-top: 48px.
That's everything (unless I screwed up somewhere), except for IE6/7 support. If you want that, you're going to have to put a new version up with my fixes applied (can be in a temporary new folder if you like). It's too much work to attempt to fix IE6/7 when I have to apply all those changes first to test it properly.
#Pranay pointed to the right direction but you need to set the width to the lis not the ul! so for example:
ul.sf-menu li {
width: 80px; /* make this the maximum width possible! */
word-wrap: break-word;
}
And insert a clearing div right after the menu ul:
<div class="clear"></div>
Where the clear class is defined as:
.clear {
clear: both;
width: 0;
height: 0;
}
I wish to make the all the list items to be centered. or at least 20 pixels from the top.
I have tried negative margin-top but that didn't work.
Any suggestions?
Here is the site. http://freddygonzalez.me/dev/85
The simplest way to do this is to remove display: inline and margin-top and add the following rules to the li elements:
float: left;
line-height: 49px;
Note that this won't work if a menu item can have two lines of text.