I'm working on a news aggregation site's homepage and we're supposed to have a couple of areas that pull in content with the photo in the background and text on top with a gradient between the two. For the most part I have it except even though the z-index is lower, the gradient still appears above the text box. I've already experimented with this on a solid background just to be sure. The code and example are here: http://jsfiddle.net/cx0uvshd/
<style type="text/css">
.feature {
position: relative;
float: left;
width: 465px;
height: 170px;
margin-top: 24px;
margin-right: 30px;
}
.feature.last {
margin-right: 0;
}
.feature-bottom {
background: none;
position: absolute;
bottom: 0;
left: 0;
padding: 0 30px 6px;
width: 100%;
z-index: 200;
line-height: 1;
}
.feature-bottom::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.feature-bottom h3 {
color: #FFF;
font-size: 15px;
font-weight: 400;
margin: 0;
}
.feature-bottom h2 {
color: #FFF;
font-size: 24px;
font-weight: 400;
margin: 0;
}
</style>
Add (position:relative) and (z-index:201) to your feature-bottoms h3 and h2. Find revised code below:
.feature { position: relative; float: left; width: 465px; height: 170px; margin-top: 24px; margin-right: 30px; }
.feature.last { margin-right: 0; }
.feature-bottom {
background: none;
position: absolute;
bottom: 0;
left: 0;
padding: 0 30px 6px;
width: 100%;
z-index: 200;
line-height: 1;
}
.feature-bottom::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.feature-bottom h3 { position:relative; z-index:201; color: #FFF; font-size: 15px; font-weight: 400; margin: 0; }
.feature-bottom h2 { position:relative; z-index:201; color: #FFF; font-size: 24px; font-weight: 400; margin: 0; }
Why not applying gradient to .feature-bottom? Like this:
http://jsfiddle.net/cx0uvshd/2/
In the current version you have the :before element overlaying despite bigger z-index. You need new stacking context
Here's a similar question
A not so clean solution is to add another div with the content below the gradient one. Then give that div a class that is a copy of feature-bottom. Then set color of feature-bottom to transparent to hide the text. Also change the last two selectors to use the copy class. Also duplicate the last two selectors to use for the new class. JsFiddle
CSS:
.feature { position: relative; float: left; width: 465px; height: 170px; margin-top: 24px; margin-right: 30px; }
.feature.last { margin-right: 0; }
/*Copy of feature bottom*/
.feature-bottom2 {
background: none;
position: absolute;
bottom: 0;
left: 0;
padding: 0 30px 6px;
width: 100%;
z-index: 200;
line-height: 1;
}
.feature-bottom {
color: transparent;
background: none;
position: absolute;
bottom: 0;
left: 0;
padding: 0 30px 6px;
width: 100%;
z-index: 200;
line-height: 1;
}
.feature-bottom::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
/* Copy of below*/
.feature-bottom2 h3 { color: #FFF; font-size: 15px; font- weight: 400; margin: 0; }
.feature-bottom2 h2 { color: #FFF; font-size: 24px; font-weight: 400; margin: 0; }
.feature-bottom h3 { font-size: 15px; font-weight: 400; margin: 0; }
.feature-bottom h2 { font-size: 24px; font-weight: 400; margin: 0; }
Related
so far I have this < hr > with the About Me text in a data-content.
I want to add a linear gradient border bottom with three colors under the text "About Me" like it is underlined. I've tried setting the background in the .section-divider:after to a linear gradient and padding and all that but it ends up setting the whole background as a linear gradient.
HTML:
<hr class="section-divider" data-content="ABOUT ME"></hr>
CSS:
.section-divider {
font-family: Lato-Regular;
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: left;
height: 1.5em;
font-size: 20px;
}
.section-divider:before {
content: '';
background: black;
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
.section-divider:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
color: black;
background-color: white;
}
If anyone knows how to do this or a better way to do this hr with text aligned to the left better in general let me know, thank you!
.section-divider {
font-family: Lato-Regular;
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: left;
height: 1.5em;
font-size: 20px;
}
.section-divider:before {
content: '';
background: black;
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
.section-divider:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
color: black;
background-color: white;
}
<hr class="section-divider" data-content="ABOUT ME"></hr>
You can use this code.
.section-divider {
font-family: Lato-Regular;
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: left;
height: 1.5em;
font-size: 20px;
}
.section-divider:before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
margin: 0;
border: 0;
background: #333; /* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#34495e), color-stop(10%,#34495e), color-stop(10%,#207cca), color-stop(24%,#2989d8), color-stop(24%,#34495e), color-stop(42%,#34495e), color-stop(42%,#207cca), color-stop(70%,#207cca), color-stop(70%,#207cca), color-stop(70%,#34495e), color-stop(100%,#34495e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #34495e 0%,#34495e 10%,#207cca 10%,#2989d8 24%,#34495e 24%,#34495e 42%,#207cca 42%,#207cca 70%,#207cca 70%,#34495e 70%,#34495e 100%); /* Chrome10+,Safari5.1+ */
background-image: -moz-linear-gradient(left, #34495e 0%, #34495e 9%, #207cca 10%, #2989d8 24%, #34495e 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #34495e 100%);
background-image: -o-linear-gradient(left, #34495e 0%, #34495e 9%, #207cca 10%, #2989d8 24%, #34495e 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #34495e 100%);
background-image: linear-gradient(left, #34495e 0%, #34495e 9%, #207cca 10%, #2989d8 24%, #34495e 24%, #34495e 42%, #207cca 42%, #207cca 70%, #207cca 70%, #34495e 71%, #34495e 100%); /* Chrome10+,Safari5.1+ */
}
.section-divider:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
color: black;
background-color: white;
}
<hr class="section-divider" data-content="ABOUT ME" />
The orange scroll block goes up and down but I wanted the default position of that orange icon to be more toward the bottom of the screen below the title Odyssey. I am new to css so just needed some help for the same.
/* Home Style */
#tf-home{
background: url(../images/OdysseyTitleImage.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
color: #cfcfcf;
}
#tf-home .overlay{
background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
height: 100%;
background-attachment: fixed;
}
.home-lead{
color: #fff;
padding: 10px 15px;
background-color: rgba(51, 51, 51, 0.9);
font-size: 21px;
}
.content{
position: relative;
padding: 15% 0 0;
}
.content-game{
position: relative;
padding: 5% 0 5%;
}
.color{
color: #ff6300;
}
a.fa.fa-angle-down {
padding: 10px 15px;
color: #fff;
border: 2px solid #b4b4b4;
border-radius: 50%;
font-size: 24px;
margin-top: 100px;
transition: all 0.5s;
}
a.fa.fa-angle-down:hover{
background: #ff6300;
color: #ffffff;
border: 2px solid #ff6300;
}
.home-heading{
font-size: 56px;
font-weight:normal;
}
and this is the html
<div id="tf-home" class="text-center">
<div class="overlay">
<div class="content">
<div>Watch the trailer</div>
</div>
</div>
</div>
I think it could just change the padding-top in this lines:
.content{
position: relative;
padding: 15% 0 0;
}
You can try something like padding: 30% 0 0;
I've achieved nearly the look that a want and I've removed the irrelevant html and I want to improve the look of the button.
I've created a fiddle for the button.
I think that the color is good (the blue) and the goal is to make the text render and a look that is more clear. How can the text look less blurry and with sharper contrast ? The CSS is
html {
height: 100%;
overflow-y: scroll;
}
body {
background-color: rgb(255, 255, 235);
font-family: Verdana, sans-serif;
font-size: 12px;
line-height: 16px;
color: rgb(0, 0, 0);
height: 100%;
text-align: center;
background-position: initial initial;
background-repeat: initial initial;
}
#post {
display: block;
position: absolute;
top: 16px;
right: 0px;
height: 46px;
line-height: 46px;
}
#post a {
color: rgb(255, 255, 255);
text-shadow: rgb(255, 244, 210) 1px 1px 2px;
font-size: 20px;
}
#post a:hover, #post a span:hover {
text-decoration: none;
}
#ad {
display: inline-block;
border: 1px solid rgb(0, 0, 0);
width: 290px;
height: 45px;
font-size: 150%;
text-decoration: none;
text-align: center;
color: rgb(255, 255, 255);
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-image: -webkit-linear-gradient(top, rgb(109, 179, 242) 0%, rgb(84, 163, 238) 50%, rgb(54, 144, 240) 51%, rgb(30, 105, 222) 100%);
background-position: initial initial;
background-repeat: initial initial;
}
#post {
display: inline-block;
border: 1px solid black;
width: 290px;
height: 45px;
font-size: 150%;
text-decoration: none;
text-align: center;
color: white;
font-weight: bold;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db3f2), color-stop(50%, #54a3ee), color-stop(51%, #3690f0), color-stop(100%, #1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0); /* IE6-9 */
}
#post {
display: block;
position: absolute;
top: 16px;
right: 0;
height: 46px;
line-height: 46px;
}
#post span {
display: block;
float: left;
height: 52px;
}
#post a {
color: #FFF;
text-shadow: 1px 1px 2px #FFF4D2;
font-size: 20px;
}
#post a:hover, #post a span:hover {
text-decoration: none;
}
#ad {
display: inline-block;
border: 1px solid #000;
width: 290px;
height: 45px;
font-size: 150%;
text-decoration: none;
text-align: center;
color: #FFF;
font-weight: 700;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #6db3f2;
/* Old browsers */
background: 0;
/* FF3.6+ */
background: 0 color-stop(50%, #54a3ee), color-stop(51%, #3690f0), color-stop(100%, #1e69de));
/* Chrome,Safari4+ */
background: 0;
/* Chrome10+,Safari5.1+ */
background: 0;
/* Opera 11.10+ */
background: 0;
/* IE10+ */
background: linear-gradient(tobottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0);
/* IE6-9 */
}
Change the text shadow on #post a (And remove duplicate definitions) e.g.
#post a {
color: #FFF;
text-shadow: 1px 1px 2px #333;
font-size: 20px;
}
Demo: http://jsfiddle.net/4u4T7/5/
The text shadow makes it appear a little off, have a mock about with the text shadow and if you're not sure then use something like a text shadow generator to see a real time preview but I'd recommend using inspect element since it's better in my opinion.
Background
Colorzilla's gradient genetor is very helpful and is browser friendly. though in IE8 and below wont be that High Definition looking.
http://www.colorzilla.com/gradient-editor/
Text
Use text-shadow: 0 2px 0 #f2f2f2;
text-shadow: a, b, c, [d], e;
where a = distance from the text vertically (e.g. 1px, 2px, 0, -1px)
b = distance from the text horizontally (e.g. 1px, 2px, 0, -1px)
c = the weight of how it spreads out / smudge out / blur out (e.g. 1px, 2px, 0, -1px) in your case use 0 because you dont want it blurry looking
d = optional. great use for inner borders
e = color of the shadow
try to read on more of that to understand the syntax
It's one of those days and I can not figure out why I'm getting a space to the left of each of the LI tags in the following code. If you hover over, the menu items you'll see what I mean.
http://jsfiddle.net/midnitesonnet/C2Dub/
<div id="wrapper">
<div id="menu">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
I can not figure out why I'm getting a space to the left of each of the LI tags
Because you format them with display:inline-block - and have whitespace between the tags. That's basic "HTML behavior", that any whitespace between two inline(-block) elements is condensed to one space character when displayed.
Either float the LI instead, or write them without whitespace between the tags, meaning ...</li><li>...
try this
http://jsfiddle.net/C2Dub/4/
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin-top: 0px;
background-color: #f5f5f5;
}
#wrapper {
background-color: #ffffff;
width: 1000px;
margin: auto;
-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
-moz-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
/*-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;*/
}
#menu {
background: #505050;
background: -moz-linear-gradient(top, #505050 0%, #343434 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(50%,#343434));
background: -webkit-linear-gradient(top, #505050 0%,#343434 50%);
background: -o-linear-gradient(top, #505050 0%,#343434 50%);
background: -ms-linear-gradient(top, #505050 0%,#343434 50%);
background: linear-gradient(to bottom, #505050 0%,#343434 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 );
min-height: 26px;
color: #CCC;
}
#menu ul {
display: block;
height: 39px;
list-style: none outside none;
margin: 0;
padding: 0;
}
#menu li {
margin: 0;
display: inline-block;
height: 39px;
border-right: 1px solid rgb(0, 0, 0);
padding: 0px 20px !important;
line-height: 39px;
list-style: none;
float:left;
}
#menu li a {
display: inline-block;
width: 99%;
color: #CCC;
text-decoration: none;
}
#menu li:hover {
background: #6b6b6b;
background: -moz-linear-gradient(top, #6b6b6b 0%, #4c4c4c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b6b6b), color-stop(100%,#4c4c4c));
background: -webkit-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: -o-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: -ms-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: linear-gradient(to bottom, #6b6b6b 0%,#4c4c4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#4c4c4c',GradientType=0 );
}
#content {
min-height: 600px;
padding: 5px;
}
#footer {
min-height: 50px;
background: #f4f7f5;
background: -moz-linear-gradient(top, #f4f7f5 0%, #edf5f7 37%, #d3e8e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f7f5), color-stop(37%,#edf5f7), color-stop(100%,#d3e8e6));
background: -webkit-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: -o-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: -ms-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: linear-gradient(to bottom, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f7f5', endColorstr='#d3e8e6',GradientType=0 );
border-top: 1px #D2D2D2 solid;
}
This seems to work, I floated your li's, removed some padding and changed the height of the menu: http://jsfiddle.net/C2Dub/5/
#menu {
background: #505050;
background: -moz-linear-gradient(top, #505050 0%, #343434 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(50%,#343434));
background: -webkit-linear-gradient(top, #505050 0%,#343434 50%);
background: -o-linear-gradient(top, #505050 0%,#343434 50%);
background: -ms-linear-gradient(top, #505050 0%,#343434 50%);
background: linear-gradient(to bottom, #505050 0%,#343434 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 );
min-height: 39px;
color: #CCC;
}
#menu ul {
display: block;
padding: 0;
margin: 0;
list-style: none;
}
#menu li {
margin: 0;
float: left;
height: 19px;
border-right: 1px solid rgb(0, 0, 0);
padding: 10px 20px !important;
list-style: none;
}
U have some whitespace characters between your HTML code try to put the li tags on eachtoher:
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
This solved the problem in the Fiddle.
At the moment I have a parent div containing 2 div's, both div's have their own border. What I try to do is to have 1 div in the left top corner and the other div surround it on the right and bottom with margin between them. Just like the image below:
Is this even possible, using css3 and html5?
Edit: Here is the layout of the div's.
<div id="main">
<div id="leftdiv">
Here is some text and an image displayed
</div>
<div id="rightdiv">
<div class="profile"><h4>Some text</h4><img src="...."></div>
<div class="profile"><h4>Some text</h4><img src="...."></div>
<div class="profile"><h4>Some text</h4><img src="...."></div>
<div class="profile"><h4>Some text</h4><img src="...."></div>
<div class="profile"><h4>Some text</h4><img src="...."></div>
..............
</div>
</div>
You could try to fake this effect with pseudo-elements for the top-left container.
.first {
position: relative;
float: left;
height: 30px;
width: 30px;
border: 1px solid black;
margin: 0 5px 5px 0;
}
.first:after {
content: '';
position: absolute;
top: -1px;
right: -5px;
height: 35px;
width: 3px;
background-color: #fff;
border-right: 1px solid black;
}
.first:before {
content: '';
position: absolute;
bottom: -5px;
left: -1px;
height: 3px;
width: 35px;
background-color: #fff;
border-bottom: 1px solid black;
}
.second {
height: 80px;
width: 100px;
border: 1px solid black;
}
See this fiddle:
http://jsfiddle.net/fqsDp/2/
I have the following in jsfiddle.com:
#main {
float: left;
width: 400px;
}
#leftdiv {
float: left;
margin: 0 0.5em 0.5em 0;
background: green;
color: black;
width: 150px;
height: 150px;
background: rgb(255,255,255);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmRiZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(219,219,219,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(219,219,219,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=0 );
border: 1px solid #E2E2E2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#rightdiv {
background: rgb(255,255,255);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmRiZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(219,219,219,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(219,219,219,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=0 );
border: 1px solid #E2E2E2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
http://jsfiddle.net/5unJw/