Currently I have the following code...
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<link href="verna.css" type="text/css" rel="stylesheet" />
</head>
<body>
<section id="devices">
<h1>Gruppen</h1>
<div class="group">
<h2>Gruppe 1</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
<div class="group">
<h2>Gruppe 2</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
#devices {
background-color: yellow;
}
#devices .group {
background-color: gray;
}
#devices .group ul {
text-align: center;
}
#devices .group .device {
background-color: green;
display: inline-block;
margin: 5px;
max-width: 200px;
width: 100%;
}
... which looks like this:
But I want that the green <li>-elements floats in columns. It should look like this:
Please note: The number of the green <li>-elements is variable, there can be more or less than three elements and there can be more than two columns! I want to order the <li>-elements "column-wise" and center them...
Thanks for help :-)
The thing that is centering "Schalter 3" is text-align: center;. We can fix this by removing
#devices .group ul {
text-align: center;
}
and adding:
#devices .group ul {
margin-left: 50px;
}
#devices .group li {
text-align: center;
}
in its place. This centers the text in the li element, instead of centering the li element inside the ul. And it adds the margin to the left to get the indent you wanted.
Working Fiddle.
Restructure your html so that each "column" is it's own container (div) which has an appropriate width. Alternatively, if you hate yourself, use a table.
Check out this fiddle.
The trick was to turn the lis back into block-level elements so that they could have width. Then set width: 40%; (40% leaves a little room for the 5px margin) and float: left;. Also adding overflow: auto; to the ul so that it would contain its floated lis.
Related
I am trying to put nav and img elements next to each other on top of the page.
I am putting both elements in the top_bar container.
I have tried setting the top_bar to display: inline-block;, reducing the width of nav and floating it to left and also floating the img to right. Then I have tried combinations of those, but nothing gives me the result I want. Either the elements start to jump around or the logo is put below the top_bar border.
How can I have nav and img inline and both above the top_bar bottom border?
EDIT: I also want the nav element to be positioned left-most of the page, and img right-most.
<!DOCTYPE HTML>
<html>
<head>
<style>
#top_bar {
border-bottom: 1px solid silver;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
</style>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
</body>
</html>
Add display: flex; to #top_bar
#top_bar {
border-bottom: 1px solid silver;
display: flex;
justify-content: space-between;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
<!DOCTYPE HTML>
<html>
<head>
<style>
#top_bar {
border-bottom: 1px solid silver;
display: flex;
flex-direction: row;
align-items: center;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
</style>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
</body>
</html>
We can use CSS flex properties to achieve this. But please make sure that you are using vendor prefixes for cross browser compatability.
Your code is missing some declarations.
At first your class #top_bar should have a width declaration.
To make things easyier you could use a class instead of only declare
the image size.
Here´s a fiddle of your code that i´ve modified: https://jsfiddle.net/Thorske/nyv6mwgz/
Modified css:
* {
margin : 0:
padding : 0;
}
#top_bar {
margin : 0 auto;
width : 100%;
border-bottom: 1px solid silver;
}
.clear {
clear : both;
}
nav {
float : left;
width : 80%;
}
nav ul li {
display: inline-block;
}
.img_container {
float : right;
width : 20%;
}
.img_conatiner img {
width: 130px;
height: 30px;
}
Modifed html:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<div class="img_container">
<img src="cs_logo.png" alt="Image not found" />
</div>
<div class="clear"></div>
</div>
</body>
</html>
There only simple changes:
the #top_bar has now a defined width.
nav has now a defined width and float.
added the class "img_container" with defindet width and float
which contains the image.
the class clear keeps everything were it is supposed to be.
Since i don´t know if you want to make your code "responsiv" you´ve
to set your values for "width" yourself.
On this page, I have a footer menu #menu-footer-menu; "About - Select Your City - How Walks Work..." generated by Wordpress.
<div class="menu-footer-menu-container">
<ul id="menu-footer-menu" class="menu">
<li id="menu-item-143">About</li>
<li id="menu-item-151">Select Your City</li>
<li id="menu-item-162">How Walks Work</li>
<li id="menu-item-160">FAQs</li>
<li id="menu-item-166">Blog</li>
<li id="menu-item-153">Partners</li>
<li id="menu-item-154">Press</li>
<li id="menu-item-144">Privacy Policy</li>
<li id="menu-item-145">Site Map</li>
<li id="menu-item-146">Terms & Conditions</li>
</ul>
</div>
I want to center this menu.
I tried the following CSS but it didn't work:
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: inline-block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
Use following css instead of what you have.
I just changed display for ul#menu-footer-menu.menu to block nothing else.
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
You need to add one wrapper element with a width of 100% to center your div in.
Like:
<div class="wrapper">
<div class="menu-footer-menu-container">
...
</div>
.wrapper{ width:100% }
Use display:block instead of inline-block
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
Try to add CSS Style :
.menu-footer-menu-container
{
text-align: center;
}
You have two ways to do it
width degradation center tag
<center>
<ul>
...
</ul>
</center>
Create another div to force the center
.center { margin: auto; text-align: center; }
<div class="center">
<ul>
...
</ul>
</div>
Note: The tag must be inline-block.
width text-align:center;
ul{ text-align: center; }
<center>
<ul>
...
</ul>
</center>
Add one more style text-align:center to #footer-menu in css.
my sample code below, works in all browsers apart from ie9, in ie9 the leftcolumn is actually nearer the middle of the page for some reason! (im sure if you copy paste you will be able to replicate)
anyone help me out as to why? the css seems fine to me?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEST</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
body, html, form {
padding:0;
margin:0;
}
body {
font-family:"Segoe UI",Tahoma,Helvetica,Sans-Serif;
font-size:12px;
color:#333333;
}
#container {
min-width:1200px;
}
#horizontal-nav {
background: #1AA2DE;
width: 100%;
height:41px;
}
#left-column {
margin-top:10px;
width:210px;
float:left;
}
#center-column {
float:left;
width:180px;
margin-top:10px;
}
#right-column {
margin-top:10px;
float:left;
margin-left:10px;
}
/* TOP NAV */
.hmenu,
.hmenu ul {
list-style: none;
margin:0;
padding: 0 0 0 20px;
}
.hmenu {
font-size: 16px;
float: left;
}
.hmenu > li {
float: left;
}
.hmenu li a, .hmenu li span {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #fff;
}
.hmenu > li:hover > a {
background: #5EBEE8;
}
</style>
</head>
<body>
<div id="container">
<div id="horizontal-nav">
<ul class="hmenu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="left-column">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="right-column">
Right Content
</div>
</div>
</body>
</html>
http://jsfiddle.net/isherwood/Wgtcy/
The positioning of the horizontal-nav div is throwing off your subsequent floats in the container div in IE9. Give your horizontal-nav div a float: left; to fix.
Unless you plan on creating a fixed header you should always have block-level elements playing by the same positioning rules. Since you are using float:left; for the other block elements then this will fix on ALL machines, regardless of weird configs people are running in random browsers.
I want a parent class (ul tag) to hold a bunch of li tags to that overlap each other, here is my code:
<ul class="overlap">
<li>
Overlap One
</li>
<li>
Overlap Two
</li>
<li>
Overlap Three
</li>
</ul>
I don't want them to be positioned absolutely, because I have a parent element that has a background border and color, but when I position the children absolutely, the parent doesn't stretch, here is the code in its entirety.
<blockquote>
<ul class="overlap">
<li>
Overlap One
</li>
<li>
Overlap Two
</li>
<li>
Overlap Three
</li>
</ul>
</blockquote>
The blockquote tag has a background color on to it, that is why the children cannot be positioned absolutely.
Thanks in advance for the help!
Like this? http://jsfiddle.net/2N8Jz/
<blockquote class="clearfix">
<ul class="overlap">
<li>Overlap One</li>
<li>Overlap Two</li>
<li>Overlap Three</li>
</ul>
</blockquote>
blockquote {
border: 1px solid black;
padding: 10px;
}
.overlap {
padding-left: 10px;
}
.overlap li {
border: 1px solid grey;
float: left;
margin: 0 0 0 -10px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Giving the <li>'s a negative margin should do the trick.
here's an example: http://jsfiddle.net/wvEms/1/
How can I center an unordered list of <li> into a fixed-width div?
<table width="100%">
<tbody>
<tr>
<td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
<td width="59%"><p align="left"> </p>
<h1 align="left">StudioTeknik.com</h1>
<p><br align="left">
<strong>Marc-André Ménard</strong></p>
<ul>
<li>Photographie digitale</li>
<li>Infographie </li>
<li>Débug et IT (MAC et PC)</li>
<li> Retouche </li>
<li>Site internet</li>
<li>Graphisme</li>
</ul>
<p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span>+41 079 573 48 99</p>
<p align="left"><strong class="style1">Skype : </strong> menardmam</p>
<p align="left"><strong class="style1">Courriel :</strong> info#studioteknik.com</p></td>
</tr>
</tbody>
</table>
To center the ul and also have the li elements centered in it as well, and make the width of the ul change dynamically, use display: inline-block; and wrap it in a centered div.
<style type="text/css">
.wrapper {
text-align: center;
}
.wrapper ul {
display: inline-block;
margin: 0;
padding: 0;
/* For IE, the outcast */
zoom:1;
*display: inline;
}
.wrapper li {
float: left;
padding: 2px 5px;
border: 1px solid black;
}
</style>
<div class="wrapper">
<ul>
<li>Three</li>
<li>Blind</li>
<li>Mice</li>
</ul>
</div>
Update
Here is a jsFiddle link to the code above.
Since ul and li elements are display: block by default — give them auto margins and a width that is smaller than their container.
ul {
width: 70%;
margin: auto;
}
If you've changed their display property, or done something that overrides normal alignment rules (such as floating them) then this won't work.
I love flexbox:
ul {
justify-content: center;
display: flex;
}
Steps :
Write style="text-align:center;" to parent div of ul
Write style="display:inline-table;" to ul
Write style="display:inline;" to li
or use
<div class="menu">
<ul>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
</div>
<style>
.menu { text-align: center; }
.menu ul { display:inline-table; }
.menu li { display:inline; }
</style>
This is a better way to center UL's inside of any DIV container.
This CSS solution does not use Width and Float properties. Float:Left and Width: 70%, will cause you headaches when you need to duplicate your menu on different pages with different menu items.
Instead of using width, we use padding and margin to determine the space around the text/menu item. Also, instead of using Float:Left in the LI element, use display:inline-block.
By floating your LI left, you literally float your content to the left and then you must use one of the Hacks mentioned above to center your UL. Display:inline-block creates your Float property for you (sort of). It takes your LI element and turns it into a block element that lays side by side each other (not floating).
With Responsive design and using frameworks like Bootstrap or Foundation, there will be issues when trying to float and center content. They have some built-in classes, but it's always better to do it from scratch. This solution is much better for dynamic menus (Such as Adobe Business Catalyst menu system).
Reference for this tutorial can be found at: http://html-tuts.com/center-div-image-table-ul-inside-div/
HTML
<div class="container">
<ul>
<li>Button</li>
<li>Button</li>
<li>Button</li>
<li>Button</li>
<li>Button</li>
</ul>
</div>
CSS
.container {
text-align: center;
border: 1px solid green;
}
.container ul {
border: 2px solid red;
display: inline-block;
margin: 10px 0;
padding: 2px;
}
.container li {
display: inline-block;
}
.container li a {
display: inline-block;
background: #444;
color: #FFF;
padding: 5px;
text-decoration: none;
}
Could either be
div ul
{
width: [INSERT FIXED WIDTH]
margin: 0 auto;
}
or
div li
{
text-align: center;
}
depends on how it should look like (or combining those)
To center a block object (e.g. the ul) you need to set a width on it and then you can set that objects left and right margins to auto.
To center the inline content of block object (e.g. the inline content of li) you can set the css property text-align: center;.
Try
div#divID ul {margin:0 auto;}
Just add text-align: center; to your <ul>. Problem solved.
Interesting but try this with floated li elements inside the ul:
Example here
The problem now: the ul needs a fixed width to actually sit in the center. However we want to be it relative to the container width (or dynamic), margin: 0 auto on the ul does not work.
A better way is to let go of UL/Li list and use a different approach example here
If you know the width of the ul then you can simply set the margin of the ul to 0 auto;
This will align the ul in the middle of the containing div
Example:
HTML:
<div id="container">
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
<div>
CSS:
#container ul{
width:300px;
margin:0 auto;
}
Here is the solution I could find:
#wrapper {
float:right;
position:relative;
left:-50%;
text-align:left;
}
#wrapper ul {
list-style:none;
position:relative;
left:50%;
}
#wrapper li{
float:left;
position:relative;
}
Another option is:
HTML
<nav>
<ul class = "main-nav">
<li> Productos </li>
<li> Catalogo </li>
<li> Contact </li>
<li> Us </li>
</ul>
</nav>
CSS:
nav {
text-align: center;
}
nav .main-nav li {
float: left;
width: 20%;
margin-right: 5%;
font-size: 36px;
text-align: center;
}
I have been looking for the same case and tried all answers by change the width of <li>.
Unfortunately all were failed to get the same distance on left and right of the <ul> box.
The closest match is this answer but it needs to adjust the change of width with padding
.container ul {
...
padding: 10px 25px;
}
.container li {
...
width: 100px;
}
See the result below, all distance between <li> also to the <ul> box are the same.
You may check it on this jsFiddle:
http://jsfiddle.net/qwbexxog/14/
<div id="container">
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</td>
</tr>
</table>
</div>
use oldschool center-tags
<div> <center> <ul> <li>...</li> </ul></center> </div>
:-)