Need CSS Help For Blog

Discussion in 'CSS' started by Shadowplay, Dec 22, 2007.

0
  1. #1
    Problem #1:
    I know CSS pretty well, but for some reason I can't figure out why the site is displaying at the current size, too big for a 1024 x 768 user. I think the problem likes in the comments section being too far to the right. I'd like to push it to the left which will bring the sidebar along with it. How do I do this and get rid of the double scroll bar for the 1024 x 768 crowd?


    Problem #2:
    How do I center both images in my header wrap div, so together they are centered at the top with the background of the header wrap div filling to the left and the right when the viewport is expanded?



    Blog
    http://bigtalkandgunsmoke.com


    CSS
    /*
	Theme Name: SpotLight
	Description: Light theme created by <a href="http://vaguedream.com" target="_blank">Stephen Reinhardt</a> Modified by <a href="http://themecorp.com/themes/spotlight/" title="SpotLight" target="_blank">Sadish Bala</a>.
	Version: 1.3	
	Author: Sadish Bala
	Author URI: http://themecorp.com
*/
* {
margin:0;
padding:0;
}

body 
{
	background-color:#fff;
	color:#333;
	font-family: Verdana,'Trebuchet MS','Lucida Grande', Arial, sans-serif;
	font-size:small;
	margin:0;
	padding:0;
	font-size:0.76em;
}
p 
{
	line-height:1.8em;
	margin:0.5em 0;
}
a:link, a:visited 
{
	color:#459045;
	text-decoration:none;
	border-bottom:none;
}
a:hover, a:active 
{
	text-decoration:none;
	border-bottom: 1px solid;
}
fieldset 
{
	border:none;
}
code 
{
	background-color:#eee;
	border:1px solid #ccc;
	padding:5px;
}
h1,h2,h3,h4,h5,h6 
{
	font-family:Georgia, Tahoma, Arial, Serif;
	font-weight:normal;
	line-height:1.6em;
}
h2, h3 {
font-size:1.6em;
margin:10px 0;
}

h4 {
font-size:1.3em;
}
ul 
{
	list-style-image:url(images/arrow.gif);
	margin:5px 10px;
	padding:1em;
}
li 
{
	line-height:1.6em;
	margin-bottom:0.5em;
}
img 
{
	background:url(images/shadow.gif) no-repeat right bottom;
	padding:4px 10px 10px 4px;	
	border:none;
	border-top:#eee 1px solid;
	border-left:#eee 1px solid;	
}
a img {
	border:none;
	background:none;
	padding:none;
	background:url(images/shadow.gif) no-repeat right bottom;
	padding:4px 10px 10px 4px;	
	border-top:#eee 1px solid;
	border-left:#eee 1px solid;	
}
img.wp-smiley 
{
	border:none;
	padding:0;
	background:none;
}
img.right 
{
	float: right;
	margin:10px 0 0 10px;	
}
img.left 
{
	float: left; 
	margin:0 10px 10px 0;
}

#wrap 
{
	overflow:hidden;
	padding-left:10px;
	padding-right:10px;
	position:relative;
	width:900px;
	margin:0 auto;
}

/*
#header_right
{
background:#253C4E top repeat;
height:200px;
margin:0;
padding:0;
width:100%;
z-index:-1;
}
*/

.header_wrap
{
background:#253C4E top left repeat;
height:200px;
width:100%;
margin:0; auto;
padding:0;
}


.header_title
{
background: url(images/title.gif) no-repeat;
position:center;
height: 200px;
width: 440px;
text-align:center;
}


.header_logo
{
background: url(images/logo.gif) no-repeat;

height: 200px;
width: 471px;
margin-left:440px;
}


/*  #########################################

#logo
{
height:200px;
width:900px;
margin:0 auto;
} 

*/ #########################################


#blogname {
height:30px;
padding-left:12px;
padding-top:28px;
text-align:left;
}

h1#blogname a {
color:#fff;
font-size:1.3em;
}

.description {
color:#CAE972;
font-size:1em;
font-style:italic;
padding-left:12px;
text-align:left;
margin:5px 0 0;
}

#content 
{
	display:inline;
	float:left;
	text-align:left;
	width:65%;
	margin:2%;
	padding:0;
}
#sidebar 
{
	display:inline;
	float:right;
	padding-top:5px;
	width:25%;
	margin:5px 0px 20px 0;
	padding-left:20px;
	border-left:#ddd 1px dashed;
	font-size:90%;
}
#sidebar ul#feed li 
{
	list-style:none;
	margin:0;
	padding:5px 20px;
	background:url(images/feed-icon.png) no-repeat left ;
}
#sidebar h2 
{
	border-bottom:#eed 3px double;
	font-size:18px;
	color:#459045;
	letter-spacing:0;
	margin:0;
	padding:5px 0;
}
#sidebar p 
{
	margin:10px 0;
}

#sidebar ul, #sidebar form 
{
	margin:2px 0;
	padding:5px 10px;
}
#sidebar ul ul ul 
{
	margin:2px 0;
	padding:0 0 0 10px;
}
#sidebar li.sidebox 
{
	margin:0 0 2em 0;
	padding:0;
}
#sidebar li{
margin:3px 0;
line-height:1.8em;
list-style:none;
}

#sidebar ul li a {
color:#516F86;
}
#footer {
background:#223344 url(images/top_gradient.gif) bottom repeat-x;
clear:both;
height:100px;
padding:10px;
text-align:center;
margin:0 auto;
color:#ccc;
}

ol#commentlist {
list-style:none;
margin:5px 0;
padding:0;
}

.commentname {
color:#4b5ba2;
}

.commentname a {
color:#333;
font:bold 110% "Trebuchet MS", "Lucida Grande", verdana, helvetica, arial, sans-serif;
text-decoration:underline;
}

.commenttext 
{
	margin:5px 0 0 0;
	background:#ffe;
	border-left:#ccc 3px double;
}
.alt .commenttext 
{
	background:#f0f0ee;
	border-left:#ccc 3px double;
}

* html .commenttext {
height:90px;
overflow:visible;
}
input.textbox
{
	border:#ccc 1px solid;
	background:#fff url(images/postbg.jpg) repeat-y top left;
	font:1em Verdana, Arial, Serif;
	padding:2px 5px;
	width:150px;
}
textarea{
	width: 90%;
	padding:5px;
	height: 20em;
	border: 1px solid #ccc;	
	background:#fff url(images/postbg.jpg) repeat-y top left;
	font:1em Verdana, Arial, Serif;
}
input.textbox:focus, textarea:focus
{
	border:#999 1px solid;
}

.commentp {
padding:20px 12px 10px 10px;
}

.commenttext p {
margin:0 0 10px;
padding:0;
}

#commentblock ol li {
margin-bottom:30px;
}

#commentblock {
margin-left:4px;
}

.gravatar {
background:url(images/grav.png) no-repeat;
display:inline;
float:left;
height:32px;
width:32px;
margin:20px 0 0 10px;
padding:8px;
}

#commentsform p {
margin-bottom:5px;
margin-top:5px;
}
h3.entrytitle,h3 {
color:#1e2546;
display:block;
font-size:1.5em;
margin:0;
}

h3 a:link,h3 a:visited,h3 a:hover,h3 a:active {
color:#1e2546;
}
.entry {
margin:10px 0;
padding:15px 0;
border-bottom:#eed 3px double;
}
.entrybody 
{
	margin:1em 0;
	padding:0;
}

.entrybody a:link,.entrybody a:visited {
	border-bottom:1px dashed;
}

.entrybody a:active,.entrybody a:hover {
	border-bottom:1px solid;
}
.entrymeta {
color:#999;
margin:0;
padding:0;
font-size:90%;
}
.entrymeta .comments 
{
	background:url(images/comments.gif) no-repeat left center;
	padding-left:15px;
}
h2.archives {
background-color:#FFC;
color:#999;
font-style:italic;
margin-bottom:25px;
text-align:center;
}

.entrymeta-single {
color:#333;
margin-bottom:20px;
margin-top:3px;
}
.entrybody ul,.entrybody ol 
{
	margin:10px 0 10px 30px;
}
.entry li
{
	line-height:1.6em;
}
table {
margin:10px;
}
td,th {
padding:3px;
}
blockquote
{
	color:#666;
	margin: 1em;
	padding: 0 0 10px 50px;
	background: url(images/blockquote.gif) no-repeat left top;	
}
#navigation 
{
	clear:both;
	height:24px;
	margin:0 auto;
	padding:0 10px;
	text-align:center;
	width:880px;
	font-size:1.1em;
}

#navigation a:link,
#navigation a:visited 
{
	background:#FFF url(images/active1.gif) left bottom no-repeat;
	color:#787878;
	height:24px;
	margin-right:2px;
	padding-left:12px;
	text-decoration:none;
	border:none;
}

#navigation a:link,
#navigation a:link span,
#navigation a:visited,
#navigation a:visited span 
{
	cursor:hand;
	display:block;
	float:left;
	border:none;
}

#navigation li 
{
	line-height:23px;
	float:left;
	list-style:none;
	margin:0;
}

#navigation a:hover 
{
	background:url(images/active1.gif) left bottom no-repeat;
	color:#040;
	height:24px;
	padding-left:12px;
	text-decoration:none;
	border:none;
}

#navigation .current_page_item a:link,
#navigation .current_page_item a:visited 
{
	background:#FFF url(images/current1.gif) left bottom no-repeat;
	color:#AAC8E0;
	height:27px;
	line-height:24px;
	margin-right:2px;
	padding-left:15px;
	text-decoration:none;
	border:none;
}

#navigation .current_page_item a:hover 
{
	background:#FFF url(images/current1.gif) left bottom no-repeat;
	color:#AAC8E0;
	height:27px;
	margin-right:2px;
	padding-left:15px;
	text-decoration:none;
	border:none;
}

#navigation ul 
{
	list-style:none;
	margin:0;
	padding:0;
}

h3,#commentblock h2 {
font-size:140%;
}
#navigation a:link span,
#navigation a:visited span,
#navigation a:hover span 
{
	background:url(images/active2.gif) right bottom no-repeat;
	height:24px;
	padding-right:12px;
	border:none;
}

#navigation .current_page_item a:link span,
#navigation .current_page_item a:visited span,
#navigation .current_page_item a:hover span 
{
	background:url(images/current2.gif) right bottom no-repeat;
	height:27px;
	padding-right:15px;
	border:none;
}
    Code (markup):
     
    Shadowplay, Dec 22, 2007 IP
  2. reject

    reject Peon

    Messages:
    80
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    #wrap
    {
    overflow:hidden;
    padding-left:10px;
    padding-right:10px;
    position:relative;
    width:900px;
    margin:0 auto;
    }

    #logo
    {
    height:200px;
    width:900px;
    margin:0 auto;
    }

    maybe its to big :)
     
    reject, Dec 22, 2007 IP
  3. Shadowplay

    Shadowplay Peon

    Messages:
    394
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Okay, I changed that width to 800px and that helped but I still need to move the entire "post" area which I think is the "content div", to the left so the Google Ads aren't hanging off the right edge.

    How do I shift both the content area and right sidebar to the left?


    CSS
    /*
	Theme Name: SpotLight
	Description: Light theme created by <a href="http://vaguedream.com" target="_blank">Stephen Reinhardt</a> Modified by <a href="http://themecorp.com/themes/spotlight/" title="SpotLight" target="_blank">Sadish Bala</a>.
	Version: 1.3	
	Author: Sadish Bala
	Author URI: http://themecorp.com
*/
* {
margin:0;
padding:0;
}

body 
{
	background-color:#fff;
	color:#333;
	font-family: Verdana,'Trebuchet MS','Lucida Grande', Arial, sans-serif;
	font-size:small;
	margin:0;
	padding:0;
	font-size:0.76em;
}
p 
{
	line-height:1.8em;
	margin:0.5em 0;
}
a:link, a:visited 
{
	color:#459045;
	text-decoration:none;
	border-bottom:none;
}
a:hover, a:active 
{
	text-decoration:none;
	border-bottom: 1px solid;
}
fieldset 
{
	border:none;
}
code 
{
	background-color:#eee;
	border:1px solid #ccc;
	padding:5px;
}
h1,h2,h3,h4,h5,h6 
{
	font-family:Georgia, Tahoma, Arial, Serif;
	font-weight:normal;
	line-height:1.6em;
}
h2, h3 {
font-size:1.6em;
margin:10px 0;
}

h4 {
font-size:1.3em;
}
ul 
{
	list-style-image:url(images/arrow.gif);
	margin:5px 10px;
	padding:1em;
}
li 
{
	line-height:1.6em;
	margin-bottom:0.5em;
}
img 
{
	background:url(images/shadow.gif) no-repeat right bottom;
	padding:4px 10px 10px 4px;	
	border:none;
	border-top:#eee 1px solid;
	border-left:#eee 1px solid;	
}
a img {
	border:none;
	background:none;
	padding:none;
	background:url(images/shadow.gif) no-repeat right bottom;
	padding:4px 10px 10px 4px;	
	border-top:#eee 1px solid;
	border-left:#eee 1px solid;	
}
img.wp-smiley 
{
	border:none;
	padding:0;
	background:none;
}
img.right 
{
	float: right;
	margin:10px 0 0 10px;	
}
img.left 
{
	float: left; 
	margin:0 10px 10px 0;
}

#wrap 
{
	overflow:hidden;
	padding-left:10px;
	padding-right:10px;
	position:relative;
	width:800px;
	margin:0 auto;
}


.header_wrap
{
background:#253C4E top left repeat;
height:200px;
width:100%;
margin:0; auto;
padding:0;
}


.header_title
{
background: url(images/title.gif) no-repeat;
position:center;
height: 200px;
width: 440px;
text-align:center;
}


.header_logo
{
background: url(images/logo.gif) no-repeat;
height: 200px;
width: 471px;
margin-left:440px;
}


#blogname {
height:30px;
padding-left:12px;
padding-top:28px;
text-align:left;
}

h1#blogname a {
color:#fff;
font-size:1.3em;
}

.description {
color:#CAE972;
font-size:1em;
font-style:italic;
padding-left:12px;
text-align:left;
margin:5px 0 0;
}

#content 
{
	display:inline;
	float:left;
	text-align:left;
	width:65%;
	margin:1%;
	padding:0;
}
#sidebar 
{
	display:inline;
	float:right;
	padding-top:5px;
	width:25%;
	margin:5px 0px 20px 0;
	padding-left:20px;
	border-left:#ddd 1px dashed;
	font-size:90%;
}
#sidebar ul#feed li 
{
	list-style:none;
	margin:0;
	padding:5px 20px;
	background:url(images/feed-icon.png) no-repeat left ;
}
#sidebar h2 
{
	border-bottom:#eed 3px double;
	font-size:18px;
	color:#459045;
	letter-spacing:0;
	margin:0;
	padding:5px 0;
}
#sidebar p 
{
	margin:10px 0;
}

#sidebar ul, #sidebar form 
{
	margin:2px 0;
	padding:5px 10px;
}
#sidebar ul ul ul 
{
	margin:2px 0;
	padding:0 0 0 10px;
}
#sidebar li.sidebox 
{
	margin:0 0 2em 0;
	padding:0;
}
#sidebar li{
margin:3px 0;
line-height:1.8em;
list-style:none;
}

#sidebar ul li a {
color:#516F86;
}
#footer {
background:#223344 url(images/top_gradient.gif) bottom repeat-x;
clear:both;
height:100px;
padding:10px;
text-align:center;
margin:0 auto;
color:#ccc;
}

ol#commentlist {
list-style:none;
margin:5px 0;
padding:0;
}

.commentname {
color:#4b5ba2;
}

.commentname a {
color:#333;
font:bold 110% "Trebuchet MS", "Lucida Grande", verdana, helvetica, arial, sans-serif;
text-decoration:underline;
}

.commenttext 
{
	margin:5px 0 0 0;
	background:#ffe;
	border-left:#ccc 3px double;
}
.alt .commenttext 
{
	background:#f0f0ee;
	border-left:#ccc 3px double;
}

* html .commenttext {
height:90px;
overflow:visible;
}
input.textbox
{
	border:#ccc 1px solid;
	background:#fff url(images/postbg.jpg) repeat-y top left;
	font:1em Verdana, Arial, Serif;
	padding:2px 5px;
	width:150px;
}
textarea{
	width: 90%;
	padding:5px;
	height: 20em;
	border: 1px solid #ccc;	
	background:#fff url(images/postbg.jpg) repeat-y top left;
	font:1em Verdana, Arial, Serif;
}
input.textbox:focus, textarea:focus
{
	border:#999 1px solid;
}

.commentp {
padding:20px 12px 10px 10px;
}

.commenttext p {
margin:0 0 10px;
padding:0;
}

#commentblock ol li {
margin-bottom:30px;
}

#commentblock {
margin-left:4px;
}

.gravatar {
background:url(images/grav.png) no-repeat;
display:inline;
float:left;
height:32px;
width:32px;
margin:20px 0 0 10px;
padding:8px;
}

#commentsform p {
margin-bottom:5px;
margin-top:5px;
}
h3.entrytitle,h3 {
color:#1e2546;
display:block;
font-size:1.5em;
margin:0;
}

h3 a:link,h3 a:visited,h3 a:hover,h3 a:active {
color:#1e2546;
}
.entry {
margin:10px 0;
padding:15px 0;
border-bottom:#eed 3px double;
}
.entrybody 
{
	margin:1em 0;
	padding:0;
}

.entrybody a:link,.entrybody a:visited {
	border-bottom:1px dashed;
}

.entrybody a:active,.entrybody a:hover {
	border-bottom:1px solid;
}
.entrymeta {
color:#999;
margin:0;
padding:0;
font-size:90%;
}
.entrymeta .comments 
{
	background:url(images/comments.gif) no-repeat left center;
	padding-left:15px;
}
h2.archives {
background-color:#FFC;
color:#999;
font-style:italic;
margin-bottom:25px;
text-align:center;
}

.entrymeta-single {
color:#333;
margin-bottom:20px;
margin-top:3px;
}
.entrybody ul,.entrybody ol 
{
	margin:10px 0 10px 30px;
}
.entry li
{
	line-height:1.6em;
}
table {
margin:10px;
}
td,th {
padding:3px;
}
blockquote
{
	color:#666;
	margin: 1em;
	padding: 0 0 10px 50px;
	background: url(images/blockquote.gif) no-repeat left top;	
}
#navigation 
{
	clear:both;
	height:24px;
	margin:0 auto;
	padding:0 10px;
	text-align:center;
	width:880px;
	font-size:1.1em;
}

#navigation a:link,
#navigation a:visited 
{
	background:#FFF url(images/active1.gif) left bottom no-repeat;
	color:#787878;
	height:24px;
	margin-right:2px;
	padding-left:12px;
	text-decoration:none;
	border:none;
}

#navigation a:link,
#navigation a:link span,
#navigation a:visited,
#navigation a:visited span 
{
	cursor:hand;
	display:block;
	float:left;
	border:none;
}

#navigation li 
{
	line-height:23px;
	float:left;
	list-style:none;
	margin:0;
}

#navigation a:hover 
{
	background:url(images/active1.gif) left bottom no-repeat;
	color:#040;
	height:24px;
	padding-left:12px;
	text-decoration:none;
	border:none;
}

#navigation .current_page_item a:link,
#navigation .current_page_item a:visited 
{
	background:#FFF url(images/current1.gif) left bottom no-repeat;
	color:#AAC8E0;
	height:27px;
	line-height:24px;
	margin-right:2px;
	padding-left:15px;
	text-decoration:none;
	border:none;
}

#navigation .current_page_item a:hover 
{
	background:#FFF url(images/current1.gif) left bottom no-repeat;
	color:#AAC8E0;
	height:27px;
	margin-right:2px;
	padding-left:15px;
	text-decoration:none;
	border:none;
}

#navigation ul 
{
	list-style:none;
	margin:0;
	padding:0;
}

h3,#commentblock h2 {
font-size:140%;
}
#navigation a:link span,
#navigation a:visited span,
#navigation a:hover span 
{
	background:url(images/active2.gif) right bottom no-repeat;
	height:24px;
	padding-right:12px;
	border:none;
}

#navigation .current_page_item a:link span,
#navigation .current_page_item a:visited span,
#navigation .current_page_item a:hover span 
{
	background:url(images/current2.gif) right bottom no-repeat;
	height:27px;
	padding-right:15px;
	border:none;
}
    Code (markup):
     
    Shadowplay, Dec 23, 2007 IP
  4. Shadowplay

    Shadowplay Peon

    Messages:
    394
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Anyone? I really need help with both of these problems!
     
    Shadowplay, Dec 26, 2007 IP