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.
Related
I've the following:
HTML (partial):
<div id="page">
<div id="header">
<div id="logo">
<img src="logo.jpg" alt="Logo" />
</div>
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<!-- how many <li>s as need -->
</ul>
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
html, body {
min-height: 100%;
}
#page {
position: absolute;
right: 0;
width: 97%;
height: 100%;
overflow-y: auto;
text-align: center;
}
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: inline-block;
overflow-x: hidden;
}
#header #logo {
float: left;
}
#header #menu ul {
list-style-type: none;
}
#header #menu ul li {
height: 2em;
line-height: 2em;
}
#content {
position: relative;
margin: 20px auto 0 auto;
width: 95%;
}
#footer {
position: relative;
margin-top: 20px;
width: 100%;
height: 260px;
}
Explaining:
There is a container div (#page). Within it there are #header, #content and #footer.
#header space is split horizontally between #logo and #menu.
The problem:
I need to position #menu at bottom of #header but yet at side of #logo. I'm not getting it without break layout. How can I do this?
When new menu items be added, they should make menu go up, not down, this is why I need to do what I said above. The fist image below illustrates how I want to do and second how it actually is (lighter parts are within the darker and yes, it is a mobile layout):
First Image:
Second Image:
And please, no JavaScript, just pure CSS.
Thanks for attention, bye.
try changing display property of the #header to table, display of the #logo and #menu to 'table-cell' and verticaly align them to the bottom - it should do what you need
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: table;
overflow-x: hidden;
}
#logo {
display:table-cell;
vertical-align:bottom;
}
#menu {display:table-cell; vertical-align:bottom;}
selector in your css #header #logo is too much because identifiers cannot duplicate so #logo is really enough
here is working example: http://jsfiddle.net/6xBvR/1/
Add position:absolute; and bottom:0px; to #header #logo:
#header #logo {
float: left;
position: absolute;
bottom: 0px;
}
Should fix your problem. You could also truncate #header #logo to just #logo.
I wouldn't use float, I'd use display:inline-block and vertical-align:bottom
#logo {
display: inline-block;
vertical-align:bottom;
}
#menu {
display: inline-block;
vertical-align:bottom;
}
But you will need to set some widths.
I alos needed to remove padding from the ul
#menu ul {margin-bottom:0px}
Example: http://jsfiddle.net/pLeUD/
I have an evenly distributed menu like :
HTML
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
</nav>
CSS
nav ul {
padding:0;
margin:0;
text-align: justify;
text-transform: uppercase;
background-color: #000;
}
nav ul:after {
content:'';
width: 100%;
display: inline-block;
height: 0;
line-height: 0;
font-size: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
}
This works great to spread the menu items accross the whole width of the bar as can be seen in this fiddle: http://jsfiddle.net/SjDEX/.
However, you can also see that a result of the ::after element the height of the ul is increased making extra space below the menu items.
Is there a way to get rid of this by making the after element not take up vertical space?
Setting its height to 0 does nothing and changing its display to block or something else breaks the layout.
It is the ul itself that has that height, not the :after, so just add
nav ul {
height: 20px;
}
Fiddle
And this code can be reduced to this:
nav ul:after {
content:'';
width: 100%;
display: inline-block;
}
My code - Plunker
I try to create a fluid layout, my sidebar is made of a list of links. I want each <li> element to be a perfect square, the problem starts when I add the text inside. It seems to be adding height to my square and what I get is a rectangle. If you examine my code the dimensions of my list objects are
32px X 43px. How can I prevent from an inside text to extend the <li> elements?
And how can I make the text appear on the bottom left side of the <li> element?
My CSS:
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
}
.sidebar{
width: 5%;
display: inline;
float: left;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
background-color: oldlace;
}
.sidebar a{
display: block;
font-size: 0.5em;
}
My HTML:
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li>ANALYTICS</li>
<li>STYLES</li>
<li>VOTERS</li>
<li>GET STARTED</li>
<li>UPDATE</li>
</ul>
</div>
<div class="content">
<p>Blahahhhahhhahahahahahahhahahah blahahahh bluah</p>
</div>
You could use position: relative on the li and position: absolute on the a. Using absolute will cause the a element to not affect the li's dimensions. In this way you can also position it in the corner.
http://plnkr.co/edit/kcjCl1?p=preview
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
position: absolute;
bottom: 0;
left: 0;
}
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 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/