I want to build a menu where every single <li> hovers out. But weirdly the whole menu always hovers out. Here is the fiddle code.
I have the following css code:
body {
background-color: #eee;
margin: 0;
padding: 0;
overflow: hidden;
}
.tabs {
width: 80%;
position: fixed;
bottom: -20px;
left: 100px;
}
.tabs ul {
display:block;
}
.tabs li {
width: 60px;
height: 80px;
margin-bottom: -20px;
padding: 10px;
float: left;
list-style: none;
display: inline;
background-color: #ccc;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
font-family: verdana;
text-align: center;
}
.tabs li:hover {
margin-bottom: 20px;
}
Reason is that when you give margin to it then it's push whole ul. It's better give bottom instead of margin. write like this:
.tabs li:hover {
bottom: 20px;
}
Check this http://jsfiddle.net/X96KE/17/
using jQuery will solve your problem if you are familiar with it try this
jQuery("li").mouseover(function() {
jQuery(this).css("margin-bottom","20px");
}).mouseout(function(){
jQuery(this).css("margin-bottom","0px");
});
It's because you haven't specified what to do with the margin-top. Here's an updated example: http://jsfiddle.net/X96KE/18/
.tabs li:hover {
margin-bottom: -40px;
margin-top: -40px;
}
Related
I've created a nav menu that is unnecessarily adding extra space to the right side of it. When the page is made smaller it adds a scroll bar to the bottom of the page which makes the page uncentered. After some digging in Dreamweaver it looks like the UL element's surrounding box is not centered with the actual navigation menu. It juts off to the right and seems to be causing the problem. How to I get this centered with the nav menu?
I've also included a fiddle below.
nav {
float: left;
width: 100%;
}
ul {
float: left;
list-style: none;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
}
.main-nav li a:hover {
border: solid 1px black;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
border: solid 1px transparent;
padding: 5px 10px;
}
<nav class="nav">
<ul class="main-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>MUSIC</li>
<li>STORE</li>
<li>LIVE</li>
<li>CONTACT</li>
</ul>
<nav>
View on JSFiddle
Simply add in your nav the overflow property:
nav {
float: left;
width: 100%;
overflow-x: hidden;
}
It seems like there's too much padding in between the menu items. kick that down in the css block:
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px; //first parameter is top/bottom, the second parameter is left/right. kick it down to something like 5px 10px;
color: white;
line-height: 1.3em;
}
Take out the right:50%; and for margin, use "margin:0 auto;"
the auto will auto-center the nav
You shouldn't use floats or lefts to align your navbar. Instead try doing this: It makes the navbar centered and no scroll is appearing for small devices. Update your ul and li class to this:
ul {
list-style: none;
padding: 0;
position: relative;
text-align: center;
}
ul li {
display: inline-block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
Furthermore, if you want your navbar to appear in a list form for small devices, simply add this media query for your preferred range:
#media (max-width: 480px) {
ul li {
display: block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
}
I want to do items style like here
and I'm doing it with UL. Here is the code what I have http://jsfiddle.net/WVLR9/1/
ul.gallery_items {
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li {
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-left: 19px;
}
ul.gallery_items li:first-child {
margin-top: 25px;
margin-left: 0px;
}
but I have no idea why the 4th item have bigger margin-left option... it should be in the same place like 1st item but in the second line. Can anyone help me?
http://jsfiddle.net/WVLR9/2/
You put margin-left: 19px on the li's rather than margin-right.
Margin left was causing the 4th row to be a certain margin away from the left border
ul.gallery_items{
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 19px;
}
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
You are explicitly giving the first item a different left margin:
ul.gallery_items li:first-child{
margin-left: 0px;
}
ul.gallery_items li{
margin-left: 19px;
}
4th item has the same margin as other items, you just removed margin from the first item:
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
and it looks like something is wrong with 4th element;
You could use margin-right instead of margin-left
You could wrap each row with additional <div class="row">
You could remove margin-left: 0 form the first element, and give margin-left: -19px to the parent element
how about this :)
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 19px; /* maybe you will need to adjust your margin on the ul element. */
}
ul.gallery_items{
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 10px;}
this should do it.
You've applied a
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
thats why first item didnt have left margin
Ok, I give up - I can't work it out; the wrapper seems to go from the top to the bottom while I want it to leave a gap at the top and bottom so the background appears through. I can't seem to work it out. I am very novice to this. Any help & ideas very welcome.
Code
body {
background: #ffffff url(bgfin.jpg) repeat;
font-family: Tahoma,arial, sans-serif;
font-size:12px;
color:#666666;
height: 100%;
margin:0;
padding:0;
}
#wrapper {
background: url(body-line.png) center repeat-y;
padding-top: 65px;
padding-bottom: 65px;
}
#wrappertop{
background: url(header.png) top center no-repeat;
}
#wrappertbtm{
background: url(footer-new.png) bottom center no-repeat;
padding-bottom: 65px;
}
#container{
width: 959px;
margin: 0 auto;
}
.title{
width: 959px;
height: 56px;
padding: 15px 0px 10px 0px;
font-size: 30px;
color: #bd7821;
}
#navigation{
position: relative;
width: 959px;
height: 40px;
z-index: 2;
}
#navigation li{
float: left;
z-index: 2;
padding: 0px 34px 0px 0px;
}
#navigation li a{
display: inline-block;
position: relative;
outline: none;
height: 28px;
color: #e3e3e3;
z-index: 2;
font-size: 12px;
padding: 15px 0px 0px 0px;
text-decoration: none;
}
#navigation li a:hover, #navigation li#active a{
color: #bd7821;
text-decoration: none;
}
#header{
position: relative;
width: 959px;
height: 196px;
z-index: 1;
margin: 20px 0px 0px 0px;
}
Try:
body { padding:20px 0; }
Or:
#wrapper { margin:20px 0; }
That is shorthand for:
#wrapper {
margin-top:20px;
margin-right:0;
margin-bottom:20px;
margin-left:0;
}
Remember:
Padding is rendered inside of the element
Margin is on the outside
This might help as a reminder:
How to remember in CSS that margin is outside the border, and padding inside
I' cant for the life of me figure out why the div "book_button" won't display at the bottom of the page, above the footer. I have a main wrapper div, and then there is a content div. I've placed the book_button in a relative position outside the content div. In the dream weaver design window it's showing it where I want it to be. When I view it in a browser it diplays like so
http://kerrydean.ca/GreyRiver/fly_fishing.html
here is the css
#Wrapper {
margin-top:0;
margin-right: auto;
margin-left: auto;
position: relative;
background-color: #ebebeb;
padding: 0px;
width: 100%;
top: 75px;
}
#Header {
background-color: #b2b85c;
height: 75px;
width: 100%;
position: fixed;
top: 0px;
overflow: hidden;
z-index: 999;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFF;
}
#Content {
width: 900px;
position: relative;
margin-right: auto;
margin-left: auto;
}
#Left_Side {
padding: 10px;
width: 485px;
clear: left;
float: left;
}
#Right_Side {
width: 340px;
position: relative;
display: inline;
float: right;
margin-left: 20px;
margin-bottom: 10px;
padding-left: 35px;
height: 100%;
}
#Footer {
background-color: #BCC271;
height: 15px;
width: 100%;
text-align: center;
padding-top: 15px;
padding-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
float: left;
position: relative;
}
/* Navigation*/
.nav-wrap {
position: relative;
margin-right: auto;
margin-left: auto;
width: 900px;
padding-left: 15px;
padding-top: 31px;
}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
padding-top: 3px;
padding-right: 20px;
padding-bottom: 8px;
padding-left: 20px;
}
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #b2b85c;
text-decoration: none;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #FFF;
}
#navlist a:hover
{
color: #fff;
background-color: #b2b85c;
text-decoration: none;
background-image: url(../GreyRiver/Images/pointer.jpg);
background-repeat: no-repeat;
background-position: 50% bottom;
}
.border-none{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
/*End of Navigation*/
#header_img{
height: 250px;
width: 900px;
position: relative;
background-image: url(../GreyRiver/Images/Fly_fishing_header.jpg);
margin-top: 10px;
margin-bottom: 25px;
}
#book_button{
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: center;
}
I figured it out.
I put the book_button div right before the footer. I made the width 100%, position:relative and add a float:left
thanks anyway!
1) Make #Wrapper position:relative
2) make #book_button position:absolute, set bottom:40px;right:200px;
This probably isn't best practice, but you could use the top style property to push the button down where you want it. It looks like the content of your page is static, meaning that button isn't going to need to position itself dynamically each time the page loads. So, a hard coded value to position it may work for you.
I took your current view source and just changed the #book_button back to relative and it displays in between the footer and the content. Change that back to relative as absolute will not work.
I did this before but I can't remember how to do it again.
Image of what i'm trying to get:
and what I have so far
In between each link,, theres two borders. yes I know how to make the effect, put two borders together. But the problem is I can't do it!
At first I tried Jefferey ways Technic.
nav ul li:before { border-left: 1px solid red; content: ''; margin: 0 -30px; position: absolute; height: 20px; }
nav ul li:after { border-right: 1px solid white; content: ''; margin: 0 39px; position: absolute; height: 20px; }
It worked, except the borders from the left and right end of the nav is sticking out. I tried :first-of-type and :last-of-type to try to remove the borders at the end, but they didn't go away.
Then, I tried just using both :first-of-type and :last-of-type to create the borders,but again. it didn't work. So I don't really know what to do to create the effect! I wish there was a way to remove the front and end borders with Jefferey Ways code but I can't. Can anybody help?
Heres the whole css of the nav.
nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto; padding: 11px 29px; width: 670px; }
nav ul {}
nav ul li { display: inline; padding: 32px; margin: 0 auto; }
nav ul li:before { border-right: 1px solid red; }
nav ul li:odd { border-right: 1px solid white; }
nav ul li a { color: #626262; height: 20px; }
#nav {
background: #282828 url(../images/nav-bg.png) repeat-x;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
margin: 24px auto;
padding: 11px 29px;
width: 670px; }
#nav ul { list-style: none; padding: 0; margin: 0;}
#nav ul li {
display: inline;
padding: 32px;
margin: 0 auto;
border-left: 1px solid #LIGHTERCOLOR;
border-right: 1px solid #DARKERCOLOR;
}
#nav ul li:first-child { border-left: 0; }
#nav ul li a { color: #626262; height: 20px; }
But I would suggest you cut out the separator as an image and put it on li as
background: transparent url(border-image.png) left center no-repeat;
and on the li:first-child have
background: none;