some CSS wrangling
CSS for a couple of sites.
CSS 2
Jessicavilanova.Com
basic CSS. Just a decent amount of it. Lots of floats and relative positioning.
body { font-family:Verdana,Helvetica,Arial,Sans-Serif; font-size:12px; margin:0; padding:0;
background:url('/media/img/bg/body.png') repeat-x #000; color:#969696; }
h1 { color:#d03cd2; font-size:12px; line-height:12px; text-transform:uppercase; font-weight:300; }
h2 { color:#d03cd2; font-size:12px; line-height:12px; text-transform:uppercase; font-weight:200; }
img { border:none; }
#wrap { width:933px; min-height:900px; margin:0 auto 0 auto; background:url('/media/img/bg/wrap.png') no-repeat; }
#header { width:950px; height:187px; }
#logo { width:234px; height:42px; position:absolute; top:130px; }
#navmenu { color:#969696; position:absolute; top:190px; z-index:900; }
#navmenu ul { padding:0 10px; }
#navmenu li { list-style:none; display:inline; line-height:2em; padding:0 5px; }
#navmenu a:link, #navmenu a:visited { color:#999; text-decoration:none; text-transform:uppercase; }
#navmenu a:hover { color:#d03cd2; text-decoration:none; text-transform:uppercase; }
#banner { width:950px; height:177px; background:url('/media/img/backgrounds/container-banner.jpg') no-repeat;
position:relative; top:40px; }
#banner #b-text { float:left; position:relative; top:10px; }
#b-text img { float:left; position:relative; top:20px; }
#b-text h1 { width:527px; margin:30px 0 0 0; }
#b-text p { width:527px; margin:8px 0 0 0; }
#b-text a:link, a:visited { color:#c288b0; text-decoration:none; text-transform:uppercase; }
#b-text a:hover { color:#d03cd2; text-decoration:none; text-transform:uppercase; }
#banner #main-img-home { width:373px; height:400px; float:left; position:relative; top:-90px; }
#banner #main-img-bio { width:373px; height:400px; float:left; position:relative; top:-140px; left:60px; }
.clear-both { clear:both; }
#content { width:950px; height;430px; float:left; position:relative; top:-130px;
background:url('/media/img/backgrounds/container-content.jpg') no-repeat; }
#content ul { list-style:none; }
#content #interests { float:left; width:300px; margin:70px 0 0 0; }
#interests img { float:left; position:relative; top:10px; }
#interests h2 { position:relative; right:30px; }
#content #stats { float:left; width:350px; margin:70px 0 0 0; }
#stats img { float:right; margin-top:-30px; }
#stats h2 { text-align:center; }
#stats ul { position:relative; left:20px; }
#content #news { float:left; position:relative; left:30px; width:280px; margin:70px 0 0 0; }
#news h2 { position:relative; left:40px; }
#news h3 { font-size:10px; text-transform:uppercase; font-weight:100; color:#c288b0; }
#news p { font-size:10px; margin-top:-10px; }
#news a:link, a:visited { color:#c288b0; text-decoration:none; text-transform:uppercase; }
#news a:hover { color:#d03cd2; text-decoration:none; text-transform:uppercase; }
#content #newpics { float:left; position:relative; left:30px; }
#newpics .img-wrap { width:208px; clear:both; padding:2px 10px; position:relative; right:5px; float:left; }
#newpics .img-wrap .tn-70x70 { width:77px; height:77px; float:right; text-align:center; border-bottom:1px solid #333; }
#newpics .img-wrap .tn-70x70 img { border:1px solid #ccc; padding:1px; }
#newpics .img-wrap .img-info { font-weight:bold; color:#666; }
#newpics .img-wrap p { color:#555; font-size:10px; text-align:right; width:120px;
border-top:1px solid #333; }
#content .article { }
.article .text { width:623px; float:left; }
.article .news { width:300px; float:right; }
.article .experience { font-size:14px; padding:4px 0 4px 10px; position:relative; left:25px;
border-left:1px dashed #ccc; }
#content #vertical-spacer { width:1px; height:443px; float:left; }
#content form label { float:left; width:80px; text-align:right; padding-right:10px; margin:0 0 0 20px; }
#content form input { float:left; width:150px; background:#e1c8d9; color:#333; }
#content form select { float:left; width:150px; background:#e1c8d9; color:#333; }
#content form textarea { float:left; width:680px; height:300px; background:#e1c8d9; color:#333; }
#content form #id_subject { width:415px; }
#content form .clear-form-line { clear:both; padding:10px 0 10px 0; }
#content form .input-submit { float:left; width:150px; background:#e1c8d9; margin-left:110px; }
#content form .not-required { background:#aaa; }
#content form .form-directions { line-height:30px; padding:0 10px; margin-left:100px; float:left; }
#port { float:left; width:680px; }
#port #p-content { position:relative; top:80px; }
#p-content h2 { color:#c288b0; }
#p-content h2 .h2-small { font-size:9px; }
#p-content #cats { text-align:center; }
#p-content #cats a:link, #p-content #cats a:visited {
color:#c288b0; text-decoration:none; text-transform:uppercase; }
#p-content #cats a:hover { color:#d03cd2; text-decoration:none; text-transform:uppercase; }
#p-content #cats #alt { width:130px; height:466px; float:left; }
#p-content #cats #burlesque { width:128px; height:466px; float:left; }
#p-content #cats #glamour { width:137px; height:466px; float:left; }
#p-content #cats #fashion { width:120px; height:466px; float:left; }
#p-content #cats #artistic { width:122px; height:466px; float:left; }
#p-content .tn-100x100 { width:100px; height:100px; float:left; line-height:100px; text-align:center; padding:10px; }
#p-content .tn-100x100 img { border:1px solid #333; padding:1px; }
#p-content .center-img { text-align:center; width:680px; }
#p-content .center-img img { border:1px solid #333; padding:2px; }
#p-content .img-meta { color:#333; }
.img-meta .img-info { font-weight:bold; color:#666; }
#p-content .paginator { text-align:center; font-size:10px; clear:both; padding:20px; word-spacing:10px; }
.paginator a:link, #paginator a:visited { color:#666; text-transform:uppercase; }
.paginator .cur-page { font-size:16px; font-weight:bold; border:2px solid #333; padding:2px; }
.paginator .accent { font-weight:bold; font-size:18px; color:#666; }
#sidebar { float:right; width:223px; min-height:1000px; border-bottom:2px solid #333; padding-bottom:60px;
background:url('/media/img/bg/sidebar.png') repeat-y; }
#sidebar h2 { text-align:right; padding-right:10px; }
#sidebar .sb-h2-small { font-size:9px; line-height:9px; color:#c288b0; }
#sidebar img { border:none; float:left; }
#sidebar #categories { clear:both; margin-top:210px; }
#sidebar #categories #img { position:relative; top:15px; }
#sidebar form label { float:right; width:100px; }
#sidebar form select { background:#e1c8d9; }
#sidebar #sb-data-wrap { margin-top:220px; }
#sb-data-wrap .sb-data { clear:both; padding-bottom:50px; }
.sb-data .tn-70x70 { float:left; width:65px; height:65px; padding:1px; line-height:70px;
text-align:center; margin-left:5px; }
.sb-data .tn-70x70 img { padding:1px; border:1px solid #333; }
.sb-data .tn-55x55 { float:left; width:55px; height:55px; padding:1px; line-height:70px;
text-align:center; margin-left:5px; }
.sb-data .tn-55x55 img { padding:1px; border:1px solid #333; }
.sb-data .img-wrap { width:208px; clear:both; padding:2px 10px; position:relative; right:5px; }
.sb-data .img-wrap .tn-70x70 { width:77px; height:77px; float:right; text-align:center; border-bottom:1px solid #333; }
.sb-data .img-wrap .tn-70x70 img { border:1px solid #ccc; padding:1px; }
.sb-data .img-wrap .img-info { font-weight:bold; color:#666; }
.sb-data .img-wrap p { color:#555; font-size:10px; text-align:right; width:120px;
border-top:1px solid #333; }
.sb-data form { float:right; padding-right:10px; }
#sidebar .sb-option { text-align:right; float:right; padding:0 10px; font-size:11px; margin-top:-10px; }
.sb-option h3 { font-size:8px; text-transform:uppercase; margin-bottom:0; }
.sb-option a:link, .sb-option a:visited { color:#666; text-decoration:none; text-transform:lowercase; }
.sb-option a:hover { color:#c288b0; }
#footer { clear:both; position:relative; top:100px; background:#030303; border-top:3px solid #111; border-bottom:3px solid #111; padding:0 15px; }
#footer-content { margin:0 auto; width:800px; }
#footer h4 { color:#c288b0; font-size:11px; text-transform:uppercase; font-weight:100; }
#footer ul { list-style-type:none; margin:-10px 0; padding:0; }
#footer a:link { color:#666; text-decoration:none; }
#footer a:hover { color:#d03cd2; text-decoration:none; }
#footer a:visited { color:#666; text-decoration:underline; }
#footer #site-links { width:200px; float:left; }
#footer #photographers { width:200px; float:left; }
#footer #other-external { width:200px; float:left; }
#footer #social-networking { width:200px; float:left; position:relative; top:15px; }
#footer #social-networking img { border:none; }
#footer #copyright { text-align:center; clear:both; padding:20px 0 20px 0; background:#111; border:1px solid #222; position:relative; top:30px; }
This Site
the CSS for this site
body { background:url('/media/img/bg/body.jpg') repeat-x; color:#646e6e; background-attachment:fixed;
margin:0; padding:0; font-family:Arial,Helvetica,Verdana,Sans-Serif; font-size:12px; }
a:link, a:visited { color:#000; text-decoration:none; text-transform:uppercase; }
a:hover { color:#333; text-decoration:underline; }
h1 { margin:0 20px 0 20px; padding:0; font-size:14px; text-transform:uppercase; color:#555; font-weight:200; }
h2 { margin:0 20px 0 20px; padding:0; font-size:12px; text-transform:uppercase; color:#000; font-weight:200; }
h3 { margin:0 20px 0 20px; padding:0; font-size:14px; text-transform:capitalize; font-weight:300; }
p { margin:10px 20px 0 20px; }
img { border:none; }
div#wrap { width:900px; margin:100px auto 0 auto; }
div#masthead { width:900px; height:100px; background:url('/media/img/bg/masthead.png') no-repeat; }
#masthead img { float:left; }
#masthead #search { width:215px; position:relative; left:360px; top:32px; float:left; text-align:right; }
#navmenu { font-size:10px; margin:0; padding:0; list-style-type:none; width:600px;
position:relative; top:43px; left:30px; float:left; }
#navmenu li { display:inline; padding:0 5px; }
div#content { width:600px; float:left; }
#c-top { width:600px; height:50px; background:url('/media/img/bg/content-top.png') no-repeat; }
#c-btm { width:600px; height:78px; background:url('/media/img/bg/content-bottom.png') no-repeat; }
#c-body { width:560px; height:auto; background:url('/media/img/bg/content-middle.png') repeat-y;
padding:0 20px 0 20px; }
#c-body .blog { margin:15px 0 0 0; border-bottom:1px dashed #ccc; padding-bottom:10px; }
#c-body .blog h2 { margin:0 20px 0 20px; }
#c-body form label { float:left; width:120px; text-align:right; padding-right:20px; }
#c-body form input { float:left; width:120px; background:#eee; border:1px solid #ddd; }
#c-body form select { background:#eee; border:1px solid #ddd; }
#c-body form textarea { background:#eee; border:1px solid #ddd; }
#c-body .skills { }
.skills h3 { margin-top:10px; }
.skills p { margin:0 0 0 20px; }
.skills .skill-experience { margin:0 0 0 20px; color:#999; }
#c-body .portfolio { border-bottom:3px dashed #ccc; }
.portfolio h2 { text-transform:capitalize; font-size:14px; font-weight:300; margin-top:20px; }
.portfolio h3 { text-transform:uppercase; font-size:10px; font-weight:300; margin-top:20px; color:#333; }
.portfolio p { margin:5px 0 20px 20px; }
.portfolio a:link, .portfolio a:visited { text-transform:lowercase; color:#646e6e; }
.portfolio a:hover { color:#000; }
.portfolio .design img { width:550px; border:1px solid #999; }
div#sidebar { width:300px; float:left; }
#sb-top { width:300px; height:50px; background:url('/media/img/bg/sidebar-top.png') no-repeat; }
#sb-btm { width:300px; height:78px; background:url('/media/img/bg/sidebar-bottom.png') no-repeat; }
#sb-body { width:300px; height:auto; background:url('/media/img/bg/sidebar-middle.png') repeat-y; }
#sb-body a:link, #sb-body a:visited { text-transform:lowercase; color:#646e6e; }
#sb-body .sb-featured { width:260px; border:1px dashed #ccc; margin:0 0 0 13px;
text-align:center; font-size:11px; }
#sb-body form { width:260px; margin:0 0 20px 13px; text-align:right;
border-bottom:3px solid black; padding:2px; }
#sb-body form input { background:#000; }
#sb-body form select { background:#000; }
#sb-body img { border:1px solid #999; padding:2px; }
#sb-body p { margin:0 20px 0 30px; padding:0 0 10px 0; }
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.highlight { padding:5px; border:1px solid #999; }
.highlight .c { color: #408080; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #666666 } /* Operator */
.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #808080 } /* Generic.Output */
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #0040D0 } /* Generic.Traceback */
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.highlight .kp { color: #008000 } /* Keyword.Pseudo */
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #B00040 } /* Keyword.Type */
.highlight .m { color: #666666 } /* Literal.Number */
.highlight .s { color: #BA2121 } /* Literal.String */
.highlight .na { color: #7D9029 } /* Name.Attribute */
.highlight .nb { color: #008000 } /* Name.Builtin */
.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.highlight .no { color: #880000 } /* Name.Constant */
.highlight .nd { color: #AA22FF } /* Name.Decorator */
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0000FF } /* Name.Function */
.highlight .nl { color: #A0A000 } /* Name.Label */
.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #19177C } /* Name.Variable */
.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #666666 } /* Literal.Number.Float */
.highlight .mh { color: #666666 } /* Literal.Number.Hex */
.highlight .mi { color: #666666 } /* Literal.Number.Integer */
.highlight .mo { color: #666666 } /* Literal.Number.Oct */
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #660033; } /* Literal.String.Double */
.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
.highlight .sx { color: #008000 } /* Literal.String.Other */
.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
.highlight .s1 { color: #000 } /* Literal.String.Single */
.highlight .ss { color: #19177C } /* Literal.String.Symbol */
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #19177C } /* Name.Variable.Class */
.highlight .vg { color: #19177C } /* Name.Variable.Global */
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
