CSS Resizing

Profile · Posted 2008-02-04, 01:44 PM

Lenny I'm looking at you for help, I know how to do CSS on my own now, but I can't figure out how to resize this properly.

I resized it from 757 to 900 as you will notice below.

Code:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #666666;
	text-decoration: none;
	background-image: url(http://www.nrgs-fuzion-gaming-america.com/images/bg.png);
	background-repeat: repeat-y;
	background-position: center top;
	background-color: #E5E3D5;
	margin: 0px;
	padding: 0px;
}
.tophead {
	background-image: url(http://www.nrgs-fuzion-gaming-america.com/images/topbar.png);
	height: 31px;
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
}
.main .tophead h1 {
	padding-left: 15px;
	color: #CC6633;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
.spacer {
	clear: both;
}
.main .footer .footertexts {
}
.main .footer .footertexts a {
	color: #000099;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000099;
}

.header {
	background-image: url(http://www.nrgs-fuzion-gaming-america.com/images/header.jpg);
	background-repeat: no-repeat;
	height: 176px;
}
.contents {
	background-image: url(http://www.nrgs-fuzion-gaming-america.com/images/contentbg.png);
	background-repeat: no-repeat;
	background-position: center top;
	margin-bottom: 25px;
	padding-top: 25px;
}
.footer {
	background-color: #BEC4F2;
	background-image: url(http://www.nrgs-fuzion-gaming-america.com/images/footerdiv.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 85px;
	padding-right: 25px;
	padding-bottom: 0px;
	padding-left: 25px;
	padding-top: 35px;
}
.main .contents .right {
	float: right;
	width: 240px;
	margin-right: 15px;
	margin-top: 25px;
}
.main .contents .left {
	margin-right: 260px;
	padding-left: 15px;
	padding-right: 10px;
}
.main .contents .left p {
	font-size: 12px;
	line-height: 16px;
	text-align: justify;
}
.main .contents .right .rightcontents {
	border: 1px solid #E4DCC2;
	padding: 5px;
	margin-bottom: 15px;
}
.rightcontents ul {
	display: block;
	margin: 0px;
	padding: 0px;
}
.rightcontents li {
	list-style-type: none;
	margin-top: 5px;
	margin-bottom: 3px;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #DAD9CB;
}

.rightcontents h2 {
	color: #0099CC;
	display: block;
	margin-top: 2px;
	font-weight: bold;
	background-color: #F9F5F0;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #F4EDE3;
	padding-left: 5px;
	font-size: 18px;
	margin-bottom: 12px;
}
.rightcontents .graduate {
	background-image: url(images/graduate-postgraduate.png);
	background-repeat: no-repeat;
	height: 43px;
	width: 230px;
}




.main {
	background-image: url(http://www.nrgs-fuzion-gaming-america.com/images/bg-pg.png);
	background-repeat: repeat-y;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 1px;
}
h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	color: #336699;
	text-decoration: none;
	font-weight: normal;
}
h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 20px;
	color: #996633;
	text-decoration: none;
	font-weight: normal;
	display: block;
	margin-bottom: 5px;
}
.main .contents .left a:link {
	color: #0099FF;
	text-decoration: none;
}


h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	text-decoration: none;
}
    #tabsB {
	float:left;
	font-size:93%;
	line-height:normal;
	margin-top: 144px;
	width: 893px;
      }
    #tabsB ul {
	margin:0;
	list-style:none;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 0;
	padding-left: 15px;
      }
    #tabsB li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsB a {
	float:left;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	background-image: url(http://www.nrgs-fuzion-gaming-america.com/images/tableftB.gif);
	background-repeat: no-repeat;
	background-position: left top;
      }
    #tabsB a span {
	float:left;
	display:block;
	padding:5px 15px 4px 6px;
	color:#666;
	background-image: url(http://www.nrgs-fuzion-gaming-america.com/images/tabrightB.gif);
	background-repeat: no-repeat;
	background-position: right top;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsB a span {float:none;}
    /* End IE5-Mac hack */
    #tabsB a:hover span {
      color:#000;
      }
    #tabsB a:hover {
      background-position:0% -42px;
      }
    #tabsB a:hover span {
      background-position:100% -42px;
      }
.quicklinks {
	background-image: url(http://www.nrgs-fuzion-gaming-america.com/images/quicklinks.png);
	height: 42px;
	background-repeat: no-repeat;
}
.main .contents .left a:visited {
	color: #0066FF;
	text-decoration: underline;
}
.main .contents .left a:hover {

	color: #FF9933;
	text-decoration: none;
}
.main .contents .left a:active {

	color: #0066FF;
	text-decoration: underline;
}
.left #news {
	height: 25px;
	font-size: 18px;
	color: #0099CC;
	font-weight: bold;
	padding-left: 15px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #F9F5F0;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #F4EDE3;
	padding-top: 3px;
}
.left .date {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #999999;
	text-decoration: none;
}
.rightcontents a:hover {
	text-decoration: none;
	color: #0066FF;
}
.rightcontents a:link {

	text-decoration: none;
	color: #000000;
}
.rightcontents a {


	text-decoration: none;
	color: #000000;
}
.rightcontents a:link {


	text-decoration: none;
	color: #000000;
}
.rightcontents a:active {


	text-decoration: none;
	color: #000000;
}

If you want to see what I mean by it not resizing quite right take a look here

Oh, and by the way if all the problem is, is that I have to resize the pictures I was going to do it anyways.

Goodlookinguy · Posted 2008-02-04, 02:42 PM in reply to Goodlookinguy's post "CSS Resizing"

Resizing the pictures is an idea before carrying on.

It could be that you've set the tables... in fact, nevermind, I've just had a lookee at the page source and noticed that you've done the whole thing using DIVs. I'd have been more inclined to use a table, but that's personal preference. If it wasn't that big a job, I'd say try a page with tables, but it would mean re-coding a big chunk of the CSS.

For the moment, resize everything, and make sure that widths are set for elements that need them - say, erm, just a random example not taken from the CSS above, a content box. Make sure it's set to "width: 900px;" and not just left to work things out itself.

---

Just another personal thing - I'd be inclined to do away with settings margins. I've found that they're nothing but trouble. With my CSS I put "margin: 0 auto;" within each element. If you need something to be indented some way into the page, then... no, that goes back to tables - I just make cells the right width and what not. Though I suppose layers could be used - a single row table in front of the rest, containing the thing that needs to be indented with indents controlled by cells.

But it's something maybe worth looking at - make sure all your margins are right.

Lenny

I can't figure it out, and I don't want to convert to tables...

Goodlookinguy

Any reason why?

Oh, and have you resized all the graphics? If you have, is the resized page uploaded?

Lenny

I resized all of the graphics and tried it on a secret page, and it was just like before except that the lines went out past the white part.

The reason I want to do this is because I don't like the width of the page I want it to be wider.

Goodlookinguy

Fair enough. But why don't you like tables?

And do you mind if I download a page of your site and have a mess around?

Lenny

You can download whatever you want scroll down to the very bottom of the page to download the CSS, it will say CSS and be the color blue.

Lenny

Well Lenny, looks like I went for tables in my new design. I currently have my site down while I'm uploading my new site.

Goodlookinguy

Yay! Tables is nice.

What made you change?

Lenny

It was giving me a lot of issues when trying to place things down.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
.GIF resizing request	Sovereign	Tech Help	4	2006-08-14 11:59 AM
Problems with CS:S	Demosthenes	Tech Help	7	2006-04-04 11:17 PM
Resizing background image	Medieval Bob	Tech Help	9	2004-10-29 05:05 PM
Resizing Sig	HandOfHeaven	Tech Help	22	2004-09-15 09:57 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)