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
Related
I want to have a left-aligned navigation bar across the top of the page, but before (i.e. to the left of) the menu items, I would like a bit of text ("John Doe") that (i) has a substantially larger font size than the menu items but (ii) has the same baseline as the menu items.
From what I understand, the preferred/recommended way to do navigation bars is with floated <li>'s. However, I haven't found a way to use a left floated list and also have the menus align to the same baseline as the text to the left. My current CSS and HTML are:
<html>
<head>
<style>
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li~li {
float:left;
border:solid 1px blue;
width:100px;
}
#name {
float:left;
border:solid 1px blue;
font-size:40px;
width:250px;
}
</style>
</head>
<body>
<div id='navdiv'>
<ul id='nav'>
<li id='name'>John Doe</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
Is there any way to vertically align all left floated <li>'s to the bottom of the container <div>?
I should say: I can easily achieve the intended effect by using a table instead of a floated list (using vertical-align:bottom on the menu <td>'s), but since floated lists seem to be the recommended standard, I'd like to know if it's possible with them. (Though I really don't understand the animus folks seem to have against using tables for layout.)
Don't need to use float, in fact it's better if you don't, you can just set the display type to a table-cell
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li {
display: table-cell;
vertical-align: bottom;
border:solid 1px blue;
width:100px;
}
#nav li#name {
font-size:40px;
width:250px;
}
also, the extra border style was unnecessary, just change the selectors to #nav li and #nav li#name and you can supersede anything in #nav li with what's in #nav li#name because it has higher priority.
tables are bad mostly because of the way they load, as far as I understand they require the whole table to build before content can load, while using individual elements can load as they please, or something to that affect, i'm sure someone else could explain that part better.
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!;
I have some text links inside a list, then within two divs. I want the hover effects to expand past the list to the outside of the outer div. Is there a way to do it with negative padding? Another way? Possible at all?
Visuals will be easier
How it is now-
Highlight of the padding in the surrounding div-
How I want the a:hover effect to look-
Basically the code looks like this-
.1 { padding: 10px;}
.2 { padding: 5px;}
<div class="1">
<div class="2">
<ul>
<li>
<a>abcde</a>
</li>
<li>
<a>fghij</a>
</li>
</ul>
</div>
</div>
Negative margin/padding are invalid and don't work as expect,
but is possible, you have to take out all his
parents margins and add padding to the links to get
the same effect but with all wide anchors:
/* CSS CODE */
.parent { padding:0px; border:1px solid red }
.child { padding:0px; }
.parent h2 { margin:10px; font-size:22px; }
.child ul li a { display:block; padding:10px 15px; }
.child ul li a:hover { background:green; }
you can see an example in: http://jsfiddle.net/3zANs/
Negative padding is invalid (and simply won't work), negative margin on the other hand is valid and it might be useful in your case.
I believe, also invalid are classes that stars with numbers.