I got a problem with my menu. The last li element is not on the same line as the others. The last li contains a div, the other 3 contains anchor tags. I mean, it's basically on the same line, but the last looks like it's having a margin-top: 1px or something. But it don't have that.
Without more code this can be difficult, but from the image link you provided here is the code to achieve you required output:
ul {
list-style: none;
}
/*This is probably what was causing your miss-alignment*/
ul li {
display: inline-block;
border: 1px solid #808080;
border-radius:5px;
padding: 10px 50px;
}
<div>
<ul>
<li><a>a1</a></li>
<li><a>a2</a></li>
<li><a>a3</a></li>
<li><div>div</div></li>
</ul>
</div>
Another possibility is that you are adding margin to all div or same-class elements by mistake.
Related
I have Joomla 3.4.5 + Virtuemart 3 + Template Purity III.
I have a problem with the "pages navigation" links. You can see the problem here:
http://alturl.com/ofbav [link broken]
The problem is the list <ul> is displayed vertically instead of horizontally.
I would like to know which css code I have to add to get horizontally and "normal" looking my pagination buttons.
Can some expert help me please?
Not sure. Try like this.
.vm-pagination > ul > li
{
display:inline-block;
padding:0px 10px;
}
EDIT:
According to comment below if you want one code should solve both the problem then use it like below. In the above code i tried to apply only for the direct children list items. In your bottom page case it is not direct children. So change your code like below.
.vm-pagination ul > li
{
display:inline-block;
padding:0px 10px;
}
You should put list-style: none; on "ul" to get rid of the bullet points and display: inline; or display: inline-block; on the contained "li"s to display them in a row.
.vm-pagination ul li
{
list-style: none;
}
.vm-pagination ul li
{
display: inline;
}
Then you can play with marging+paddings+borders to make them look more like tabs.
Just add text-align: left; to your pagination ul. Also you can disable list styling with list-style: none;. And as a final step, you can remove unnecessary paddings and margins of your ul element
.vm-pagination > ul {
text-align: none;
list-style: none;
padding: 0;
}
use in your style may help you
ul
{
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
ul li
{
float:left;
padding:4px 4px;
}
I need to indent the second row of text on this dropdown navigation menu. The issue is that I usually do it with a combination of padding and negative text-ident value. But this menu uses the padding for the color on the left. I need to keep all of this styling and look, but need text indent. There is a sample longer row under the "Home" button.
http://jsfiddle.net/trevoray/VZ7qD/20/
Any help would be greatly appreciated.
Thanks!
Trevor
.nav li > ul > li {
margin-bottom: 2px;
background: #0f2992;
padding-left: 20px;
border: #0f2992 solid 1px;
}
.nav li > ul > li > a{
padding:5px 3px 5px 10px;
text-indent:-7px;
}
or just throw a class on all indented ul's
#navMenu ul.indentedNav {margin-left:20px;}
What css styles to be applied to make the clickable area of button to the exact shape of the button.Could you please tell me
If you use HTML you have to use a somewhat obsolete technique - Image maps - to get a clickable area that's not in the shape of a square. If you use Flash, you have more options. This reply addresses HTML/XHTML up to version 4, I haven't read the the specs for HTML 5 wich may have more ways of solving this (probably in combination with Javascript).
If I wish to style links in a menu I use an unordered list. You need to use display:block to make the whole list item click-able. I have included example css and html below.
In my stylesheet:
#menu {
width: 800px;
height: 40px;
}
#menu ul {
list-style-type: none;
margin:0;
padding:0;
}
#menu li {
display: inline;
margin-right: 10px;
float: left;
background-color: #FC0;
}
#menu a {
text-decoration: none;
font-size: 1.2em;
color: #006;
display:block;
padding: 5px 10px 5px 10px;
}
#menu a:hover,
#menu a:active {
color: #009;
background-color: #F90;
}
In my html:
<div id="menu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Articles</li>
</ul>
</div>
This will give you a horizontal menu of three yellow boxes/buttons which will change to orange on hover. The a is displayed as a block and so the hover affect takes affect when the mouse hovers anywhere within the yellow box, rather than just over the text.
Hope this helps :o)
I have a horizontal menu. I want to have a border around the menu (not the entire-row, only the space menu is covering). When I put border on ul, it covers the entire row, when I put border on li, it has border between menu items as well.
<ul id="menu" style = "text-align:left;">
<li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...</li>
</ul>
Here is the CSS:
ul#menu
{
padding: 0 0 0px;
position: relative;
margin: 0 0 0;
text-align: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li a
{
padding: 0px 0px;
margin-right:20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
}
Kill display: inline on the list items and float them left instead. Float the container as well, which will ensure that it's only as wiide as its contents. Finally, set overflow: hidden on the ul.
Declare ul with display:inline-block. It'll cause ul to take only space necessary to display its contents, not 100% of it.
An example
Use display: inline-block on the ul and add the border to the ul.
If you need IE6 compatibility:
#menu li {
border-top: 1px solid #000;
border-bottom: 1px solid #00;
}
You might be able to use li:first-child (I can't remember, and don't have a copy of IE6 to test with) to apply:
#menu li:first-child {
border-left: 1px solid #000;
}
But you'll likely have to add either a class-name, or id, to the first and last li elements to give them the appropriate border-left and border-right.
I am trying to create some simple menu links. I tried something like this:
div.menulinkboxaround
{
height: 25px;
}
a.menulinkbox
{
font-family: Verdana, Helvetica;
padding-left: 50px;
padding-left: 50px;
padding-bottom: 5px;
padding-top: 5px;
background-color: Green;
}
a.menulinkbox:hover
{
background-color: Red;
}
a.menulinkbox:visited
{
background-color: Yellow;
}
<div class="menulinkboxaround">Link 1</div>
<div class="menulinkboxaround">Link 2</div>
<div class="menulinkboxaround">Link 3</div>
<div class="menulinkboxaround">Link 4</div>
What i am trying to accomplish is to create menu elements that has a touch of style to em, so each link should be inside a div box with a padding 50 px on each side.
When i run this, they get clumped up on top of each other. I don't want to specify a width since the text inside the menu box should determine the size of it automatically.
Ex. (50px+text size+50px)
50px space (just green area) | Sample Text | 50px space (just green area)
Maybe this will help (since divs are block displayed elements by default):
div.menulinkboxaround { height: 25px; float: left; }
Try adding this:
a.menulinkbox
{
display: block;
}
Depending on whether you want this menu vertical or horizontal you may also want to add float: left; to div.menulinkboxaround.
As the previous answers suggest, you could put float:left on the menulinkboxaround.
It is difficult to tell from your description the desired effect, I am assuming you want the menu to be horizontal with 50px either side of the links.
With the code you currently have, the hover state only stretches in one direction, also as you are only specifying :hover it is not really as keyboard friendly as it would be if you specified :focus as well.
Also because you are setting the height in px as you increase the font size the text becomes clipped at the bottom. Not specifying the pseudo selectors on the link may also cause you later problems in Internet Explorer.
You could also tidy up the code a little to reduce the unnecessary classes and improve the semantics of the menu.
For example:
<style type="text/css">
ul.menu {
/* removing the browser defaults for margin padding and bullets */
margin: 0;
padding: 0;
list-style-type: none;
/* Now you have a sensible parent it is a good idea to put the font
family here, I have also added a fallback of sans-serif in the rare
case Helvetica and Verdana are not available on the users computer,
it might be best to set this on the body if you are using this font
site-wide
*/
font-family: Verdana, Helvetica, sans-serif;
/* To create symetry I am adding 25px to the right and left of the menu,
this will stay green even if the items inside are not
*/
padding: 0 25px;
background-color: green;
/* increacing the lineheight so the background color of the links does
not overflow the green of the menu behind it, for a simple menu like
this it is fine, a more complex or longer links that need to wrap I
suggest changing the method of implementation from display inline to
floating which is a bit more complex
*/
line-height:1.95;
}
/* because all the list items are inside this parent list you can use
the descendant selector to target them rather than adding a separate
class, you are saying all list items inside the unordered list that
has a class of menu
*/
ul.menu li {
/* telling the list items to behave like inline elements so they are
naturally on one line also removint the browser default margin and
padding
*/
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
/* you can combine all your padding rules together in the order
Top Right Bottom Left, I remember this like it kinda spells TRouBLe :)
*/
padding: 5px 25px 5px 25px;
background-color: green;
/* setting the color to white because the default link color of blue
is not that visible against green
*/
color: white;
}
/* adding the :focus selector to make this more keyboard accessible */
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
</pre>
<ul class="menu">
<!-- Putting these all on one line because we are making
them display:inline so the spaces get counted and there will
be a gap otherwise -->
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
I have tested this in recent versions of FF, Opera and Safari, and IE6 IE7 and IE8
<style type="text/css">
ul.menu {
margin: 0;
padding: 0;
list-style-type: none;
font-family: Verdana, Helvetica, sans-serif;
padding: 0 25px;
background-color: green;
/* overflow hidden clears the internal floated links and zoom 1
kicks IE into doing the same, I suggest you move the zoom: 1
into an IE stylesheet using conditional comments
*/
overflow: hidden;
zoom: 1;
}
ul.menu li {
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
padding: 5px 25px 5px 25px;
background-color: green;
color: white;
/* setting the links to float left and giving them display block as
well explicitly, this is so that the vertical padding of 5px gets
applied, inline elements can only have horizontal margin and padding,
and since we are floating them they now take up 0 vertical height in
the document which is why we needed to clear the float on the
surrounding menu
*/
display: block;
float: left;
}
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
<ul class="menu">
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
This second method is much more reliable, deals with wrapping links nicer and is generally a better solution but a bit harder to explain.
If you didn't want the menu to fill the full width of the screen just as long as the text takes up, regardless of which method you are using above, I suggest you put float: left and clear: both on the ul.menu which should shrink to the width it needs to take up
I hope this helps
sample code below (credit to other answers)
div.menulinkboxaround
{
height: 25px;
float: left;
}
a.menulinkbox
{
font-family: Verdana, Helvetica;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 5px;
padding-top: 5px;
background-color: Green;
}
a.menulinkbox:hover
{
background-color: Red;
}
a.menulinkbox:visited
{
background-color: Yellow;
}
<div class="menulinkboxaround">Link 1</div>
<div class="menulinkboxaround">Link 2</div>
<div class="menulinkboxaround">Link 3</div>
<div class="menulinkboxaround">Link 4</div>