I'm trying to get a separator between my nav menu and I found out about the 'li + li' function, but I'm having a very hard time getting the separator in the right place. I'm trying to get it evenly place between the two placeholders centered and all. I've tried messing with the margin and padding properties with no luck.
Here's a jsfiddle along with my code and a picture example on what I'm trying to achieve. Any help is much appreciated, thanks.
http://jsfiddle.net/jzcZ4/
HTML / CSS
<style>
body {
margin: 0;
color:white;;
}
#header {
background-color: #1c2024;
height: 100px;
width: 100%;
text-align: center;
line-height: 100px;
}
#header ul {
margin: 0;
}
#header li {
display:inline;
}
#header li + li {
background:url('http://i.imgur.com/IdVT0cL.png') no-repeat;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li>odsfjkoj</li>
<li>odsfjkoj</li>
</ul>
</div>
</div>
</body>
You would use background-size/background-position in order to position the background.
In this instance, just use the shorthand:
UPDATED EXAMPLE HERE
#header li + li {
background: url('http://i.imgur.com/IdVT0cL.png') 8px 8px / 1px 10px no-repeat;
padding-left: 20px;
}
I would make the li elements display:block and apply padding to all of the on left and right.. This way they have equal distances from both sides of the text
Then use 50% on the vertical position of the background image.
#header li {
display:inline-block;
padding: 0 20px;
}
#header li + li {
background:url('http://i.imgur.com/IdVT0cL.png') 0 50% no-repeat;
}
http://jsfiddle.net/gaby/jzcZ4/1/
(I have used a trick of commenting out the whitespace so that it does not affect the layout..)
Related
Basically there should be a background color for the whole navbar across the screen, but it isn't showing up when I run the code. I would expect them to format everything inside the navigation div to that color, but it doesn't. I am fairly new to HTML5 and CSS3, so it could be a stupid mistake, but I have done some research and can't find any answers.
#navigation {
width: 100%;
height: auto;
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
}
#navigation ul {
display: inline-block;
margin: 0;
padding: 0;
}
#navigation ul.left {
float: left;
}
#navigation ul.right {
float: right;
}
#navigation ul li {
display: inline-block;
margin: 0;
padding: 6px 10px 5px 10px;
list-style: none;
background-color: transparent;
background-color: rgba(0, 0, 0, 0.12);
}
#navigation ul.left li {
float: left;
border-right: 1px solid black;
}
#navigation ul.right li {
float: right;
border-left: 1px solid black;
}
<div id="navigation">
<ul class="left">
<li>Electronics</li>
<li>Gardening</li>
<li>Cooking</li>
<li>Art</li>
</ul>
<ul class="right">
<li>About Us</li>
</ul>
</div>
<div class="clear"></div>
That's because you're floating the ul . You will need to clear them.
Try adding this:
#navigation:after {
clear: both;
content: " ";
display: block;
}
Also, ul.right needs to have li first and a inside li
Basically, since you're floating the uls, you must add float: left to their parent, #navigation too. Otherwise it will just have zero height and that's why the background isn't visible.
Replace height:auto; with height:29px; for #navigation
The reason why your background on the #navigation div is not showing on the navbar is because both of the children uls are floating. This makes it so that the parent div does not have a height. You can fix this by either adding a height to #navigation like so:
#navigation {
height: 29px;
}
or you can add a .clearfix class to the #navigation div with the css below:
.clearfix:after {
content: "";
display: table;
clear: both;
}
and add the class to your div like so:
<div class="clearfix" id="navigation"></div>
It is nice to create a clearfix class because you will be able to use this in your project everywhere else you have this issue. This will also allow you to get rid of that clear div you have at the bottom. If you want to learn more about clearfix here is the article I always refer too, CSS Tricks. There a lot of articles to read about how it works.
I'm assuming by a background colour, you're meaning the colour defined in the navigation div. Your navigation div has height: auto on it. You're floating the navigation links, but not clearing the floats or floating the parent. Because there is nothing for it to adjust based on, it takes up a height of 0 pixels by default.
Either float the parent:
#navigation {
width: 100%;
float: left; /* or height: 30px; */
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
}
Set a fixed height on the parent:
#navigation {
width: 100%;
height: 30px;
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
}
Or clear the floats (using overflow: auto is preferred):
#navigation {
width: 100%;
height: auto;
background-color: #1d517e;
background: linear-gradient(to bottom, #003b6e, #1d517e);
overflow: auto;
}
Which approach you go with is up to you :)
Hope this helps!
The clearer div should be placed inside the navigation bar just after the floated divs and the clear:both css should apply to it, currently it doesn't
add
#navigation {
overflow: hidden;
}
hope this helps
I have a horizontal menu that is made up of a series of ul's and li's. The submenus look great so I don't need to do anything with those. The primary ul looks great until you hover over the far right li.
When doing that, it looks good in Safari but the hover comes about 2 pixels short of the background on the ul in Firefox and IE and even more in Chrome. I have tried adjusting the padding to make it look good in Firefox and IE but then you still have the same issue in Chrome and in Safari, that far right li breaks down to a new line. Of course, adjusting it to look good in Chrome makes all the other browsers break to a new line. This site is using Wordpress which creates the menu dynamically so I can only change the CSS. Here is the basic idea for the code:
<html>
<head>
<style type="text/css">
#header {
margin: 0 auto;
width: 980px;
}
ul li {
font-size: 13px;
line-height: 21px;
}
#header .main-nav #menu-main-navigation {
background: #169BAC;
width: 100%
}
#header .main-nav > div ul {
width: 100%;
list-style: none;
float: left;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#header .main-nav > div ul li ul{
top: 43px;
}
#header .main-nav .menu-div>ul>li {
padding: 5px 14px;
float: left;
border-right: solid 1px #54AEC2;
}
#header .main-nav .menu-div ul li:hover {
background: #2A588D;
}
#header .main-nav .menu-div>ul>li:first-child {
padding-top: 9px;
height: 28px;
}
#header .main-nav .menu-div>ul>li:last-child {
padding: 5px 26px;
border-right: none;
}
#header .main-nav .menu-div>ul>li a{
line-height: 15px;
text-decoration: none;
color: #FFF;
padding: 0px 13px;
text-align: center;
display: inline-block;
}
</style>
<head>
<body>
<header id="header">
<nav class="main-nav">
<div class="menu-div">
<ul id="menu-main-navigation" class="menu">
<li id="menu-item-275">Home</li>
<li id="menu-item-310">For New<br />Patients</li>
<li id="menu-item-376">Cleanings &<br />Prevention</li>
<li id="menu-item-381">General<br />Dentistry</li>
<li id="menu-item-453">Restore Your<br />Smile</li>
<li id="menu-item-462">Dental Anxiety &<br />Sedation Options</li>
<li id="menu-item-463">Dentistry For<br />Kids</li>
<li id="menu-item-464">Insurance &<br />Payment Options</li>
</ul>
</div>
</nav>
</header>
</body>
You can see the site at http://riverbend.caswellwebcreations.com.
Thank you for any help that you can give me on this.
The width of the li elements is being defined by their padding and the font-size (and padding) of the a elements inside them. The font propertys are not uniform between browsers, some browsers put text bigger or smaller than others. That seems to be the problem.
If you want to stretch the li elements "cross-browser" you should define the width of the li elements via css like this:
#menu-item-275{
width: 64px;
}
#menu-item-310{
width: 77px;
}
#menu-item-376{
width: 96px;
}
#menu-item-381{
width: 82px;
}
#menu-item-453{
width: 104px;
}
#menu-item-462{
width: 131px;
}
#menu-item-463{
width: 105px;
}
#menu-item-464{
width: 132px;
}
If you sum the width of each li item (plus padding and border) you get the width of the menu container: 980px. And the browsers will take that width to render the li's.
I hope this works!
UPDATE
Just found another (and more easy) solution!: https://stackoverflow.com/a/14361778/3762078
#header .main-nav .menu-div>ul>li:last-child {
padding: 5px 20px;
border-right: none;
float: none; /* ADD THIS */
overflow: hidden; /* AND THIS */
}
'float: none'. Forces last li element to be as wide as it can (the
default block element's behavior).
'overflow: hidden'. Prevents the last li element to stretch to ul's full width.
Although this doesn't prevent the width changes to all li elements on every browser, hence making the last li's width be thinner or wider (and sometimes expanding that li's height), is a nice solution.
I know this is pretty simple, but I've been fussing with this for hours now.. In my header, I want my logo and my nav to be on the same line... basically, I have this HTML:
<div class="menu">
<div class="ct-header-line"></div>
<img class="logo" src="images/clinictechlogo.png">
<ul class="nav">
<!--common features, coded? or static?-->
<li class="active">Home</li>
<li>Appointments</li>
<li>Prescriptions</li>
<li>Patient Records</li>
<li>Bills</li>
<!--special features, coded.....-->
<li>Charts</li>
<li>something</li>
</ul>
</div>
And here's the some of the CSS for the header part:
.logo {
padding: 20px 10px 10px 10px;
display: inline;
}
.menu {
background: #4F97BD url(images/headerbg.jpg) repeat;
}
.nav {
list-style:none;
margin:0;
}
.nav li {
display: inline;
}
The result is that the logo appears on one line, and the ul nav appears on the next...
You need to give the <ul> display: inline-block. If the logo's height is fixed, you might also want to give the <ul> a suitable line-height so that the options appear vertically aligned with regards to the logo.
Try adding to the logo:
.logo {
float: left;
width: 20%; //Or whatever the width is
}
This should make the wrap up next to it. If it doesnt you may need to add somethign similar to the
.nav {
float: left;
width: 70%;
}
Check this one: Inline Logo and Nav
just float both the .logo and .nav to left and have clear fix at the bottom.
.logo {
padding: 20px 10px 10px 10px;
display: inline;
float:left;
}
.menu {
background: #4F97BD url(images/headerbg.jpg) repeat;
}
.nav {
padding: 20px 10px 10px 10px;
list-style:none;
margin:0;
float:left;
}
.nav li {
display: inline;
}
.clear{
clear:both;
}
To make them align correctly(vertically) apply the padding to nav same to what you were using on the image..
hope this helps
Merx..
Try this...
.logo {
margin:0;
padding:0;
display:inline;
}
Take a look http://jsfiddle.net/vZZDJ/
Good Luck...)
im wondering if anyone could please help me with a css / html issue.
I have a complex background image. The menu div is positioned at the correct location to overlay the background where it is ment to position. The entire LI has a hover rollover image with a display type of block. The result is that when the mouse is over the list href the entire block rollover works..
The problem happens however when i attempt to add padding to create a buffer between the list item text and its border.. Things start to go funny... I'll add a screen shot.. Padding is required to move it from the border.
The second problem exists that i cant valign the text to the middle without applying a line height.. The solution works great until items wrap.. I need to be able to wrap menu item text..
The below example shows the state with the current CSS/HTML. The menu bar and rollover are in place as expected. Amend i cant place the image to to restrictions on posting as a new person here.. The example can however be found at 213.40.100.100 / example1.jpg
The below example shows the state when padding OR margin is added. The LI seems to completly shift, not moving the interal text..
213.40.100.100 / example2.jpg
<div id="wrapper">
<div
id="header">Header</div> <div
id="menu">
<ul>
<li><a>Contact Us</a></li>
<li><a>Recommends</a></li>
<li><a>Deals</a></li>
<li><a>Home</a></li>
</ul> </div> <div id="content">Content</div>
<div id="footer">Footer</div>
</div>
#charset "utf-8"; /* CSS Document */
* { margin: 0; padding: 0; }
body {
padding-top: 10px;
background: url(background.jpg) no-repeat center top; height:100%;
}
div#wrapper {
margin: auto;
height: 100%;
width: 978px;
min-width: 978px;
}
div#header {
height: 196px;
}
div#menu {
height: 69px;
position:
relative;
}
div#menu ul {
height: 69px;
list-style-type: none;
}
div#menu ul li {
display: block;
height: 69px;
width: 140px;
float: right;
padding: 5px;
}
div#menu ul li a:hover {
display:block;
background:url(menu_red_bg.jpg) repeat-x; height: 69px; color:#FF0;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
div#menu ul li a {
text-decoration: none;
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
div#content { margin-top: 80px; }
I think you are adding the padding to the wrong element.
or you add a "margin" to the <li> or you add a padding to div#menu
I should do this:
A div#menu with the yellow gradient background, with the 5px padding and a margin: 80px 0 0 0;
Inside this div, the <ul><li>...</li></ul>
You don't need to add any padding or margin to the li, just be sure the height of each li is less than the div#menu heigh + padding.
I have a #header div that is 100% width and within that div I have an unordered list. I have applied margin: 0 auto to the unordered list but it won't center it within the header div.
Can anybody please tell me why? I thought that if I define the width of the parent div, then the unordered list should be able to center itself with margin: 0 auto. What am I missing?
Here is my code:
<style>
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
background-color: #333;
min-height: 160px;
font-family:Arial, Helvetica, sans-serif;
}
#sitename {
font-size: 50px;
width: 620px;
margin:0 auto;
padding-top: 35px;
color:#999;
}
#header ul {
float: right;
margin: 0 auto;
}
#header ul li {
float: left;
padding-right: 20px;
list-style-type: none;
font-size: 20px;
}
</style>
</head>
<body>
<div id="header">
<h1 id="sitename">Photography Auction Site</h1>
<ul>
<li>List of Photos</li>
<li>Image Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
You need to define the width of the element you are centering, not the parent element.
#header ul {
margin: 0 auto;
width: 90%;
}
Edit: Ok, I've seen the testpage now, and here is how I think you want it:
#header ul {
list-style:none;
margin:0 auto;
width:90%;
}
/* Remove the float: left; property, it interferes with display: inline and
* causes problems. (float: left; makes the element implicitly a block-level
* element. It is still good to use display: inline on it to overcome a bug
* in IE6 and below that doubles horizontal margins for floated elements)
* The styles below is the full style for the list-items.
*/
#header ul li {
color:#CCCCCC;
display:inline;
font-size:20px;
padding-right:20px;
}
An inline-block covers the whole line (from left to right), so a margin left and/or right won't work here. What you need is a block, a block has borders on the left and the right so can be influenced by margins.
This is how it works for me:
#content {
display: block;
margin: 0 auto;
}
Why not?
#header {
text-align: center;
}
#header ul {
display: inline;
}
I don't know why the first answer is the best one, I tried it and not working in fact, as #kalys.osmonov said, you can give text-align:center to header, but you have to make ul as inline-block rather than inline, and also you have to notice that text-align can be inherited which is not good to some degree, so the better way (not working below IE 9) is using margin and transform. Just remove float right and margin;0 auto from ul, like below:
#header ul {
/* float: right; */
/* margin: 0 auto; */
display: inline-block;
margin-left: 50%; /* From parent width */
transform: translateX(-50%); /* use self width which can be unknown */
-ms-transform: translateX(-50%); /* For IE9 */
}
This way can fix the problem that making dynamic width of ul center if you don't care IE8 etc.
We can set the width for ul tag then it will align center.
#header ul {
display: block;
margin: 0 auto;
width: 420px;
max-width: 100%;
}