Is it possible to create this green line?
I tried to create this div but endings are too sharp
width: 100%;
height: 3px;
background: linear-gradient(#01f4e4, #01f4e4, transparent);
border-radius: 50%;
I am using image on website, but i am curious, if it can be done with css.
You can use a 3 way gradient like this. Check out this for an easy way to create them.
body {
background:black;
padding-top:100px;
}
div {
margin:0 auto;
display:block;
width:300px;
height:3px;
background: -moz-linear-gradient(left, rgba(30,87,153,0) 0%, rgba(34,183,67,0.98) 50%, rgba(38,184,70,1) 51%, rgba(225,228,226,0) 99%, rgba(229,229,229,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(30,87,153,0) 0%,rgba(34,183,67,0.98) 50%,rgba(38,184,70,1) 51%,rgba(225,228,226,0) 99%,rgba(229,229,229,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(30,87,153,0) 0%,rgba(34,183,67,0.98) 50%,rgba(38,184,70,1) 51%,rgba(225,228,226,0) 99%,rgba(229,229,229,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
<div></div>
Use full rgba colors and define the points where the gradient occurs
body {
background: black;
}
.line {
width: 100%;
height: 1px;
background: linear-gradient(to right, rgba(1, 254, 228, 0) 0%, rgba(1, 254, 228, 1) 20%, rgba(1, 254, 228, 1) 80%, rgba(1, 254, 228, 0) 100%);
}
<div class="line"></div>
hr.style-two {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.75), rgba(255, 0, 0, 0));
}
hr {
display: block;
unicode-bidi: isolate;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
overflow: hidden;
border-style: inset;
border-width: 1px;
margin: 50px 0 5px 0;
}
<hr class="style-two">
you can get more idea from
here http://css-tricks.com/examples/hrs/
Related
I added border-image-slice but the border still shows only the corners. It's also displaying outside of the striped border when I want it to lay directly over top of it. What am I doing wrong?
body {
background-color: BLACK;
background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
}
#header {
padding: 10px;
align-items: center;
background: WHITE;
display: inline-flex;
align-items: center;
justify-content: center;
display: flex;
box-sizing: border-box;
width: 100%;
min-width: 100%;
}
.border {
position: relative;
z-index: -1;
border: 10px solid #6b36ba;
border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
}
.bordershine {
display: flex;
margin: 20px;
border-width: 10px;
border-style: solid;
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
0 2px 6px rgba(0, 0, 0, 0.5),
0 10px rgba(0, 0, 0, 0.05) inset;
border-image-slice: 10;
border-image: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
<div class="bordershine">
<div id="header" class="border">
<img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'>
Hard Candy by IshikaruTanaka
</div>
</div>
The slice need to be after the border-image
body {
background-color: BLACK;
background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
}
#header {
padding: 10px;
align-items: center;
background: WHITE;
display: inline-flex;
align-items: center;
justify-content: center;
display: flex;
box-sizing: border-box;
width: 100%;
min-width: 100%;
}
.border {
position: relative;
z-index: -1;
border: 10px solid #6b36ba;
border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
}
.bordershine {
display: flex;
margin: 20px;
border-width: 10px;
border-style: solid;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset;
border-image: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
border-image-slice: 10;
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
<div class="bordershine">
<div id="header" class="border">
<img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'> Hard Candy by IshikaruTanaka
</div>
</div>
Or use border-image-source
body {
background-color: BLACK;
background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
}
#header {
padding: 10px;
align-items: center;
background: WHITE;
display: inline-flex;
align-items: center;
justify-content: center;
display: flex;
box-sizing: border-box;
width: 100%;
min-width: 100%;
}
.border {
position: relative;
z-index: -1;
border: 10px solid #6b36ba;
border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
}
.bordershine {
display: flex;
margin: 20px;
border-width: 10px;
border-style: solid;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset;
border-image-slice: 10;
border-image-source: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
<div class="bordershine">
<div id="header" class="border">
<img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'> Hard Candy by IshikaruTanaka
</div>
</div>
border-image is a shorthand property that include the border-slice so if you set it later it will override the previous border-slice
You can also use only border-image like you did with .border
body {
background-color: BLACK;
background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
}
#header {
padding: 10px;
align-items: center;
background: WHITE;
display: inline-flex;
align-items: center;
justify-content: center;
display: flex;
box-sizing: border-box;
width: 100%;
min-width: 100%;
}
.border {
position: relative;
z-index: -1;
border: 10px solid #6b36ba;
border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
}
.bordershine {
display: flex;
margin: 20px;
border-width: 10px;
border-style: solid;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset;
border-image: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%) 10;
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
<div class="bordershine">
<div id="header" class="border">
<img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'> Hard Candy by IshikaruTanaka
</div>
</div>
I liked this book design in iBooks and have been wondering can it be easily made with css?
Original photo
have you tried gradients and shadows ?
.cover {
background: linear-gradient(to right, rgb(60, 13, 20) 3px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.25) 7px, rgba(255, 255, 255, 0.25) 10px, transparent 12px, transparent 16px, rgba(255, 255, 255, 0.25) 17px, transparent 22px), url(https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg);
box-shadow: 0 0 5px -1px black, inset -1px 1px 2px rgba(255, 255, 255, 0.5);
margin: auto;
border-radius: 5px;
width: 389px;
height: 500px;
}
body {
min-height: 100vh;
display: flex;
}
<div title=" Don't make me think " class="cover"></div>
I think this could be pretty easily done with gradients in CSS. Here's a (very rough) example fiddle: https://jsfiddle.net/6yok9c4w/
HTML:
<div class="overlay">
</div>
<img src="https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg" />
CSS:
.overlay {
width: 400px;
height: 500px;
position: fixed;
top: 0;
left: 0;
background: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(0,0,0,.5) 2%, rgba(255,255,255,.5) 3%, rgba(247,254,255,.5) 5%, rgba(0,0,0,.5) 7%, rgba(255,255,255,.5) 13%, rgba(255,255,255,.2) 100%);
}
img {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
I used this tool to generate the gradient: https://cssgradient.io/
With more effort and tweaking, I think you can get really close to the original.
This portion of code draws round borders on a menu.
That works well in Chrome, IE11 and even IE10, but in IE9 there is a problem: the round borders are "dirty"...
.navsub {
display: block;
z-index: 999;
}
.navsub li {
/*float: left;*/
margin: 0px 2px;
padding: 3px 5px;
display: inline-block;
border: 2px solid #fff;
border-radius: 5px;
z-index: 100;
position: relative;
}
.navsub li:hover a, .navsub li.selected a {
color: #fff;
}
.navsub li:hover, .navsub li.selected {
background: rgb(204, 0, 0);
background: -moz-linear-gradient(top, rgb(204, 0, 0) 0%, rgb(170, 0, 0) 43%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(204, 0, 0)), color-stop(43%, rgb(170, 0, 0)));
background: -webkit-linear-gradient(top, rgb(204, 0, 0) 0%, rgb(170, 0, 0) 43%);
background: -o-linear-gradient(top, rgb(204, 0, 0) 0%, rgb(170, 0, 0) 43%);
background: -ms-linear-gradient(top, rgb(204, 0, 0) 0%, rgb(170, 0, 0) 43%);
background: linear-gradient(to bottom, rgb(204, 0, 0) 0%, rgb(170, 0, 0) 43%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc0000', endColorstr='#aa0000', GradientType=0);
color: white;
}
.navsub li:hover::before, .navsub li.selected::before {
border: solid;
border-color: #A00000;
border-width: 8px 10px 5px 4px;
bottom: -3px;
content:"";
left: 10px;
position: absolute;
z-index: -1;
-webkit-box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, .3);
box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, .3);
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<ul class="navsub">
<li class="nav1">Una volta</li>
<li class="nav1 selected">Un tango</li>
<li class="nav1"> Una ragazza</li>
</ul>
How can I remove the "dirty" borders that draws Internet Explorer 9?
use this handy tool for generating the css for gradients
http://www.colorzilla.com/gradient-editor/
Support for full multi-stop gradients with IE9 (using SVG).
.navsub {
display: block;
z-index: 999;
}
.navsub li {
/*float: left;*/
margin: 0px 2px;
padding: 3px 5px;
display: inline-block;
border: 2px solid #fff;
border-radius: 5px;
z-index: 100;
position: relative;
}
.navsub li:hover a, .navsub li.selected a {
color: #fff;
}
.navsub li:hover, .navsub li.selected {
background: rgb(204,0,0); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2FhMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYTAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgb(204,0,0) 0%, rgb(170,0,0) 47%, rgb(170,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(204,0,0)), color-stop(47%,rgb(170,0,0)), color-stop(100%,rgb(170,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(204,0,0) 0%,rgb(170,0,0) 47%,rgb(170,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(204,0,0) 0%,rgb(170,0,0) 47%,rgb(170,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(204,0,0) 0%,rgb(170,0,0) 47%,rgb(170,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgb(204,0,0) 0%,rgb(170,0,0) 47%,rgb(170,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#aa0000',GradientType=0 ); /* IE6-8 */
color: white;
}
.navsub li:hover::before, .navsub li.selected::before {
border: solid;
border-color: #A00000;
border-width: 8px 10px 5px 4px;
bottom: -3px;
content:"";
left: 10px;
position: absolute;
z-index: -1;
-webkit-box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, .3);
box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, .3);
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<ul class="navsub">
<li class="nav1">Una volta</li>
<li class="nav1 selected">Un tango</li>
<li class="nav1"> Una ragazza</li>
</ul>
I inspected it, removing border:2px solid #fff; for .navsub li you have given . Deleting this may solve your problem.
add
.navsub li{
border-style:none;
}
or remove
border: 2px solid #fff
is there a reason it needs the white border?
I'm designing a site for a school project, and I'm trying to design a particular style for the buttons and navigation, but I'm not sure how to go about this.
I considered doing a border effect, but I stopped short as I realized that it doesn't just involve changing individual side's colors but cutting two sides in half and coloring those pieces differently. A gradient on a div behind it might work, but not only would that get complicated, but it would look blurry while I'm going for sharpness like an edge on a 3D shape. Is this doable, or would I have to use images?
EDIT: Wow, looks like there's a lot of methods out there. Code Golf, anyone?
A solution without css gradient if you want to support IE8 too: http://jsfiddle.net/2am780pq/
HTML:
<a class="button">Cool</a>
CSS:
.button {
display: inline-block;
position: relative;
background-color: #4755e7;
padding: 10px 20px;
color: #fff;
}
.button:before {
content: '';
position: absolute;
top: 50%;
bottom: -5px;
left: -5px;
right: -5px;
margin: auto;
background-color: #4451dc;
z-index: -1;
}
.button:after {
content: '';
position: absolute;
top: -5px;
bottom: 50%;
left: -5px;
right: -5px;
margin: auto;
background-color: #5d67e9;
z-index: -1;
}
without gradient nor pseudo-elemts, box-shadow could do the job too:
http://codepen.io/anon/pen/NPaZBd
a{
display: inline-block;
color: #FFF;
padding:5px 1em;
line-height:2em;
background:#4755E7;
margin:1em;
box-shadow:-0.8em -0.8em 0 -0.5em #5d67e9,
0.8em -0.8em 0 -0.5em #5d67e9,
-0.8em 0.8em 0 -0.5em #4451dc,
0.8em 0.8em 0 -0.5em #4451dc;
}
/* add an inside blurry border too ? */
a:nth-child(even) {
box-shadow:-0.8em -0.8em 0 -0.5em #5d67e9,
0.8em -0.8em 0 -0.5em #5d67e9,
-0.8em 0.8em 0 -0.5em #4451dc,
0.8em 0.8em 0 -0.5em #4451dc,
inset 0 0 1px
}
link
link link
link bigger link
link even bigger works still
Yes, with gradient backgrounds and nested elements. This is NOT cross-browser compatible in browsers that do not support CSS3.
Live example: JSFiddle
The HTML:
<span>Click Me</span>
The CSS:
.button {
display: inline-block;
padding: 4px;
background: rgba(115,127,255,1);
background: -moz-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(115,127,255,1)), color-stop(50%, rgba(68,81,220,1)), color-stop(51%, rgba(68,81,220,1)), color-stop(100%, rgba(68,81,220,1)));
background: -webkit-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: -o-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: -ms-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: linear-gradient(to bottom, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
}
.button span {
display: inline-block;
background: #4755E7;
color: #fff;
padding: 0.5em 0.75em;
}
Here one element solution, simplier markup :D
<b>Im sexy and i know it!</b>
http://jsfiddle.net/ebdq20vm/1/
b {
padding: 20px;
display: inline-block;
color: #FFF;
background: #5d67e9;
background: -moz-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #5d67e9), color-stop(51%, #4451dc));
background: -webkit-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: -o-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: -ms-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: linear-gradient(to bottom, #5d67e9 50%, #4451dc 51%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d67e9', endColorstr='#4451dc', GradientType=0);
position: relative;
z-index: 5;
}
b:before {
content:'';
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background-color: #4755E7;
display: block;
z-index: -1;
}
When the content of the site is bigger then the window (no matter how high you make the window, this rule applies). This is very unwanted behavior because it looks like ##!*...
I'm quite new to webdesign so I probably really made some big mistakes in my css.. Here is the css file, hope someone can point it out.. (probably using height: 100% was bad, but don't know what else to do =/.
And I know for content and stuff absolute is REALLY bad.
This is what the 'bug' looks like, at the bottom when the content is larger then the window:
http://i49.tinypic.com/1zqa9th.png
Here is a html skeleton:
<!DOCTYPE html>
<html>
<head>
<?php
$title_tags = "TITLE HERE";
$meta_description = "";
include('generalhead.php'); ?>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class = "wrap1">
<img src="media/images/blub.png" class="blub"><br>
<div class="cloud">
<img src="media/images/dots.gif">
<img class="cloud_text" src="media/images/cloud.png">
<img src="media/images/dots.gif">
</div>
<div class="menu">
<ul id="nav" class="navig">
<h3 class="big_link">home</h3>
<h3 class="big_link">contact</h3>
<h3>Algemene dakwerken</h3>
<li>Epdm</li>
<li>pannen</li>
<li>zink</li>
<li>koper</li>
<li>dakconstructie</li>
<li>velux steken</li>
<li>uitbekleden oversteking</li>
<h3>binnenhuisinrichting</h3>
<li>ramen en deuren</li>
<li>gyproc</li>
<li>muren en plafonds</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content-top">
<div class="content-head">
blub
</div>
<div class="content-body">
CONTENT TEXT COMES HERE, BELLOW THIS ARE THE CONTENT PICTURES
</div>
<div class="content-pictures">
<!-- Slider-->
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
$directory_name = "index";
include ("generate_photo_content.php");
?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include ('bottomscripts.php'); ?>
</body>
</html>
CSS HERE
body{
/* FALLBACK KLEUR ALS GRADIENT NIET WERKT*/
background-color: #1b1000;
height: 100%;
font-size: 100%
}
/*ROND ALLES EN ZORGT VOOR GRADIENT OP BACKGROUND*/
.wrapper{
display:block;
/*set the div in the top-left corner of the screen*/
position:absolute;
top:0;
left:0;
/*set the width and height to 100% of the screen*/
width: 100%;
height:100%;
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* Opera */
background-image: -o-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, left center, 0, left center, 973, color-stop(0, #4D2D0F), color-stop(0.5, #1B1000), color-stop(1, #1B1000));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-side at left center, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
}
.sidebar {
z-index: 999;
background-color: #ffcc00;
/*background-image: url(../images/bar-8.png);*/
background-repeat: no-repeat;
background-image: url(../images/bar.jpg);
background-repeat:repeat-y;
-moz-box-shadow: 5px 0px 6px #000000;
-webkit-box-shadow: 5px 0px 6px #000000;
box-shadow: 5px 0px 6px #000000;
width: 200px;
height: 100%;
float: left;
}
.wrap1{
position: relative;
top:15px;
}
.logo{
position: absolute;
top: 0;
left: 4px;
}
.blub{
position: relative;
float:left;
width: 100%;
margin: 0 0 10px 0;
}
.cloud{
position: relative;
float: left;
width: 100%
}
.cloud_text{
margin: 0 0 0 0;
}
.menu{
line-height: 1;
margin: 0 0 0 10px;
position: relative;
float: left;
width: 100%
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu {
width: 200px;
margin: 10px auto;
font-size: 0.8125em;
text-transform: uppercase;
}
.navig{
width: auto;
height: auto;
}
.navig > li > a{
border-bottom: 1px solid #c68f00;
width: 100%;
height: 1.5em;
font-size: 0.8em;
line-height: 1.5em;
text-indent: 16px;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Areal, sans-serif;
font-weight: 600;
color: #603913;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
-webkit-transition: all 1s linear;
}
.navig > h3{
margin: 0 0 0 0;
border-bottom: 2px solid #c68f00;
width: 100%;
height: 2.25em;
line-height: 2.75em;
text-indent: 10px;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Areal, sans-serif;
font-weight: 600;
color: #603913;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
}
.navig > li > a:hover,
.navig > li > a:active{
background-color: #fdda01;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 219, 0)),to(rgb(255,204,0)));
background-image: -webkit-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -moz-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -o-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -ms-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #886304;
}
.big_link > a {
margin: 0 0 0 0;
border-bottom: 2px solid #c68f00;
width: 100%;
height: 2.25em;
line-height: 2.75em;
text-indent: 10px;
display: block;
position: relative;
color: #603913;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
}
.big_link> a:active,
.big_link > a:hover{
background-color: #fdda01;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 219, 0)),to(rgb(255,204,0)));
background-image: -webkit-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -moz-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -o-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -ms-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 2px solid #886304;
}
.selected{
background-color: #fdda01;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 219, 0)),to(rgb(255,204,0)));
background-image: -webkit-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -moz-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -o-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -ms-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #886304;
}
Short answer:
Here's your current HTML markup and CSS definitions with the ending result as requested:
See this working Fiddle Example!
Long Answer
Your current code as presented on the question contains several markup issues:
Child elements of an unordered list (UL):
See the W3C - Lists in HTML documents
<ul/> element can only have <li/> as a child. Currently you're placing <h3/> mixed with <li/> elements.
Closing tags for the <div/> element:
You're using 12 opening tags.
You're using 13 closing tags.
Loose one closing div declaration after your ul to have the markup working as expected.
Regarding your sidebar height issue
I've tried to work with the code you've provided, but the structure is to messy to achieve your goal with a plain CSS solution.
So I went the other way around, prepared the desired structure to have your contents applied to it. The markup on this Fiddle Example solves your issue.
HTML MARKUP the basic layout
<div class="wrapper">
<div class="sidebar">
<ul>
<li>Sidebar stuff.</li>
</ul>
</div>
<div class="content">
CONTENT TEXT COMES HERE, BELLOW THIS ARE THE CONTENT PICTURES
</div>
<div class="clear"></div>
</div>
CSS the basics to prepare the layout
* {
margin: 0;
padding: 0;
}
.clear { clear: both; }
.wrapper {
position: relative;
}
.sidebar {
width: 200px;
float: left;
background-color: #ffcc00;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.content {
margin-left: 200px;
}
All you have to do is to apply this markup and fill it with your contents.