Screenshot of the problem:
The yellow block is the logo and the blue box is the nav links (I have blanked them out). I would like to align the links at the bottom so they are stuck to the top of the body content (white box). How would I do this?
Here is the relevant CSS and HTML.
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background-image:url(logo.png);
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
<div id="header">
<div id="logo"></div>
<div id="nav">
<ul>
<li>*****</li>
[...]
</ul>
</div>
</div>
Thanks in advance.
Try this. Seems to work in Firefox/Mac
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background: #00ffff;
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
height: 42px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding-top: 18px;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
Bottom left? If so - start by setting clear: both; on your #nav block.
Other than that, I don't really understand your question - can you make a jpg of how you'd like it to look?
You can use absolute positioning like this:
#header {
position: relative;
height: 42px;
}
#nav {
position: absolute;
bottom: 0px;
width: 100%;
border-bottom: 2px solid #3edff2;
height: 42px;
}
in this method, you make "nav" with absolute positioning related to "header" division.
Related
I have the layout as below:
https://imgur.com/r1l0cCi
I have added a side section just below the nav bar. I want the side section to be placed in relation to the nav bar but it takes its position in relation to the header. Is there a way I can achieve this?
Here is my html code and css
body {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.header {
border-radius: 25px;
height: 14%;
width: 100%;
}
img.nav-action-image {
width: 14px;
height: auto;
}
nav a {
display: inline;
text-decoration: none;
float: left;
color: #d1e231;
padding: 14px 16px;
border-right: 1px solid #bbb;
}
nav a:hover {
color: #bff000;
}
nav a.active {
display: inline;
background-color: #bab86c;
color: #37412a;
}
.navigation-bar {
position: absolute;
padding: 0;
width: 100%;
margin-top: 5px;
border-radius: 7px;
}
.action-block {
height: 80%;
width: 20%;
margin-top: 40px;
}
<body>
<header class=header>
</header>
<nav class=navigation-bar>
<img class="nav-action-image" src="menu_icon.png" />
<a class="active" href="#Summary">Summary</a>
Preferences
</nav>
<br>
<div class="action-block">
hello
</div>
</body>
you can see that in the css, the code for action-block class aligns from the header instead of the nav bar. I want it to align from the nav bar. Is there a way that I can do this?
remove position:absolute from body and nav.
The below css will clear the floating elements inside nav which will give it a height of its content.
nav:after {
content: '';
display: block;
clear: both
}
html,
body {
height: 100%
}
.header {
border-radius: 25px;
height: 14%;
width: 100%;
}
img.nav-action-image {
width: 14px;
height: auto;
}
nav:after {
content: '';
display: block;
clear: both
}
nav a {
display: inline;
text-decoration: none;
float: left;
color: #d1e231;
padding: 14px 16px;
border-right: 1px solid #bbb;
}
nav a:hover {
color: #bff000;
}
nav a.active {
display: inline;
background-color: #bab86c;
color: #37412a;
}
.navigation-bar {
padding: 0;
width: 100%;
margin-top: 5px;
border-radius: 7px;
background: yellow;
}
.action-block {
height: 80%;
width: 20%;
background: greenyellow;
}
<body>
<header class="header">
</header>
<nav class="navigation-bar">
<img class="nav-action-image" src="menu_icon.png" />
<a class="active" href="#Summary">Summary</a>
Preferences
</nav>
<div class="action-block">
hello
</div>
</body>
If using a absolute element relative to another element, then the parent must have position: relative. With this in mind replace your body css with:
html, body {
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
If using floats in the nav (the anchor element), use a clear: both at the end likte this
.navigation-bar {
position: absolute;
display: block;
width: 100%;
margin-top: 5px;
padding: 0;
border-radius: 7px;
}
.navigation-bar::after {
display: block;
clear: both;
content: "";
}
nav a {
float: left;
padding: 14px 16px;
text-decoration: none;
color: #d1e231;
}
nav a:hover {
color: #bff000;
}
nav a.active {
background-color: #bab86c;
color: #37412a;
}
I have horizontal navigation bar like this.
I need to make this navigation bar vertical left. This is my html
<div ng-controller="PortalController">
<header>
<h1>E_Zuite</h1>
<nav role='navigation'>
<ul>
<li><a class="link-1 entypo-home active" href="#home"></a></li>
<li><a class="link-2 entypo-picture" href="#clients"></a></li>
<li><a class="link-3 entypo-user" href="#about"></a></li>
<li><a class="link-4 entypo-mail" href="#contact-us"></a></li>
</ul>
</nav>
</header>
</div>
and this is my css
header {
width: 100%;
height: 70px;
box-sizing: border-box;
background-color: #373948;
position: fixed;
top: 0px;
left: 0px;
padding: 0px 0px 0px 30px;
}
header h1 {
float: left;
margin: 5px 0px;
color: white;
font-family: 'Meddon', cursive;
}
header nav ul {
height: 70px;
float: right;
}
header nav ul li {
height: 70px;
display: inline-block;
}
I exactly need this navigation bar and icons from top.I'm not much familiar with css.
Change your css to this:
header {
width: 200px;
height: 100%;
box-sizing: border-box;
background-color: #373948;
position: fixed;
top: 0px;
left: 0px;
padding: 0px 0px 0px 30px;
}
header h1 {
float: left;
margin: 5px 0px;
color: white;
font-family: 'Meddon', cursive;
}
header nav ul {
height: 70px;
float: right;
}
header nav ul li {
width: 200px;
height: 70px;
float: left;
display: block;
}
What I have done is simple, changed the width of the header and set the height to be 100%, then I have set the width and float attribute for your li menu.
It should work as you expect, BUT have a look through it to make it exactly how you want it.
header h1{
float:none;
}
header nav ul {
float:none;
}
header nav ul li{
display:block;
width:100%
}
just add css in your css file.
In case you want to fix your vertical nav to the left, the code below will help.
nav{
position: fixed;//fixes the navigation bar to left
top: 100px;
left: 0px;
}
header {
width: 100%;
height: 70px;
box-sizing: border-box;
background-color: #373948;
position: fixed;
top: 0px;
left: 0px;
padding: 0px 0px 0px 30px;
}
header h1 {
float: left;
margin: 5px 0px;
color: white;
font-family: 'Meddon', cursive;
}
header nav ul {
height: 70px;
width: 30px;
margin: 0;
padding: 0;
}
header nav ul li {
display: inline-block;
width: 30px;
}
I am trying to move an LI Nav bar to the top right of a page, however when I position: absolute; and top: 0; on my <li> I get my list which is also display: inline; all stacked on top of each other. They go to the part of the screen I want because I'm also float: right; but they won't stay in a line.
Any ideas?
HTML(html and doctype and link tags left out, they're there):
<div id="search">Google Search</div>
<div id="lucky">I'm feeling lucky</div>
<form>
<input id="search_box" type="text" name="">
</form>
<ul>
<li class='nav'>+You</li>
<li class='nav'>Gmail</li>
<li class='nav'>Images</li>
</ul>
CSS:
#search {
font-family: Arial;
font-size: 10;
font-weight: bold;
border: 1px solid black;
width: 7.2em;
white-space: nowrap;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
margin: 240px 14px 100px 225px;
display: inline-block; }
#lucky {
font-family: Arial;
font-size: 10;
font-weight: bold;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
border: 1px solid black;
display: inline-block; }
#search_box {
width: 600px;
position: absolute;
left: 65px;
top: 212px; }
ul {
list-style-type: none;
margin: 0;
padding: 0; }
.nav {
display: inline-block;
float: left;
padding: 20px;
position: absolute; }
The li's are stacked on top of each other because you are absolute positioning them to the same place. You want to make the ul absolute positioned instead. Include the code below in your css and for good measure you should also tell include something that it is positioned relative to.
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}
.nav {
display: inline-block;
/* float: left;*/
padding: 20px;
/*position: absolute;*/ }
body{position: relative;}
Try this http://jsfiddle.net/csdtesting/oe55maf0/2/
Added #header :
#header{
float:right;
}
and removed position:absolute; from .nav class .Also added #content :
#content{
position:absolute;
}
to contain the form .
Now the structure is clear.
Hope this helps!
I have a script here for my navigation bar:
<style type="text/css">
/* Navigation Bar */
#nav_bar {
display:inline-block;
height:50px;
}
#nav_bar ul {
display:inline-block;
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#nav_bar li {
display:inline;
height:100%;
padding: 0;
margin: 0;
}
#nav_bar a:hover {
background-color: #000000;
}
#nav_bar a {
display:inline-block;
height: 100%;
color:white;
text-decoration:none;
line-height: 50px;
padding: 0 1em 0 1em;
background-color: #900000;
}
</style>
</font>
I'm having trouble trying to get it displayed in the centre of the page, how can I do it?
I've looked into "display: inline-block;" and "position: relative" and couldn't find a code that worked
the html part of my nav bar is as follows (in regards to your comments) I hope it helps! :)
<div id="nav_bar">
<ul>
<li> Home </li>
<li> Forums </li>
<li> Shipping Info </li>
<li> Contact us </li>
<li> About us </li>
</ul>
</div>
Give it a width and auto margins and make sure its a block level element.
By default a 'div' is a block level element so you can remove this rule.
You must set a width or the menu with expand to the width of its container.
#nav_bar {
display:block;
height:50px;
margin: 0 auto;
width: 567px; /* or whatever you require */
}
Example:
http://jsfiddle.net/29FRa/
#nav_bar {
height:50px;
width:800px;
margin:0 auto;
}
HTML:
<html>
<body>
<div id="#nav_bar"></div>
</body>
</html>
Use text-align: center; on your #nav_bar and be sure it is a block-level element.
http://jsfiddle.net/TKMeU/
A total of six kinds of methods：
１、Margin and width to achieve horizontal center
#nav_bar {
height:50px;
}
#nav_bar ul {
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin-left: auto;
margin-right: auto;
}
please view the demo.
2、use the inline-block, like this:
#nav_bar {
height:50px;
text-align: center;
}
#nav_bar ul {
list-style-type: none;
display: inline-block;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
text-align: center;
font-size: 0;
letter-spacing: -4px;
word-spacing: -4px;
}
#nav_bar li {
margin: 0 5px;
display: inline-block;
*display: inline;
zoom:1;
letter-spacing: normal;
word-spacing: normal;
font-size: 12px;
}
please view the demo.
3、use the float,like this:
#nav_bar {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
#nav_bar ul {
list-style-type: none;
width: 565px;
height: 50px;
height: 100%;
padding: 0;
clear: left;
float: left;
position: relative;
left: 50%;/*整个分页向右边移动宽度的50%*/
text-align: center;
}
#nav_bar li {
margin: 0 5px;
display: block;
height: 50px;
float: left;
position: relative;
right: 50%;/*将每个分页项向左边移动宽度的50%*/
}
#nav_bar a:hover {
background-color: #000000;
}
#nav_bar a {
display:block;
height: 100%;
color:white;
text-decoration:none;
line-height: 50px;
padding: 0 1em 0 1em;
background-color: #900000;
}
Please view the demo.
Other methods, you can click here.
Here you can see the code: http://jsfiddle.net/LQSK3/1/
I can't get display: inline; working there for every li element.
Also got the problem width the line.png image, as it's height is the same as the font height, I want it to has 35px height with margin left and right set to 5px.
Where is the problem?
You need to update your style sheet. Please add this new style:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li { display: inline;float:left; }
#menu ul {
position: absolute;
font-family: Century Gothic, sans-serif;
font-size: 14px;
list-style-type: none;
padding: 0;
margin: 9px 0 0 123px;
width: 649px;
height: 39px;
color: #FFF;
float:left;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}
You need to add float: left; to menu div,ul,li and a . Also should set width and height and margin of the a tag.
Here is a working sample : http://jsfiddle.net/YjeBs/
Hope this helps :)
EDIT:
If you want your line to extend from top to bottom of the menu div you can change your styles to:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li {
float: left;
height: 35px;
display:inline;
}
#menu ul {
color: #FFFFFF;
float: left;
font-family: Century Gothic,sans-serif;
font-size: 14px;
height: 35px;
list-style-type: none;
margin: 0 0 0 123px;
padding: 0;
position: absolute;
width: 649px;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
float: left;
height: 29px;
margin: 0 5px;
padding-top: 8px;
width: 65px;
}
Hope this is you want :)
just change li { diplay: inline; } with li { display: inline; } it works.