JS Fiddle example
I need these boxes in example to be placed the same size out of each other on the same line. How it could be possible to make?
Also, if you resize window and one box drops down, then it would be in the center like it is now in the start of the example.
<div id='wrapper'>
<ul>
<li>
</li>
<li>
</li>
</ul>
</div>
EDIT:
First, I would suggest using divs instead of <ul> and <li> otherwise you will have to reset styles on them (for example, chrome adds -webkit-margin-before/after and other css properties that can mess up your layout).
Fiddle with divs.
If you really need to keep you HTML markup, here is a
FIDDLE taht works in chrome.
HTML :
<div id='wrapper'>
<ul>
<li><span></span>
</li>
<li><span></span>
</li>
<li><span></span>
</li>
</ul>
</div>
CSS :
html, body {
width:100%;
margin:0;
overflow: hidden;
}
#wrapper {
width: 100%;
height: 220px;
background-color: #000;
}
ul {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start:0;
}
ul > li {
float:left;
display:block;
width:33.33%;
height: 220px;
list-style-type: none;
}
ul > li > span {
background-color: red;
display:block;
margin:0 auto;
width:200px;
height:100%;
}
Related
How do I move all the text and images slightly down to center them without moving the borders down with it?
I tried relative positioning each item but the border kept moving down and out of the height of parent container.
Here is the code (I am using an old page from the BBC website and trying to copy it to learn):
<head>
<meta charset="utf-8">
<title>Technology - BBC News </title>
<style>
body {
margin:0;
padding:0;
}
#topbar{
width:1000px;
height: 40px;
margin: 0 auto;
background-color: red;
}
#topbar-menu li {
list-style-type: none;
float:left;
border-left: 1px solid grey;
height: 40px;
padding: 0 10px 0 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="topbar">
<ul id="topbar-menu">
<li><img src="images/bbc-logo.png"></li>
<li id="signin-text">Sign in</li>
<li><img src="images/bell.png"></li>
<li>Sport</li>
<li>Weather</li>
<li>TV</li>
<li>Radio</li>
<li>CBBC</li>
<li>More</li>
<li> <input type="text" value ="Search"> </li>
</ul>
</div>
</body>
I would suggest using the line-height attribute. For example, see screenshot below.
There is no need for <div id="topbar"> because your ul will serve as the container. From there, you can set that ul to be a flex container using the Flexbox layout.
You should also reconsider using fixed sizes because they will only appear correctly on a fixed viewport size.
body {
margin:0;
padding:0;
}
#topbar-menu {
display:flex;
justify-content:center;
margin:0;
padding:0;
background:red;
text-align:center;
height: 3em; /* 300% of the inherited font size */
min-width:900px; /* never less than 900px wide regardless of viewport width */
margin: 0 auto;
background-color: red;
}
#topbar-menu li {
list-style-type: none;
border-left: 1px solid grey;
padding: 1em; /* This is what makes the content vertically align */
font-weight: bold;
}
<ul id="topbar-menu">
<li><img src="images/bbc-logo.png"></li>
<li id="signin-text">Sign in</li>
<li><img src="images/bell.png"></li>
<li>Sport</li>
<li>Weather</li>
<li>TV</li>
<li>Radio</li>
<li>CBBC</li>
<li>More</li>
<li> <input type="text" value ="Search"> </li>
</ul>
Try this. This will center align the contents vertically.
#topbar-menu li{
display: flex;
align-items: center;
}
Try line-height: 100%;
This should let the text be vertically centered
I'm trying to get my menu working with an image on the left side. For some reason whenever I try to align the image in same line with the menu it's not working out. This is what the html looks like, I can't get the CSS working at all. It's either throwing the menu under the image or the background disappears and the content overlaps the menu but the image is in the right place. The image is 50px in height as well so it shouldn't be a problem.
HTML:
<div>
<img src="logo_small2.png" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page</li>
<li>Classes</li>
<li>Game modes</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
header div {
height: 50px;
background: #333333;
}
#banner,
header ul li {
display: inline-block;
}
header nav > ul > li{
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
What happens now is that the banner is in place over the background of the div and the menu is under the banner and the background in a new line. If I replace the img with a simple h1 it works as a charm >.> I'm clueless, please help
Your CSS does not match the HTMl, there is no header shown.
Assuming that the div is, in fact the header, the nav needs to be inline-block too I suspect. It's currently block level and so 100% wide.
Then you can just align the elements.
header {
height: 50px;
background: tomato; /* for demo only */
}
header nav {
display: inline-block;
vertical-align: middle;
}
header nav ul {
margin: 0;
padding: 0;
}
#banner,
header ul li {
display: inline-block;
vertical-align: middle;
}
header nav > ul > li {
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
<header>
<img src="http://www.fillmurray.com/200/50" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page
</li>
<li>Classes
</li>
<li>Game modes
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Possible reason is the width of the image not allowing the inline-block comand:
try this:
img{ float:left; width:50%; vertical-align:middle;}
ul{float:right;width:40%;vertical-align:middle;}
For some reason my image is centered when the browser width is less than 1015px width-wise, but when I go over that it moves completely to the left, with no padding against the side of the page. I'm doing:
HTML
<div id="nav">
<div id="logo">
<img src="../img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
</div>
<img class="center" src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
CSS
#nav {
margin-bottom: 100px;
}
#nav ul li {
display: inline-block;
}
#nav ul {
position: relative;
float: right;
right: 60px;
bottom: 30px;
}
#nav li {
padding-right: 20px;
font-size: 20px;
color: white;
}
.canvas-wrap {
min-height: 100%;
margin-bottom: -30px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Edit
The problem is somewhere in the markup/styling of my navigation bar. When I remove the markup for the navigation bar, it centers correctly. I've edited the question to include the HTML and CSS for the nav bar. I don't see what's wrong with it.
I don't see an issue when viewing in Firefox. Your markup and CSS however are very simplistic. I assume this is only because you don't want to post your entire solution here.
What you may want to consider is adding a clearfix just before the closing #nav in the markup. As in the following:
<div id="nav">
<div id="logo">
<img src="img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
<div class="clear"></div>
The CSS for the clear needs the absolute basics, although you can make your clearfix as complex as you wish:
.clear { clear: both; }
You can also add overflow as an option to your #nav, but this is definitely not advised for a container holding a navigation because it will hide items like subnavs. But to add the overflow: hidden, you do the following:
#nav {
margin-bottom: 100px;
overflow: hidden;
}
What I would do with your .center image is remove the inline styling, and then do the following with the CSS declaration/and HTML markup:
<img class="center" src="img/laptop.png" alt="laptop-pic" style="" />
img.center {
display: block;
margin: 0 auto;
width: 100%; /* For responsive */
max-width: 500px; /* For responsive */
height: auto; /* For responsive */
}
Your inline-block for #nav ul li will not work because you've applied float: right to #nav ul. You also have right: 60px within the same ul declaration. If your intent is inline-block for the li elements, you need to remove the aforementioned.
The final thing I'll mention in my response is your use of display: inline-block; Make sure that you remove whitespace from this. There are several methods upon how to do this - none of which are pretty. You can't really remove the whitespace with CSS, so the best approach is to fix it in the markup. Below are 2 solutions of many:
Solution 1 for inline-block:
<ul>
<li>How It Works</li
><li>Portfolio</li
><li>Team</li
><li>Contact</li
><li>Jobs</li>
</ul>
Solution 2 for inline-block:
<ul>
<li>How It Works</li><!--
--><li>Portfolio</li><!--
--><li>Team</li><!--
--><li>Contact</li><!--
--><li>Jobs</li>
</ul>
I don't know which browser you're using. When I run your code on Chrome everything works fine, but IE is no good.
I'm thinking this is related to a known problem about IE not rendering display: block and display: inline-block correctly.
I did a different approach to get it done. Just wrapped the image with a div and centered the contents. Its not the more elegant answer though.
See below:
HTML
<div class="divCenter">
<img src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
</div>
CSS
.divCenter {
width:100%;
text-align:center;
}
I've got an issue that I can't resolve.
I have a list of lists, like this one:
<ul id="nav">
<li>
<div class="tabquad">
Item 1
</div>
<ul>
<li>
<a class="item" href="index.jsp?quad=1">
<div class="tabquad">
1.1
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=2">
<div class="tabquad">
1.2
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=3">
<div class="tabquad">
1.3
</div>
</a>
</li>
</ul>
</li>
<li>
<div class="tabquad">
Item 2
</div>
<ul>
<li>
<a class="item" href="index.jsp?quad=7">
<div class="tabquad">
2.1
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=8">
<div class="tabquad">
2.2
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=9">
<div class="tabquad">
2.3
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=10">
<div class="tabquad">
2.4
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=11">
<div class="tabquad">
2.5
</div>
</a>
</li>
</ul>
</li>
</ul>
with this CSS:
#nav, #nav ul {
padding: 0;
margin: 0 auto;
list-style: none;
}
#nav {
width: 45em;
margin: 0 auto;
}
#nav a {
display: block;
width: 15em;
}
#nav li {
float: left;
width: 15em;
}
#nav li ul {
position: absolute;
width: 15em;
left: -500em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
.item{
color:#0E4063;
text-decoration:none;
}
.tabquad{
color:white;
margin:auto;
position:relative;
border:1px solid #000;
border-color:rgb(82,115,154);
width:200px;
height:30px;
text-align:center;
padding-top:10px;
top:25px;
background-color:rgb(0,56,130);
}
.tabquad:hover{
background-color:rgb(49,87,132);
cursor: hand;
}
My problem is: Item 1 list and Item 2 list are not in the center of my page, they are left-oriented.
I've tried with the center parameter and with the float, without success.
Any suggestion?
You can find a fiddle here: Link
you have to set the width of the #nav to the right value (corresponding to the width of the content). change your example to the following value and the two menus will be centered on the page.
#nav {
width: 30em;
margin: 0 auto;
}
updated jsFiddle: http://jsfiddle.net/F9Wrb/17/
and just to increase cross-browser compatibility, add the following CSS to the parent node of your #nav:
body {
text-align: center;
}
You might want to read about the basics of CSS page centering and page layouts.
Normally, you'd have a "container" <div> that contains the entire page and defines the layout and boundaries of the page. You can call it anything (not necessarily container)
Now, you need to decide what layout fits you best, most commonly used layout sizes can vary anywhere between 960px to 1200px.
general styling for your container would be,
.container{
width:960px; //<-- this can be anything, based on your layout.
margin:0 auto;
}
This ensures your page is centered almost always. You would want to use some kind of a CSS Reset to ensure you reset browser defaults
Here is your solution. I have just changed these two styles. FYI, unless you are using html5, you cannot put div inside <a> tag; it's invalid.
#nav, #nav ul {
padding: 0;
margin: 0 auto;
list-style: none;
text-align:center
}
#nav li {
width: 15em;
display:inline-block;
}
Three possible solutions:
Using absolute positioning and a negative left margin:
#nav {
position: absolute;
left: 50%;
margin: 0 0 0 -15em;
}
Demo 1
Using auto margins with ul width specified:
#nav {
width: 30em;
margin: 0 auto;
}
Demo 2
If you want to use the auto-margin solution and don't want to specify the ul width, declare the LIs as display: inline-block (instead of floating them). This works because the LIs will now be in the page flow instead of out of it, as they are when floated. Answer courtesy of Kashif Raza.
#nav {
margin: 0 auto;
}
#nav > li {
display: inline-block;
width: 15em;
}
Demo 3
#nav a {
display: block;
width: 15em;
margin:auto;
}
#nav>li {
width:50% !important;
}
#nav li:hover ul {
position:relative;
left: auto;
}
Make these changes in your CSS and lists will be in the center of your page.
Just put a width on the surrounding div, then change that to margin:0 auto, which will center it in the page.
.center{
width:400px;
margin:0 auto;
}
And the html, rather than float="center"
<div class="center">
http://jsfiddle.net/F9Wrb/12/
As mentioned, there is no such thing as float="center", or for that matter, float:center;! For advanced positioning of elements, I'd recommend using a CSS framework such as zurb foundation or Gridpak.com
Put this where you want to center:
div align="center"
I am trying to have some LIs within a UL align left, right, and center within a page. For the life of me, I can't figure out how to keep something "centered" on the same line as a left and right aligned LI.
ul {
margin:1em 0;
padding:0
}
ul li{
display:inline-block;
white-space:nowrap;
margin:5px
}
ul li.left{
float: left;
text-align:left;
}
ul li.center{
float:left;
text-align: center;
}
ul li.right{
float: right;
text-align:right;
}
<ul>
<li class="left">left</li>
<li class="center">center</li>
<li class="right">right</li>
</ul>
<ul>
<li class="left">left</li>
<li class="right">right</li>
</ul>
<ul>
<li class="left">left</li>
</ul>
Can anyone help? BTW, I've trying to avoid DIVs.
Thanks!
If you want each to share screen space equally, you can do this:
<style>
.split { width: 33%; float: left; }
</style>
<ul>
<li class="split">left</li>
<li class="split">center</li>
<li class="split">right</li>
</ul>
You'll want to move your styles to an external stylesheet, though.
You can definitely do this with only one thing being floated.
ul li { float:right; }
If you float them all to the left, then you will get (with three LI elements) a right, center, and left.
<ul><li>right</li><li>center</li><li>left</li></ul>
A good way to think of this is thinking of what you want to happen to each individual LI element: you want each one to be moved to the right of the other. This is the most common method of making horizontal navigation with a list structure.
Your li elements will only be as wide as the text that it contains since you are floating them and are not specifying width. Do you want your center element to be fluid? If I'm not mistake., it sounds like you're going for a fluid three-column layout? There are plenty of examples of these on the net if that's what you're going for.
Thanks to mitch and everyone else, this is the solution I came up with and works for me.
<style>
ul {
margin: 1em 0;
padding: 0;
list-style-type:none;
}
li.three {
width: 33%;
}
li.two {
width: 50%;
}
li.one {
width: 100%;
}
li.left {
float: left;
text-align: left;
}
li.center {
width: 33%;
float: left;
text-align: center;
}
li.right {
width: 33%;
float: right;
text-align: right;
}
</style>
<ul>
<li class="three left">left</li>
<li class="three center">center</li>
<li class="three right">right</li>
</ul>
<ul>
<li class="two left">left</li>
<li class="two right">right</li>
</ul>
<ul>
<li class="one left">left</li>
</ul>