[SOLVED]Need Help With Stylsheet.css

CLC · May 1, 2011

I'm trying to make my web page wider, which I can do by editing these 2 lines of code. The Problem is when I try to make my banner wider It doesn't take effect. Can anyone tell me how to fix this? Full Code Is Below

Code:

/* Global properties ======================================================== */
body { 
	background:#232323; 
	font-family:Tahoma, Geneva, sans-serif;
	font-size:100%; 
	line-height:1.0625em;
	color:#5f5f5f;
}
html { min-width:941px;}   [B] I can edit this[/B]
html, body { height:100%;}



/* Global Structure ============================================================= */
#main {
	margin: 0 auto;
	position: relative;
	width: 941px;          [B]I can edit this[/B]
	position:relative;
	font-size:.69em;
}

Code:

/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }

/* Global properties ======================================================== */
body { 
	background:#232323; 
	font-family:Tahoma, Geneva, sans-serif;
	font-size:100%; 
	line-height:1.0625em;
	color:#5f5f5f;
}
html { min-width:941px;}
html, body { height:100%;}



/* Global Structure ============================================================= */
#main {
	margin: 0 auto;
	position: relative;
	width: 941px;
	position:relative;
	font-size:.69em;
}

	/* Header */
	header{
		height:86px;
		overflow:hidden;
		position:relative;
	}
	
	/* Content */
	#content {
		padding:15px;
	}
	.mainContent {
		float: left;
		width:552px;
		margin-right:15px;
	}
	.mainContent.left {
		margin-left:15px;
		margin-right:0;
	}
	
	/* Sidebar */
	aside{
		float:left;
		width:294px;
	}




/* Left & Right alignment */

.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}

.col-1, .col-2, .col-3 { float:left;}

.alignright { text-align:right;}
.aligncenter { text-align:center;}

.wrapper { 
	width:100%;
	overflow:hidden;
}

/* The inside class provides consistent padding. To be used often! */
.inside{ padding: 20px; }


/*----- form defaults -----*/
input, select, textarea { 
	font-family:Tahoma, Geneva, sans-serif;
	font-size:1em;
	vertical-align:middle;
	font-weight:normal;
}

/*----- other -----*/
.img-indent { 
	margin:5px 26px 0 0; 
	float:left;
}
.img-box { 
	width:100%; 
	overflow:hidden; 
	padding-bottom:20px;
}
	.img-box img { 
		float:left; 
		margin:5px 26px 0 0;
	}

.extra-wrap { 
	overflow:hidden;
}

p {margin-bottom:17px;}
.p1 { margin-bottom:8px;}
.p2 { margin-bottom:17px;}
.p3 { margin-bottom:25px;
}


/*----- txt, links, lines, titles -----*/
a {
	color:#1c7e98; 
	outline:none;
}
a:hover{
	text-decoration:none;
}

h1 {
	font-size:22px;
	line-height:1.2em;
	font-weight:normal;
	background:url(../images/logo.gif) no-repeat 0 0;
	padding:15px 0 15px 53px;
	text-transform:uppercase;
	position:absolute;
	left:66px;
	top:24px;
}
	h1 a {
		color:#fff;
		text-decoration:none;
	}
h2 {
	background:url(../images/title-line.gif) no-repeat 0 0;
	padding:0 0 0 13px;
	text-transform:uppercase;
	color:#fff;
	font-size:16px;
	margin-bottom:21px;
}
	h2 span {
		font-size:12px;
		display:block;
		color:#525252;
	}
h3 {
	background:url(../images/title-bg.gif) no-repeat 0 0;
	height:34px;
	line-height:34px;
	text-transform:uppercase;
	color:#cecece;
	font-size:15px;
	text-indent:24px;
}
h4 {
	font-size:15px;
	color:#fff;
	text-transform:uppercase;
	margin-bottom:16px;
	padding:8px 0 0 0;
}
h5 {
	font-size:1em;
	color:#aeaeae;
	margin-bottom:1em;
}

.link1 { 
	background:url(../images/arrow1.gif) no-repeat 100% 5px;
	padding:0 8px 0 0;
}



/*==================boxes====================*/
.box {
	background:#000;
	width:100%;
}
	.box .border-top {
		background:url(../images/border-top.gif) repeat-x left top;
	}
	.box .border-bot {
		background:url(../images/border-bot.gif) repeat-x left bottom;
	}
	.box .border-left {
		background:url(../images/border-left.gif) repeat-y left top;
	}
	.box .border-right {
		background:url(../images/border-right.gif) repeat-y right top;
	}
	.box .left-top-corner {
		background:url(../images/left-top-corner.gif) no-repeat left top;
	}
	.box .right-top-corner {
		background:url(../images/right-top-corner.gif) no-repeat right top;
	}
	.box .left-bot-corner {
		background:url(../images/left-bot-corner.gif) no-repeat left bottom;
		width:100%;
		}
	.box .right-bot-corner {
		background:url(../images/right-bot-corner.gif) no-repeat right bottom;
		}
	.box .inside { 
		padding:23px 24px 25px 26px;
	}
		
		
		.box nav {
			background:url(../images/nav-bg.gif) 0 0 repeat-x;
			overflow:hidden;
			margin-bottom:1px;
			height:48px;
		}
			.box nav ul li {
				float:left;
				background:url(../images/divider.gif) no-repeat 0 0;
				padding-left:1px;
			}
			.box nav ul li.last {
				width:145px;
			}
				.box nav ul li a {
					float:left;
					font-size:13px;
					color:#fff;
					text-decoration:none;
					width:148px;
					text-align:center;
					height:47px;
					line-height:47px;
				}
				.box nav ul li a:hover, .box nav ul li a.current {
					background:url(../images/nav-bg-act.gif) 0 0 repeat-x;
				}
				


.box1 {
	background:url(../images/box1-bg.gif) 0 0 repeat-x #090909;
	width:100%;
}
	.box1 .inner {
		padding:25px 25px 25px 25px;
	}
	
	


.box2 {
	background:#000;
	width:100%;
	margin-bottom:12px;
}
.box2.last {
	margin-bottom:0;
}
	.box2 .border-top {
		background:url(../images/border-top1.gif) repeat-x left top;
	}
	.box2 .border-bot {
		background:url(../images/border-bot1.gif) repeat-x left bottom;
	}
	.box2 .border-left {
		background:url(../images/border-left1.gif) repeat-y left top;
	}
	.box2 .border-right {
		background:url(../images/border-right1.gif) repeat-y right top;
	}
	.box2 .left-top-corner {
		background:url(../images/left-top-corner1.gif) no-repeat left top;
	}
	.box2 .right-top-corner {
		background:url(../images/right-top-corner1.gif) no-repeat right top;
	}
	.box2 .left-bot-corner {
		background:url(../images/left-bot-corner1.gif) no-repeat left bottom;
		width:100%;
		}
	.box2 .right-bot-corner {
		background:url(../images/right-bot-corner1.gif) no-repeat right bottom;
		}
	.box2 .inner { 
		padding:10px 24px 5px 24px;
	}
	.box2 .inner1 { 
		padding:10px 24px 15px 24px;
	}

.address { 
	float:left;
	line-height:14px;
}
	.address dt {
		margin-bottom:16px;
	}
	.address dd { 
		clear:both;
	}
		.address dd span { 
			float:left;
			width:70px;
		}


.banner {
	height:240px;
	overflow:hidden;
}

/*===== content =====*/
#content .outdent {
	padding-bottom:12px;
}
	
	.list1 {
		padding-bottom:5px;
	}
		.list1 li {
			background:url(../images/arrow1.gif) no-repeat 0 6px;
			padding:0 0 5px 9px;
		}
			.list1 li a {
				color:#aeaeae;
				text-decoration:none;
			}
			.list1 li a:hover {
				text-decoration:underline;
			}
	
	.list2 {
		padding-bottom:5px;
	}
		.list2 li {
			background:url(../images/arrow1.gif) no-repeat 0 6px;
			padding:0 0 5px 9px;
		}
			.list2 li a {
				color:#1c7e98;
				text-decoration:none;
			}
			.list2 li a:hover {
				text-decoration:underline;
			}
	
	
		.extra-banner span {
			float:left;
			margin:0 17px 0 -16px;
			background:url(../images/extra-banner.gif) no-repeat 0 0;
			width:57px;
			height:57px;
			line-height:57px;
			color:#fff;
			text-align:center;
		}

/*===== footer =====*/
footer {
	color:#5d5d5d;
	padding:2px 0 20px 66px;
}
	footer a {
		color:#5d5d5d;
	}


/*----- forms -----*/
#contacts-form fieldset {
	border:none;
	width:100%;
	overflow:hidden;
	display:block;
	color:#aeaeae;
	font-weight:bold;
}
	#contacts-form .col-1 {
		width:246px !important;
		margin-right:0 !important;
	}
	#contacts-form .col-2 {
		width:246px !important;
		margin-right:0 !important;
	}
	#contacts-form label {
		display:block;
		height:44px;
		overflow:hidden;
	}
		#contacts-form input {
			color:#111;
			border:1px solid #a09b96;
			background:#fff;
			padding:2px 0 2px 5px;
			width:200px;
		}
		#contacts-form textarea {
			color:#111;
			border:1px solid #a09b96;
			background:#fff;
			padding:2px 0 2px 5px;
			width:240px;
			overflow:auto;
			height:100px;
			margin-bottom:12px;
		}
/*==========================================*/

TimJacobs · May 1, 2011

Checkout Firebug

Works Great in situations like this.

mjbasford · May 1, 2011

If they're going to be the same size, use

#main { width:100%;
....
}

Should do the trick, and makes editing in the future easier

CLC · May 2, 2011

mjbasford said:
If they're going to be the same size, use

#main { width:100%;
....
}

Should do the trick, and makes editing in the future easier

I tried this and it works for everything on the page but my banner image again. I just can't seem to figure it out. I have been messing with firebug also and still no luck. Is there any way to just get the whole site to resize depending on the screen?

mjbasford · May 2, 2011

To resize an image, it needs to be part of the img tage or class. Ex...

Code:

<img src="img.jpg" alt="woodchucks!" width="100%" />

CLC · May 2, 2011

I made some changes in the htlm code also and it seems to do the trick. 100% is the key, thanks so much

I have to panes basically. one on the left that is a little bigger and then one on the right. Can I use this for those to resize also? Does this work for lets say 60%? 40%?

CLC · May 2, 2011

goober1881 said:
I made some changes in the htlm code also and it seems to do the trick. 100% is the key, thanks so much I have to panes basically. one on the left that is a little bigger and then one on the right. Can I use this for those to resize also? Does this work for lets say 60%? 40%?

This does work on the style sheet, but i had to use 60% and 38% or else the right pane drops below the left. Again thanks for the help, it now resizes to wider screens.

JosephLeo · May 2, 2011

Don't hard code it into the html. Never a reccomendation to do that. Instead, use this.

Code:

#main img {width:100%;}

mjbasford · May 2, 2011

JosephLeo said:
Don't hard code it into the html. Never a reccomendation to do that. Instead, use this.

Code:

#main img {width:100%;}

I second that, although I would personally just define a img class for it...

CLC · May 4, 2011

JosephLeo said:
Don't hard code it into the html. Never a reccomendation to do that. Instead, use this.

Code:

#main img {width:100%;}

I did the coding on the style sheet works great, thanks for the help guys.

By the way, how do I close a thread if all my questions have been answered?

TimJacobs · May 4, 2011

goober1881 said:
I did the coding on the style sheet works great, thanks for the help guys.
By the way, how do I close a thread if all my questions have been answered?

PM a Mod and tell them that you would like to mark it solved and Close it.

PM Methical or Bryce and ask one of them to mark it Solved and Close it.

Methical · May 6, 2011

One of the reasons I asked Bryce if the OP could have permission to edit the Title ..

added the [SOLVED] tag, but haven't closed it.

Usually once threads are closed, they are moved off to the Forum Archive; unless its an announcement or something similar.

dbdawn · May 6, 2011

I would add a [SOLVED] tag, but not close out the thread. I think we should use the [SOLVED] tag more often

[SOLVED]Need Help With Stylsheet.css

CLC

Well-Known Member

TimJacobs

New Member

mjbasford

New Member

CLC

Well-Known Member

mjbasford

New Member

CLC

Well-Known Member

CLC

Well-Known Member

JosephLeo

Active Member

mjbasford

New Member

CLC

Well-Known Member

TimJacobs

New Member

Methical

Active Member

dbdawn

New Member

Similar threads