<html>
<head>
<link rel="stylesheet" href="../static/styles/base.css" type="text/css" />
</head>
<body>
<div id= "top-nav">
<h1>Sitename</h1>
<ul>
<li>Feed</li>
<li>Profile</li>
<li>Settings</li>
</ul>
</div>
</body>
</html>
#
html,
body {
height: 100%;
width: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#top-nav{
background-color: Gray;
width: 100%;
height: 135px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#top-nav h1{
float: left;
margin: inherit;
padding-right: 700px;
}
#top-nav ul{
float: left;
bottom: 0;
}
#top-nav li{
text-align: right;
display: inline;
padding-right: 5px;
}
What I would like my layout to be, is to have the h1 vertically aligned in the center of the top-nav div and I would like the ul to be on the right of the page at the bottom of the top-nav. Why am I getting unexpected results?
The padding-right: 700px rule in #top-nav h1 is pushing the ul element off-position.
Something like this should work:
html,
body {
height: 100%;
width: 100%;
padding: 0; /* You can just have one 0 instead of "0 0 0 0". */
margin: 0;
}
#top-nav {
background-color: Gray;
width: 100%;
height: 135px;
}
#top-nav h1 {
float: left;
line-height: 135px; /* Set to the height of #top-nav */
margin: 0;
}
#top-nav ul {
float: right;
}
#top-nav li {
text-align: right;
display: inline;
padding-right: 5px;
}
For your nav being on the bottom of the top-nav element, you could use the absolute property, so it always be fixed at the bottom.
Don't use a float left for the H1 as the previous answer say.
For your h1 being align vertically, you can try different padding to get what you want (or you can make a more complicated scaffolding by using the display:table ...)
But the more simple is that :
#top-nav h1{
padding-top:30px;
display:inline-block;
width:auto;
vertical-align:middle;
}
#top-nav ul{
position:absolute;
top:100px;
right:5px;
}
does it answer ?
edit
could it be due to the space you've got in
<div id= "top-nav">
after "id=" ?
also, instead of using padding-right: 700px; for h1 element, just float the ul element to the right.
There is several ways you can achieve what you want. F.e., for vertical aligning the h1 in the middle of #top-nav:
#top-nav h1 {
...
line-height: 135px;
margin: 0;
}
and for aligning the ul at the bottom of #top-nav:
#top-nav {
...
position: relative;
}
#top-nav ul {
...
position: absolute;
bottom: 0;
right: 0;
}
You are having problems because you are using layout elements incorrectly. The <ul> element is for unordered lists, not for menus containing links. Also, using float is highly discouraged because it was only intended to be used to have text wrap around an image and not for layout. Floats have to be cleared and don't work well cross-browser.
The trick here is to use absolute positioning and make sure that the value is relative to the container, so you have to set the #top-nav div to have position: relative otherwise its children will be positioned relative to the first positioned parent element, which is most likely the body element in this case.
This works fine for me:
http://jsfiddle.net/gc3EY/1/
HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="top-nav">
<h1>Sitename</h1>
<span>
Feed
Profile
Settings
</span>
</div>
</body>
</html>
CSS:
body { margin: 0; padding: 0; overflow-x: hidden;}
div#top-nav span {
position: absolute;
bottom: 0px;
padding: 0;
margin: 0;
text-align: right;
width: 97%;
}
div#top-nav span a {
padding: 0 2px;
}
div#top-nav {
background-color: gray;
width: 100%;
height: 135px;
margin: 0px;
padding: 5px;
position: relative;
}
div#top-nav h1 {
position: relative;
top: 0px;
margin: 0;
padding: 0;
}
Related
I am positioning main-bar and side-bar with 70-30 ratio as under: JSFIDDLE
.main-bar, .side-bar{
position: relative;
margin:0; padding: 0;
outline: 0;
display: inline-block;
border:none;
background:#CCC
}
.main-bar{width: 70%}
.side-bar{width: 30%}
/* This Works
.side-bar{width: 29%}
*/
<div class="main-bar">
I am the King!
</div>
<div class="side-bar">
I am not less!
</div>
Interestingly, it works with 70-29 ratio. Did I miss something?
You have to remove white space between divs as it also take place and doesn't let inline-blocks align properly.
.main-bar, .side-bar {
position: relative;
margin: 0;
padding: 0;
outline: 0;
display: inline-block;
border: none;
background: #CCC;
}
.main-bar {
width: 70%;
}
.side-bar {
width: 30%;
}
<div class="main-bar">
I am the King!
</div><!--
--><div class="side-bar">
I am not less!
</div>
Reference: Fighting the Space Between Inline Block Elements
This is because the white space in-between your inline-block elements you need make them 0 using the font-size property just as follows
body{
font-size: 0;
}
.main-bar, .side-bar{
position: relative;
margin:0; padding: 0;
outline: 0;
display: inline-block;
font-size: 14px;
border:none;
background:#CCC
}
.main-bar{width: 70%}
.side-bar{width: 30%}
Working Fiddle
I recommend to go with float for these scenarios.
.main-bar, .side-bar{
margin:0; padding: 0;
outline: 0;
border:none;
background:#CCC
float: left;
}
.main-bar{width: 70%}
.side-bar{width: 30%}
.main-bar, .side-bar{
position: relative;
margin:0; padding: 0;
outline: 0;
display: inline-block;
border:0;
background:#CCC;
float:left;
}
Inline elements:
respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to
their left and right.
Block elements:
respect all of those
force a line break after the block element.
I have searched extensively and seen numerous examples on how to vertical-align text using the vertical-align property and the line-height property. However, all my efforts seem to bear no fruit as I am unable to get my text to align vertically. How do I do vertically align text to be centered? The height properties are not fixed so I can't use line-height.
HTML
<nav>
<ul>
<li>Login</li>
<li>Register</li>
<li>Programmes Offered</li>
</ul>
</nav>
CSS
nav
{
height: 30%;
width: 100%;
}
nav ul
{
height: 100%;
margin: 0px;
}
nav ul li
{
height: 33%;
width: 100%;
vertical-align: middle;
}
you may use a pseudo element displayed as an inline-box using full height of li and vertical-aligned to midlle. DEMO
body, html {
height:100%; /* needed for demo */
}
nav {
height: 50%; /* increased for demo */
width: 100%;
}
nav ul {
height: 100%;
margin: 0px;
}
nav ul li {
height: 33%;
box-shadow:inset 0 0 0 1px; /* show me li , for demo */
}
nav ul li:before {
content:'';
height:100%;
display:inline-block;
vertical-align: middle;
}
edit
If you also reset display and vertical-align on <a>, links can be spread on a few lines (demo below):
body,
html {
height: 100%;
}
nav {
height: 70%; /* height set for snippet demo purpose, could be really too much */
width: 100%;
}
nav ul {
height: 100%; /* will follow height, inherit height value , set in nav if any avalaible */
margin: 0px;
}
nav ul li {
height: 33%;
/* see me and my center*/
box-shadow: inset 0 0 0 1px;
background:linear-gradient(to top, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 50%);
}
nav ul li:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
a {
display: inline-block;
vertical-align: middle;
}
<nav>
<ul>
<li>Login
</li>
<li>Register
</li>
<li>Programmes<br/> Offered
</li>
</ul>
</nav>
If you can use flexbox, you can get away with the following css:
CSS
ul li a {
display:flex; // Enables flexbox
justify-content: center; // Center on main axis
align-items: center; // Center on cross axis
}
Update ( using auto margins )
You can also do it like this:
ul li { display:flex }
li a { margin: auto }
/* These rules are just to make things easier to see. */
nav {
margin: 0 auto;
margin-top: 5rem;
border: 1px dotted green;
width: 100%;
}
ul {
padding: 0;
display: flex;
justify-content: space-around;
}
li {
height: 3rem;
padding: 2rem;
border: 1px dotted red;
}
/* Here are what I am trying to illustrate */
ul li {
display: flex;
}
a {
margin: auto;
/* or adjust them one by one, by targeting
the ones you want and setting
using each margin like this:
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
*/
}
<nav>
<ul>
<li>Login</li>
<li>Register</li>
<li>Programmes Offered</li>
</ul>
</nav>
vertical-align aligns inline elements with their siblings.. unless used in a table cell.
I don't think there's a by-the-book way of vertically aligning.. but this should work:
D E M O
nav ul li
{
background:#f1f1f1;
height: 33%;
width: 100%;
border-top:1px solid #e0e0e0;
}
nav ul li a
{
display:block;
position:relative;
top:50%;
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
transform:translate(0,-50%);
}
Have you tried with
nav ul li a
{
height: 33%;
width: 100%;
vertical-align: 5px; //(you can make it 10px or -10px, just so it fits your style)
}
Your text is within the a tag, so adding a in the css may solve your problem :)
I need to vertically align with CSS multiple elements inside my header.
At the moment, I am using this structure:
-Header
-Content div (This only set my width to 940 with paddings of 10px each side)
-Element 1 (Height: Known, 50px)
-Element 2 (Height: Unknown, bigger fonts)
-Element 3 (Height: Unknown, smaller fonts)
So I need to vertically align to the middle (50% of my header - size of the element) all of my elements and I need to make it cross-browser compatible...
I've found some suggestion by searching such as using a floater div, however I had a hard time trying to align all of my elements since they are not all of the same size...
EDIT
As requested, here is my HTML and CSS:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/mediadevis.css" />
</head>
<body>
<header>
<div class="content">
<div id="logo"></div>
<nav>
<ul>
<li>Accueil</li>
<li>Nos services</li>
<li>Notre compagnie</li>
<li>Nous joindre</li>
</ul>
</nav>
<div id="lang">English</div>
</div>
</header>
</body>
</html>
CSS:
body {
margin: 0;
background-color: #336699;
}
header{
background-image:url('../IMG/bg_top.png');
height: 90px;
}
nav > ul{
float: left;
list-style-type:none;
margin:0;
margin-left: 10px;
padding:0;
color: #ffffff;
}
nav > ul > li{
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 10px;
}
.content{
margin: auto;
width: 940px;
padding-right: 10px;
padding-left: 10px;
}
#lang{
float: left;
}
#logo{
background-image:url('../IMG/logo.png');
height: 50px;
width: 180px;
float: left;
}
Try these suggestions from Smashing Magazine:
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
Specifically, try this code, using the TOP, LEFT, RIGHT, and BOTTOM properties to position your elements:
HTML
<div class="magix">
magix!
</div>
<div class="more-magix">
More Magix!
</div>
CSS
.magix{
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}
.more-magix {
background: blue;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 500px;
right: 0;
width: 100px;
}
OR, check out Chris Coiyer's methods:
http://css-tricks.com/centering-in-the-unknown/
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 am trying to align a element center in a div where i am not giving any width to parent div becouse it will spread according to screen size , there is total 3 element in div :
Buttons
Heading
Logo
buttons will always align left and logo will align right whenever screen size will be change and the heading will always align center like this
My code is here
http://jsfiddle.net/7AE7J/1/
please let me know where i am going wrong and what css i should apply for getting the element (heading) align center always.
HTML
<div id="header">
<div id="buttons">
link 1
link 2
</div>
<h1>Heading of the page</h1>
<div id="logo">
<a href="#">
<img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" />
</a>
</div>
</div>
CSS
#header {
background:green;
height:44px;
width:100% }
#buttons {
float: left;
margin-top: 7px;
}
#buttons a {
display: block;
font-size: 13px;
font-weight: bold;
height: 30px;
text-decoration: none;
color:blue;
float:left}
#buttons a.button_back {
margin-left: 8px;
padding-left:10px;
padding-top: 8px;
padding-right:15px }
#header h1 {
color: #EEEEEE;
font-size: 21px;
padding-top: 9px ;
margin:0 auto}
#logo {
float: right;
padding-top: 9px;
}
You can use inline-block for this:
#header {
text-align: center;
}
#header h1 {
display: inline-block;
}
How about this:
#header {
position: relative;
text-align: center;
}
#header h1 {
display: inline;
}
#header #buttons {
position: absolute;
left: 0;
top: 0;
}
#header #logo {
position: absolute;
right: 0;
top: 0;
}
display: inline is actually a bit more cross-browser than display: inline-block;
Try
.centered {
margin: 0 auto;
}