At this site and within the navigation are nav titles. As you can see there is an unnecessary space between each nav title and I am stumped as to why this is. Check out "classes," nav to get a good view of too much space.
I've been at this for a bit and to the point where I thought I'd ask around for a suggestion or tip.
li {
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:0;
}
And for another <li> vertical spacing adjustment option:
li {
line-height:1.2em;
}
Look for anything involving height (i.e. line 324):
li, li a{
height:32px;
}
Note: I'm not sure what your xmargin or xheight in your CSS is for
Related
I am trying to get the submenu in Bootstrap's navbar to open horizontally, instead of vertically.
I hoped this would be something as simple as adding an extra style, e.g.
ul.dropdown-menu li {
display:inline;
}
or
.navbar-nav li.dropdown li {
display:inline;
}
but nothing changes.
I couldn't find anything useful after quite a bit of searching either. Hope to get some help here.
I have a vertical CSS menu but there is a gap to the left and above and i cannot work out where to remove it - my menu CSS is below and i have created a fiddle with my full code:
#vertical_menu {
float:left;
}
#vertical_menu > ul > li {
display:inline-block;
width:140px;
}
#vertical_menu > li {
display:inline-block;
list-style:none;
margin-left:-20px;
}
#vertical_menu li a {
display:block;
padding-bottom:10px;
margin-top:15px;
border-bottom:4px solid #000000;
color: #000000;
text-decoration:none;
}
#vertical_menu li a:hover {
border-color:#666666;
color:#666666
}
any ideas?
http://jsfiddle.net/Dfw9f/1/
i think what you are looking for is a reset CSS, kindly check CSS Tools: Reset CSS
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings
for quick solution just add this to your CSS
ul,tr,hr{margin:0;padding:0;}
I think adding this to your code will solve your problem:
ul
{
padding:0px;
margin:0px;
}
Hope this helped.
UPDATE
I think the gap is not because of an issue with margin or padding, but because of an empty row in your table. You can see this by giving the table a border, like <table border="1"> (jsfiddle).
I see that you included the last row of the table to have a line between the table and the menu. You can accomplish this simply by deleting the last row of the table (which is messing your layout) and add a border-bottom to the table, like <table border="0" style="border-bottom:1px solid gray;">
JSFIDDLE - here is an updated version, with the line and correctly laid out menu.
Hope this helped.
I am trying to create a navigation menu and I would like my first <li> to line up perfectly with the container above it but I need some spacing to the right of the first <li> so I'm trying to do something like:
nav .innercontainer ul li:nth-of-type(2n+1){ /*only happen after the first <li>*/
margin-left:20px;
}
Thanks these pseudo select elements are confusing as hell.
The easiest way to do this is with the + selector:
ul > li + li{
/* all li elements except the first */
}
nav .innercontainer ul li{
margin-left:20px;
}
nav .innercontainer ul li:first{
margin-left:0;
}
if i get it right, its simple this way
this is my very first post on this site, so excuse me if I'm not clear enough.
I'm currently working on a website built using wordpress, and I have an issue with CSS.
My menu bar is made with an ul, and, when I increase text size in my navigator (with ctrl+scroll for example), li items overflow from the div, like in this image.
In this case, I would like the li to be splitted in two part, and fit in the div, but I did not find how to realize that. I've already tried the "word-break" solution, but I guess I was doing it wrong.
Because my site is hosted by Wordpress, there are two different CSS sheets used for the design, which is a bit messy.
Here is a part of my sheet :
#access {
display:inline-block;
width:27%;
font-size:100%;
margin:2.5% auto 6px;
border:none;
padding-top:10px;
padding-bottom:10px;
overflow:hidden;}
#access a {
display:inline-block;
max-width:100%;
color:rgb(0,102,138);
font-size:22px;
padding:none;
line-height:30px;}
#access li {
display:block;
padding:4px;
float:none;}
#access ul {
list-style:none;
font-size:100%;
margin:0;}
I can't post the theme's CSS link because, as a new member, I'm limited to 2 hyperlinks by post.
Thank you for your help.
These menu items contain non-breaking spaces.:
Coaching professionnel
Coaching parental
Coaching professionnel
Coaching parental
This means when text increases in size they will all remain on one line.
Also, your #access has overflow:hidden; Remove that, and remove the non-breaking spaces - (" ") and your words should wrap correctly
Anyone know how to add padding between the :before pseudo-element and where the content actually starts?
<ul>
<li><strong>Name Surname</strong></li>
<li>+27.082.555.4155</li>
</ul>
I want only the first li to have a bullet point in it and only if it has a strong element in it.
I have gotten it right using:
.fr_contactInformation ul li strong:before
{
content:url(/App_Themes/2011/images/hm_listImage.gif);
}
.fr_contactInformation ul li strong
{
/*Here is where I am going wrong*/
padding-left: 50px;
}
Thanks all!
you can put padding in the before to make space between it and the element
.fr_contactInformation ul li strong:before
{
content:url(/App_Themes/2011/images/hm_listImage.gif);
padding-left:50px;
}
If you want to control it by pixel, and assuming you only want the bullet on the FIRST li, here's what you're looking for:
.fr_contactInformation ul li.first strong:before
{
content:url(/App_Themes/2011/images/hm_listImage.gif);
padding-right: 20px;
}
Thanks General Henry but that adds padding to the entire element.
I tried this and it worked:
.fr_contactInformation ul li strong:before
{
content: url(/App_Themes/2011/images/hm_listImage.gif) " ";
}
By adding a some space in the inverted comments at the back of the img url, it created that gap I was looking for between the image element and the content.
Then I used a negative margin on the li to bring it back into place.
Thanks ;)