In my PSD file I have a nav bar with some light effect in the background. I'm a bit concerned whether should I slice the whole nav bar and then add text or just slice it into smaller pieces? Which would be the best practice?
I'm new to this subject so any ideas would be so much appreciated.
You for sure want to cut the nav bar images into pieces. Add them to the background of each of the nav bar links with css. It will save you a big headache later.
Here is a good example of a jsfiddle
Css
#nav {
display: block;
height: 40px;
line-height: 35px;
list-style: none outside none;
margin: 20px auto 0 auto;
position: relative;
max-width: 750px;
min-width: 750px;
width: 78.2%;
}
#nav li {
display: inline;
text-align: center;
float:left;
}
#nav li a{
color: #fff;
display: block;
float: left;
font-family: HelveticaNeue-light,Helvetica,sans-serif;
font-size: 1em;
height: 100%;
padding: 0px 23px 0;
text-align: center;
text-decoration: none;
line-height: 40px;
background:#4D4D4D;
position: relative;
}
#nav li a span {
position: absolute;
left: 0;
top: 40px;
display: none
}
#nav li a:hover, #nav .active a {
background: url("path/to/image.png") no-repeat bottom center #a4c723;
color: #4d4d4d;
}
#nav li a:hover span, #nav .active a span {
display: block;
}
if you mean gradients, you can use gradient generator http://www.colorzilla.com/gradient-editor/
As for me, using as few images as possible is best practice. Draw your navbar with css, good luck
Related
As you read on the title, I've been trying to make a navigation bar but I'm having several issues I haven't experienced before. I even made a list:
Buttons sticking into the navigation bar even though they don't belong in the div class.
Navigation Bar
Well now, I've seen this before, but I've gotten a bit rusty on HTML and don't quite remember how to fix it. If you can't tell, the links are not lined up with the text/logo. How can I fix this? I'm trying to make it slim.
background-color: #252036;
}
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70%;
}
.navigation-bar {
background-color: #1c172c;
width: 100%;
left: 0;
top: 0;
position: fixed;
text-align: right;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: right;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
display: inline;
text-align: right;
}
.navigation-bar li a {
color: black;
font-size: 16px;
font-family: basic;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
<div class="navigation-bar">
<div id="navigation-container">
<h1>SINUS</h1>
<ul>
<li>Home</li>
</ul>
</div>
</div>
<button>Download</button>
It is sticking because of position: fixed;. The button doesn't see the .navigation-bar. Add padding to a parent that contains these elements.
h1 needs to have display:inline-block;. ul is just below h1 now.
I'm trying to centre the menu on my Wordpress site with CSS:
http://thewholesomebakery.co.uk/
I'm aware that I have to remove float:left; but then solutions seem to vary from theme to theme.
Can anyone help me out with this?
Use this css:
.site-bar .nav {
width: 100%;
float: none;
text-align: center;
}
.navigation > li {
float: none;
display: inline-block;
}
You can remove the float and add margin: auto;. The page of the w3c about centering things is an absolute must-read for any web developper.
Change your css to:
.site-bar .nav {
float: left;
width: 100%;
padding-top: 3px;
text-align: center;
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
that should center the top navigation!
so this is how my navigation looks:
Quite unbalanced right.. my minds kinda fkd up. I have no idea what I am doing already. I'd like to ask some help how to center it out. This is the code of the css:
.navigation {
width: 886px;
height: 84px;
background: url('../img/nav_bg.png') no-repeat;
margin: 0 auto;
}
.navigation ul {
margin: 0;
padding: 0;
list-style: none outside;
padding-top: 22px;
padding-left: 63px;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Flexbox is not yet 100% supported cross-browser
As you can see from this link: http://caniuse.com/#feat=flexbox
Flebox nowadays is quite well supported but if you carefully look at those symbols on each square you notice that the support is not full but partial on some browsers (especially mobile).
Global (with prefix)
82.47% + 10.5% = 92.97%
unprefixed:
71.8% + 0.38% = 72.18%
You should to add a prefix if you really want to use it.
**
Using a different method - display:table;
**
On the other hand, I suggest you to use another approach which is much more stable and supported on all browsers:
Look at the support of display:table;
Link: http://caniuse.com/#search=display%3Atable
To solve your problem you can remove all your padding-top with fixed values and use vertical-align:middle and display:table-cell. This way no matter what is the height of the ul it will be always vertically centered.
Center horizontally the ul element using text-align:center;
Center vertically the ul by setting the .navigation container with display:table; and the ul element with display:table-cell; and vertical-align:middle;
Code example:
.navigation {
width: 100%;
height: 84px;
background: lightgrey;
margin: 0 auto;
display:table;
}
.navigation ul {
padding: 0;
list-style: none outside;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Check Jsfiddle: http://jsfiddle.net/a_incarnati/bmkspm69/1/
Flexbox might be able to help you here. To center your li's with flexbox all you would have to do is add these styles to .navigation ul
.navigation ul{
display:flex;
justify-content: center;
align-items:center;
}
Give a text-align: center to the ul.
In general, for centering some elements inside a parent, parent should have text-align:center and the childs should have display: inline-block or display: inline.
HTML:
<ul>
<li>A</li>
<li>B</li>
<ul>
CSS:
ul {
width: 400px;
text-align: center;
}
li {
display: inline-block;
}
How do I center this menu in css? I have tried left: 50% or text-align: center but nothing works. Do you guys have any idea?
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
Thanks in advance
CSS:
#navigation {
margin: 0;
width: 100%;
height: 50px;
background: url(navigation.jpg);
padding: 0;
position: absolute;
left: 0;
top: 0;
right: 0;
text-align:center;
}
#navigation ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#navigation li {
float: left;
border: 0;
list-style:none;
}
#navigation a {
margin: 0;
display: block;
height: 30px;
padding: 20px 20px 0px 20px;
background: none;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFF;
border: none;
}
#navigation a:hover, #navigation #current a {
background: url(button.jpg);
text-decoration: none;
color: #000;
}
Have you tried:
#navigation ul {margin:0 auto;}
on your #navigation ul element?
You can try this:
#navigation {
text-align:center;
}
#navigation ul {
display:inline-block;
}
wrap your content in a container, set a width and use margin:auto
EDIT
Ok this is a bit of a mess, is there a reason you are absolute positioning the header? Your ul does not need position: relative and your li's should be using display:inline-block instead of float.
JSFIDDLE
Your #navigation element has width:100%; so that block level element takes the entire screen. You can try to center it's children with text-align: center;.
Try settings a specific width on your #navigation ul and then apply margin: 0 auto; text-align:center;.
Depending on what you're going for, it may be better to do #navigation li{ display: inline-block;} instead of float: left
I have a navigation bar that has to be 900 pixels wide but the links inside don't necassarily always span the entire width of the bar so I'd like to center the links. The issue is no matter what I try, the links won't center. Here's my CSS:
.center {
text-align: center;
}
nav {
width: 900px;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
margin: 0 auto 20px auto;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
background: #C0C0C0;
}
nav ul:after {
content:" \2022 ";
clear: both;
display: block;
}
nav ul:last-child:after {
content:"";
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-align: center;
display: block;
padding: 20px 15px;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
z-index: 100;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
I tried adding auto margins to the nav id, and the nav ul id to no avail, then I tried wrapping the list in a div with a class that aligns the content in the center, but that didn't work either. Then I tried text-align to no avail. I don't know what to do so any help would be greatly appreciated!
Here's a JDFiddle I've been working with: http://jsfiddle.net/VCKMU/2/
UPDATE: After taking #Adrifts advice and changing the list items from float:left to inline-block, they now align in the center but now all the child items are inline blocks instead of vertical lists. Any ideas?
Updated JSFiddle: http://jsfiddle.net/VCKMU/6/
Instead of floating the list-items, just change their display value to inline-block; as you have specified text-align: center; on their containing block.
http://jsfiddle.net/VCKMU/6/
The only problem is that this causes the child items to turn into inline lists when they're supposed to be vertical.
You just need to modify the selector to only target the list-items are the children of the first <ul>:
.center > ul > li {
display: inline-block;
}
http://jsfiddle.net/VCKMU/8/
I think it should work if you give nav { width: auto; margin: auto; }
I usually fool around in the Chrome debugger for issues like this.