I want to make a horizontal centered menu. I have tried using things like text align center and margin auto but can't get them to work. I do not want to use a table.
Here's my code:
<footer class="container">
<div class="row">
<div class="span12">
<ul>
<li>footer info 1</li>
<li>footer info 2</li>
<li>footer info 3</li>
</ul>
</div>
</div>
With the provided HTML:
ul { text-align: center; }
li { display: inline-block; } /* Don't float them */
http://jsfiddle.net/NpLR3/
The following will work without using text-align:
footer {
width: 100%;
}
.row {
position: absolute;
left: 50%;
}
.span12 {
position: relative;
left: -50%;
}
ul {
padding: 0;
}
li {
display: inline;
list-style: none;
margin-left: 1em;
}
li:first-child {
margin-left: 0;
}
The important bits are:
(1) that the outer container for the menu has 100% width,
(2) that the inner container is absolutely positioned at 50% left (which positions the left side of the menu at the center of the page), and
(3) that the menu is then relatively positioned at -50% left (moving it back to the left half its width, so that the center of the menu is now at the center of the page).
The other stuff is just cosmetic.
See working example.
Demo
.container{
background:#ddd;
width: 100%;
text-align:center;
}
li{
display: inline-block;
}
See http://jsfiddle.net/aCSgz/
Basically you need to set the ul and li to display: block.
ul { display: block; text-align:center; }
ul li { display: block; }
You need to set the display property on the LIs to inline-block and set the text-align on the UL to center.
HTML:
<footer class="container">
<div class="row">
<div class="span12">
<ul>
<li>footer info 1</li>
<li>footer info 2</li>
<li>footer info 3</li>
</ul>
</div>
</div>
</footer>
CSS:
footer {
background:#fdd;
}
div.row {
background: #dfd;
}
ul {
background: #ddf;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
background: #fff;
margin: 0.5em;
padding: 0.5em;
}
http://jsfiddle.net/ghodmode/h2gT3/1/
Related
I am trying to make a header menu work as I like. I have only minor experience with CSS.
I have only two main menu items, each with a dropdown. I want for it to look something like this when hover on first menu item:
And something like this when hovering on second menu item:
Note: I want the "Menu 1" and "Menu 2" to be positioned as they are in the images, including this: Dropdown for Menu 1 is to the right of Menu 1, dropdown of Menu 2 is to the left of Menu 2. I forgot to include "Logo" in the images, but it is centered in the middle.
I have a fiddle of what I have managed so far (check it out here).
I have two problems:
The width is not 100%. The blue background is 100%, but I tried for the two menu items to be 25% each and then there is a logo-div in the middle that should fill out the rest (with margin: auto), so it is 100% all together.
The active main menu item gets pushed down on hover
How to fix it to work as intended?
body {
margin: 0px;
}
.header {
background-color: royalblue;
width: 100%;
margin-bottom: 1em;
height: 3.15em;
color: yellow;
box-shadow: 0px 0px 5px black;
}
.nav h3 {
display: inline-block;
margin-left: 0.3em;
}
section {
display: inline-block;
vertical-align: text-top;
}
.nav:first-of-type h3 {
text-align: right;
}
.nav ul {
display: inline-block;
padding: 0;
top:36px;
list-style-type: none;
width: 15em;
margin-top: 4em;
display: none;
}
.nav:nth-of-type(2) ul {
text-align: right;
}
.nav:hover ul {
display: inline-block;
}
.width-25 {
width: 25%;
}
.fill-width {
margin: auto;
}
<div class="header">
<section class="nav">
<h3 class="width-25">Menu item 1</h3>
<ul>
<li>Dropdown 1 item 1</li>
<li>Dropdown 1/2</li>
<li>item 1 # 3</li>
<li>Dropdown 1 item 4 long</li>
<li>DD 1-5</li>
<li>Dropdown 1 i. 6</li>
</ul>
</section>
<span class="fill-width">Logo</span>
<section class="nav">
<ul>
<li>Dropdown 2 item 1</li>
<li>Dropdown 2/2</li>
<li>item 2 # 3</li>
<li>Dropdown 2 item 4 long</li>
<li>DD 2-5</li>
<li>Dropdown 2 i. 6</li>
</ul>
<h3 class="width-25">Menu item 2</h3>
</section>
</div>
I updated your fiddle with a way of how you could do this.
JSFiddle
It probably isn't the best or the cleanest way, but I did this in about 10 mins quickly. It should give you a base on how to go further.
The main problem was pretty much not giving your h3 seperate classes like so:
<h3 class="right">
I hope this helps you with your problem :).
Some few things:
Add position: relative to .nav.
Give position: absolute to .nav ul.
Now check this out:
body {
margin: 0px;
}
.header {
background-color: royalblue;
width: 100%;
margin-bottom: 1em;
height: 3.15em;
color: green;
box-shadow: 0px 0px 5px black;
}
.nav h3 {
display: inline-block;
margin-left: 0.3em;
}
section {
display: inline-block;
body {
margin: 0px;
}
.header {
background-color: royalblue;
width: 100%;
margin-bottom: 1em;
height: 3.15em;
color: green;
box-shadow: 0px 0px 5px black;
}
.nav h3 {
display: inline-block;
margin-left: 0.3em;
}
section {
display: inline-block;
}
.nav:first-of-type h3 {
text-align: right;
}
.nav ul {
display: inline-block;
padding: 0;
top:36px;
list-style-type: none;
width: 15em;
margin-top: 4em;
display: none;
}
.nav:nth-of-type(2) ul {
text-align: right;
}
.nav:hover ul {
display: inline-block;
}
.width-25 {
width: 25%;
}
.fill-width {
margin: auto;
}
}
.nav:first-of-type h3 {
text-align: right;
}
.nav ul {
display: inline-block;
padding: 0;
top: 36px;
list-style-type: none;
width: 15em;
margin-top: 4em;
display: none;
}
.nav:nth-of-type(2) ul {
text-align: right;
}
.nav:hover ul {
display: inline-block;
}
.width-25 {
width: 25%;
}
.fill-width {
margin: auto;
}
.nav {
position: relative;
}
.nav ul {
position: absolute;
}
<div class="header">
<section class="nav">
<h3 class="width-25">Toolbox</h3>
<ul>
<li>ECMAScript 2015 (ES6)</li>
<li>TypeScript/ES7</li>
<li>Observables</li>
<li>Building/Deploying</li>
<li>Components</li>
<li>View/Input Data</li>
</ul>
</section>
<span class="fill-width"></span>
<section class="nav">
<ul>
<li>Forms</li>
<li>Pipes</li>
<li>Services</li>
<li>Directives</li>
<li>Dependency Injection</li>
<li>Testing</li>
</ul>
<h3 class="width-25">Angular 2</h3>
</section>
</div>
<div>
<h1>Title</h1>
<p>Content</p>
</div>
You need to set the position to absolute on the <ul> element to fix the issue of active menu getting pushed on hover.
position: absolute;
Check out this updated jsFiddle.
Also, what do you mean by the width is not 100%?
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 7 years ago.
I have a jsfiddle here - https://jsfiddle.net/1w5c1qq2/3/
I know this is simple but it's driving me mad
I have a div containing a ul list with a links in.
I need the links to be dead center, I need the gap between the links to be dead center.
Whatever I do the links are always slightly off.
Is there a way to have them dead center.
In the actual design it is obvious as the page is split with a color down the center.
<div class="block">
<ul>
<li>Link One</li>
<li>Link Two</li>
</ul>
</div>
Here is another way to do what you want. Using position: absolute;, left: 50%;, and transform: translateX(-50%); on the ul element.
*{
margin: 0;
padding: 0;
}
.block{
background: gray;
padding: 10px;
height: 20px;
}
ul{
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
li{
text-align: center;
display: inline-block;
}
a{
background: white;
padding: 5px;
}
<div class="block">
<ul>
<li>Link One</li>
<li>Link Two</li>
</ul>
</div>
Reference:
https://css-tricks.com/centering-percentage-widthheight-elements/
Seems pretty dead center to me. It looks like the 'handle' (the tiny mark) to resize the window in jsFiddle isn't centered, so maybe that's why you think it didn't work.
However, it may also be a font issue. If the text in the links doesn't have the same width, the links themselves also won't be the same width. In that case, the block is centered, but the space between them won't be exactly in the middle. To solve that, give the links both the same width.
If you want the space between them to be centered, regardless of the elements width, you can do that as follows:
Put the lis next to each other and give them a fixed width so they can be positioned properly. Then, you can use text-align left and right to align the links inside them.
In the example below, I've used floats and a self-clearing on the ul to do this, but you could also use display: inline-block for the lis.
*{
margin: 0;
padding: 0;
}
.block{
background: gray;
padding: 10px ;
}
ul{
text-align: left;
list-style: none;
}
li{
display: block;
float: left;
width: 50%;
}
/* Right-align the link in the left li. */
li:first-child {
text-align: right;
}
/* Clear the floated li's */
ul::after {
content: "";
clear: both;
display: block;
}
a {
background: white;
padding: 5px;
margin: 0 5px;
width: 110px;
}
<div class="block">
<ul>
<li>Link One</li>
<li>Link Two with a longer text.</li>
</ul>
</div>
Here's the solution: https://jsfiddle.net/1w5c1qq2/8/. It boils down to giving both boxes each 50% of the available width, and aligning the text within those boxes to the right and the left, respectively. Always mind implicit white-space with display-inline-blocked boxes!
<div class="block">
<ul>
<li>Link One</li><!--
--><li>Link Two is wider just for show</li>
</ul>
</div>
And:
*{
margin: 0;
padding: 0;
}
.block{
background: gray;
padding: 10px ;
}
ul{
list-style: none;
}
li{
display: inline-block;
box-sizing: border-box;
width: 50%;
text-align: right;
padding-right: 3px;
}
li:last-of-type {
text-align: left;
padding-left: 3px;
}
a{
background: white;
padding: 5px;
}
How do you separate the menu bar from the body in a div, to place everything after contact below it, is there a corresponding code like a newline? I would really appreciate the help :) Thanks in advance
here's a link of picture shot:
CSS
/* because of the * default code it takes out all margin and padding */
* {
margin: 0px;
padding: 0px;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
body {
font-family: verdana;
font-size: 10px;
background-color: ABC;
padding: 50px;
margin: auto;
}
h1 {
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li + li {
border-left: 1px solid #ccc;
}
a {
display: block;
padding: 7px 10px;
color: #222; /*changes the color of all item font color in menu bar */
background: #eee; /*changes the background color of Menu bar */
text-decoration: none;
}
a:hover {
color: #fff;
background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
color: #f2f75e;
background: #0090cf;
}
/* Child Menu Styles */
.level-two {
position: absolute;
top: 100%;
left: -9999px;
width: 100px;
}
li:hover .level-two {
left: 0;
}
.level-two li {
width: 100%;
border: 0;
border-top: 1px solid #ccc;
}
HTML
<h1>
<ul class="level-one">
<li> Home </li>
<li> Drops
<ul class="level-two">
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
</h1>
add clearfix class on both of .
DEMO
.clearfix{
clear:both;
}
DEMO1
One alternative to the clear property is to trigger a new block formatting context on the menu in order to contain the floats inside .level-one :
.level-one {
/* trigger block formatting context to contain floats. */
overflow: hidden;
}
Demo at http://jsfiddle.net/mrYdV/1/
Here is a list of other property/value pairs that trigger block formatting context
W3C specification
Bulletproof backwards-compatible version
There is a great answer with more details covering this method at How does the CSS Block Formatting Context work?
The clear property will do this for you. You can add it to your #container for example:
#container {
display: table;
clear:both;
}
Clear means something like:
clear all elements on both sides of this element
I wanted to make the links centered on the screen rather than placed in a location to a certain number of pixels.
Here's my code:
CSS:
.HorizLinks {
position: absolute;
top: 77px;
left: 180px;
}
.HorizLinks ul {
margin: 0px;
}
.HorizLinks li {
margin: 0px 15px 0px 0px;
list-style-type: none;
display: inline;
}
This is the HTML on the webpage:
<div id="container"></div>
<div id="header"></div>
<div class="HorizLinks">
<ul>
<li>Header Link 1</li>
<li>Header Link 2</li>
</ul>
</div>
Use text-align:center on the <div class="HorizLinks">. Also, set the padding of the ul elements to be 0.
Your absolute positioning of the container div is pushing the whole div to the side itself to the right side of the page, so unless you remove that, the content inside will never be able to be in the middle.
jsFiddle here.
CSS:
.HorizLinks {
text-align:center;
}
.HorizLinks ul {
margin: 0;
padding:0;
}
.HorizLinks li {
margin: 0 15px 0 0;
list-style-type: none;
display: inline;
}
I'm trying to create a header consisting of an h1 and a nav element. I want the bottom of the nav to be aligned with the bottom of the h1.
Here's what I've tried:
HTML
<header>
<h1>Web site Header</h1>
<nav>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
</header>
CSS
header {vertical-align: bottom; width: 100%; height: 300px;}
h1 {vertical-align: bottom; float: left;}
nav {vertical-align: bottom; float: right;}
nav ul li {display: inline;}
I could do this by setting exact margins for my elements, but I thought this would be cleaner (if it's possible). Any advice on how to fix it/if it can be done?
Thanks!
As clean as it can get:
<style>
header > * { display: inline-block; }
nav li { display: inline; }
</style>
Direct header descendants are now inline blocks, i.e. they don't push surrounding content to flow beneath them, yet they can still utilize the margin and padding property as blocks.
It's possible to do in many different ways. Margins are designed for positioning, but if you'd rather not use margins or padding, you can use absolute positioning:
CSS:
header
{
display: block;
height: 300px;
width: 100%;
}
h1
{
float: left;
margin: 0;
height: 32px;
}
nav
{
display: block;
height: 32px;
position: relative;
}
nav ul
{
bottom: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
}
nav ul li
{
display: inline-block;
}
HTML:
<header>
<h1>Web site Header</h1>
<nav>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
</header>
This relies on knowing the height of the header, and setting both the header and the nav to the same heights/margins.