View Full Version : Can't Solve These CSS Fixes?

12-20-2010, 03:40 PM
Hi everyone,

So I'm trying to solve some formatting fixes for a website I made, and am really stumped here.

The site is www.sexyelectrohouse.com, and I'm trying to accomplish these two edits.

1. Move the Share buttons to the right like 5pxs.

2. Move the start of the widget's title text to left more, so it left aligned better.

I've attached my CSS file, and I would be very grateful of any input. I've been trying to figure these out for the last few days.

Theme Name: WordPress Theme 836
Theme URI: http://template-help.com/
Description: A theme from Template-Help.com Collection
Version: 2.7
Author: Template_Help.com
Author URL: http://www.Template-Help.com/

* { padding:0; margin:0;}
html { font-size:100.01%;}
body { font-size:62.5%; font-family: Arial, Helvetica, sans-serif; background:#050505; color:#575859;}

.clear { clear: both;}

table, td, div, img { border:0; border-collapse:collapse;}
td {vertical-align:top;}
ul, li { list-style: none;}
p { padding:0px 0px 18px 0px;}

a {text-decoration: underline; color:#0cbafa;}
a:hover {text-decoration: none;}

input, select, textarea { vertical-align:middle; color:#150a07; font-size:11px;}
input.text, select, textarea { padding:2px 0px 3px 6px; border:1px solid #595f62;}

html body textarea { font-family: Arial; font-size:12px; color:#150a07;}

/*** Main ***/
.main { width:1020px; margin:0 auto; background:url(images/header-bg.jpg) no-repeat 0 0; /*width:expression(((document.documentElement.clientWidth || document.body.clientWidth) < 1020)? "1020px" : "100%"); min-width:1020px;*/}

.header { height:325px; overflow:hidden; padding:0px 16px 0px 15px; position:relative;}

/*** Logo ***/
.logo { /*float:left;*/ overflow:hidden;}
.logo .indent { padding:45px 0px 31px 32px;overflow:hidden;}
.logo h1 { width:157px; height:69px; background:url(images/logo.gif) no-repeat 0 0; font-size:1em; font-weight: normal; color:#fff; cursor:pointer; text-indent:-1000em; overflow:hidden;}
.logo h1:hover { text-decoration:none;}

/*** Search ***/
.search { float:right; /*overflow:hidden; height:100%;*/ padding:70px 2px 0px 0px;}
.search form {}
.search .text { width:141px; padding:1px 0px 2px 6px; margin:0px 14px 0px 0px;}
.search .but { cursor: pointer;}

.search_page {}
.search_page { float:left; /*overflow:hidden; height:100%;*/ padding:0px 2px 50px 0px;}
.search_page form {}
.search_page .text { width:141px; padding:1px 0px 2px 6px; margin:0px 14px 0px 0px;}
.search_page .but { cursor: pointer;}

/*** Menu ***/
.main-menu { width:100%; background:url(images/menu-bg.gif) repeat-x 0 0;}
.main-menu .corner-left { background:url(images/menu-left.gif) no-repeat 0 0; }
.main-menu .corner-right { background:url(images/menu-right.gif) no-repeat right 0; width:100%; overflow:hidden; height:100%; padding:8px 0px 18px 0px;}

.menu { /*float:left;*/ overflow:hidden;}

.menu ul { list-style:none; width:100%; overflow:hidden; height:100%;}
.menu ul li { float:left; height:100%; background:url(images/ver.gif) no-repeat 0 11px; margin:0px 0px 0px -2px; padding:8px 45px 25px 44px;}

.menu ul li a { display:block; float:left; overflow:hidden; text-decoration:none;}
.menu ul li a { font-size:1.1em; font-weight:bold; color:#fff;}

.menu ul li a:hover, .menu ul li.current_page_item a { text-decoration:underline;}

/*** Slogan ***/
.slogan-absolute { position:absolute; float:right; top:0; right:0; margin:207px 64px 0px 0px;}

.slogan {background:url(images/slogan-bg.gif) repeat-x 0 0;}
.slogan .corner-left { background:url(images/slogan-left.gif) no-repeat 0 0;}
.slogan .corner-right { background:url(images/slogan-right.gif) no-repeat right 0; width:100%; overflow:hidden; height:100%;}
.slogan h1 { padding:28px 0px 40px 28px; overflow:hidden;}

/*** Column ***/
.content { clear:both; overflow:hidden; height:100%; padding:10px 16px 0px 14px;}

.column-right { width:226px; float:right; margin:0px 0px 0px 13px; _margin:0px 0px 0px 10px;}

/*** Widgets ***/
.widget { height:100%; overflow:hidden; margin:0px 0px 11px 0px;}

.widget .title { height:100%; background:url(images/widget-title-bg.gif) repeat-y 0 0; margin:0px 0px 20px 0px;}

.widget p { font-size:1.16em; color:#ffffff; }

.widget .title div { background:url(images/widget-title-top.gif) no-repeat 0 0;}
.widget .title div div { background:url(images/widget-title-bot.gif) no-repeat 0 bottom;}

.widget h2 { /*background:url(images/widget-title-img.gif)*/ no-repeat 27px 14px; height:100%; overflow:hidden;}
.widget h2 { font-size:1.2em; color:#0CBAFA; padding:14px 10px 15px 55px;}
.widget h2 span.blue{color:#0CBAFA;}

.widget a { color:#848484; font-size:11px;}
.widget ul { margin:0px 20px 0px 43px; color:#bfdbd3; font-size:1em;}
.widget li { background:url(images/marker.gif) no-repeat 0 4px; padding:0px 0px 14px 16px;}
.widget li a { color:#848484; font-weight:bold;}

/*** widget_categories ***/
.widget_categories { height:100%; overflow:hidden; margin:0px 0px 11px 0px; background:url(images/widget-bg1.gif) repeat-y 0 0;}
.widget_categories .widget-bg01 { background:url(images/widget-top1.gif) no-repeat 0 0;}
.widget_categories .widget-bg02 { background:url(images/widget-bot1.gif) no-repeat 0 bottom; overflow:hidden; padding:0px 0px 15px 0px;}

.widget_categories .title { height:100%; background: none; margin:0px 0px 0px 0px;}

.widget_categories .title div { background:none;}
.widget_categories .title div div { background:none;}

.widget_categories h2 { background:url(images/widget-title-img1.gif) no-repeat 17px 18px; height:100%; overflow:hidden;}
.widget_categories h2 { font-size:1.2em; color:#000; padding:19px 10px 7px 41px;}

.widget_categories a { color:#848484; font-size:11px;}
.widget_categories ul { margin:0px 40px 0px 18px; color:#bfdbd3; font-size:1em;}
.widget_categories li { background:url(images/widget-line.gif) repeat-x 0 bottom; padding:3px 0px 6px 26px;}
.widget_categories li a { background:url(images/widget-marker1.gif) no-repeat 0 6px; text-decoration:none;}
.widget_categories li a { color:#fff; font-weight:bold; padding:0px 0px 0px 19px;}
.widget_categories li a:hover { text-decoration: underline;}

/*** widget_archive ***/
.widget_archive { height:100%; overflow:hidden; margin:0px 0px 12px 0px; background:url(images/widget-bg2.gif) repeat-y 0 0;}
.widget_archive .widget-bg01 { background:url(images/widget-top2.gif) no-repeat 0 0;}
.widget_archive .widget-bg02 { background:url(images/widget-bot2.gif) no-repeat 0 bottom; overflow:hidden; padding:0px 0px 9px 0px;}

.widget_archive .title { height:100%; background: none; margin:0px 0px 0px 0px;}

.widget_archive .title div { background:none;}
.widget_archive .title div div { background:none;}

.widget_archive h2 { background:url(images/widget-title-img2.gif) no-repeat 26px 18px; height:100%; overflow:hidden;}
.widget_archive h2 { font-size:1.2em; color:#fff; padding:19px 10px 25px 55px;}

.widget_archive a { color:#010101; font-size:11px;}
.widget_archive ul { margin:0px 20px 0px 49px; color:#010101; font-size:1em;}
.widget_archive li { background:url(images/widget-marker2.gif) no-repeat 0 5px; padding:0px 0px 14px 16px;}
.widget_archive li a { color:#010101; font-weight:bold;}


#search form { padding:0px 0px 0px 30px;}

.widget-right #search form { padding:0px 0px 0px 0px;}

.widget_calendar table { margin:0px 0px 0px 30px;}

.widget_tag_cloud a { color:#fff;}

.widget table a { color:#fff;}

.textwidget { padding:0px 14px 0px 20px; font-size:1.1em; color:#fff;}

.widget_recent_comments li { padding:0px 0px 8px 12px; background-position:0 5px;}
.widget_recent_comments li a { background: none;}

/*** Content ***/
.column-center { overflow:hidden; height:100%;}

.column-center .border-top { background:url(images/border.gif) repeat-x 0 0 #fff;overflow:hidden; height:100%;}
.column-center .border-bot { background:url(images/border.gif) repeat-x 0 bottom;}
.column-center .border-left { background:url(images/border.gif) repeat-y 0 0;}
.column-center .border-right { background:url(images/border.gif) repeat-y right 0;}

.column-center .corner-left-top { background:url(images/corner-left-top.gif) no-repeat 0 0;}
.column-center .corner-right-top { background:url(images/corner-right-top.gif) no-repeat right 0; }
.column-center .corner-left-bot { background:url(images/corner-left-bot.gif) no-repeat 0 bottom;}
.column-center .corner-right-bot { background:url(images/corner-right-bot.gif) no-repeat right bottom; overflow:hidden; height:100%; padding:16px 24px 13px 25px;}

.column-center .indent { clear:both; /*overflow:hidden;*/ margin:0px 0px 4px 0px; }

/* .column-center .title { background:url(images/title-img.gif) no-repeat right 1px; width:100%; height:100%; overflow:hidden; padding:13px 0px 16px 0px;} */

.column-center .title h2 { font-size: 18.5px; color:#da1065; padding:3px 10px 2px 7px; letter-spacing:.2px;}
.column-center .title h3 { font-size: 1.1em; color:#da1065; padding:3px 50px 2px 7px;}

.column-center .title h2 a, .column-center .title h3 a { color:#da1065; text-decoration:none;}
.column-center .title h2 a:hover, .column-center .title h3 a:hover { text-decoration: none;}

.column-center .title .date { font-size: 11px; blackground-color:#000000; color:#000000; padding:0px 0px 0px 8.5px;}
.column-center .title .author { font-size: 1.1em; color:#3e3e3c; padding:0px 0px 0px 6px;}

.title-page * { font-size: 1.4em; color:#000; padding:1px 50px 12px 0px;}

.text-box { background:url(images/line.gif) repeat-x 0 0; clear:both; font-size:1.1em; line-height:1.7em; padding:9px 11px 0px 7px;}

.text-box .box { float:left; width:294px; margin:14px 0px 0px 0px;}
.text-box .box-mr { margin-right:55px;}

.text-box .fleft img { float:left; margin:-7px 18px 0px 0px;}
.text-box .fleft { float:left; display:inline;}

.text-box p { padding: 3px 15px 10px 1px;}

.column-center .border-bottom { border-bottom:0; padding-bottom:0px;}

.comments a, .link-edit a, .navigation a { font-size:7pt; color:#da1065;}

.comments { clear:both; repeat-x 0 0; padding:-10px -5px -5px -5px; display:block; text-align:right; }
.comments a { font-weight:bold; text-transform:uppercase; text-decoration:none}

.comments a:hover {

.link-edit { clear:both; padding:0px 0px 11px 4px;}

.navigation { color:#575859;}
.navigation a { color:#575859; font-weight:bold; text-transform:uppercase;}

/*** OL UL style***/
.text-box ul { padding:2px 0px 11px 2px;}
.text-box ul li { background:url(images/widget-marker2.gif) no-repeat 0 5px; padding:0px 0px 7px 20px; list-style-image:none; list-style:none; font-weight:normal;}
.text-box ul li ul { margin-left:10px;}
.text-box ul li ol { margin-left:15px;}
.text-box ul li ol li { list-style-type:decimal;}

.text-box ol { padding-left:2px;}
.text-box ol li { background:none; padding:0px; margin-left:13px; font-weight:normal;}
.text-box ol li ul li { font-weight:normal;}

.text-box ul li { list-style-image:none; list-style:none;}
.text-box ul li a {}
.text-box ul li a:hover {}
.text-box ul li ul { margin-left:15px;}
.text-box ul li ol {margin-left:20px;}
.text-box ul li ol li { list-style-type:decimal;}
.text-box ul li ol li a { background:none;}

.text-box ol { padding:5px 0px 5px 2px;}
.text-box ol li{ background:none; padding:0px; margin-left:20px;}
.text-box ol li a { padding-left:0px; text-decoration:none; font-weight:normal;}
.text-box ol li a:hover{ text-decoration:underline; }
.text-box ol li ul li a { font-weight:normal; text-decoration:underline;}
.text-box ol li ul li a:hover {text-decoration:none;}

/*** Footer ****/

.footer { clear:both; height:100%; color:#686868; overflow:hidden; font-size:1.1em; line-height:1.3em;}
.footer .indent { overflow:hidden; padding:47px 0px 40px 16px;}
.footer a { color:#0cbafa;}

/* -----------------------------------------------------------------
---------------------------- WP ------------------------------------
----------------------------------------------------------------- */

.info-sidebar { padding:0px 10px 15px 22px; border:0; width: auto; color:#fff; overflow: hidden; font-size:1.2em; line-height:1.4em;}
.info-sidebar a { text-transform:none;}

.pagetitle { font-size:2.1em; font-weight: normal; overflow:hidden; color: #000; text-align:center; padding:0px 0px 10px 0px;/* margin:0px 0px -20px 0px;*/}

/*--- Navigations ---*/
.navigation { padding:5px 0px 6px 0px; clear:both; width:100%; overflow:hidden;}
.navigation .alignleft { float: left; width:45%; text-align:left; padding:0px 0px 0px 0px;}
.navigation .alignright { float: right; width:45%; text-align:right; padding:0px 0px 0px 0px;}

.pd-nav { padding:0; margin:0;}
.pd-nav .alignleft { padding:0; margin:0;}
.pd-nav .alignright { padding:0; margin:0;}

.pd-title {padding-bottom:0;}

.marg { margin-bottom:10px;}

/*--- Begin Images ---*/
p img {
padding: 0;
max-width: 100%;}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;}

img.alignright { float: right;display:inline;
padding: 0;
margin: 3px 0px 10px 20px;}

img.alignleft { padding: 0; margin: 3px 25px 5px 0; float:left; display:inline;}

.postmetadata { font-size:1.2em; clear:both; padding:12px 0px 10px 2px;}
.postmetadata a {/*color:#3B7ECC;*/}
.postmetadata a:hover {text-decoration:none;}

#tag_cloud .widget-bottom-left {padding-bottom:15px;}
#tag_cloud .widget-heading {margin-bottom:15px;}
#tag_cloud a {padding-left:3px;}

/*--- Popup styles ---*/
#commentspopup {}
#commentspopup #header {background:#2F3F99 url(images/popup_header_bg.gif) top repeat-x;}
#commentspopup .page-padding {padding:0 5px;}
#commentspopup .page-width {width:538px; margin:0 auto;}
#commentspopup .header-top {background:url(images/popup_header_bg_top.jpg) top repeat-x;}
#commentspopup .header-top-right {background:url(images/popup_header_bg_top_right.jpg) top right no-repeat;}
#commentspopup .header-top-left {background:url(images/popup_header_bg_top_left.jpg) top left no-repeat; width:100%; height:160px;}
#commentspopup .header-padding {padding:39px 0 0 89px;}
#commentspopup h1 {font-size:1em; margin:0; padding:0; color:#E1E7EC; text-indent:-10000em; width:141px; height:27px;}
#commentspopup h1:hover {text-decoration: none; cursor:pointer;}
#commentspopup .description {width:141px; height:9px; text-indent:-10000em; margin-top:2px;}
#commentspopup .description2 {width:249px; height:27px; text-indent:-10000em; margin-top:19px;}
#commentspopup .border-bottom-left {padding:17px 37px 10px;}
#commentspopup p {font-size:12px;}

/*--- Begin Typography & Colors ---*/
small { font-size: 1em; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}
small * {font-size: 0.9em;}
small p {font-size: 1.9em;}

select { width: 130px;}

#commentform {font-size:1.2em;}

#commentform input {
margin: 5px 5px 1px 0;}

#commentform {
margin: 5px 10px 0 0;}

#commentform textarea {
width: 100%;
padding: 2px;}

#respond:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}

#commentform #submit {
margin: 0 0 10px auto;
float: right;}

#respond p { padding:0px 0px 10px 0px; text-indent:0;}
#respond form p { padding:0px 0px 10px 0px; text-indent:0;}

/*--- Begin Calendar ---*/
#wp-calendar { empty-cells:show; width: 155px; font-size:1.1em;}

#wp-calendar th { padding:3px 0; text-align:center; color:#fff;}
#wp-calendar td { padding:3px 0; text-align:center; color:#fff;}

#wp-calendar a { display: block; font-weight:bold;}
#wp-calendar #next a { padding-right: 10px; text-align: right; font-weight: normal;}
#wp-calendar #prev a { padding-left: 10px;text-align: left; font-weight: normal;}

#wp-calendar caption { text-align: center; color:#fff; font-weight:bold; font-size:1.3em; padding:0px 0px 6px 0px;}

/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
cursor: help;

acronym, abbr {
border-bottom:1px dashed #999;

blockquote {
border:1px solid #000;
background:#2d3134; padding:15px 10px 10px 20px; margin:5px 0; color:#fff;

blockquote cite {
margin: 5px 0 0;
display: block;

/* Captions */
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;}

/* Begin Comments*/
.alt { padding: 10px; font-size:1.2em; padding:0px 20px 0px 0px;}

.commentlist {/* font-size:1.2em;*/ color:#fff;
/*padding:0px 18px 0px 20px;*/
text-align: justify;
.commentlist a {}
.commentlist span { color:#fff;}

ol.commentlist li {
margin:6px 0px 6px 0px;
padding: 5px 10px 3px;
/*list-style: none;*/
border:1px solid #000;

.commentlist li .avatar {
float: right;
border: 1px solid #eee;
padding: 2px;
background: #fff; /*margin:0px 20px 15px 0px;*/

.commentlist p { font-size:1.2em; color:#fff;
margin: 10px 5px 10px 0;

#commentform p {
margin: 5px 0;

.nocomments {
text-align: center;
margin: 0;
padding: 0;

.commentmetadata {
margin: 0;
display: block;

12-20-2010, 05:00 PM
1. Move the Share buttons to the right like 5pxs.

Like 5px? This will move them exactly 5px:

.text-box p {
padding: 3px 10px 10px 1px;

2. Move the start of the widget's title text to left more, so it left aligned better.

.widget h2 {
color: #0CBAFA;
font-size: 1.2em;
padding: 14px 10px 15px 20px;

12-20-2010, 05:03 PM
You should download and use Firebug religiously. Its free and will help you not only with learning html and css, but it will also help you spot this issues/fixes much easier.