How Do I Make My Blog Accessible For 1024 x 768 Users?

Discussion in 'Blogging' started by Shadowplay, Dec 21, 2007.

0
  1. #1
    Blog
    Big Talk And Gun Smoke


    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. The wrap div is set at 900px. Isn't that the one controlling the width of the page?

    What page size is a good one to use for this demographic and how do I change it for my site?


    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
{
background:#253C4E top repeat;
height:200px;
margin:0;
padding:0;
width:100%;
}

.header_logo
{
background: url(images/logo.gif) no-repeat top center;
position: center;
height: 200px;
width: 900px;
}

#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 21, 2007 IP
  2. just-4-teens

    just-4-teens Peon

    Messages:
    3,967
    Likes Received:
    168
    Best Answers:
    0
    Trophy Points:
    0
    #2
    make the width of the blog fluid (use % and not px)
     
    just-4-teens, Dec 23, 2007 IP