...

View Full Version : wrappers and columns problems



fingerwurst
07-11-2011, 11:33 PM
I'm trying to make this page so that the dark brown has a wrapper going all the way across and the white does too, and also I can't figure out why the white won't center in the page. It was fine until I made two columns in the container.

(If you see blinking in firefox, I fixed that but it still hasn't updated for some reason. looks fine in chrome.)

Here is the an example page - http://www.comebackdemos.com/camelot/donate.html

and the layout.css code:



@import url(navi.css);
@import url(forms.css);
@import url(tables.css);


body{
margin:0;
padding:0;
font-size:12px;
font-family:Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
color:#FFFFFF;
background-color:#585C3F;
}

img{
display:block;
border:0;
margin-top: 0;
margin-right: 0;
margin-bottom: 15px;
margin-left: 0;
text-align: right;
vertical-align: middle;

}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart {list-style-type:none; margin:0; padding:0;}
.clear{clear: both;}
br.clear{clear:both; margin-top:-15px;}
a{outline:none; text-decoration:none;}

.fl_left{float:left;}
.fl_right{float:right;}

.imgl, .imgr{border:1px solid #666666; padding:6px;}
.imgl{float:left; margin:0 8px 8px 0; clear:left;}
.imgr{float:right; margin:0 0 8px 8px; clear:right;}

/* ----------------------------------------------Wrapper-------------------------------------*/

div.wrapper{
display:block;
width:100%;
margin:0;
text-align:left;
background-color: #CBCFB5;
}

div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
margin:0 0 15px 0;
padding:0 0 8px 0;
font-size:medium;
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
border-bottom:1px dotted #362C20;
}

.leftcol{
color:#362C20;
background-color:#FFFFFF;
float: center;
width: 600px;
padding: 0px 10px 10px;
height: 95%;
font-family: Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
font-size: 12px;
}
.rightcol{
color:#FFFFFF;
background:#362C20 url(../images/medcrowns.jpg) repeat fixed;
float: right;
width: 250px;
padding: 0px 10px 10px;
height: 95%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
}
.col1{color:#FFFFFF; background-color:#CBCFB5; border-top:5px solid #362C20;}
.col2{color:#B6B6B6; background:#362C20;}
.col2 a{color:#FF9900; background-color:#362C20;}
.col3{color:#666666; background-color:#FFFFFF;}
.col4{color:#666666; background-color:#C8CCB3;}
.col4 a{color:#55392B; background-color:#C8CCB3;}
.col5, .col5 a{color:#FFFFFF; background-color:#585C3F;}

/* ----------------------------------------------Generalise-------------------------------------*/

#header, #intro, #container, #breadcrumb, #footer, #copyright{
position:relative;
margin:0 auto 0;
display:block;
width:960px;
}

/* ----------------------------------------------Header-------------------------------------*/

#header{
z-index:1000;
color:#444444;
background-color:#CBCFB5;
padding-top: 10px;
padding-right: 0;
padding-bottom: 90px;
padding-left: 0;
}

#header #logo{
display:block;
float:left;
margin-top:8px;
}

#header h1, #header p{
margin:0;
padding:0;
font-size: 12px;
font-weight: bold;
}

#header h1{
margin:0;
padding:0;
font-size:50px;
border:none;
}

#header h1 a{
color:#362C20;
background-color:#CBCFB5;
}

/* ----------------------------------------------Homepage Intro-------------------------------------*/

#intro{
padding:30px 0;
}

.wrapper #intro li.last{
margin:0;
}

#intro h1, #intro h2, #intro p, #intro ul{
margin:0;
padding:0;
list-style:none;
line-height:normal;
border:none;
}

#intro .fl_left{
display:block;
float:left;
width:480px;
}

#intro .fl_left h1{
margin-bottom:20px;
font-size:42px;
color:#CBCFB5;
background:#362C20;
border:none;
}

#intro .fl_left h2{
margin:0 0 10px 0;
padding:0 0 8px 0;
color:#FFFFFF;
background:#362C20;
border-bottom:1px dotted #666666;
}

#intro .fl_left li{
display:block;
float:left;
width:220px;
margin:0 25px 0 0;
}

#intro .fl_left p{
margin-bottom:10px;
line-height:1.3em;
}

#intro .fl_left p.readmore{
display:block;
margin:25px 0 0 0;
text-align:right;
line-height:normal;
}

#intro .fl_right{
display:block;
float:right;
width:420px;
height:320px;
padding:9px;
border:1px solid #CBCFB5;
overflow:hidden;
}

#intro .fl_right li{
margin-bottom:10px;
}

#intro .fl_right img{
display:block;
width:420px;
height:320px;
}

/* ----------------------------------------------BreadCrumb-------------------------------------*/

#breadcrumb{
padding:15px 0;
background-color: #362C20;
}

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

#breadcrumb ul li{display:inline;}
#breadcrumb ul li.current a{text-decoration:underline;}

/* ----------------------------------------------Container-------------------------------------*/

#container{
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: inherit;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-variant: normal;
text-decoration: none;
font-size: 12px;
padding: 0px 20px 20px;
text-wrap: unrestricted;
float: center;
width: 960px;
color: #362C20;
background-color: #FFF;
font-family: Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
overflow: auto;
position: relative;
top: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 100px;
}

#container a{
color:#000000;
background-color:#FFFFFF;
}

/* ----------------------------------------------Homepage Latest-------------------------------------*/

#latest{
display:block;
width:100%;
padding:0 0 30px 0;
margin:0 0 30px 0;
border-bottom:1px dotted #362C20;
}

#latest ul, #latest p{
margin:0;
padding:0;
list-style:none;
display:inline;
}

#latest h2{
margin:0 0 15px 0;
padding:0 0 8px 0;
font-size:14px;
font-weight:bold;
border-bottom:1px dotted #000000;
}

#latest li{
display:block;
float:left;
width:300px;
margin:0 30px 0 0;
padding:0;
font-size: 14px;
color: #000
}

#latest li.last{
margin-right:0;
font-size: 14px;
}

#latest li p.imgholder{
display:block;
width:290px;
height:100px;
margin:0 0 15px 0;
padding:4px;
border:1px solid #362C20;
}

#latest a{
font-weight:bold;
}

/* ----------------------------------------------Content-------------------------------------*/

#content{
display:block;
float:left;
width:inherit;
}

#content #latestnews{
display:block;
width:960px;
margin-bottom:35px;
}

#content #latestnews h2, #content #latestnews p{
margin:0;
padding:0;
line-height:1.6em;
}

#content #latestnews h2{
margin-bottom:10px;
}

#content #latestnews ul, #content #latestnews li{
display:block;
width:100%;
margin:0;
padding:0;
list-style:none;
}

#content #latestnews li{
margin:0 0 15px 0;
padding:0 0 15px 0;
border-bottom:1px dotted #666666;
}

#content #latestnews div.imgholder{
display:block;
float:left;
width:150px;
height:150px;
margin:0;
padding:4px;
border:1px solid #666666;
}

#content #latestnews div.latestnews{
display:block;
float:right;
width:420px;
margin:0;
padding:0;
}

#content #latestnews p.readmore{
display:block;
margin-top:10px;
text-align:right;
font-weight:bold;
}

/* ------Comments-----*/

#comments{margin-bottom:40px;}

#comments .commentlist {margin:0; padding:0;}

#comments .commentlist ul{margin:0; padding:0; list-style:none;}

#comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}

#comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
#comments .commentlist li.comment_odd a{color:#FF9900; background-color:#F7F7F7;}

#comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
#comments .commentlist li.comment_even a{color:#FF9900; background-color:#E8E8E8;}

#comments .commentlist .author .name{font-weight:bold;}
#comments .commentlist .submitdate{font-size:smaller;}

#comments .commentlist p {margin:10px 5px 10px 0; padding:0; font-weight: normal;text-transform: none;}

#comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}

/* ----------------------------------------------Right Block-------------------------------------*/

#column{
display:block;
float:right;
width:250px;
height: 95%;
background-color: #996;
font-family: Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
font-size: 14px;
font-weight: bold;
color: #FFF;
margin: 0px;
padding: 0px 10px 10px;
background-attachment: scroll;
background-image: url(../images/medcrowns.jpg);
background-repeat: repeat;
background-position: left top;
border: 1px solid #000;
}

#column .holder, #column #featured{
display:block;
width:300px;
margin-bottom:40px;
}

#column .holder p{
line-height:1.6em;
}

#column .holder h2.title{
display:block;
width:100%;
height:65px;
margin:0;
padding:15px 0 8px 0;
font-size:20px;
font-weight:normal;
color:#666666;
background-color:#FFFFFF;
line-height:normal;
}

#column .holder h2.title img{
float:left;
margin:-15px 8px 0 0;
padding:5px;
border:1px solid #666666;
}

#column .holder p.readmore{
display:block;
width:100%;
font-weight:bold;
text-align:right;
line-height:normal;
}

#column div.imgholder{
display:block;
width:290px;
margin:0 0 10px 0;
padding:4px;
border:1px solid #666666;
}

/* Featured Block */

#column #featured a{
color:#FF9900;
background-color:#F9F9F9;
}

#column #featured ul, #column #featured h2, #column #featured p{
margin:0;
padding:0;
list-style:none;
}

#column #featured li{
display:block;
width:250px;
margin:0;
padding:20px 25px;
color:#2E271D;
background-color:#F9F9F9;
}

#column #featured li p{
line-height:1.6em;
}

#column #featured li p.imgholder{
display:block;
width:240px;
height:90px;
margin:20px 0 15px 0;
padding:4px;
border:1px solid #666666;
}

#column #featured li h2{
margin:0;
padding:0 0 14px 0;
font-size:20px;
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
line-height:normal;
}

#column #featured p.more{
display:block;
width:100%;
margin-top:15px;
font-weight:bold;
text-align:right;
line-height:normal;
}


.flickrbox ul{
margin:0;
padding:0;
list-style:none;
}

.flickrbox li{
display:block;
float:left;
width:80px;
height:80px;
margin:0 15px 15px 0;
padding:4px;
border:1px solid #666666;
}

.flickrbox li.last{margin-right:0;}

/* ----------------------------------------------Footer-------------------------------------*/

#footer{
padding:0px 0 20px;
margin-top: 20px;
}

#footer h2{
margin-bottom:10px;
border-bottom-color:#98989A;
}

#footer p, #footer ul, #footer a{
margin:0;
padding:0;
font-weight:normal;
list-style:none;
line-height:normal;
}

#footer .footbox{
display:block;
float:right;
width:600px;
margin:0 0 0 15px;
padding:5;
}

#footer li{
margin-bottom:3px;
}

#footer .last{
margin:0;
}

#newsletter{
display:block;
float:left;
width:300px;
font-size: 14px;
}

/* ----------------------------------------------Copyright-------------------------------------*/

#copyright{
padding:10px 0;
}

#copyright p{
margin:0;
padding:0;
}

raptorjgzus
07-11-2011, 11:45 PM
your code:


#container{
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: inherit;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* [disabled]font-variant: normal; */
text-decoration: blink;
font-size: 12px;
padding: 0px 20px 20px;
text-wrap: unrestricted;
margin: 0 auto;
float: none;
width: 960px;
color: #362C20;
background-color: #FFF;
font-family: Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
height: 95%;
overflow: hidden;
position: relative;
top: 0px;
}

this is your align problem-----> margin: 0px 0px 0px 50px;
change to margin:0 auto;

new code:

#container{
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: inherit;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* [disabled]font-variant: normal; */
text-decoration: blink;
font-size: 12px;
padding: 0px 20px 20px;
text-wrap: unrestricted;
margin: 0 auto;
float: none;
width: 960px;
color: #362C20;
background-color: #FFF;
font-family: Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
height: 95%;
overflow: hidden;
position: relative;
top: 0px;
}

fingerwurst
07-12-2011, 01:21 AM
:thumbsup:

perfect! thank you

raptorjgzus
07-12-2011, 09:01 PM
No problem man your welcome!!! :D:D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum