I want to align a list of links to be centered within a div.
I tried margin: 0 auto, but no luck.
Note: the navigation-wrapper div needs to stay in place, this is just the snippet of html that is of concern.
Check http://jsfiddle.net/bkmorse/aaCY7/ to see the links that I need to align properly in the div.
html
<div id="navigation-wrapper">
<ul id="top-navigation">
<li>Home</li>
<li>Volunteer</li>
<li>Support</li>
<li>Educate</li>
<li>Contact</li>
<li>Gift Shop</li>
<li>Directions</li>
</ul>
</div>
css
#navigation-wrapper {
width:465px;
border:1px solid red;
}
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
}
#top-navigation li {
display:inline;
list-style-type:none;
margin:2;
}
Change your CSS to this. That works out.
#navigation-wrapper {
width:465px;
border:1px solid red;
margin:0 auto;
text-align:center;
}
#top-navigation {
border:1px solid blue;
padding:5px 0;
}
#top-navigation li {
display:inline;
list-style-type:none;
margin:2;
}
Margin:auto work with define width.Write like this:
#navigation-wrapper {
width:465px;
margin: 0 auto;
border:1px solid red;
text-align:center;
}
#top-navigation {
display:inline-block;
border:1px solid blue;
padding:5px 0;
}
check this http://jsfiddle.net/aaCY7/1/
Since your top-navigation ul doesnt have a set width it is actually centered. However the li's within it are not. If you want to see those items centered then
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
text-align: center;
}
If you want that list centered in the div but still left align the things inside use this
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
width: 300px;
}
or do both if some combination of the two is needed.
i just need to know the display inline for the li items that woked for me. In case of center align we can add tex-align: center in the main div. In the above case
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
text-align: center;
}
This should worked
Related
Below my nav bar, I would like an aside on the left and a section right next to the aside. My aside and section should be on the same line not overlapping. My section right now is below my aside on a new line. How can I fix this issue?
header {
color:black;
text-align:center;
padding:5px;
display:block;
}
#wrapper {
width: 700px;
margin: 0 auto;
}
#nav {
width:500px;
margin: 0 auto;
list-style-type: none;
white-space: nowrap;
display:block;
}
#nav {
padding: 10px 0;
width:500px;
margin: 0 auto;
text-align: center;
list-style-type: none;
display:block;
-webkit-box-shadow: 0 2px 10px -12px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
}
#nav li {
display: inline-block;
}
#nav a {
text-align:center;
text-decoration:none;
padding: 5px;
}
aside {
padding:5px;
height:200px;
width:100px;
display:block;
}
section {
float:left;
width:200px;
padding:5px;
display:inline-block;
}
<header>Portfolio</header>
<ul id="nav">
<li>About</li>
<li>Writing</li>
<li>Multimedia</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<aside>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdfsdf
sdf
</aside>
<section>
sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd
</section>
You need word-wrap. Then you could:
Use display: block and float:left. https://jsfiddle.net/abalter/5cyp6tjh/
Use display: inline-block and vertical-align: top. https://jsfiddle.net/abalter/cdsjsvL3/
EDIT
If you want to center them, the best way would be to use a wrapper rather than fudging with widths. That will get you into trouble if you try to go responsive (mobile).
https://jsfiddle.net/abalter/2a86ac1t/
HTML and CSS:
aside, section {
display: inline-block;
vertical-align: top;
border: 1px dotted blue;
word-wrap: break-word;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<aside>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdfsdf
sdf
</aside>
<section>
sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd
</section>
</div>
Add float:right; in css for <aside> tag.
OR
You can move <aside> below to section and add float:left; in css.
aside {
padding:5px;
height:200px;
width:100px;
float:right;
}
And
Use word-break: break-all; for aside and section to prevent
overlapping.
Problem is here that you have applied display:block to aside. To fix it use float:left or display:inline-block instead of display:block. like this
aside {
padding:5px;
height:200px;
word-break: break-word;
float:left;
}
To remove overlap. use word-break: break-word;
You have to remove the display:block from aside and change the width to 300px since the float element is are 200px so then it must have 300px so then it format correctly and it overcome the overlap problem
or
you can change the width to auto : width:auto
aside {
padding:5px;
margin-right:30px;
height:200px;
width:300px;
float:left;
}
My <div> with id="page" contains a full page. My <div> with id="main" is 25px (the 25px is only coming from it having padding) tall and should be a full page tall still. Mywithid="container"` is inside main and should be a full page tall without the footer but it is 0px tall which is causing its inner elements to spill out of it.
Mywithid="container"` is not containing its inner HTML elements. They are spilling out of the container. How do I make them not spill out? Here is the HTML, CSS, and and image of what it looks like showing me hovering over "main" and it taking 25px. Cheers.
HTML:
<div id="page"
<div id="main">
<div id="container">
<div id="left-hand-side"></div>
<div id="right-hand-side">
<img src="resources/Logo.png"/>
<?wp_nav_menu(array('theme_location'=>'primary', 'menu_class'=>'nav-menu'));?>
</div>
</div>
CSS:
/*
Theme Name: 2011-child-theme-commons
Description: Child theme for the Commons website
Author: admin
Template: twentyeleven
(optional values you can add: Theme URI, Author URI, Version)
*/
#import url("../twentyeleven/style.css");
#branding {
display:none;
}
.nav-menu .menu-item {
font-size:2em;
margin-bottom: 70px;
margin-right:30px;
list-style-type: none;
text-decoration:none;
float: right;
}
.nav-menu .menu-item a {
color:#333;
}
.first_menu_item a:hover {
color:#FEBA2E;
list-style-type: none;
text-decoration:none;
}
.second_menu_item a:hover {
color:#FF46C8;
list-style-type: none;
text-decoration:none;
}
.third_menu_item a:hover {
color:#2B6AFF;
list-style-type: none;
text-decoration:none;
}
#comments {
display:none;
}
body {
background: #FFF;
}
#container {
margin-top:-24px;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
position:relative;
background: url("../../../resources/plan_edited.png") no-repeat;
background-size:contain;
height: 100%;
width: 100%
}
#colophon {
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
#right-hand-side img {
margin:auto;
z-index:2;
width:100%;
}
#right-hand-side h1 {
float:right;
margin-right:30px;
margin-bottom:50px;
font-size:2em;
cursor:pointer;
}
#logo {
cursor:pointer;
}
#right-hand-side {
float:right;
width:36%;
position:absolute;
height:inherit;
z-index:2;
margin-left:64%;
}
#left-hand-side {
z-index:3;
height:inherit;
width:64%;
float:left;
position:absolute;
}
#left-hand-side article {
background-color:#FFF;
margin-left:10%;
margin-top:10%;
margin-right:10%;
border:#666 1px solid;
position:absolute;
padding-top:2em;
}
#left-hand-side .entry-content {
padding: 0.5em;
width: 85%;
}
#left-hand-side .entry-header {
width: 85%;
}
It isn't containing it because on the #right-hand-side you have a margin on your image of 90px so that will force the image out of the box.
http://jsfiddle.net/Cb5h8/
What you are experiencing is that elements to not automatically resize to contain their floated child elements. The term used for the remedy is "Clearing floats". There are multiple ways to do that, the easiest one is probably just to add overflow:auto; to the container. It will force the container to contain its floated children.
Detailed information can be seen here: http://www.quirksmode.org/css/clearing.html
#container {
margin-top:-24px;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
position:relative;
background: url("../../../resources/plan_edited.png") no-repeat;
background-size:contain;
height: 100%;
width: 100%;
overflow: auto;
}
EDIT:
The #left-hand-side and #right-hand-side styles are positioned absolutely, which prevents the #container from properly containing them. You need to remove the position:absolute; styles. If you really need the position:absolute; styles, then the only way for you to accomplish this is by giving the container a specific height, which is enough for it to contain it's children.
I have read through countless threads on here and others, but have yet to find one that works for me. I am trying to get this darn div to center on the bottom of my page. It is kind of like a footer, but not exactly.
HTML :
<div id="menucontainer">
<div id="menu">
<ul>
<li><img style="width:270px; height:150px; padding-right:25px; padding-top:15px;" src="style/images/UAH.png"></li>
<li>another big test</li>
</ul>
</div>
</div>
CSS :
#menucontainer{
position:fixed;
bottom:0;
}
#menu{
position:fixed;
padding-top:5px;
padding-bottom:15px;
background-color:rgba(0,0,0,0.5);
bottom:0px;
height:200px;
width:1218px;
border:3px solid #000000;
box-shadow:0px -5px 5px #888888;
}
li{
float:left;
margin-left:-10px;
margin-right:-10px;
text-align:center;
list-style:none;
height:190px;
width:300px;
border-left:2px solid #FFFFFF;
border-right:2px solid #FFFFFF;
}
This should be all you need:
#menucontainer {
position: fixed;
bottom: 0;
width: 100%; /* ADD - make sure this container spans the entire screen */
text-align: center; /* Align contents to the center */
}
#menu {
/* remove position: fixed */
display: inline-block;
margin: 0 auto; /* Centers the block */
text-align: left; /* Reset the text alignment */
... /* The rest stays the same */
}
<style>
#menucontainer{
position:absolute;
bottom: -420px;
height: 200px;
margin: 0 auto;
position: relative;
width:1218px;
}
#menu{
position: relative;
padding-top:5px;
padding-bottom:15px;
background-color:rgba(0,0,0,0.5);
bottom:0px;
height:200px;
border:3px solid #000000;
box-shadow:0px -5px 5px #888888;
}
li{
float:left;
margin-left:-10px;
margin-right:-10px;
text-align:center;
list-style:none;
height:190px;
width:300px;
border-left:2px solid #FFFFFF;
border-right:2px solid #FFFFFF;
}
</style
DEMO
I've made some fundamential changes.
Firstly, your #menucontainer. You don't need fixed position - we can use 'sticky footer' technique to make it allways be hitched to the bottom; as we know the width, margin: 0 auto; will help us center it horizontally.
#menucontainer{
position:relative;
width: 1218px;
height:200px;
margin: 0 auto;
}
Secondy, I've added some fake content (.fake-content div) to help you get the idea how this all will look on site.
I've also added clearfix method for proper height rendering of an elements with floated children. More info here (also easy to find anywhere else).
Sticky footer technique has been taken from CSS Tricks site
Any questions? Is that what you was looking for?
I have a ul wrapped in a .box. I have set the bottom border for the .box. The ul items also have bottom border, I want the li border to place over the .box border so that the .box border is no more visible. I'm trying to do that by setting margin-bottom: -1px but doesn't work.
Please see attached image:
Here's what I'm trying:
HTML:
<div class="box">
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</div>
CSS:
.box{
border-bottom: 1px solid blue;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
background: green;
border: 1px solid red;
}
Demo:
http://jsfiddle.net/b9H2j/
Problem
You basically want the li to overflow its .box parent, but .box is set with overflow:hidden;.
Solution
A possible solution can be to first set the li with position:relative; and then make it overflow with bottom:-1px;. Then remove overflow:hidden; from the .box container and find an alternative way to overcome the clear bug.
For example:
.box {
display:table; /* overcome the clear bug */
width:100%;
border-bottom: 1px solid blue;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
position:relative;
bottom:-1px;
float: left;
background: green;
border: 1px solid red;
}
See jsFiddle demo
Have you considered changing your HTML structure? It seems somewhat to me "unnatural" to do what you're trying to achieve with your current HTMl. Anyhow, here's another solution. It requires you to set a height for your list items though.
You could do something like this:
HTML
<div class="box">
<ul>
<li class="left">Hello</li>
<li class="left">World</li>
<li class="add-bottom-border">something</li>
</ul>
</div>
CSS
.box{
display:table; /* overcome the clear bug */
width:100%;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
height:20px;
background: green;
border: 1px solid red;
}
.add-bottom-border {
overflow:auto;
border-bottom: 1px solid blue;
}
.left {
float:left;
}
JSfiddle
There's en explanation of the reasoning behind overflow:auto; here.
See this fiddle
JSFiddle
CSS:
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
text-align:center;
border:5px solid red;
}
HTML:
<div class='containers'>
<div id='id4'>
margin-right:10px;
</div>
<div id='id5'>
center-text;
</div>
In this fiddle I want center-text to be center of the page, not at the center between left-border and float element.
The below is one possible option by adding position: absolute; right: 10px; to the id4 div. This will make the div always stay at 10px from the right margin. But it has to be noted that the element is no longer a float element.
Note: The texts would overlap if the result window is shrunk beyond a certain level. I will update the answer if and when I manage to find a fix for that.
.containers {
width: 100%;
height: auto;
padding: 10px;
margin-bottom: 0px;
text-align: center;
box-sizing: border-box;
}
#id4 {
display: inline-block;
position: absolute;
right: 10px;
border: 5px solid red;
}
#id5 {
display: inline-block;
border: 5px solid red;
}
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
text-align:center;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
margin: 0 auto;
display:inline-block;
border:5px solid red;
}
DEMO