homepage Welcome to WebmasterWorld Guest from 23.21.9.44
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
How to make my blog wider?
css to widen blog
jringo




msg:3978836
 1:22 pm on Aug 26, 2009 (gmt 0)

I am working on my wife's blog and would like to change the width of the post area to accommodate a pre-coded html flyer she can make about her listed real estate properties. I don't want her to have to modify the html every time, so I am trying to make the blog post area wider to get it to fit.

I know enough about css to change some colors and modify the images, but I cannot figure out how to make it wider.

The site is <snip>, I have a sample of the html coded flyer in there so you can see the width problem.

/*
Theme Name: example
Theme URI: http://example.com/
Description: <a href="http://example.com/free-themes/" title="example Theme">example</a> is a free wordpress theme, released by <a href="http://example.com" title="WordPress Theme Shop" target="_blank">WordPress Theme Shop</a>.
Version: 1.0
Author: name here
Author URI: http://example.com
*/

/* Elements */
*
{
margin:0;
padding:0;
}
body {
margin: 0;
padding: 0;
background:#ffffff;
font-family: Verdana,Tahoma, Arial, Serif;
line-height: 1.5em;
font-size: 10px; /* IE5 Win */
voice-family: "\"}\"";
voice-family: inherit;
font-size: 10px; /* easy scaling */
font-size: 0.76em;
color: #333;
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-family:Georgia, Tahoma, Verdana, Arial, Serif;
font-weight:normal;
color: #046BE5;
}

p, blockquote, ul, ol {
margin-top: 0;
padding-top: 0;
margin-bottom:0.5em;
}
p
{
line-height:1.8em;
}

a:link, a:visited {
color: #191970;
text-decoration:none;
border-bottom:#c96 1px dotted;
}
a:hover,a:active
{
color:#960;
text-decoration:none;
}
img.left
{
float:left;
margin:0 1em 1em 0;
}
img.right
{
float:right;
margin:0 0 1em 1em;
}
a img
{
border:0;
padding-bottom:2px;
border-bottom:1px dashed;
}
blockquote
{
margin:1em;
padding:0 2em;
background:url(img/quote.gif) no-repeat left top;
color:#666;
font-style:italic;
}
fieldset
{
border:none;
}

dl {
margin:1em 0px;
}
dt
{
font-weight:bold;
}
dd
{
margin:0.5em 1em;
padding:0;
}
/* Header */

#header {
width: 900px;
margin: 0 auto;
background:transparent;
}

/* Logo */

#logo {
padding-left:10px;
}

#logo h1{
padding: 10px 0;
font-size: 1.8em;
font-variant:small-caps;
}
#logo h2 {
padding: 0;
font-size: 1em;
color:#333;
}

#logo a {
text-decoration: none;
color:#333;
border:0;
}
#logo a:hover
{
text-decoration:underline;
}
/* Menu */

#menu {
text-align:right;
padding:10px 0 0;
height:30px;
line-height:30px;
font-family:Tahoma, Verdana, Arial, Serif;
}

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

#menu li {
display: inline;
}

#menu a
{
padding:8px 16px;
text-decoration: none;
font-variant:small-caps;
font-size: 1em;
background:#789;
border:0;
color:#eee;
}
#menu a:hover,
#menu a:active,
#menu li.current_page_item a:link,
#menu li.current_page_item a:visited,
#menu li.current_page_item a:hover,
#menu li.current_page_item a:active
{
background:#456;
color:#fff;
border:0;
}

/* Splash */

#splash {
background:url(img/header.jpg) no-repeat center;
height:180px;
width:900px;
margin:10px auto;/*Splash's redeclared in functions.php for WP 2.1 or greater */
}

/* Main */

#main {
width: 900px;
margin: 0 auto;
background:#fff;
border:#ddd 0px solid;
}

#main h2 {
padding: 4px;
font-size: 1.6em;
line-height:1.2em;
border-bottom:#ddd 1px solid;
}
#main h3 {
padding: 4px;
font-size: 1.4em;
line-height:1.2em;
border-bottom:#ddd 1px solid;
}
#main h2 a
{
border:0;
color:#046BE5;
}
#content ul {
margin: 0.5em 0;
padding: 0 0 0 2em;
list-style-type:none;
}
#content ul li
{
margin:0.75em 0;
padding:0;
list-style-image:url(img/arrows.gif);
line-height:1.8em;
}
#main ol
{
margin:0;
padding:0 0 0 3em;
}
#main ol li
{
margin:0;
padding:3px;
}
#main .post
{
margin-bottom:3em;

}
#main .entry
{
clear:both;
padding: 10px 5px;
}
.post .date {
float: right;
margin:5px 0 0 5px;
padding:0 10px;
text-align:center;
font-size: 0.8em;
border:#ccc 1px solid;
font-weight:bold;
background:url(img/ribbed.gif) repeat;
color:#556677;
font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Serif;
}
.post .date span
{
display:block;
}
.post .date .day
{
font-size:1.6em;
}
.post .meta {
margin-bottom: 10px;
padding-left: 5px;
font-size: 0.9em;
color:#999;
}
.post .comments
{
font-size:0.9em;
border-bottom:#ccc 1px dotted;
color:#999;
margin-left:5px;
padding-left:15px;
background:url(img/icon_comments.gif) no-repeat left center;
}
.post .comments a
{
border-bottom:0px;
}
#main .feed
{
background:url(img/icon_feed.gif) no-repeat left 3px;
padding-left:17px;
}
ul.authorposts
{
margin:0;
padding:0 2em;
}
ul.authorposts li
{
margin:0;
padding:5px;
}
ul.authorposts li em
{
float:right;
font-style:normal;
}
/* Content */

#content {
float: left;
width: 470px;
padding:10px;
}
/* Column Two */

#sidebar1 {
float: left;
width: 175px;
padding: 10px;
font-size:0.9em;
margin:5px;
}
/* Column Three */

#sidebar2 {
float: left;
width: 160px;
padding: 10px;
font-size:0.9em;
margin:5px;
}
#main .sidecol
{
border-left:#ccc 1px dotted;
}
#main .sidecol ul
{
margin:0;
padding:0;
}
#main .sidecol li
{
margin:0;
padding:0;
list-style:none;
background:none;
margin-bottom:2em;
}
#main .sidecol h2
{
padding: 0 0 5px;
font-variant:small-caps;
font-size:1.25em;
}
#main .sidecol p, #main .sidecol form
{
padding:10px;
margin:0;
}
#main .sidecol ul ul
{
margin:10px 0 0 20px;
padding:0;
}
#main .sidecol ul ul ul
{
margin:0px 0 0 10px;
padding:0;
}
#main .sidecol li li
{
list-style-image:url(img/bullet.jpg);
margin:0.5em 0;
padding:0;

}
/* Begin Calendar */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
text-decoration:none;
}
#wp-calendar #today
{
border:#999 1px solid;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

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

#wp-calendar td.pad:hover { /* Doesn't work in IE */
background-color: #fff; }
/* End Calendar */
/* Comments */
input.textbox
{
border:#ccc 1px solid;
background:#f9f9f9;
font:1em Verdana, Arial, Serif;
padding:5px;
width:150px;
}
textarea{
width: 95%;
padding:5px;
height: 20em;
border: 1px solid #ccc;
background:#f9f9f9;
font:1em Verdana, Arial, Serif;
}
input.textbox:focus, textarea:focus
{
background:#fff;
border:#999 1px solid;
}
#commentform
{
margin:0;
padding:10px;
background:#fff;
}
#main .commentlist {
margin: 0;
padding: 0;
}
#main .commentlist li
{
list-style:none;
margin: 0;
padding: 1em;
border-bottom:#ddd 1px solid;
font-size:0.9em;
}
#main .commentlist li .cmtinfo
{
padding:5px;
margin-bottom: 5px;
position:relative;
}
#main .commentlist li .cmtinfo em
{
margin:0;
padding:0 1em;
font-weight:normal;
font-style:normal;
color:#999;
}
#main .commentlist li cite
{
font-style:normal;
font-weight:bold;
font-size:1.1em;
}
#main .commentlist li.alt
{
background:#f9f9f9;
}
#main .commentlist li.authorcomment
{
border:none;
border:#b0c4de 1px solid;
}
#main .nocomments
{
font-size:0.9em;
color:#999;
text-align:center;
}
#main .avatar
{
float:right;
margin:0 0 0.5em 0.5em;
}
/* Footer */

#footer {
margin: 5px auto 0;
padding:0 15px;
width:870px;
background: #333;
border:#ccc 3px solid;
}

#footer p {
margin: 0;
padding: 7px;
font-size: 0.9em;
color: #696;
}
#footer p span
{
float:right;
}
#footer a:link, #footer a:visited {
color: #696;
border:0;
}
#footer a:hover, #footer a:active,#footer p strong {
color: #eee;
text-decoration:none;
border:0;
}
#header, #main, #sidebar, #footer, .widget
{
overflow:hidden;
}

[edited by: engine at 5:13 pm (utc) on Aug. 26, 2009]
[edit reason] examplified [/edit]

 

D_Blackwell




msg:3978938
 3:28 pm on Aug 26, 2009 (gmt 0)

Welcome to WebmasterWorld. Personal links are not allowed and will get axed. The code dump is not helpful to getting helped or learning. I've looked at the page/code, and the issue is simple enough. I recommend that you strip down the page by commenting out code until you are actually looking at only the problem. If the question does not answer itself in this process, then post the relevant code needed to replicate the problem.

Wlauzon




msg:3980076
 3:53 pm on Aug 28, 2009 (gmt 0)

Just a comment, but that looks like a pretty ancient style sheet, judging from the IE5 hacks...

I would look around for something newer, there are tons of free themes around for WordPress that are a lot more up to date and support newer browsers.

And there are probably some designed just for real estate blogs.

tangor




msg:3980104
 4:34 pm on Aug 28, 2009 (gmt 0)

You'll need to change the underlying code for the BLOG to get where you want to go. Are you using a hosted blog site or is a DIY?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved