PDA

View Full Version : Found great liquid 3 column (stretches on all monitors), but have prob with header


japhyboy
06-15-2009, 11:37 PM
I found the liquid column here
http://matthewjamestaylor.com/blog/perfect-3-column.htm

it was the top choice at:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

I was able to put an image in the top right by doing:

#header {
position:relative;
background: #d52e36 url(assests/images/Little_ Golden_Student_With_A_G_1846150.jpg) no-repeat top right;
height: 120px;
}


But when I tried to do the same for the right it screwed up...

I also tried to do it via creating <div id="imageLogo> and
#header #logoImage {
position:absolute;
height: 120px;
background:url(assests/images/Little_Golden_Student_With_A_G_1846150.jpg) no-repeat top left;
}

But that gutted the ul and h1


Anyone know how I could get another logo in the top left and then have h1 and ul centered without losing the liquidity of the layout?

I just started Dreamweaver 4 days ago, so to save me from bugging you with follow up questions, can you answer like you are talking to a newbie that doesn't know all that much, because that's me:)

Thanks in advance, or if you want to email me at <removed> or leave your email I can send you my specific file and layout

DWcourse
06-16-2009, 03:32 PM
hard to answer without seeing your actual code.

domedia
06-16-2009, 06:26 PM
I took out the email.. I think I'm going to institute a rule about not adding email addresses in the forum... I really don't want you guys to get extra spam just because you wanted to post here.

japhyboy
06-16-2009, 07:26 PM
@charset "utf-8";

/* */
/* General styles */
body {
color: #333333;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background: #CC3333;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:95%;
}

/*------------Header----------------------------*/
#header {
position:relative;
background: #d52e36 url(assests/images/sitelogo.jpg) no-repeat;
height: 124px;
clear: none;
float: none;
}


#header p,
#header h1,
#header h2 {
margin:0;
padding-top: 17px;
padding-right: 0px;
padding-bottom: 0;
padding-left: 150px;
font-size: 36px;
}
/*-------------------Nav Bar INSIDE Header--------------*/
#header ul {

width:100%;
list-style:none;
padding-left:0;
margin-top: 19px;
margin-right: 0;
margin-bottom: -6px;
margin-left: 135px;

}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
text-align:center;
background:#eee;
color:#FFFFFF;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
background-color: #B59396;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 1px;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
float: left;
}
#header ul li a:hover {
background:#369;
color:#fff;
}

#header ul li a span {
display:block;
}
/* ----------------------------'widths' sub menu------------------------------- */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* -----------------------------------------column container ---------------------------*/

.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/*-------------------------------3 Column settings---------------------- */

.threecol {
background:#FFFFCC; /* right column background colour */
}
.threecol .colmid {
right:25%; /* width of the right column */
background:#fff; /* center column background colour */
}
.threecol .colleft {
right:50%; /* width of the middle column */
background: #FFFFCC; /* left column background colour */
}
.threecol .col1 {
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
background:#000000;
color:#FFFFFF;
}
/* */
.colmask threecol .colmid .colleft .col1 p {
}