I'd like to center a list of left-aligned items.
This is what I currently have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shrinkwrapped List</title>
<style type="text/css">
#wrapper {
margin: auto;
width: 500px;
border: solid 1px #CCCCCC;
}
#header {
text-align: center;
font-size: 200%;
}
#content {
text-align: center;
}
#content ul {
text-align: left;
font-size: 150%;
list-style-type: none;
margin: 20px auto;
padding: 0px;
border: solid 1px #666666;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Shrinkwrapped List
</div>
<div id="content">
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur</li>
<li>Adipiscing elit</li>
<li>Morbi odio</li>
<li>Mi blandit vehicula</li>
</ul>
</div>
</div>
</body>
</html>
Which produces a page that looks like:
What I really want looks like this:
I can accomplish this by adding width: 200px; to #content ul but the problem is that I have a lot of lists like this and they all have various widths.
I'd like the <ul> to shrink to the content so it can be centered correctly. Or am I going about this the wrong way?
Thanks for any help you can provide.
Solution
Thanks to KennyTM and Magnar, here is the solution:
Add these four lines to #content ul's CSS rules:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
I've tested this in IE6, IE7, IE8 and Firefox 3.6. The results looks like the second image above and the list always fits to the content of the items.
Set the <ul> to use display: inline-block;. See http://jsbin.com/atizi4.
Note that inline-block is not supported (completely) for IE ≤7.
You can probably adopt my previous answer. Inline-block for IE, display:table for modern browsers. Might need to explicitly specify a list-style-type.
Edit: Since this is a list, may be able to get away with inline-block on the ul and not display:table. You need to declare in a separate rule, display:inline; after inline-block for IE.
I'd look at using CSS and putting a margin: 0 auto on the <ul> with a maximum width container.
Try this. It involves in incompatibilities, but I don't really know how older browsers handle margins and padding and all that anymore since I only work with new ones. It only involves some minor changes to your CSS.
/* I didn't style the other parts, so I'm taking them out to save space. */
#content {
margin: 0 auto;
}
#content ul {
border-top: solid 1px #666666;
border-bottom: solid 1px #666666;
text-align: left;
font-size: 150%;
list-style-type: none;
margin: 20px auto;
padding: 0px;
width: 202px;
}
#content li {
border-left: solid 1px #666666;
border-right: solid 1px #666666;
margin: 0 auto;
padding: 0;
width: 200px;
}
Edit: I want to clarify what I changed. I changed how content is aligned, but honestly, you can change that back, I don't think it has an effect.
What I originally did was set a fixed width and centered your li element, which you had no styling for. That just centered the content. The border you placed was on the ul so it was very wide, but if we placed it in the li then we would have many boxes. So, I split the border style. The reason why #content ul has a 202px width is because borders count on the outside of the width.
I hope the explanation made it clear to why it worked. Good luck! I tested this out in Google Chrome.
A solution compatible with any browser, no matter how old it is:
Center the table and put your list inside.
Example:
<table style="margin-left:auto; margin-right:auto;"><tr><td>
<ul>
<li>Line1</li>
<li>Line test 2</li>
<li>Line long for test</li>
</ul>
</td></tr></table>
Related
So I've been working on a website in html5 and css3, but I've ran into a problem. My wrapper is 960px, and within that wrapper I have 2 DIVs, 1 being floated left, and the size of that one is 240px, and 1 floating right, with the size being 695px. In browsers there is a zoom feature, which I assume simulates different resolutions. So when I zoom out a couple of clicks, my right floated div, expands and goes underneath my left floated div. Take a look at the screenshots:
Normal: http://puu.sh/iMCEn/eff5baff4d.png
Zoomed: http://puu.sh/iMCGQ/98145b5788.png
Here is my CSS:
* { margin:0; padding:0;}
#font-face {
font-family: reckoner;
src: url(../fonts/Reckoner.ttf);
}
#font-face {
font-family: champ;
src: url(../fonts/champ.ttf)
}
body {
background-color: #333333;
}
#wrap {
width: 960px;
margin: 150px auto 0 auto;
}
#banner {
color: #e5e5e5;
font-family: reckoner;
font-size: 65px;
text-shadow: 0px 0px 10px black;
margin-left: 10.5px;
}
#main {
height: auto;
overflow: auto;
background-color: #1a1a1a;
border: 1px solid #404040;
outline: 2px solid black;
}
#nav {
font-family: champ;
width: 240px;
float: left;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
text-decoration: none;
background: #262626;
padding: 7px;
margin: 10px;
outline: 1px solid #404040;
border: 1px solid black;
}
#nav ul li:hover {
background-color: #404040;
}
#nav ul a {
text-decoration: none;
color:#e5e5e5;
font-size:17px;
text-transform: uppercase;
text-shadow: 0px 0px 10px black;
}
#content {
float: right;
width: 695px;
min-height:500px;
background-color: #262626;
margin: 10px;
outline: 1px solid #404040;
border: 1px solid black;
}
Here is the HTML:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>AAA GAMING - TRIPLE A GAMING</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrap">
<div id="banner">AAA GAMING</div>
<div id="main">
<div id="nav">
<ul>
<li>Home</li>
<li>Donate</li>
<li>Chat</li>
<li>How To Connect</li>
<li>Application</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
</div>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! Thank you!
The zoom feature does not simulate different resolutions, a better way to do this is resizing the browser window. Zoom is notorious at breaking layouts due to rounding errors so I wouldn't fret too much over it, but in this case fixing the problem is easy.
I replicated this problem in Chrome.
Floats are often glitchy like this because if anything happens to make the stuff fitting in the remaining space beside a float, wider than the floating element, they'll get bumped down below the floating element. This is what is happening here. In general, I also avoid placing two floating elements side-by-side.
The two basic solutions are:
Make the element narrow enough that it doesn't happen
Use something besides a float (like absolute positioning)
(2) is a long-term solution I'd recommend for new layouts. But a quick solution to implement (1) in this case is to change the margin of the #content element. Under:
margin: 10px;
Add the line:
margin-left: -10px;
This fixes the problem on my browser at all zooms down to 25%. It also doesn't visibly effect the layout at all in any other way, because it doesn't affect the width of the visible part of the element itself, it only effects the width of its container which can force it to get bumped down.
It looks like your main container is changing width on the browser zoom. If you set the min-width style on it, it will stop shrinking beyond the breaking point. I set it to min-width: 965px; and that seemed to stop the breaking on zoom (at least in Chrome).
The title is probably kind of confusing.
I have a list of some elements, that each have a CSS hover effect applied (the background lightens). However, I would like each element to fill all of the space in its container, which they currently don't do.
Ex:
How it should be:
In addition, I need the elements to be close together, inline-element style, as seen in the first example. I have looked into display:inline and display:inline-block on a div tag; however, that caused the div to behave like in the first example (the element doesn't fill all of its horizontal space, visible from the hover effect). Ex:
<div style="display:inline-block">Example 1</div>
On the other hand, using a span has the inverse effect, causing a second-example-esque problem. Ex:
<span style="display:block">Example 1</span>
Is there any way to do both? i.e. Is there any type of element or CSS trick with inline-element-like vertical padding and block-element-like horizontal padding?
Add width: 100%
(Demo)
<span style="display: inline-block; width: 100%;">
You may follow something like the following:
CSS:
#nav{
width: 33%;
border: 2px dotted #000;
}
#nav ul{
padding: 0px 0px 0px 0px;
}
#nav ul li {
width: 100%;
list-style: none;
display: inline-block;
}
#nav ul li:hover{
background-color: #ffccaa;
}
#nav ul li a{
padding: 5px 0px 5px 10px;
text-decoration: none;
}
HTML
<div id="nav">
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div>
Checkout this DEMO
I'm a beginner at CSS and am trying to understand how the text in each li element in a nav menu can be centered, both vertically and horizontally.
As an example, I am looking at this particular nav menu from David Appleyard:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu</title>
<style type="text/css">
body {
padding: 50px;
}
/* The CSS Code for the menu starts here */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
</style>
</head>
<body>
<!-- Grey Menu -->
<div id="menu_wrapper" class="grey">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li class="active">About</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
How is he getting his li text nicely in the middle of the li elements? Is he just playing around with padding and line-heights until he gets it perfect?
Also, on a side note, why does he set his #menu li as to display:block?
Here's the breakdown:
display: block;
He's doing this because you can give block boxes padding. This is nice because padding is included in the 'clickable' area around the link. Users are accustomed to thinking of menu items as 'buttons,' so it's nice to be able to click more than just the text.
View a JSFiddle isolating the padding on an anchor
Note: I only floated the a to keep it from extending the entire width of the iframe
Centering horizontally
The padding of the anchor elements is symmetrical, so they're appearing to be centered horizontally. The line that does this is padding: 0 20px;. Note that the fact that these block boxes don't extend the full width is because their parents are set to float left.
Here's a JSFiddle isolating this centering effect.
Note: The parents being floated left is what causes everything to appear on the same line
Centering vertical
Text is centered, by default, about the center of the line. If you're trying to center a single line within a containing element, a nifty trick is to just set the line-height to be the height of that element. In this case, the parent is set to be height: 40px so he's matching that height. The line that does what I've described here is line-height: 40px;
Here's a JSFiddle isolating the vertical centering.
Other possibilities
You'll see that I centered the a horizontally and vertically in the very first JSFiddle I posted. That's usually the method I use, but of course, there's always more than one way to do things. The best method is probably dependent on the context of your project!
Yes, it's the line-height: 40px that centers vertically. This won't look right if the text were ever to wrap.
Anchors are display: block so that padding is applied to a block-level element, rather than the default inline (try changing it to see how the appearance changes). The anchor will essentially "fill" it's container LI element, which is floated to keep things on the same line (while not "inline").
I am trying to create a navigation panel for my website. I would like it to consist of:
Four tabs in equal size with text-centered in each tab.
They should fill the whole page width.
I would really like the design to be flexible and browser friendly. I have tried various float techniques, but I can't get it to work. I hope that you can help me out!
Thank you.
HTML
EDIT: it's 2015 and HTML5 has been there for a while; following code should be inside a nav element (html5doctor) with landmark ARIA attribute role="navigation" on it (and 99.9% of the time be unique in any given page).
A navigation panel should use an unordered list of links:
<ul id="nav">
<li>One</li>
<li> Second</li>
<li>Third</li>
<li>Fourth and last, so large that... worst case</li>
</ul>
CSS
EDIT2: It's 2017, just use Flexbox 😲 (with or without flex-wrap: wrap)
inline-block is useful but has one drawback: whitespace between two elements must be carefully managed. Whether removed or no </li> in HTML5 or </li> at the beginning of the following line stuck like </li><li>next item or other tricks, you still have to do something or it'll create a ~4px gap between 2 elements.
25% + 25% + 25% + 25% doesn't equal 100% on all browsers if the total isn't a multiple of 4. Each browser has its own rounding method.
If you want elements to total 100% width and equal width, another method is to use display: table (and table-cell) with table-layout: fixed to force browsers to use the other table algorithm, the one that doesn't try to adapt cells width to content but respect the widths wanted by the designer/developer as far as possible.
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
#nav {
display: table;
table-layout: fixed;
text-align: center;
}
#nav li {
display: table-cell;
width: 25%;
padding-right: 1px;
height: auto;
vertical-align: bottom;
}
#nav a {
display: block;
min-height: 100%;
padding: 4px 10px;
background-color: #222;
color: white;
border-radius: 6px 6px 0 0;
}
Fiddle
http://jsfiddle.net/PhilippeVay/aHCy3/1/
edit: http://jsfiddle.net/PhilippeVay/aHCy3/2/ with another method for space between each tab, courtesy of my colleague.
You don't need floats for this. Just set the width to 25%, or a tiny bit less than 25%. If you're using this on a block level element, set display: inline-block. This will work for all browser sizes, as well as respond to window resize.
HTML
<div class="nav">Nav 1</div>
<div class="nav">Nav 2</div>
<div class="nav">Nav 3</div>
<div class="nav">Nav 4</div>
CSS
body, html {
width: 100%;
padding: 0;
margin: 0;
}
.nav {
width: 24%; /*Slightly less than 1/4th of the width*/
display: inline-block;
padding: 0;
margin: 0;
text-align: center;
}
Live demo
css:
.tab {
float: left;
width:25%;
height:25px;
background:black;
border:1px solid #fff;
box-sizing: border-box;
}
html:
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
jsfiddle: http://jsfiddle.net/zP7Xh/6/
I'm sure this has been asked many times but I couldn't work out what to search for.
I have the following HTML and CSS (see jsfiddle for a live example):
<!--HTML-->
<body>
<div id="container">
<div id="header">
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</div>
</div>
</body>
/* CSS */
#container {
background-color: red;
width: 400px;
height: 200px;
margin: auto;
}
#header ul {
list-style: none;
margin-top: 20px; /* I want this to be the margin at the top of the ul, not the container */
}
#header li {
float: left;
margin-right: 10px;
}
The problem I'm having is with the margin-top of the <ul>. It's adding space above the #container <div>, not above the <ul>. I must be missing something fundamental about CSS, because I just don't get this behaviour. Could someone enlighten me please?
Due to margin collapsing, if it touches the top of the body then that's where the margin lives. Easy fix is to just rely on top padding.
Try the padding. I've also found that using a CSS reset is helpful in getting everything to behave more similarly across browsers.
http://meyerweb.com/eric/tools/css/reset/