I have this ul menu:
<ul id="superfish-1">
<li class="active-trail">Inicio</li>
<li class="trail">Quienes somos</li>
<li class="trail">Contacto</li>
</ul>
and I need to align it horizontally.
I saw this question but positioning the ul as postion:relative; and setting left:50% didn't make it.
I also found this question but in my case I can't set the width manually because the menu load its content dinamically, then the width changes all the time.
This is what I need:
Write like this:
#superfish-1{
text-align:center;
}
li{
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;/*For IE7*/
}
Check this http://jsfiddle.net/SdkKd/
Add margin:0 auto; to css of ul.
Check this fiddle: http://jsfiddle.net/dURBJ/1/
Related
I'm displaying a series of boxes as <li>s like this:
I want the text vertically centered in the boxes, but as you can see they are way too low. This is my HTML:
<div class="pagelinks">
<ul>
<li>1</li>
<li>2</li>
...
<li>6</li>
</ul>
</div>
and my CSS:
.pagelinks { float:right; margin:0; }
.pagelinks li {
display:inline-block;
width:20px;
height:15px;
border:2px solid #394E7E;
margin:0;
font-weight:bold;
text-align:center;
}
.pagelinks a, .pagelinks a:hover { text-decoration:none; }
I already had a look at vertically-align, but I think it will align the <li> in the <ul>, not the text in the <li>.
How do I fix this?
PS: in the accepted answer to a similar question it was suggested to use <sub>/<sup>, but I'm sure that not the way to do it.
Use line-height.
li{
line-height:15px; // the hight of the li
}
DEMO
Add line-height: 15px; to your li class
FIDDLE
The example you posted is incorrectly formatted HTML. The <a> tag should be inside the <li>.
Also, remove the height from the <li> elements and just use line-height on the <a> tags.
JSFiddle Example
Hi guys i'm trying to learn css ul and li menu bar. i'm trying to create this design http://s13.postimg.org/5bz1a4kw7/divider.jpg having the spaces and the divider per each menu bar, i can't seem to get the spacing, i tried adjusting it, but i can't get a grip on how to have this spacing per menu bar (li). Can you please get me to the right direction? Thanks
here's what i've done so far
http://jsfiddle.net/blackknights/Wbfjg/
<ul id="mcolor">
<li><font color="#000000"> Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I have updated your code.
li a{
display:block;
padding:5px 10px;
background:#ccc;
border-right:1px solid #fff;
}
li a.last{
border-right:none;
}
Check the jsfiddle
Try this Fiddle. Basically, make use of padding-left and padding-right and min-width for li elements.
I have this site here: http://jamessuske.com/freelance/seasons/
At the bottom you will see social media icons and the issue I am having is when I put my mouse over them, they are not clickable, only when I move my mouse to the left a little bit and I do not understand what I did wrong:
HTML
<ul class="social-media">
<li class="twitter"> </li>
<li class="instagram"> </li>
<li class="facebook"> </li>
</ul>
CSS
ul.social-media{
padding-top:30px;
}
ul.social-media li{
float:left;
padding-left:5px;
list-style:none;
}
ul.social-media li.twitter{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
}
ul.social-media li.instagram{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-26px;
width:25px;
height:26px;
}
ul.social-media li.facebook{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-52px;
width:25px;
height:26px;
}
Any help would be appreciated. Thanks.
The size of the clickable area depends on the content of the a tag. Your a tag does not have any content.
One solution is to apply your background image directly to the a tag and changing the display attribute to block.
ul.social-media li.twitter a {
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
display: block;
}
Note that we also need to set display to block since the anchor tag is an inline element by default. The width and height attributes only have an effect on block elements.
It's because of the padding-left you have set on the li element
it is probably because your links are so small.
try this :
.social-media a {
display:block;
height:100%;
width:100%;
}
So they fill entire <li> and stand over sprite.
I am trying to make a navigation bar with the following code , but i can't seem to get the outer div to be of the same height as that of the unordered list inside.
I tried display:inline-block too but it doesn't seem to work.
Here is the html,
http://jsfiddle.net/jairajdesai/7Lyss/
HTML :
<div id="top_navigation_menu">
<ul id="top_navigation_list">
<li class="top_navigation_options">Home</li>
<li class="top_navigation_options">Places</li>
<li class="top_navigation_options">Travel</li>
<li class="top_navigation_options">Stay</li>
<li class="top_navigation_options">FAQs</li>
</ul>
</div>
CSS :
#top_navigation_menu{
position:absolute;
top:14%;
min-width: 50%;
background-color:#eee;
color:white;
}
#top_navigation_list{
list-style-type: none;
}
.top_navigation_options{
display:inline;
}
Use display:inline with Ul and display:inline-block with li css class. Something like this
#top_navigation_list{
list-style-type: none;
background-color:#000;
display:inline;
}
.top_navigation_options{
display:inline-block;
}
JS Fiddle Demo
Just add margin: 0 in #top_navigation_list to remove the default margin of an unordered list.
Updated JsFiddle
Is it possible to style DIVs so they look like follows:
with simple code
<div class='menubar'><div class='menu'>item1<br/>item2</div>...</div>
This is for menu. I wish just to resize selected DIV.
The features should be follows:
1) DIVs are placed from left to right without specifying absolute positions.
2) DIVs are taller than container DIV but don't stretch it
UPDATE
Please explain with DIVs or SPANs, I failed to use LEFT with them. I need to learn, not get ready solution.
This is pretty basic stuff.
1) don't use divs, use a list
2) float the child element
<ul class='menubar'>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
and the according css:
ul.menubar{
/*some fancy css*/
height:<x>px; /* is needed since it would collapse otherwise*/
}
ul.menubar > li{
float:left;
/* more fancy css */
}
Here you go with a fancy demo.
set a width to your divs, then use float:left; ?
this won't stretch the container
you can also use display:inline-block; (on the divs) and set text-align:center; to the container.
But it will stretch the container.
This will depend on what browser you want it to work for. For ie8 and below i suggest not using this code. Inbox me if you'd prefer an all browser version but to ignore ie 5.5, 6, 7 and 8 its best.
First of all for the menu I find it easier to use the unordered list method than a selection of divs and their ID's and classes. Heres a small example.
HTML List
<ul id="menu">
<li>
list1
</li>
<li>
List2
<ul>
<li>
Option2
</li>
</ul>
</ul>
CSS for the menu:
body, html {
padding:0px;
margin:0px;
width:100%;
}
body{
background:#FCFCFC;
}
#menu{
background:#333333;
list-style-type:none;
padding:0px;
margin:0px;
}
#menu > li {
padding:0px;
margin:0px;
display:inline-block;
}
#menu > li > a {
color:#FFFFFF;
text-decoration:none;
font-size:20px;
font-weight:bold;
}
#menu > li > ul {
display:hidden;
position:absolute;
}
#menu > li:hover > ul{
display:block;
}
thats the basics anyway. Once you've got that your ready to go!;