How do I align a button to the bottom center? - css

I have a responsive design with 4 fluid blocks.
I want the submit button to be fixed at bottom center.
The problem is, the button is shifted to the right (but not perfectly right-aligned)
Here is my css:
#product-list{
width: 100%;
padding: 0 40px;
margin: 30px 0 0 0;
position:relative;
}
article.products{
float: left;
position:relative;
width: 24%;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 0;
text-align: center;
border: 1px solid #C0C0C0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 10px;
background: #fbfbfb;
background-image: -ms-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%);
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%);
background-image: -o-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(.90, #FFFFFF), color-stop(1, #EFEFEF));
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%);
background-image: radial-gradient(ellipse farthest-corner at center, #FFFFFF 90%, #EFEFEF 100%);
}
article.products input[type="submit"] {
position: absolute;
bottom: 5px;
left: 50%;
}
Here is the html (deleted unnecessary code; it is a dynamic loop for the boxes):
<div id="product-list">
<section class="main">
<article class="products">
<input name="Submit" type="Submit">
</article>
</section>
</div>

You have to place the input in a parent div
<div class="parent_div">
<input name="Submit" type="Submit">
</div>
And use this CSS to arrange it
.parent_div {
position: absolute;
bottom: 5px;
width: 100%;
}
.parent_div input {
margin: 0 auto;
}

So yeah here is your code:
article.products input[type="submit"] {
margin-left: 50%;
margin-right: 50%;
marging-bottom: 5px;
}
Or you could put a padding-bottom: 5px to the container class. Your choice.

Related

How can I create a button border and text with a linear gradient color?

I have a semi-round button. But I don't know how to bend it for my semi-round button in it's border.
.semi-circle {
display: inline-block;
padding: 9px 16px;
border-radius: 999px !important;
text-align: center;
/*border: 10px solid transparent;*/
/* -moz-border-image: -moz-linear-gradient(right, #FC913A 0%, #FF4E50 100%);
-webkit-border-image: -webkit-linear-gradient(right, #FC913A 0%, #FF4E50 100%);
border-image: linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
/*border-image-slice: 1;*/
border: linear-gradient(to right, green 0%, blue 100%);
/*background-image: linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -o-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -moz-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -webkit-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -ms-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
*/
}
Forgive me for not being able to embed the image because of lack of reputation. Thx for the stack overflow community for its great service.
Here is solution. It works fine in webkit. In other browsers text color is solid.
HTML
<button data-text="Round button"></button>
<button class="active" data-text="Active round button"></button>
CSS
body {
background: #384041;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
button {
display: inline-block;
border: none;
outline: none;
appearance: none;
background: red;
position: relative;
z-index: 3;
height: 60px;
border-radius: 30px;
padding: 0 21px;
font-size: 21px;
box-shadow: -1px -1px 1px 0 black;
background: #4f4f4f;
}
button:before {
content: attr(data-text);
min-width: 144px;
z-index: -1;
border-radius: 27px;
color: #4f4f4f;
}
#media screen and (-webkit-min-device-pixel-ratio:0) { button:before {
background: #4f4f4f;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}}
button:after {
content: '';
position: absolute;
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
z-index: -2;
border-radius: 30px;
background: #151515;
}
button:hover {
cursor: pointer;
background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
}
.active {
background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
}
.active:before{
color: #2084c3;
}
#media screen and (-webkit-min-device-pixel-ratio:0) { .active:before {
background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}}
Demo
There are probably better ways to do this, but without further thinking I'd try something like this:
<style type="text/css">
.semi_outer {
padding: 2px;
text-align: center;
border-radius: 11px;
background: linear-gradient(to right, #0f0, #00f);
}
.semi_inner {
margin: 2px;
border-radius: 7px;
background-color: #000;
color: #0f0;
}
.semi_outer:hover {
background: linear-gradient(to right, #c00, #0c0);
}
.semi_outer:active {
background: linear-gradient(to right, #f00, #0f0);
}
</style>
<div class="semi_outer">
<div class="semi_inner">
semi_inner
</div>
</div>
This is your semi-round button . may be it will be helpfull for you.
.outer {
padding: 2px;
text-align: center;
border-radius: 11px;
background: linear-gradient(to right, #0f0, #00f);
width: 200px;
height:30px;
}
.inner {
margin: 3px;
border-radius: 7px;
background-color: #000;
color: #0f0;
height:25px;
}
.outer:hover {
background: linear-gradient(to right, #c00, #0c0);
}
.outer:active {
background: linear-gradient(to right, #f00, #0f0);
}
<div class="outer">
<div class="inner">
BUTTON
</div>
</div>

How to get a headline to have a horizontal line behind the text?

I'm constructing a site and a piece of the mockup is below
Since I'm using a content management system that builds the HTML, all I have to work with a single h3 tag. I want the line behind to have the width of the div containing the h3 tag. Is this possible?
Here's the closest that I can get: http://jsfiddle.net/rmgtq6h6/
h3.line-behind { width: auto; position: relative; text-align: center}
h3.line-behind:after { content: " "; border-top: 3px solid black; position: absolute; width:100%; top: 50%; left: 0; z-index: 1; }
Here you go:
https://jsfiddle.net/rmgtq6h6/1/
div.line-behind {
width: auto;
position: relative;
text-align: center
}
span {
content: " ";
border-top: 3px solid black;
position: absolute;
width: 100%;
top: 50%;
left: 0;
z-index: -1;
}
h3 {
background-color: #fff;
display: inline-block;
}
}
<div class="line-behind"><span></span>
<h3>Begin My Giving Journey</h3>
</div>
Or take a look here:
http://codepen.io/ericrasch/pen/Irlpm
if i understand correctly this is what are you looking for
h3.line-behind:after {
position:absolute;
content:'';
height:2px;
width:150%;
top:50%;
transform:translateY(-50%);
left:50%;
transform:translateX(-50%);
z-index:-1;
background: linear-gradient(to right, rgba(25,25,25,0) 0%,
rgba(25,25,25,1) 35%,
rgba(255,255,255,0) 36%,
rgba(255,255,255,0) 65%,
rgba(25,25,25,1) 66%,
rgba(25,25,25,0) 100%);}
fiddle here
or another example more practical add another pseudo-element ::before
h3.line-behind:after { position:absolute;
content:'';
height:2px;
width:50%;
top:50%;
transform:translateY(-50%);
left:0;
transform:translateX(-50%);
z-index:-1;
background: #000; }
h3.line-behind:before {position:absolute;
content:'';
height:2px;
width:50%;
top:50%;
transform:translateY(-50%);
right:0;
transform:translateX(50%);
z-index:-1;
background: #000; }
demo here
Place you text in some container
center this text
apply some width to the container
give the container some background color
h3.line-behind { width: auto; position: relative; text-align: center}
h3.line-behind:after { content: " "; border-top: 3px solid black; position: absolute; width:100%; top: 50%; left: 0; z-index: -1; }
#container{
margin:0 auto;
background-color:white;
width:40%;
}
<h3 class="line-behind"><div id="container">Begin My Giving Journey</div></h3>
We can build is easily with these guaranties 👇
No images
No extra
HTML Scalable (that is, you could add larger text
and it automatically sizes to fit)
Fluid
No JavaScript
Method 1: A Pseudo-Element
h1:before {
content:"";
display: block;
border-top: solid 1px black;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
}
h1 span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
}
Demo: http://jsfiddle.net/7s79zwz5/
Method 2: Adjacent Sibling Selector
h1+p {
border-top: solid 1px black;
padding-top: 40px;
margin-top: -40px;
}
Demo: http://jsfiddle.net/v9g3d4ua/
Method 3: Linear Gradient
h1 {
background: -moz-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(49%, #ffffff), color-stop(50%, #000000), color-stop(51%, #000000), color-stop(52%, #ffffff), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
background: -o-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
background: linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
}
Demo: http://jsfiddle.net/2m30vsgm/
Simple answer using grid:
h1 {
display: grid;
grid-template-columns: 1fr max-content 1fr;
align-items: center;
gap: 0.5rem;
}
h1:before,
h1:after {
content: '';
height: 1px;
background-color: #CBD5E1;
}
https://jsfiddle.net/6cq5whgr/

Is it possible to make this particular button effect in pure CSS?

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;
}

2 100% width div, clear without using Top:

I'm running into a problem.
I know this is probably a noob mistake but bear with me.
I'm making two top bar menus at the top, I can place them using absolute positioning and top, however when the browser size changes it makes the top bar look messed up.
Is there a way to place these without using absolute position and top?
This is what I currently have:
THE HTML
<div id="nav">
<div class="logo"><h1>Health Numeric ©</h1>Live a Something Life</div>
<div style="display:inline-block">
<ul>
<li><img class="icons" src="img/icons/dashboard.png" />Dashboard</li>
<li><img class="icons" src="img/icons/patient.png" />Patients</li>
<li><img class="icons" src="img/icons/devices.png" />Devices</li>
<li><img class="icons" src="img/icons/account.png" />Account</li>
<li><img class="icons" src="img/icons/support.png" />Support</li>
</ul>
</div>
<div class="end"><strong>LifeView</strong> Portal</div>
</div>
<div id="subnav">
<span class="clientname">Patient: Brian Town</span>
</div>
<div id="bod">
<h1> test</h1>
</div>
The CSS
#nav h1 {
font: Verdana, Geneva, sans-serif;
font-size: 24px;
margin-bottom: 2px;
}
.logo {
width: 190px;
margin: auto 80px auto 50px;
display: inline-block;
vertical-align: top;
}
#nav {
position: fixed;
/*height: 65px;*/
width: 100%;
float: left;
left: 0px;
top: 0px;
margin: 0px;
padding: 0px;
color: #FFFFFF;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0389FF 0%, #000000 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0389FF 0%, #000000 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0389FF 0%, #000000 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0389FF), color-stop(1, #000000));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0389FF 0%, #000000 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0389FF 0%, #000000 100%);
}
#nav ul {
list-style: none;
width: 450px;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFF;
border-right: 1px solid #ccc;
}
#nav li:first-child a {
border-left: 1px solid #ccc;
}
#nav li a:hover {
color: #23afff;
}
.end {
width: 200px;
margin: 10px auto auto 50px;
display: inline-block;
word-spacing: 20px;
vertical-align: top;
}
strong {
font: Verdana, Geneva, sans-serif;
font-size: 36px;
margin-bottom: 2px;
}
.icons {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1px;
height: 35px;
width: 35px;
}
#subnav {
position: fixed;
overflow:hidden;
height: 20px;
width: 100%;
float: left;
left: 0px;
/*top: 65px;*/
margin: 0px;
padding: 0px;
border: 1px solid #333;
border-bottom: 1px solid #ccc;
color: #000000;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* Opera */
background-image: -o-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, #FFFFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #666666 0%, #FFFFFF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #666666 0%, #FFFFFF 100%);
}
.clientname {
float: right;
margin-right: 120px;
color: #000000;
font-weight: bold;
}
#bod {
position: absolute;
width: 100%;
float: left;
left: 0px;
top: 85px;
margin: 0px;
padding: 0px;
color: #000000;
}
Here is a JSfiddle: http://jsfiddle.net/Artsen/HYZLR/
Thanks

My vertical navigation is only as high as my window, don't know why

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.

Resources