I've a div container which is named headline. In this div there are two elements, a menu bar of type unordered list and a div container. I'll centering horizontally the menu bar, the other div container should dock on the right display side with a margin of 5%. How I can do this, has someone an idea?
Okay here is my litte example from jsfiddle: http://jsfiddle.net/nchm3gyj/
HTML
<div class="headline">
<ul class="navbar">
<li>Home</li>
<li>Team</li>
<li>Info</li>
<li>Downloads</li>
</ul>
<img class="facebook" src="" />
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
.headline {
height: 60px;
width: 100%;
background-color: black;
margin-top: 10px;
}
.headline .navbar{
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
float: left;
height: 60px;
width: auto;
background-color: yellow;
list-style: none;
}
.headline .navbar li{
display: inline;
}
.headline .navbar li a {
text-decoration: none;
line-height: 60px;
padding-left: 10px;
padding-right: 10px;
}
.headline .facebook {
width: 60px;
height: 60px;
margin-right: 5%;
float: right;
}
#clear {
clear: both;
}
If you want your navigation bar centered in the parent block, here is one way of doing it.
Apply display: inline-block to the .navbar and text-align: center to .headline.
Assuming that you want the navigation bar centered with respect to the full
width of the parent block, you need to take the image out of the content flow.
You can do this by applying position: absolute to the .facebook element.
.headline {
height: 60px;
width: 100%;
background-color: black;
margin-top: 10px;
text-align: center;
position: relative;
}
.headline .navbar{
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
height: 60px;
width: auto;
display: inline-block;
background-color: yellow;
list-style: none;
}
.headline .navbar li{
display: inline;
}
.headline .navbar li a {
text-decoration: none;
line-height: 60px;
padding-left: 10px;
padding-right: 10px;
}
.headline .facebook {
position: absolute;
top: 0;
right: 5%;
width: 60px;
height: 60px;
}
<div class="headline">
<ul class="navbar">
<li>Home</li>
<li>Team</li>
<li>Info</li>
<li>Downloads</li>
</ul>
<img class="facebook" src="http://placehold.it/60x60" />
</div>
I think you might need to position: absolute the facebook image and display: inline-block your menu bar (being centered by the .headline):
http://jsfiddle.net/nchm3gyj/32/
I'm a bit unsure of what you're trying to do, is this it? Applied text-align: center to .headline and display: inline-block to .navbar then position: absolute to .facebook?
http://jsfiddle.net/nchm3gyj/42/
Related
When the screen is below 450px the logo disappears to give the nav space, but the nav then goes about 20px off the left side of the screen.
http://codepen.io/briligg/pen/emwXaw?editors=110
I believe this is the relevant code - i might have included more than necessary. CSS:
#media screen and (max-width: 450px) {
img#logo {
display: none;
width: 0;
}
nav {
width: 100%;
min-width: 100%;
}
}
div#top{
position: fixed;
top: 0px;
width: 100%;
height: 130px;
z-index: 5;
}
img#logo {
border: 0;
float: left;
width: 20%;
margin-right: 2%;
margin-left: 2%;
margin-top: 5px;
max-width: 123px;
}
nav { position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 60px;
max-height: 60px;
margin: 5px 5px;
}
nav button {
padding: 0 4px;
height: 28px;
font: 16px;
}
nav button ul {
position: relative;
display: none;
}
nav button:hover ul, nav button:focus ul {
display: block;
z-index: 6;
list-style: none;
padding: 4px;
}
nav button:hover li, nav button:focus li {
padding: 4px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover, nav a:focus {
color: #9dab71;
}
And here is the relevant HTML:
<div id="top">
<a href="default.html"><img id="logo" src="http://www.briligg.com/images/briligg-loopless-blue.png"
alt="briligg home" /></a>
<nav>
<button>Purpose</button>
<button>Moon vs Mars
<ul>
<li>Ambiance</li>
<li><a style="border-bottom: 1px solid #666666;" href="moonvsmars.html#communication">Communication</a></li>
<li>There and Back</li>
</ul>
</button>
<button>Being There
<ul>
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</button>
</nav>
</div>
You have given the nav element a min-width of 100%... because of the way the box model works, adding padding and margin to that forces the element to be wider than the viewport.
You can fix it by adding box-sizing: border-box; to your nav element. This will force any padding or border to be included as width. See more details here.
I would suggest reading up on how the box model works at w3schools and adjusting your padding and margin accordingly.
So, I have a navigation bar and then an <ul> which has some <li>inside. I want it to be vertically aligned with the navigation bar .navbar but it seems it's not working. Do anyone have andy idea what am I doing wrong?
Here is the fiddle and code: http://jsfiddle.net/x7EAg/2/
<style>
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
</style>
<nav class="navbar" role="navigation">
<div class="container">
<div class="logo-holder"></div>
<ul class="sections">
<li>Shop</li>
<li>Team</li>
<li>Events</li>
<li>Experience</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Thank you!
If I understand what you are trying to achieve. Then you should make the logo absolutely positioned and then aligning the ul can be done with line-height. Full css:
.navbar {
width: 100%;
height: 90px;
line-height:90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
}
And updated fiddle
i changed the display of your logo-holder to inline-block and then set vertical-align:middle
now it appears next to the logo, and vertically centered.
see here for a fiddle http://jsfiddle.net/gaurav5430/x7EAg/3/
this is the complete css:
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
display:inline-block;
vertical-align:middle;
}
.navbar .sections {
display:inline-block;
vertical-align:middle;
list-style: none;
margin:0px;
padding:0px;
background:#aaa;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
What I believe is going on is your logo is pushing your ul down. like was mentioned above. You may want to float your logo-holder class left. That would allow you to position your li as you needed. Line-height is a way to do this, you could also use margin, padding, or absolute position for your li as needed. Good luck.
I'm having some trouble with a fixed nav bar at the top of my page. It's supposed to be flush with the top of the page, but isn't. Here's my HTML:
<nav>
<a href="#">
<div id="logo">
lorem
</div></a>
</nav>
<ul>
*enough li's to go past the bottom of the screen*
</ul>
and my CSS:
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
display: block;
color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: 60px;
background-color: #4d4d4d;
}
#logo {
padding-left: 1%;
padding-right: 1%;
color: #75cc83;
width: 180px;
height: 100%;
background-color: #333333;
font-size: 3em;
font-family: candara, sans-serif;
}
It seems like there are only problems with the fixed nav once I put content in there (the list items, in this case)
Add top:0 to you nav's rules:
nav {
position: fixed;
display: block;
color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: 60px;
background-color: #4d4d4d;
top:0;
}
jsFiddle example
Heres my html for my tabbed navigation bar. Im having trouble centering the text within the li tags and putting padding on the top is not somthing I want to do because I want to put padding around all the text to make the whole tab clickable. If theres any advice for that as well please feel free to give me advice. So how can I make my link text centered and if possible how can I make the whole tab clickable?
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
This is my CSS. Please tell where I went wrong?!
#tab_container
{
background-color: #222;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #222;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: black;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
text-decoration: none;
text-align: center;
margin: 0px auto;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
}
Option 1:
Really simple. Just add line-height: 70px; to your a tag.
So the css would be:
ul li a
{
color: #54544b;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
}
Where the 70px is the height of the list element.
Option 2:
Alternatively, you could set your A to display: block; and add padding to that. This would make it clickable, but personally, I prefer to use line height.
ul li a
{
display: block;
padding-top: 15px;
padding-bottom: 15px;
}
I have this code:
<div class="container" id="container">
<div class="content" id="content">
<div class='nav'>
<ul>
<li><a href='#'>One</a></li>
<li><a href='#'>Two</a></li>
<li><a href='#'>Three</a></li>
<li><a href='#'>Four</a></li>
<li><a href='#'>Five</a></li>
</ul>
</div>
<div class='innercontent'>
test
</div>
</div>
</div>
With the following CSS:
.content {
background-color: blue;
height: 190px;
padding: 30px;
}
.nav {
background-color: blue;
display: inline-block;
height: 140px;
width: 200px;
margin: 10px;
}
.nav a {
display: block;
text-decoration: none;
color: white;
font-weight: bold;
}
.nav li {
list-style: none;
padding: 0px;
background-color: #369;
padding: 4px 5px;
margin: 8px; 0px;
border-radius: 15px;
text-align: center;
}
.nav ul {
background-color: yellow;
padding: 0px;
margin: 0px;
}
.innercontent {
top: 0px;
background-color: red;
display: inline-block;
height: 20px;
width: 150px;
margin: 10px;
}
Problem: The second div (innercontent)'s top should exactly line up with the first ul's top. What have I done wrong?
Two things and you're done:
add float:left; to .nav
change margin:20px; in .innercontent
so in the end it should look like
.nav {
background-color: blue;
display: inline-block;
height: 140px;
width: 200px;
margin: 10px;
float:left;
}
.innercontent {
top: 0px;
background-color: red;
display: inline-block;
height: 20px;
width: 150px;
margin: 10px;
}
The float is necessary so .innercontent can float around .nav
Try setting the vertical-align:top; for the content. By default the vertical-align is set to baseline.
add float:left for both .nav and .innercontent
I see that you use top property for .innercontent but keep in mind that this properties are used only with positioned elements (relative,absolute,fixed)
I suggest you to read the following two articles to understand how position and float works:
CSS Floats 101 & CSS Positioning 101.
Demo: http://jsfiddle.net/GYPJH/