How to stretch out site with breaking it??

Hi Guys.....

How would I be able to stretch out site to fit full viewing page without breaking template? I know I need to expand the css file width.....but are these numbers supposed to add up to each other?.....not sure which width #'s i need to expand.....any thoughts?

KilleenHomes(dot)com


thanks
tony

 

any help on re-sizing this template? need it to be full-size with everything (body/sidebar/header/footer) in proportion

 

can you just set all the size attributes to 100% so it autofits the screen?

 

how do u do that in the css file?....don't u need to set specific px size for the widths of each component (header/footer/body/sidebar)

 

no you should be able to set something like

width: 100%;

if the element allows it, which is usually the case.

 

where do i put that?....in each portion of the css file?...for sidebar....header...footer...body...etc?

 

yea, it depends on what all those elements are specifically for, but you should be able to

sidebar{
width: 100%;
}

or just add the width property to the other attributes in each part of the css file.

 

ex - it shows width of body as 747px.........do i increase this to 960px?

and if i do that...doesnt the body and sidebar need to add up to 960px?

 

You probably don't want to change the width of your site past 768px, as it will create horizontal scrollbars for a portion of your audience. Use percentages instead. As to which div to change for your layout, you would need to post your code for any authoritive help. Also, be aware that a lot of templates won't support this sort of change gracefully.

 

u want me to post the entire css style file for this template>?

 

Not the entire CSS file, just the relevant sections. Also, the relevant sections from the HTML file.

 

Actually, a link to the page in question would be even better. Someone (such as myself, deathshadow, Stomme poes, or soulscratch) might be able to identify other problems you may (or may not) even be aware of and then fix them while we're working on this one for you.

Normally though, if a block-level element (such as a DIV) is present, its width will adjust to fill 100% of its container's width, unless a width has been explicitly declared, its display set to inline, or if it's been floated.

 

yes, exactly

 

here is a portion....


#upbg
{
position: absolute;
top: 0;
left: 0;
background: #fff url(images/upbg.gif) no-repeat;
width: 747px;
height: 264px;
z-index: 1;

}

#outer
{
position: relative;
width: 747px;
margin: 0 auto;
background: #fff url(images/abg.gif) repeat-y;
}

#inner
{
position: relative;
padding: 13px 30px 13px 30px;
z-index: 2;
}

#header
{
position: absolute;
background: #FF7800 url(images/a8.gif) repeat-x;
width: 202px;
height: 92px;
color: #fff;
padding-left: 20px;
}

 

is this code sufficient from css file?

 

is this code sufficient from css file?

 

I need to see the whole thing (HTML and CSS).

 

/*
Theme Name: TerraFirma
Theme URI: http://wpthemepark.com
Description: TerraFirma by <a href="http://www.nodethirtythree.com/" title="nodethirtythree">nodethirtythree</a> , WordPress Theme by <a href="http://wpthemepark.com/" target="_blank">WP ThemePark</a>, Sponsored by <a href="http://www.top10webhosting.com/" title="Top 10 Web Hosting">Top 10 Web Hosting</a>.
Version: 3.3.1
Author: Sadish Bala
Author URI: http://wpthemepark.com
*/
/*

terrafirma1.0 by nodethirtythree design
http://www.nodethirtythree.com

*/
/*
Sidebar Profile Image from http://www.sxc.hu/photo/621642
*/

*
{
padding: 0;
margin: 0;
}

body
{
background: #F9F9F7 url(images/a1.gif) repeat-x;
font-size: 10px;
font-size:small;
font-family: Verdana, "Trebuchet ms", helvetica, sans-serif;
color: #3a3a3a;
line-height: 18px;
font-size:70%;
}

a
{
color: #f03300;
text-decoration: none;
border-bottom:#f03300 1px dashed;
}

a:hover
{
border-bottom:#f03300 1px solid;
}
p
{
margin-bottom: 14px;
}
ul, ol
{
margin:1em;
padding:0;
}
li
{
margin:0 1em;
padding:0;
}
blockquote
{
margin:10px 20px;
padding-left:10px;
border-left:#ccc 2px solid;
}
fieldset
{
border:none;
}
img.left
{
float: left;
margin: 0 14px 3px 0;
}
img.right
{
float: right;
margin: 0 14px 3px 0;
}
h1,h2,h3,h4,h5,h6
{
font-family:Georgia, "Lucida Sans Unicode", Tahoma, Arial, Serif;
}
#upbg
{
position: absolute;
top: 0;
left: 0;
background: #fff url(images/upbg.gif) no-repeat;
width: 747px;
height: 264px;
z-index: 1;
}

#outer
{
position: relative;
width: 747px;
margin: 0 auto;
background: #fff url(images/abg.gif) repeat-y;
}

#inner
{
position: relative;
padding: 13px 30px 13px 30px;
z-index: 2;
}

#header
{
position: absolute;
background: #FF7800 url(images/a8.gif) repeat-x;
width: 202px;
height: 92px;
color: #fff;
padding-left: 20px;
}

#header span
{
font-weight: normal;
}

#header h1
{
font-size: 170%;
line-height:1em;
margin:10px 0 0 0;
}
#header h1 a
{
color:#fff;
text-decoration:none;
border:none;
}
#header h2
{
font-size: 100%;
font-weight: normal;
color: #FCE2CA;
margin:5px 0;
padding:0;
font-family:"Lucida Sans Unicode","Trebuchet MS", Verdana, Arial, Serif;
}


#splash
{
position: absolute;
right: 30px;
background: #EAEAE2 url(images/a10.jpg) no-repeat;
width: 458px;
height: 92px;
}

#menu
{
position: relative;
background: #46461F url(images/a16.gif) repeat-x;
height: 67px;
padding: 0 20px 0 5px;
margin: 98px 0 20px 0;
font-family:Tahoma, Georgia, Arial, Verdana, Serif;
text-transform:uppercase;
}

#menu ul
{
margin:0;
padding:0;
}

#menu ul li
{
display: inline;
line-height: 52px;
padding-left: 3px;
margin:0 10px 0 0;
}

#menu ul li a
{
background-color: transparent;
background-repeat: repeat-x;
padding: 8px;
font-size: 12px;
color: #fff;
font-weight: bold;
border-bottom:none;
}

#menu ul li a:hover, #menu ul li.current_page_item a
{
background: #fff url(images/a18.gif) repeat-x top;
color: #4A4A24;
text-decoration: none;
}

#search
{
color: #BDBDA2;
font-size: 12px;
font-family:Tahoma, Georgia, Arial, Verdana, Serif;
text-transform:none;
float:right;
margin:-50px 0 0 0;
}
#content
{
position: relative;
width: 480px;
float: left;
}
#content .post .header
{
background: url(images/a22.gif) bottom repeat-x;
padding: 0 0 10px 10px;
margin-bottom: 20px;
position: relative;
}
#content h3,#content h2
{
position: relative;
top: 4px;
font-size: 18px;
line-height: 25px;
color: #656551;
}
#content h2.pagetitle
{
text-align:center;
margin:0 0 2em 0;
font-size:1.5em;
}

#content h3 a:link, #content h3 a:visited
{
border-bottom:none;
color:#656551;
}
#content h3 a:hover,#content h3 a:active
{
border-bottom:#656551 1px solid;
}
#content ul
{
margin:1em;
padding:0 1em;
list-style-type:square;
}
#content ol
{
list-style-type:decimal;
margin:1em;
padding:0 1em;
}
#content .entry
{
padding: 0 15px;
margin-bottom: 20px;
}

#content .post
{
margin-bottom: 30px;
}

#content .post .date
{
float:right;
margin:-1px 0;
color:#666;
width:25%;
padding:0;
background: url(images/a22.gif) bottom repeat-x;
}
#content .post .date em
{
font-style:normal;
color:#666;
}
#content .post .date em.user
{
background:url(images/user.png) no-repeat left top;
padding-left:15px;
}
#content .post .date em.postdate
{
background:url(images/date.gif) no-repeat left top;
padding-left:17px;
}
#content .post .entry
{
margin-bottom: 0;
}

#content ul.asides
{
background: url(images/a32.gif) repeat-x top;
list-style:none;
margin:2em 0;
padding:0;
}
#content ul.asides li
{
list-style:none;
padding:0.5em 0;
}

#content .post .footer
{
background: url(images/a33.gif) repeat-x bottom;
}
#content .post .footer ul
{
list-style: none;
text-align:right;
padding:20px 0;
}

#content .post .footer ul li
{
display: inline;
background-repeat: no-repeat;
background-position: 0 2px;
padding:3px 0 3px 15px;
}

#content .post .footer ul li.comments
{
background-image: url(images/a36.gif);
}

#content .post .footer ul li.readmore
{
background-image: url(images/a38.gif);
}
#content .post h4
{
font-size:1em;
font-weight:normal;
font-family:Verdana, Tahoma, Arial, Serif;
}
#content .post h4 em
{
font-style:normal;
float:right;
font-weight:normal;
}
#sidebar
{
position: relative;
width: 180px;
float: right;
}

#sidebar h2
{
position: relative;
font-size: 16px;
color: #656551;
background: url(images/border.gif) bottom repeat-x;
padding:0 0 15px 0 ;
margin: 10px 0;
text-transform:uppercase;
font-family:Arial, Georgia, Tahoma, Verdana, Serif;
}
#sidebar li ul li h2
{
background: url(images/a22.gif) bottom repeat-x;
padding:0 0 5px 0 ;
margin-bottom: 10px;
}
img.profile
{
position: relative;
top: -2px;
background: url(images/a26.gif) no-repeat;
width: 146px;
height: 75px;
padding: 7px;
}
#sidebar ul
{
list-style:none;
padding: 0 10px;
margin: 0 0 20px 0;
}
#sidebar ul li
{
list-style:none;
padding: 3px 0;
margin:0;
}
#sidebar ul ul
{
padding: 0 0 0 15px;
margin:0;
}
#sidebar ul ul ul li
{
list-style-image:url(images/arrow.gif);
padding: 3px 0;
margin:0;
}
#sidebar a:link,#sidebar a:visited
{
border-bottom:none;
}
#sidebar a:hover, #sidebar a:active
{
border-bottom:1px solid;
}
#sidebar ul.feeds li
{
background:url(images/feed.gif) no-repeat left;
padding:2px 17px;
margin:0;
}
/*comments and their styles*/
#comments, #respond{
margin: 2em 0 0 5px;
}
#commentform
{
margin:10px;
padding:10px;
}
#outer .commentlist {
margin: 0;
padding: 0;
}
.commentlist li
{
list-style:none;
margin: 1em 0;
padding: 0.5em;
}
.commentlist li p
{
margin:0 1em;
}
.commentlist li .cmtinfo
{
font-size:1em;
background: url(images/a32.gif) repeat-x top;
padding:5px;
margin-bottom: 10px;
position:relative;
border:#eee 1px solid;
}
.commentlist li .cmtinfo em
{
margin:0;
padding:0 1em;
text-align:right;
font-style:normal;
color:#999;
}
.commentlist li.alt .cmtinfo
{
font-size:1em;
background: url(images/a34.gif) repeat-x top;
padding:5px;
margin-bottom: 10px;
position:relative;
border:#ddd 1px solid;
}
#outer .trackback
{
background:url(images/links.gif) no-repeat left;
padding:2px 20px;
}
#outer .commentsrss
{
background:url(images/feed.gif) no-repeat left;
padding:2px 17px;
}
.commentlist li cite
{
font-style:normal;
font-weight:bold;
}
input.text, textarea, select
{
padding:2px;
background:#F9F9F7;
font:1em verdana, arial, serif;
border: 1px solid #ccc;
}
textarea{
width: 90%;
height: 20em;
}
#outer input.text:focus, textarea:focus
{
background:#fff;
border:#999 1px solid;
}

#footer
{
position: relative;
clear: both;
text-align: center;
border-top:#e8e8de 1px solid;
background:#fafaf8;
color: #A8A88D;
padding:10px;
margin:0;
}

#footer a:link,#footer a:visited
{
color: #6C6C63;
text-decoration:none;
border:none;
}
#footer a:hover,#footer a:active
{
color: #acacac;
text-decoration:underline;
border:none;
}
/* Begin Calendar */
#wp-calendar {
empty-cells: show;
margin: 0 auto;
width: 155px;
border:#ccc 1px solid;
}

#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;
}

#wp-calendar caption {
text-align: center;
width: 100%;
font-weight:bold;
margin:0;
padding:3px 0;
}
#wp-calendar thead
{
margin:0;
padding:0;
}
#wp-calendar td {
padding: 3px 0;
text-align: center;
background:url(images/a32.gif) repeat top;
}
#wp-calendar th
{
padding: 3px 0;
text-align: center;
background:url(images/a34.gif) repeat top;
}
#wp-calendar td.pad:hover { /* Doesn't work in IE */
background-color: #fff; }
/* End Calendar */

#searchsubmit
{
border:#fff 1px solid;
font-size:0.9em;
background:url(images/a18.gif) repeat-x top;
}


#header, #content, #sidebar, #footer, .widget {
overflow: hidden;
}

 

any help on this??

thanks

 

Eh..
This is what I got for ya so far..