Good afternoon,
I am trying to create a menu bar with a sub-nav under some parents, however the childs are not aligning.
I have change the child bicolour to red to highlight the concern.
There is a chance that by entering the sub-nav text may cure the concern.
I have listed below the CSS and HTML.
Kind regards
Gary.
Danceblast
Your problem is this:
#dropnav ul li {
margin-left: 20px;
}
It's being applied to the subnav's child li's aswell, you can target the subnav directly and set the margin to 0
#subnav li {
margin-left:0px !important;
}
OR
#dropnav #subnav li {
margin-left:0px;
}
if you dont want to use !important.
#dropnav ul li {
margin-left: 20px;
}
You want to remove the margin as well as you want to check for your text-alignment.
At the moment your elements use
text-align: center;
on all its parents and childs. You probably want that to be:
text-align: left;
Hope that helps.
Related
I am trying to remove the bullets in the left module but with no success.
I have created a class for the ul called .menuxxx and then added the below code to my css file although this does not work still. this can be viewed at http://www.safisafihotels.com/testimonials
.menuxxx ul{
list-style:none !important;
list-style-type:none !important;
}
Please guys assist
Your menu (ul) has the class menuxxx, not its parent.
It should be:
ul.menuxxx {
list-style:none !important;
list-style-type:none !important;
}
Your css selector is incorrect. Since you want to style a specific menu, use:
ul.menuxxx {
list-style:none;
list-style-type:none;
}
which will select it properly.
As for the !important tag, now you have corrected your selector, you can remove it.
If, in fact, you wish to remove the triangles from the "SAFI SAFI HOTELS" section, since they are generated from the declaration:
ul li {
background: url(../images/style1/bodyli.gif) no-repeat 0px 7px;
}
and not, in fact, a list styling element, you can remove that from your declaration.
That is not bullets, its background:
ul li {
background: url(../images/style1/bodyli.gif) no-repeat 0px 7px;
}
Remove it, then you can see effect.
Remove the bullet (background-image)
ul.menuxxx li {
background: none;
}
I am trying to create a grid-style navigation menu, which I have done. Here is a jsFiddle of what I have so far. If you hover over the links you can see there is a 1 or 2px gap between the left and right hand columns, and I can't seem to get rid of it.
At the moment I have:
#nav {
float:left;
width:230px;
display:inline;
text-align:right;
}
#footer li {
display:inline-block;
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
}
If I set the li {width:50%} the list doesn't fit into 2 columns, but when it is set to 49% I get the gap between list elements. There must be some padding or margin coming in somewhere but I can't see it. Any help would be great.
My favorite method of fixing this is to use a font-size: 0 in the parent and then restore the font size in the child. What happens is that a physical space in your html code (for example, pressing enter after an element) renders a physical space in the code, aka a space in between lis. The font-size: 0 renders that space as no physical width, thus allowing for two 50% lis.
#nav {
font-size: 0;
}
#nav ul li {
font-size: 15px;
}
Check it out: http://jsfiddle.net/3XqZ3/9/
Another option would be to use floats to get the elements right up next to each other. This also gets rid of the space in between.
#nav ul li {
float: left;
}
A third option would be to make sure that there are no breaks in between elements in the html. Like:
<li>This is an li</li><li>This is another li</li>
Or:
<li>This is an li</li><!--
--><li>This is another li</li>
That is white space caused by your inline-blocks. Because they are 'inline', your white space is taken into account.
There are a number of ways to overcome this. One is commenting out the whitespace:
<li class="green">Home</li><!--
--><li class="green">FAQs</li>
JSFiddle
Or you could use floating:
#footer li {
float:left;
}
JSFiddle
You should use float instead of display, like this:
#footer li {
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
float: left;
}
Demo: http://jsfiddle.net/3XqZ3/11/
I have spent a while trying to find out how to make text links sit horizontally on a navigation bar, but to no success.I am EXTREMELY new to coding so this is probably extremely easy to do, i am using html and CSS, i have tried just putting them on the same line. Also using:
#nav li a {
color: black;
display: inline;
list-style-type: none;
}
#nav li a {
color: black;
position: relative;
}
i have tried to find the answer on the site but i cant see one, so i thought i might as well just ask people. Thank you for reading.
You are targeting the wrong element, it should be
#nav li {
display: inline;
}
You were selecting a element, you need to target the li, a is an inline element by default, li renders one below the other, so to make them inline, we target li
I would suggest you to use
#nav li {
display: inline-block;
margin-left: -4px; /* If that white space matters to you */
}
As you will get same effect, but with some additional bonus like margins padding to space up your element. Alternatively, you can also use float: left; but you will need to clear your floats so stick with inline-block
I'm making a dropdown menu with only CSS, and it's not turning out easy the way I've done it. So far I've got an actual dropdown, but the width is the width of the parent element, which is too small for certain items to be displayed in one line.
I tried setting a manual width, but that just unaligns the whole thing and isn't pratical as the menu item could be much longer. Is there anyway of having a width that adapts to the content, without changing the parent width ?
All the site files are located here : http://dev.cuonic.com/bourree/
Index page : http://dev.cuonic.com/bourree/index.html
Stylesheet : http://dev.cuonic.com/bourree/css/style.css
Any help is appreciated, thanks :)
Here's a solution that doesn't use a fixed-width for the drop-downs.
First, add the following to the CSS for the links in the drop-downs:
#menu ul ul li a {
white-space: nowrap;
}
I also had to change #menu ul and #menu ul li to #menu > ul and #menu > ul > li, respectively, so that those CSS styles would apply only to the first level menu items.
Here's a basic reference about the use of > in CSS selectors. I think there are other spots in this example where it would help:
http://reference.sitepoint.com/css/childselector
Playing around in firefox/firebug I found that this combination seemed to produce the desired effect:
#menu ul ul li {
display: block;
float: left;
left: -34px;
position: relative;
width: 200px;
}
See http://jsfiddle.net/PdZrt/
Basically I have applied the yui reset and base and am the trying to seperately style a ul for a menu. The li's pick up the style but the ul doesn't appear too.
Any ideas?
In the fiddle there should:
list-style: none;
padding: 0;
margin: 0;
background-color:Red
There are a couple issues here.
One, that jsfiddle is all on one line and wrapping.
Two, your CSS for the ul reads: .nav-menu ul -- nav-menu IS the ul, thus it should read:
.nav_menu { list-style: none; ... }
The reason the background: red isn't showing up is because the elements inside of the <ul>, the <li>s have float: left set. This removes from from the flow of the <ul> and effectively makes your <ul> have a height of 0. While there is more than one way to solve this problem, the quickest would be to add a overflow: hidden to the <ul>.
Define your .nav-menu li list-style:none; and define your .nav-menu overflow:hidden;
Add this css
.nav-menu{
overflow:hidden;
}
.nav-menu li{
list-style:none;
}
Demo