Sidebar Issue

2 replies [Last post]

Fri, 2012-02-03 16:38

chill123

Offline

Regular

Joined: 2008-01-09

Posts: 19

Points: 2

Hi All,

I've got myself into a bit of a pickle with this site:

http://www.vcrevolution.co.uk/main/aboutus.shtml

I've been playing around trying to widen the right column (sidebar) but now have broken it. The wiodth should be 230px. I'm sure i've undone all the changes i made but it doesn't seem to work correctly now.

Any ideas what the fix is?

Here's my css:

* {
	margin: 0;
	padding: 0;
}
 
body {
	background: #662C14 url(/resources/images/img01.gif) repeat-x;
}
 
body, input, textarea, select {
	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #666666;
}
 
h1, h2, h3 {
	margin-bottom: 1em;
	font-weight: normal;
	color: #333333;
}
 
h1 {
	font-size: 2.2em;
}
 
h2 {
	font-size: 1.7em;
}
 
h3 {
	font-size: 1.3em;
}
 
p, blockquote, ul, ol, form {
	margin-bottom: 1.5em;
}
 
blockquote, ul, ol {
	margin-left: 3em;
}
 
blockquote {
	margin-right: 3em;
	font-style: italic;
}
 
ul {
	list-style-type: square;
}
 
a {
	color: #3366FF;
	text-decoration: none;
}
 
a:hover {
	color: #FF6600;
}
 
a:link {
	text-decoration: none
}
 
hr {
	display: none;
}
 
.hr {
	clear : both; 
}
 
div.img_left {
	float : left;
	margin: 0 15px 15px 0;
 }
 
img.left {
	float: left;
	margin: 0 15px 15px 0;
}
 
img.right {
	float: right;
	margin: 0 0 15px 15px;
}
 
/* Wrapper */
#wrapper {
	width: 750px;
	margin: 0 auto;
	background: url(/resources/images/img02.gif) no-repeat;
}
 
/* Header */
#header {
	width: 750px;
	height: 200px;
	padding: 5px;
	background: url(/resources/images/wheels1.png) no-repeat 50% 5px;
 
	text-align: center;
	margin: 0 auto;
}
 
#transbox {
	width:100%;
	height:110px;
	background-color:#ffffff;
	border:1px solid black;
	/* for IE */
	filter:alpha(opacity=40);
	/* CSS3 standard */
	opacity:0.4;
 
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
}
 
#transbox p {
	margin:30px 40px;
	font-weight:bold;
	color:#000000;
}
 
#header-text {
	margin-top: 117px;
	padding: 0px;
}
 
#header h1, #header h2 {
	margin: 0;
	text-transform: lowercase;
	font-weight: bold;
}
 
#header h1 {
	padding: 51px 0 0 20px;
	letter-spacing: -2px;
	font-size: 3em;
}
#header h1 img {
	vertical-align: middle;
}
 
#header h2 {
	margin-top: 5px;
	padding: 0 0 0 22px;
	font-size: 1em;
	color: #000;
	background: rgba(255, 255, 255, 0.5);
}
 
#header a {
	text-decoration: none;
	color: #FFFFFF;
}
#header h1 img {
	border : 0; 
}
 
 
/* Content */
#content {
	background: #FFFFFF url(/resources/images/img04.gif) repeat-y;
}
 
/* Main Body */
#main {
	float: left;
	width: 520px;
	margin-top: -5px;
	padding-left: 5px;
}
 
/* Post */
.post {
}
 
.post .title {
	height: 40px;
	margin: 0;
	padding: 7px 0 0 15px;
	background: url(/resources/images/img06.gif) repeat-x;
}
 
.post .title a {
	text-decoration: none;
	color: #FFFFFF;
}
 
.post .title a:hover {
	text-decoration: underline;
}
 
.post .date {
	margin-top: -30px;
	padding-right: 15px;
	text-align: right;
	font: bold x-small Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
 
.post .entry {
	padding: 20px 15px 10px 15px;
	background: url(/resources/images/img07.gif) repeat-x;
	line-height: 1.8em;
}
 
.advert {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	padding: 5px 5px 5px 5px;
	line-height: 2.8em;
	color: #FFFFFF;
	background-color: red;
}
 
.post .meta {
	margin-bottom: 2em;
	padding: 0 15px;
	text-align: right;
	font-size: x-small;
}
 
/* Sidebar */
#sidebar {
	float: right;
	width: 230px;
	margin-top: -5px;
}
 
#sidebar ul {
	margin: 0;
	list-style: none;
}
 
#sidebar li {
}
 
#sidebar li ul {
	margin: 0 5px;
	padding: 15px 15px 15px 30px;
	background: url(/resources/images/img07.gif) repeat-x;
	list-style-type: square;
}
 
#sidebar li li {
}
 
#sidebar h2 {
	height: 29px;
	margin: 0 5px;
	padding: 24px 5px 0 20px;
	/* background: url(/resources/images/img08.gif) no-repeat; */
	/* background : #070;  */
	background : #444; 
	text-transform: uppercase;
	font-size: 1em;
	font-weight: bold;
	color: #FFFFFF;
}
 
#sidebar a {
	text-decoration: none;
}
 
/* Search */
#search {
}
 
#search h2 {
	height: 27px;
	padding-top: 13px;
	background-position: left bottom;
}
 
#search form {
	margin-left: 5px;
	margin-right: 5px;
	padding: 15px 15px 0 15px;
	background: url(/resources/images/img07.gif) repeat-x;
}
 
#search #inputtext1 {
	width: 110px;
	padding: 1px 2px;
	background: url(/resources/images/img5.gif) repeat-x;
	border: 1px solid #C4C3C4;
}
 
#search #inputsubmit1 {
	background: url(/resources/images/img6.gif) repeat-x left bottom;
	border: 1px solid #C4C3C4;
}
 
/* Events */
#events {
}
 
/* Links */
#links {
}
 
/* News */
#news {
}
 
/* Sponsors */
#sponsors {
}
 
/* Meta */
 
#meta {
}
 
/* Footer */
 
#footer {
	background: url(/resources/images/img05.gif) no-repeat;
 
	text-align: center;
	margin: 0 auto;
}
 
#footer p {
	margin: 0;
	padding: 5px 10px;
	font-size: x-small;
	color: #FFFFFF;
}
 
#footer a {
	color: #FFFFFF;
}
 
/* Menu */
.glossymenu {
	position: relative;
	padding: 0 0 0 15px;
	margin: 0 auto 0 auto;
	background: url(/resources/images/menub_bg.gif) repeat-x; /*tab background image path*/
	height: 46px;
	list-style: none;
}
 
.glossymenu li {
	float:left;
}
 
.glossymenu li a {
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;	
 
	color: #000000;
}
 
.glossymenu li a b {
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
	color: #000000;
}
 
.glossymenu li.current a, .glossymenu li a:hover {
	color: #fff;
	background: url(/resources/images/menub_hover_left.gif) no-repeat; /*left tab image path*/
	background-position: left;
 
	color: #000000;
}
 
.glossymenu li.current a b, .glossymenu li a:hover b {
	color: #fff;
	background: url(/resources/images/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
	color: #FFFFFF;
}
 
/* Site Content */
#mainbody {
	float: left;
	width: 530px;
	margin-top: -5px;
	padding-left: 5px;
}
 
h5 {
	height: 22px;
	margin: 2px 2px;
	padding: 5px 5px 5px 5px;
	background : #FF6600;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: bold;
	color: #FFFFFF;
}
 
h6 {
	height: 22px;
	margin: 2px 2px;
	padding: 5px 5px 5px 5px;
	background : #FF6600;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: bold;
	color: #FFFFFF;
}
 
#mainbody h4 {
	height: 29px;
	margin: 0 1px;
	padding: 5px 5px 5px 5px;
	background : #444;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: bold;
	color: #FFFFFF;
}
 
#sponsors_img {
	text-align: center;
	margin: 0 auto;
 
	padding-bottom: 20px;
	padding-left: 20px;
	vertical-align: middle;
}
 
.top {
	line-height: 1.8em;
	text-align: right;
	padding-bottom: 1px;
	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: blue;
	font-size: 1em;
}
 
/* inline body images */
.photo {
	text-align: center;
	margin: 0px auto;
	margin-bottom: 2em;
 
	border: 0px solid #0000ff;
 
	height: auto;
	width: auto;
	float: none;
}
.photo img {
	display: inline;
	margin: 3px;
	border: 0px solid #ffffff;
}
.photo a:hover img {
	border: 1px solid #0000ff;
}
.photodesc {
	text-align: center;
	margin: 0 auto;
 
	font-weight: normal;
	margin: 2px;
	font-size: 1em;
	color: blue;
}

Tags:

CSS Layouts

Sat, 2012-02-04 02:26

tjroberts086

Offline

Enthusiast

Timezone: GMT-5

Joined: 2010-01-08

Posts: 132

Points: 168

try adding position:relative

try adding position:relative to the sidebar

Sun, 2012-02-05 04:22

gary.turner

Online

Moderator

Timezone: GMT-5

Joined: 2004-06-25

Posts: 7927

Points: 1766

The two columns total 765px

The two columns total 765px in width, but the wrapper is only 750px wide. Widen the wrapper or narrow the left column.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

try adding position:relative

The two columns total 765px

New forum topics

User login

Navigation