CSS Sidebar Help

[IMG]http://i.imgur.com/9sWf0.jpg[/IMG]

CSS:

[CODE]@charset "UTF-8";
/* CSS Document */

/*CSS Reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;}
body {
line-height: 1;}
ol, ul {
list-style: none;}
blockquote, q {
quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: ''; content: none;}
table {
border-collapse: collapse; border-spacing: 0;}
/*End reset*/

.body {height:100%;}
.wrap {width:1000px; margin:0 auto; font-family:Arial, Helvetica, sans-serif;}
.logo {padding: 20px 10px 20px 0; float:left;}
.nav {display:block; clear:both;}
ul.nav li {display:inline; padding-right:20px; text-transform:lowercase;}
ul.nav li a:active {color:#666; text-decoration:none;}
ul.nav li a:link {color:#666; text-decoration:none;}
ul.nav li a:visited {color:#666; text-decoration:none;}
ul.nav li a:hover {color:#693; text-decoration:none;}
.maincontent {ckground-color:#ffffff;border:1px solid #CCC;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:100%;margin-bottom:20px;}
.content {width:650px; padding:20px 20px;display:inline-block; border-right: #CCC 1px solid; }
.sidebar {width:250px; padding:20px 20px; margin-bottom:20px;display:inline-block;}
.social{width:210px; margin-bottom:20px;}
.widget {width:210px; font-size:13px; color:#999;}
.footer {ckground-color:#ffffff;border:1px solid #CCC;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:100%;margin-bottom:20px; height:200px;}
.content p {margin: 10px 0 10px 0; color:#666; text-align:justify; font-size:13.5px; line-height:20px;}
.content h1 {line-height:30px; font-size:34px; color:#693;}
.content h2 {line-height:25px; font-size:18px; color:#696;}
.sidebar h1 {line-height:30px; font-size:24px; color:#693;}
.sidebar .social img{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}
.sidebar .social img:hover{opacity:1.0;filter:alpha(opacity=100); /* For IE8 and earlier */}



/* Slider */
.nivoSlider {position:relative;margin:20px 0; border: 5px solid #CCC; overflow:hidden;}
.nivoSlider img {position:absolute;top:0px;left:0px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;}
/* The slices and boxes in the Slider */
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
/* Caption styles */
.nivo-caption {position:absolute;left:0px;bottom:0px;background:#000;color:#999;opacity:0.4; filter: alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4;/* Overridden by captionOpacity setting */width:100%;z-index:8;}
.nivo-caption p {padding:10px 7px;margin:0; font-size:12px}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {position:absolute;top:50%;z-index:9;cursor:pointer;color:#FFF;margin:0 20px;background:#333;padding:5px 5px;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;}
.nivo-controlNav a.active {font-weight:bold;}
.nivoSlider {position:relative;width:1000px; /* Change this to your images width */height:500px; /* Change this to your images height */background:url(images/loading.gif) no-repeat 50% 50%;}
.nivoSlider img {position:absolute;top:0px;left:0px;display:none;}
.nivoSlider a {border:0;display:block;}
.nivoSlider a:active {color:; text-decoration:none;}
.nivoSlider a:link {color:#CCC; text-decoration:none;}
.nivoSlider a:visited {color:#CCC; text-decoration:none;}
.nivoSlider a:hover {color:#FFF; text-decoration:underline;}
/* End Slider */
[/CODE]

HTML:

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Untitled Document

Phayse





image















Perfection

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

No Shortcuts

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus



Stalk Us

FacebookTwitter


Widget

Here's a widget with some text in the sidebar.










$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 5, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});



[/CODE]

Help! PLEASE! Thanks. :)

Comments

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories