I'm really struggling to get this navigation-menu with a image that splits the navigation to work. Responsive is a big plus. I don not believe the current code is on the the right way to go, so please be open minded of how to approach this problem.
HTML
<div id="nav">
<ul class="nav-left">
<li>1</li>
<li>2</li>
</ul>
<div class="nav-logo"></div>
<ul class="nav-right">
<li>3</li>
<li>4</li>
</ul>
</div>
CSS
#nav {
width: 400px;
background: #f5f5f5;
border: 1px solid grey;
text-align: center;
}
.nav-left, .nav-right, .nav-logo {
display: inline-block;
height: 30px;
vertical-align:bottom;
}
.nav-left {
background: red;
}
.nav-right {
background: red;
}
.nav-right, .nav-left {
width: 100px;
line-height: 30px;
padding: 0;
}
.nav-logo {
background: yellow;
width: 30px;
height: 100px;
margin-left: 10px;
margin-right: 10px;
}
ul {
margin: 0;
text-align: justify;
list-style: none;
}
li {
display: inline;
width: 100%;
}
Update 05.05.14
Updated it with my current code as requested.
I have gone ahead and made a slightly responsive header for you: JSfiddle (Note: random coffeeshop logo borrowed from google image search... man I should go get a coffee)
The idea is to use the html5 nav element to contain your links, each with a width:20% so it resizes with the width of the screen.
The image is positioned with background:url('...') no=repeat center; to avoid sizing problems. It's in a separate div to allow you to stripe the <nav> element. This is possible with pure css.
As you want to position the links vertically they are nested in divs, and space for the image is made using an empty div with the same width:20%; property as the link containers.
The design breaks once you get close to small mobile device widths (as the links cover the image). For this you can use #media queries.
I hope this gives you a starting point, but design is very subjective and there are many different ways to do it.
It may be worth while to style your page with Bootstrap and inspect their CSS to see what's happening.
Can you please add your css and html codes into your qustion then I can help you with a best solution. Also if you want then email me your codes, I will send you the best solution.
Orherwise just add a class .navfix on the main navigation container div or ul. then add the style property z-index:9999999 for the class .navfix into your stylesheet. Also if you have use any other div for the background then you have to add same thing for the nav background container but here z-index property should be negative or lower then other one.
sample :
.navfix {
z-index:9999999;
}
for background container (if you have)
then
.navfix {
z-index:9999999;
}
.backgrounContainerClassName {
z-index:-1;
}
Related
I'm doing a work for school and I'm trying to align on center and middle both image and a menu. Here is my code on jsfiddle: LINK I'll post the code here too
HTML
<header>
<img id="logo" src="https://i.vimeocdn.com/portrait/58832_300x300.jpg">
<ul id="menutop1">
<li>Loja</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
CSS
body{
margin: 0;
}
header{
background-color: #171A21;
width: 100%;
height: 200px;
text-align: center;
}
#logo{
width: 250px;
height: 172px;
}
#menutop1 {
list-style-type: none;
overflow: hidden;
}
#menutop1 li {
float: left;
}
#menutop1 li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#menutop1 li a:hover:not(.active) {
background-color: #ddd;
}
The problem is the menu that does under the image and stays on left of the page.
I already tried everything I know and I didn't find a solution, please someone can help me? I realy can't find anything.
Thanks for the help and sorry for my english.
UPDATE
Thanks to the Kamila O the menu is next to the image and now I want center on middle, I added this code:
vertical-align: middle; height: 100%;
on the menu but don't think it is the best soluction becouse when I set a background color on the menu just to test I see this:
LINK
the menu get out of the div. Someone know a better soluction?
If you want to center your menu, you can change #menutop1 li to
#menutop1 li {
position: relative;
display: inline-table;
}
This is because you have added a float: left on the individual list items in the menu.
If you remove that float, make the list items inline-block and add a center text-align to #menutop1, it will align properly.
#menutop1 {
list-style-type: none;
overflow: hidden;
text-align: center;
}
#menutop1 li {
display: inline-block;
}
Updated jsfidle: https://jsfiddle.net/mebxcjwx/4/
I wrote quickly something along the lines of this. I just created containers for your logo + navigation, as this allows for you to control elements a bit better. As well as adding tha tag around your ul element.
<header>
<div class="logo">
<img src="https://i.vimeocdn.com/portrait/58832_300x300.jpg">
</div>
<nav class="main_nav">
<ul>
<li>Home </li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
https://jsfiddle.net/mebxcjwx/9/
Because they take up the full width of the header by default (If you want you can set this as display: block or width 100%) they will stack under each other, and since they are text elements all that was needed was a simple text align center to get the desired effect.
Im not sure if you wanted the navigation in the black space, if not you could simple remove the padding on the header, and give that navigation a white background or something along those lines to get the effect you desired!
I have a DIV at the top and a few anchors. First is styled with a logo and the rest are text. The styles I've set are as follows.
div.nav-top {
height: 120px;
vertical-align: middle;
}
a.nav-logo {
background: no-repeat url(Logo.png);
background-size: 200px 40px;
width: 200px;
height: 40px;
display: inline-block;
}
a.nav-link {
vertical-align: middle;
}
However, these elements are not centered in the div. The alignment seems to follow the image, which is at the top. The text gets in the middle relative to the image. It's not a bad idea but I need the whole system img-a-a-a-a to be centered vertically. At the moment I pad it but as soon as the height of the outer DIV changes, everything breaks.
What am I doing wrong?
(I've found this post but here they apply tables and such. Doesn't seem like the most appropriate solution. Perhaps I'm mistaken?
Using Flexbox
nav, .menu {
display: flex;
flex-direction: row;
align-items: center;
list-style-type: none;
}
li {
padding: 0 5px;
}
<nav>
<div class="logo">
<img src="http://placehold.it/150x50">
</div>
<ul class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
Using CSS Table
nav, .menu {
display: table;
}
.logo, .menu {
display: table-cell;
vertical-align: middle;
}
li {
padding: 0 15px;
display: table-cell;
vertical-align: middle;
}
<nav>
<div class="logo">
<img src="http://placehold.it/150x50">
</div>
<ul class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
You can refer to this blog, where the owner describes centering issues. He started 2001 but be aware that the last update's been made last summer, and I admire his persistence. He presents clear examples on how to center in the different versions of CSS.
In your case, I'd suggest that you use display: flex like so. Note that the whole centering magic's done from the containing control and imposed on the underlying children. There's actually no need to style nav-link at all (see remark below the example, though).
div.nav-top {
height: 120px;
background-color: purple;
padding: 10px;
display: flex;
align-items: center;
}
a.nav-logo {
background: no-repeat url(Logo.png);
background-size: 200px 40px;
background-position: center center;
width: 200px;
height: 100%;
}
a.nav-link { }
That's a new thing in styling and recently implemented. The disadvantage of that is that older browsers might have problems rendering it. But the upside is that it's much more intuitive to the designers (and fetching a decent version of a browser is not a far reach, unless managed centrally by the corporate).
You might want to use margin for the anchor controls, as they're going to be squashed toghether. Also, the sizes and fonts will need adjusting. If you do that, you'll probably end up needing the style which I suggested wasn't needed but that's specifics only you're aware of.
a.nav-link {
margin: 10px;
font-size: 20px;
font-family: "Comic Sans MS", "Comic Sans", cursive;
}
It's always a good practice to control height with paddings instead of a fixed height and margins to center. So, keeping that in mind:
Wrap the div with the logo and the div with the anchortags as children of a container div.
give the purple box there (or whatever it represents the corresponding padding top and bottom to center that parent div you created inside.
.purple{
background:purple;
width:400px;
display:inline-block;
padding: 20px 15px;
height:auto;
}
EDIT
or, if you MUST have a fixed height on the parent;
.purple{
background:purple;
width:400px;
display:inline-block;
height:60px;
padding: 0px 15px;
}
See this demo
You can wrap your elements into a div and use margin: 0, auto; for the elements and the inner container as well.
Use display: flex: in the div above the text then just repeat from there
div {
display: flex;
justify-contents: center;
align-items: center;
}
Not an elegant solution, but if you make a table with the text in one cell and the image in the next cell it's aligned in the middle.
I would like to style up my navigation bar, so it would look like this one nav bar on the picture. I have already startet and on the jsfiddle link below you are able to see what I have so far and as you can also see, that there are still a couple of things to fix.
It is important for me to align all elements to the same line, because I will maybe add some more elements to it (e.g. input field and button)
I would also like to have a background in two colors like on the picture. Lets say 30% purple, 70% black.
I have chosen T-Mobile logo image on purpose, because it is originaly very big. I have succeded to resize and fit it to the nav, however I would also like to ask if this is the right/best thing to do.
Thx in advance
https://jsfiddle.net/amsalk/y6km93gm/
body {
background: #EEE;
}
div#wrapper{
margin: auto;
background: white;
width: 800px;
height:2000px;
}
#horizNav {
display: block;
padding: 10px 10px 10px 10px;
background: black;
}
img {
max-height: 50px;
vertical-align: middle;
}
h3 {
color: white;
display: inline-block;
float: right;
}
<body>
<div id="wrapper">
<nav id="horizNav">
<img id="pageLogo" src="http://intranet.t-mobile.at/intranet/arbeitsplatz/T_Logo_magenta_schwarz_Brandneu_RGB.jpg" />
<h3>Title</h3>
</nav>
</div>
</body>
I am not writing whole html and css for you but follow these examples
http://fortawesome.github.io/Font-Awesome/examples/
I know I could fix this with relative positioning, but I'm more wanting to know the why behind my button getting pushed down when I give height to .toggle. I figured out that giving absolute positioning to #menu made it so I could give top margin to .toggle, but when I gave it a height, the button got pushed down. When I changed the height on the button, it changed the vertical height of the button itself. When I tried line-height, again, the button itself changed size.
What is causing the button to get pushed down, and how would I fix this outside of using relative positioning, or switching to in-line block instead of using floats? (I gave .toggle a background-color of blue so I could visualize what was pushing down the button)
http://jsfiddle.net/7rj67454/
HTML:
<div id="menu">
<div id="logo">Codeplayer</div>
<ul class="toggle">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Result</li>
</ul>
<button>Run</button>
</div>
CSS:
/* ----------- UNIVERSAL -----------*/
a, body, html, ul, li, div {
margin: 0;
padding: 0;
list-style: none;
font-family: helvetica;
}
#logo, .toggle {
line-height: 50px;
}
/* ----------- MENU BAR -----------*/
#menu {
background-color: #EDEBED;
width: 100%;
height: 50px;
box-shadow: 1px 1px 1px #000000;
position: absolute;
}
/* ----------- LOGO -----------*/
#logo {
float: left;
font-weight: bold;
margin-left: 15px;
font-size: 20px;
height: 20px;
}
/* ----------- TOGGLE BAR -----------*/
.toggle li {
list-style: none;
float: left;
margin-left: 20px;
}
.toggle {
margin: 0 auto;
width: 250px;
background-color: blue;
height: 30px;
margin-top: 10px;
}
/* ----------- BUTTON -----------*/
button {
float: right;
margin-right: 15px;
}
This is happening because the li elements in your ul are floated. When you float an element it takes it out of the normal document flow. As far as a containing element is concerned a floated child element doesn't take up any space within it, so it collapses.
The only reason that the Run button isn't sitting all the way at the top of the page is because .toggle has margin-top: 10px; and is taking up the full width of .menu. Try removing margin-top and you'll see Run move up.
The Run button is sitting under your .toggle ul because .toggle is taking up the full width of the shared parent.
This is how your elements are currently laid out:
#######################################
# .toggle #
#######################################
# Run #
#######
By adding height to you .toggle you're simply pushing and element that is already below it further down.
http://jsfiddle.net/7rj67454/1/
If that's what you're looking for then it's because you're confusing or having a hard time grasping the concept of float, position: absolute, and inline-block.
You'd essentially want to avoid position absolute in your case as you don't really need to take anything out of the normal flow.
You want to display things as inline-blocks rather than their default block style because you want to put things inline.
Floating them to the left can achieve the same as inline-block styling but it wasn't meant to be used for what you're aiming for.
Here's a quote from the following page:
Advantages of using display:inline-block vs float:left in CSS
Inline Block
The only drawback to the display: inline-block approach is that in IE7
and below an element can only be displayed inline-block if it was
already inline by default. What this means is that instead of using a
<div> element you have to use a <span> element. It's not really a huge
drawback at all because semantically a is for dividing the page
while a is just for covering a span of a page, so there's not a
huge semantic difference. A huge benefit of display:inline-block is
that when other developers are maintaining your code at a later point,
it is much more obvious what display:inline-block and text-align:right
is trying to accomplish than a float:left or float:right statement. My
favorite benefit of the inline-block approach is that it's easy to use
vertical-align: middle, line-height and text-align: center to
perfectly center the elements, in a way that is intuitive. I found a
great blog post on how to implement cross-browser inline-block, on the
Mozilla blog. Here is the browser compatibility.
Float
The reason that using the float method is not suited for layout of
your page is because the float CSS property was originally intended
only to have text wrap around an image (magazine style) and is, by
design, not best suited for general page layout purposes. When
changing floated elements later, sometimes you will have positioning
issues because they are not in the page flow. Another disadvantage is
that it generally requires a clearfix otherwise it may break aspects
of the page. The clearfix requires adding an element after the floated
elements to stop their parent from collapsing around them which
crosses the semantic line between separating style from content and is
thus an anti-pattern in web development.
use display: table;
/* ----------- UNIVERSAL -----------*/
a, body, html, ul, li, div {
margin: 0;
padding: 0;
list-style: none;
font-family: helvetica;
}
.toggle {
line-height: 50px;
}
/* ----------- MENU BAR -----------*/
#menu {
background-color: #EDEBED;
width: 100%;
height: 50px;
box-shadow: 1px 1px 1px #000000;
display: table;
}
#menu .item{
display: table-cell;
vertical-align: middle;
width: 25%;
}
#menu .item-center{
width: 50%;
}
#menu .item-right{
text-align: right;
}
/* ----------- LOGO -----------*/
#logo {
font-weight: bold;
margin-left: 15px;
font-size: 20px;
height: 20px;
}
/* ----------- TOGGLE BAR -----------*/
.toggle li {
list-style: none;
display: inline-block;
margin-left: 20px;
}
.toggle {
margin: 0 auto;
width: 250px;
background-color: blue; /* I added this to show what's causing run to push down */
}
/* ----------- BUTTON -----------*/
button {
margin-right: 15px;
}
<div id="menu">
<div class="item item-left">
<div id="logo">Codeplayer</div>
</div>
<div class="item item-center">
<ul class="toggle">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Result</li>
</ul>
</div>
<div class="item item-right">
<button>Run</button>
</div>
</div>
Figured it out: I switched the placement of the .toggle and "run" button in my html so that the logo was first, then the run button, then the toggle. This way, when I floated the button and put top margin on .toggle, it wasn't pushed down.
I am trying to create a navigation panel for my website. I would like it to consist of:
Four tabs in equal size with text-centered in each tab.
They should fill the whole page width.
I would really like the design to be flexible and browser friendly. I have tried various float techniques, but I can't get it to work. I hope that you can help me out!
Thank you.
HTML
EDIT: it's 2015 and HTML5 has been there for a while; following code should be inside a nav element (html5doctor) with landmark ARIA attribute role="navigation" on it (and 99.9% of the time be unique in any given page).
A navigation panel should use an unordered list of links:
<ul id="nav">
<li>One</li>
<li> Second</li>
<li>Third</li>
<li>Fourth and last, so large that... worst case</li>
</ul>
CSS
EDIT2: It's 2017, just use Flexbox 😲 (with or without flex-wrap: wrap)
inline-block is useful but has one drawback: whitespace between two elements must be carefully managed. Whether removed or no </li> in HTML5 or </li> at the beginning of the following line stuck like </li><li>next item or other tricks, you still have to do something or it'll create a ~4px gap between 2 elements.
25% + 25% + 25% + 25% doesn't equal 100% on all browsers if the total isn't a multiple of 4. Each browser has its own rounding method.
If you want elements to total 100% width and equal width, another method is to use display: table (and table-cell) with table-layout: fixed to force browsers to use the other table algorithm, the one that doesn't try to adapt cells width to content but respect the widths wanted by the designer/developer as far as possible.
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
#nav {
display: table;
table-layout: fixed;
text-align: center;
}
#nav li {
display: table-cell;
width: 25%;
padding-right: 1px;
height: auto;
vertical-align: bottom;
}
#nav a {
display: block;
min-height: 100%;
padding: 4px 10px;
background-color: #222;
color: white;
border-radius: 6px 6px 0 0;
}
Fiddle
http://jsfiddle.net/PhilippeVay/aHCy3/1/
edit: http://jsfiddle.net/PhilippeVay/aHCy3/2/ with another method for space between each tab, courtesy of my colleague.
You don't need floats for this. Just set the width to 25%, or a tiny bit less than 25%. If you're using this on a block level element, set display: inline-block. This will work for all browser sizes, as well as respond to window resize.
HTML
<div class="nav">Nav 1</div>
<div class="nav">Nav 2</div>
<div class="nav">Nav 3</div>
<div class="nav">Nav 4</div>​
CSS
body, html {
width: 100%;
padding: 0;
margin: 0;
}
.nav {
width: 24%; /*Slightly less than 1/4th of the width*/
display: inline-block;
padding: 0;
margin: 0;
text-align: center;
}​​
Live demo
css:
.tab {
float: left;
width:25%;
height:25px;
background:black;
border:1px solid #fff;
box-sizing: border-box;
}​
html:
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>​
jsfiddle: http://jsfiddle.net/zP7Xh/6/