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.
Related
Images I place are blocking me from clicking links, and I think it is because the image is possibly larger than I thought (though I think I cropped it and I am not sure if it is something else.
Here is a picture (I moved he image as far over as I could in order to avoid this issue, but I would like to move the image closer if this problem can be fixed and I feel it will be helpful to know in the future):
Note: If I move it right it does not push the content or anything, it just makes the links in the nav bar unclickable (if that was not clear).
Here is the HTML:
<nav>
<ul>
<li class="current">Home</li>
<li>Jehovah's Witness</li>
<li>Wood Block Print</li>
<li>Jazz</li>
<li>Being Ethical and Socially Responsible </li>
</ul>
</nav>
<div class="container">
<header>
<h1>
<img src="images/banner.png" alt="banner">
Designer Websites
</h1>
</header>
and my CSS:
nav ul
{
list-style-type: none;
text-align: center;
}
nav ul li
{
padding: 5px;
display: inline-block;
border: solid 1px black;
color: black;
background-color: tan;
}
.current
{
background-color: yellow;
}
body
{
background-color: tan;
font-family: Arial, "Times New Roman", "Sans Serif", Georgia;
}
.container
{
width: 80%;
max-width: 960px;
margin:0px auto;
}
h1 img
{
height: 40%;
position:absolute;
left:-15px;
top: -30px;
}
New picture with the absolute position removed:
I think your "absolute" positioned banner image was floating over navbar. That's the reason it was not clickable.
Remove this code (You may keep the "height" to set fixed height for your image)
h1 img {
height: 40%;
position: absolute;
left: -15px;
top: -30px;
}
Now image and heading will be left aligned. You can simply align them by adding text-align:center in .container. Or you can add this code:
header {
text-align: center;
}
Try adding this in order to put anchor "above" the img
h1 img {
z-index: 1;
}
h1 a {
position: relative;
z-index: 2;
}
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'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..)
I would need some help me! I work on something and I can't get it to work. :) I want the text align to the center. Here is the picture: http://imageshack.us/photo/my-images/266/sn54.jpg/
Can anyone give me some tip please? Thanks.
Here is the code what I use:
HTML:
<div id="container">
<div id="header">
<ul class="nav">
<li>Home</li>
<li>Protfolio</li>
<li>About Me</li>
<li>Contact Me</li>
</ul>
</div><!-- header end -->
</div><!-- container end -->
CSS:
#header{
position: relative;
margin: 60px 0 0 0;
width: 100%;
height: 80px;}
.nav{
background: url(../images/navbar.png) no-repeat 0 0;
width:100%;
height:80px;
text-align:center;
display:block;}
.nav li{
float:left;
list-style: none;
margin: 10px;}
.nav li a{
width:150px;
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1.6em;
margin: 0 .5em;}
.nav li a:hover {
margin-top: 2px;
background-color: #d0d5d6;}
An easy way of doing this is to add padding to your nav element on the right and left equal to with width of the ribbon sections.
.nav {
padding:0 XXpx; /* XXpx = width of the ribbon ends */
}
.nav li {
width:25%;
text-align:center;
margin:0;
}
As a basis, this should fix your problem. You may have to play around with the exact code to fit your needs based on margins, etc.
Alternatively, check out this tutorial on how to create this type of ribbon with just CSS and not rely on an image at all: http://css-tricks.com/snippets/css/ribbon/
Without knowing the dimensions of the background image its hard to be specific, but try putting the background on the header element rather than the nav. You can then set the width of the nav UL to the width of the inner part of the ribbon image and set a margin 0 auto on it to center it horizontally
I would wrap the ul with a div an this div has the background image. Than you can adjust the ul.
I'm trying to make a banner on my webpage, the part on the top that is 700px wide and 80px high.
Code looks like:
<div class="container-narrow" style="heigth: 80px;">
<img src="#" width="52" height="52" alt="my logo" />
<ul>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
Css:
.container-narrow
{
margin: 0 auto;
max-width: 700px;
background: yellow;
}
ul
{
float: right;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a
{
float: right;
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
What I want is the image and the horizontal menu to be vertically aligned in the center of the 80px. the logo to the left and the menu to the right.
I've tried to set the height and then padd/margin my way to get the job done but it feels rubbish...
Problem:
ul has a width:100%; if you give it a black border you will see that its occupying the width of the page, means it has no space to reside on the left of the logo inside the yellow header.
Removing this width will give the following result: http://jsfiddle.net/YBVe6/
Now since the header has a fixed max width, which is 700px, there's many ways to center the logo and the menu.
Fastest way I can think of is the following:
Give ul a display: inline-block;, (remove float: right;) then give the header a text-align: center;, here's the result : http://jsfiddle.net/YBVe6/1/
And if you want the menu to be displayed in the upper part, just add vertical-align: top;.
To start of, it's a good practice if you have an external CSS, don't put additional CSS in your HTML blocks:
<div class="container-narrow">
and put the height style in your css sheet, as you have a class setup for your div there anyway.
Second, making typo's is a pain if you want your CSS to work properly, so instead of heigth you should use height, will make you div actually 80px high.
Third of all: margins are there the position elements. Use them!
.container-narrow
{
height: 80px;
margin: 0 auto;
max-width: 700px;
background: yellow;
}
img
{
margin-top:14px;
}
ul
{
float: right;
padding: 0;
margin: 0;
list-style-type: none;
margin-top:25px;
}
a
{
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
Edit
This is mostly applicable for vertical alignment. If you want to auto-center horizontally, you can make use of the margin:auto concept. This is possible because a page can't extend beyond the browser width (browser height can extend as you have scrolling available as default behavior).