Related
I have a problem with unwanted gap between ul and div. Maybe you know solution?
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: 0;
}
#tabs li {
display: inline-block;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
font-size: 16px;
}
#content {
background: #fff;
padding: 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
<ul id="tabs">
<li>First</li>
<li>Second</li>
<li>Random</li>
</ul>
<div id="content">
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
</div>
This problem occurred after inline-block adding. I searched for solutions, but what I have found that was for horizontal gaps (I have fixed it by adding font-size: 0; in parent tab). Maybe there is some solution for vertical gaps?
in #content add float:left; margin-top:0;
Remove the font-size:0
and edit margin to this
#tabs li {
margin: 0 0;
}
you gave it 0.5em which is causing the space between them
Hope it helps
You added padding to the content div which caused this effect
Here's a fiddle where I changed the padding to 0 2em instead
https://jsfiddle.net/6r0x3n0e/
#content {
background: #fff;
padding: 0 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
Hope this helps
Set padding to the following: padding:0em 2em 2em 2em;
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: 0;
}
#tabs li {
display: inline-block;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
font-size: 16px;
}
#content {
background: #fff;
padding: 0em 2em 2em 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
<ul id="tabs">
<li>First</li>
<li>Second</li>
<li>Random</li>
</ul>
<div id="content">
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
</div>
I have div that have box-shadow on it and have also div:hover box-shadow.
When i check results at JSfiddle its all fine.
But when i check the results at my site i get the box-shadow right side removed:
Here is the Live code: JSfiddle
And here is the Code:
.nitz {
font-family: sans-serif;
font-size: 0;
width: 300px;
height: 76px;
direction: rtl;
background-color: #e4e5e8;
border-radius: 5px;
display: block;
box-shadow: inset rgba(255, 255, 255, 0.75) 0px 0px 0px 1000px,
inset rgba(255, 255, 255, 0.6) 0px 1px 0px,
inset rgba(255, 255, 255, 0.4) 0px 0px 0px 1px,
rgba(0, 0, 0, 0.2) 0px 1px 3px;
}
.nitz:hover {
-webkit-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
background-color: #f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {
font-weight: bold;
text-align: right;
font-size: 14px;
padding-bottom: 3px;
}
.boxtitle2 {
text-align: right;
font-size: 14px;
}
.Cellbox2 {
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
vertical-align: top;
margin-top: 20px;
}
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
The over Divs are:
ipsWidget ipsWidget_vertical ipsBox
ipsWidget ipsWidget_vertical ipsBox
and
ipsList_reset
above all that divs.
The css of that divs are:
/* Blocks - styles for various widgets */
.ipsWidget {
position: relative;
padding: 0;
background: #fff;
}
.ipsWidget.ipsWidget_vertical {
margin-top: 15px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_title {
padding: 10px;
margin: 0;
font-size: 14px;
font-weight: 400;
position: relative;
color: #fff;
background: {theme="widget_title_bar"};
border-radius: 2px 2px 0px 0px;
}
.ipsWidget_inner{
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal {
padding: 0 0 10px 0;
}
.ipsWidget.ipsWidget_horizontal:not( .ipsWidgetHide ) + .ipsWidget {
margin-top: 10px;
}
.ipsWidget.ipsWidget_horizontal .ipsWidget_title {
font-weight: 400;
margin-bottom: 10px;
background: #f5f5f5;
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs {
margin: -5px 0 5px 0;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs_panel {
background: #fff;
margin: 0;
}
.ipsWidget_columns > [class*="ipsGrid"] {
margin-bottom: 0;
border-bottom: 0;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"] {
border-right: 1px solid rgba(0,0,0,0.1);
padding-right: 10px;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"] {
border-left: 1px solid rgba(0,0,0,0.1);
padding-left: 10px;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-right: 0;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-left: 0;
}
.ipsWidget_horizontal .ipsWidget_statsCount {
font-size: 22px;
line-height: 32px !important;
font-weight: 300;
}
.ipsWidget_horizontal .ipsWidget_stats {
margin-top: 15px;
}
.ipsWidget .ipsTabs_small {
padding: 0;
background: transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ) {
color: rgba(50,50,50,0.6);
border-bottom: 1px solid transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_activeItem {
border-bottom: 1px solid rgba(0,0,0,0.25);
}
.ipsWidget .ipsDataItem_title {
font-size: 13px;
}
.ipsWidget.ipsWidget_primary {
background: #262e33;
}
.ipsWidget.ipsWidget_primary h3 {
color: #fff;
}
html[dir="ltr"] .ipsWidget_latestItem {
margin-left: 85px;
}
html[dir="rtl"] .ipsWidget_latestItem {
margin-right: 85px;
}
.ipsWidgetBlank {
margin-top: 16px;
padding-top: 30px;
}
I'm pretty sure the problem does not come from the code you linked.
Rather i guess that your button is on the border of a overflow : hidden div and the shadow falls outshide that div.
Or there is another invisible div beside the button hidding the shadow.
Look at that snippet and notice why part of the shadow doesn't show : The button is on the top right corner of the parent (".test") div.
I cannot check your code but i guess the problem comes from a parent div (maybe because you haven't fixed a width and it is stopping right after the button)
.test {
display: block
width: 400px;
height: 200px;
overflow: hidden;
}
.nitz {
font-family:sans-serif;
font-size: 0;
float: right;
width:300px;
height:76px;
direction:rtl; background-color:#e4e5e8;border-radius: 5px;
display:block;
box-shadow: inset rgba(255,255,255,0.75) 0px 0px 0px 1000px,
inset rgba(255,255,255,0.6) 0px 1px 0px,
inset rgba(255,255,255,0.4) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 1px 3px;
}
.nitz:hover {-webkit-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
background-color:#f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {font-weight: bold;text-align:right; font-size:14px; padding-bottom:3px;}
.boxtitle2 {text-align:right; font-size:14px;}
.Cellbox1
{width:50px; height:50px; display:inline-block; margin-bottom:15px; margin-right:15px; margin-top:15px; }
.Cellbox2
{display:inline-block; margin-right:15px; margin-bottom:15px; vertical-align:top; margin-top:20px;}
<div class="test">
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
</div>
You can add some padding to the parent "anchor" tag with some classname
.some-class-name {
padding: 0 15px;
display: inline-block;
box-sizing: border-box;
}
#font-face {
font-family: Droid Sans;
src: url('../fonts/DroidSans-webfont.eot');
src: local("Droid Sans"), url('../fonts/DroidSans-webfont.woff');
}
#font-face {
font-family: Jenna Sue;
src: local("Jenna Sue"), url('JennaSue-webfont.ttf');
}
#font-face {
font-family: News Cycle;
src: local("News Cycle"), url('NewsCycle-Regular.ttf');
}
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
body {
font: normal .85em 'Droid Sans', arial, sans-serif;
background: #434434;
color: #E6EEB0;
padding-bottom: 40px;
}
p {
padding: 0 0 20px 0;
line-height: 1.5em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
font: normal 400% 'Jenna Sue', arial, sans-serif;
color: #222;
margin: 0 0 0px 0;
padding: 20px 0 5px 0;
}
h1 {
color: #C0CB77;
}
h2 {
font: normal 220% 'Jenna Sue', arial, sans-serif;
color: #FFF;
margin: 0;
padding: 0 0 8px 0;
}
h3 {
font: normal 125% 'trebuchet ms', arial, sans-serif;
}
h4, h5, h6 {
margin: 0;
padding: 0 0 5px 0;
font: normal 110% arial, sans-serif;
color: #999;
line-height: 1.5em;
}
h5, h6 {
font: italic 95% arial, sans-serif;
color: #888;
padding-bottom: 15px;
}
h6 {
color: #362C20;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
list-style-type: circle;
margin: 0 0 0 0;
padding: 0 0 4px 5px;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
#main, header, #logo, nav, #site_content, footer {
margin-left: auto;
margin-right: auto;
}
#main {
width: 950px;
margin: 20px auto 0 auto;
}
header {
width: 950px;
height: 105px;
}
#logo {
width: 220px;
float: left;
height: 100px;
background: transparent;
padding: 0 0 10px 10px;
}
#logo h1 {
font: normal 400% 'Jenna Sue', arial, sans-serif;
padding: 40px 0 0 17px;
color: #FFF;
}
#logo h1 a {
color: #FFF;
text-decoration: none;
}
#logo h1 a:hover {
color: #FFF;
text-decoration: none;
}
nav {
height: 26px;
width: 720px;
margin: 1px auto 0 auto;
float: right;
padding: 35px 0 0 0;
}
#site_content {
width: 950px;
overflow: hidden;
margin: 4px auto 0 auto;
padding: 0;
background: #565747;
border-top: 0;
border-bottom: 0;
}
#sidebar_container {
float: right;
width: 450px;
padding: 0;
height: 450px;
}
#content {
text-align: justify;
width: 444px;
padding: 0 0 5px 30px;
margin: 0;
float: left;
}
#content ul {
margin: 2px 0 5px 0px;
}
#content ul li {
list-style-type: none;
background: transparent url(../images/bullet.png) no-repeat left center;
margin: 0 0 0 0;
padding: 2px 0 2px 28px;
line-height: 1.5em;
}
#blog_container h4 {
font: normal 250% 'Jenna Sue', arial, sans-serif;
margin: 0 0 15px 0;
padding: 5px 0;}
#blog_container h4.select {
width: 475px;}
.blog {
background: url(../images/calendar.png) no-repeat;
width: 54px;
height: 46px;
float: left;
margin: 0 15px 0 0;
}
.blog h2 {
font: normal 90% arial, sans-serif;
text-shadow: none;
text-align: center;
margin: 0;
padding: 4px 0 0 0;
color: #FFF;
}
.blog h3 {
font: 130% arial, sans-serif;
text-shadow: none;
margin: -19px 0 0 0;
text-align: center;
color: #222;
}
footer {
width: 950px;
font: 109% 'Droid Sans', arial, sans-serif;
height: 75px;
padding: 17px 0 5px 0;
text-align: center;
background: #6F7640;
}
footer p {
padding: 0 0 10px 0;
}
footer a, footer a:hover {
color: #E6EEB0;
text-decoration: none;
}
footer a:hover {
color: #E6EEB0;
text-decoration: underline;
}
/* form styling */
.form_settings {
margin: 0;
}
.form_settings p {
padding: 0 0 10px 0;
}
.form_settings span {
padding: 5px 0;
float: left;
width: 170px;
text-align: left;
}
.form_settings input, .form_settings textarea {
padding: 4px;
width: 252px;
font: 100% arial, sans-serif;
border: 0;
border-bottom: 1px solid #C0CB77;
background: transparent;
color: #E6EEB0;
}
.form_settings .submit {
font: 140% 'News Cycle', arial, sans-serif;
border: 0;
width: 100px;
margin: 0 0 0 162px;
height: 30px;
padding: 0 0 6px 0;
cursor: pointer;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
background: #6F7640;
color: #FFF;
line-height: 15px;
}
.form_settings textarea, .form_settings select {
font: 100% 'Droid Sans', arial, sans-serif;
border: 1px solid #C0CB77;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
width: 250px;
overflow: auto;
}
.form_settings select {
width: 304px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
ul.images {
width:450px;
height:450px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
}
ul.images li {
position:absolute;
margin:0;
padding:0;
left:0;
right:0;
list-style:none;
}
ul.images li.show {
z-index:500;
}
ul img {
border:none;
}
/* from here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers */
.lavaLampWithImage {
position: relative;
height: 25px;
padding: 10px 5px 15px 0;
margin: 10px 0 0 0;
overflow: hidden;
float: right;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: #63604F;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
height: 28px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li a {
font: 109% 'Droid Sans', arial, sans-serif;
text-decoration: none;
color: #FFF;
outline: none;
text-align: center;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
padding: 6px 9px 0 9px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 466px;
}
.curlycontainer .innerdiv{
background: transparent url(images/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
a.css3dbutton {
background: darkred; /* background color of button */
color: white;
text-decoration: none;
font: bold 28px Arial; /* font size and style */
position: relative;
top: 0; /* anchor main button's position */
bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
margin-bottom: 12px;
-moz-box-shadow: 0 -15px 5px darkred inset;
-webkit-box-shadow: 0 -15px 5px darkred inset;
box-shadow: 0 -15px 5px darkred inset;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.css3dbutton, a.css3dbutton:after {
display: inline-block;
padding: 10px 15px; /* vertical and horizontal padding of button */
-moz-border-radius: 8px/15px;
-webkit-border-radius: 8px/15px;
border-radius: 8px/15px;
outline: none;
}
a.css3dbutton:after { /* pseudo element to construct 3D side of button */
content: "";
position: absolute;
padding: 0;
z-index: -1;
bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
left: 0;
width: 100%;
height: 100%;
background: #6e0e0c; /* background color of 3D effect */
-moz-box-shadow: 1px 0 3px gray;
-webkit-box-shadow: 1px 0 3px gray;
box-shadow: 1px 0 3px gray;
}
a.css3dbutton:hover {
-moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
-webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
background: #bc3835; /* background color when mouse rolls over button */
}
a.css3dbutton:active {
top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
bottom: 0;
-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
a.button{
background: #ECECEC;
border-radius: 15px;
padding: 10px 20px;
display: block;
font-family: arial;
font-weight: bold;
color:#7f7f7f;
text-decoration: none;
text-shadow:0px 1px 0px #fff;
border:1px solid #a7a7a7;
width: 145px;
margin:0px auto;
margin-top:100px;
box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
-webkit-transition:box-shadow 0.5s;
}
a.button i{
float: right;
margin-top: 2px;
}
a.button:hover{
box-shadow: 0px 2px 1px white inset, 0px -2px 20px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
}
a.button:active{
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
background:-webkit-linear-gradient(top, #d1d1d1 0%,#ECECEC 100%);
}
hr{
border: 0; border-bottom: 1px dashed #ccc; background: #999;
}
.styled-button-8 {
background: #25A6E1;
background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:8px 13px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9
}
.display_img{
float: right;
}
This is my code where I print content.
<?php
echo"<div id=\"content\">";
echo"</div>";
?>
I'd like to add profile picture in a empty place (as seen in the picture) ,but how to move it to the right?
Here is a css of div content.
EDIT:
I want to move picture to right side (Shown in a picture where to)
Move right side
Give your image a class or id, and float it to right. This way it should move to the right of the div in which it is included. For example, give it a class named display_img and float it to right, like this:
.display_img{
float: right;
}
Another trick can be the following:
.display_img{
margin-right: 0;
/*you can keep the float here if you want, but it will not affect the results adversely if removed*/
}
Use float:right; for your profile picture.And float:left; for the rest of the content in your div.Instead of using float:left; as an overall for all your content in the div.
Not sure, If I get your point correctly, but you can try something like this:
<span>Skelbimas</span>
<table border="1">
<tr>
<td>Miestas</td>
<td rowspan="5">Insert Picture</td>
</tr>
<tr>
<td>Vardas</td>
</tr>
<tr>
<td>Telefono</td>
</tr>
<tr>
<td>El Pastas</td>
</tr>
<tr>
<td>Arnzius </td>
</tr>
</table>
I am using this tutorial for a css menu online and it works perfectly, but it does not stretch the full width of the page: http://www.red-team-design.com/css3-animated-dropdown-menu
Here is what it looks like:
I tried changing the width: 100% and that helped extend it but not full width. I even did what this user did Here but that did not work either. This needs to work on IE 8 as well as firefox so that is bringing up more issues there.
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
Any help is appreciated!
The space is because of the default margin and padding for BODY Tag.
From the comment,
Add below css
body { margin: 0; padding: 0; }
And also remove margin and set width to 100% in the define style #menu
margin: 60px auto;
width: 960px;
set this in your style sheet
html,body{
width:100%;
height:100%;
margin:0
padding:0;
}
Why you need this ?? because when you set the container dimension in percentage, it always looks for its parents dimension to calculate its percentage value.....
if you set #cont width in percentage...then #cont width is dependent on body width,SO, for markup
<html>
<head></head>
<body>
<div id="cont">
</div>
</body>
</html>
with
#cont
{
width:80%
}
then it would mean that
#cont = 80% of body
so #cont would fail, if body has no width set.
It is because the body has a margin by default.
Remove the default by adding body { margin: 0px; } to your CSS (and the #menu { width: 100%; }) of course.
You can use this:
Body,ul,li{margin:0;padding:0}
#cont{
width:100%;
float:right;
height:120px;
}
I have problems with the header buttons (on hover) and the body width that I want to make 100%.
Please help.
thank you.
here is the css, you can see the html in jsfiddle.
body {
background-color:rgba(0, 0, 0, 0.1);
font-family: "Alef Hebrew",
“Helvetica Neue”,
Helvetica,
Arial,
sans-serif;
}
#header {
left: 0;
top: 0px;
width: 100%;
height: 64px;
background: #007ac1;
position: fixed;
}
#header ul {
margin-left: 200px !important;
}
#x {
border-left: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0px -1px 0px 1px rgba(255, 255, 255, 0.11);
text-decoration: underline;
}
.btn {
margin-left: -2px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.11);
color: white;
display: inline;
text-decoration: none;
padding: 25px;
transition: 0.5s;
font-weight:bold;
}
.btn:hover {
background: rgba(255,255,255,1);
color: #000;
}
#body {
padding: 100px;
width: 100%;
background: #fff;
float:left;
}
http://jsfiddle.net/EuR8s/
DEMO
CSS:
#header ul {
margin-left: 100px !important;
}
changed the margin-left: to 100px