3 col layout issue

lennon · Post by **lennon** » Tue May 23, 2006 10:36 am

Hi I'm using the latest verison of CMS.

I've a design using the bullet menu vert 3 col. I'm having real probelms with getting the images on the right to to align to the top in ie 6. Its working perfectly in firefox (pc).

I can get it to align to the top by reducing the main div in width by a few pixels. This means my images on the right go to the top but are not flush to the side - theres a white gap.

Any ideas anyone? I've been on this for hours.

http://www.eircomcarriereventwestport20 ... x.php/home

Maybe this is something obvious...

Any help would be appreciated.

nils73 · Post by **nils73** » Tue May 23, 2006 11:08 am

Hi,

maybe you should try something like "position: relative;" on the objects that you would like to have aligned "top" ... or you should consider using conditional comments and having a separate style for workarounds for IE6 and other IEs.

Regards,
Nils

cyberman · Post by **cyberman** » Tue May 23, 2006 11:15 am

Without a look in your css it would be IMHO very difficult to suggest some modifications

...

Perhaps a look to default template Bulletmenu Vert 2 col would be helpful to repair your problem.

lennon · Post by **lennon** » Tue May 23, 2006 12:56 pm

had a look at it the defualt. Not sure what it is.

The 3 cols add up to 98% including margins. Why is this? Where is the other 2% used if anywhere.

I'll keep looking....

tsw · Post by **tsw** » Tue May 23, 2006 1:35 pm

Best way to start doing new layout is to first create a _small_ testbed

this is what I usually use for starting a new layout

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

</__body>

   <div id="header">
      <h1>HEADER</h1>
   </div><!-- end header -->

   <div class="breadcrumbs">
      BREADCRUBMS
   </div>

   <div id="content" >
      CONTENT
   </div>

   <div id="menu">

   </div>


   <div id="footer">
      FOOTER
   </div>

<__body>
</__html>

then I have some css, like

Code: Select all

/* ZIP IT */
* {
margin:0;
padding:0;
}

div {
border:1px solid red;
}

now I have the basic html and css so and I can start editing it. now we need to have three columns so lets add two divs into content. This is where I need to decide if this right hand column information is more important than page content. As google likes havin important content first in the source and it seems you have only few images on the right side, Ill put it below content in the source (it might be good to have the images below menu also but lets leave it as an excersice for the reader

so Ill add

Code: Select all

   <div id="content">
     <div id="leftcontent">center CONTENT</div>
     <div id="rightcontent">RIGHTCONTENT</div>
   </div>

Now I have all necessary html in place and I only need to think about css.

now we need to place these divs

first we float content to right to give space for menu

Code: Select all

div#content {
float:right;
width:80%;
}

then squeeze menu on the left

Code: Select all

div#menu {
margin-right:80%;
 }

now we need to have right and center content aligned so lets float em also

Code: Select all

div#leftcontent {
float:left;
width:80%;
 }

div#rightcontent {
margin-left:80%;
 }

same idea just different dircetion

now we have 3col layout that is also liquid

http://tsw.backspace.fi/3col/

next step would be defining maybe

Code: Select all

body {
width:60em;
margin:0 auto;
}

to have fixed width centered layout..

or maybe

Code: Select all

body {
min-width:20em;
max-width:80em;
margin:0 auto;
}

imagination is the limit

next step would be defining bg for the header

Code: Select all

div#header {
height:5em; /* make the bg image larger than actually is seen to get "zoom" effect or just define height in px */
background: #fff url('head.png') repeat right top;
}

maybe some for the footer too

Code: Select all

div#footer {
height:2em;
background: #fff url('foot.png') repeat right top;
}

thats about it

Ill leave importing this to cmsms as readers excersice

(hint, change CONTENT to {content} and TITLE to {title} and so on

hope this helps..

Dr.CSS · Post by **Dr.CSS** » Wed May 24, 2006 5:11 am

could try....

div#content{
width: 760px;
margin: 20px 0 0;
padding: 0;
text-align: left;
}
div#menu_vert {
float: left;
width: 180px;
margin:0px;
padding:0px;
}
div#main {
float: left;
width: 370px;
margin: 0px 5px;
padding:0px;
}
* html body div#main { this is for IE
float: left;
width: 370px;
margin: 0px;
padding:0px;
}
div#content2 {
float: left;
width: 185px;
margin:0px;
padding:0px;
text-align:right;
}

mark

lennon · Post by **lennon** » Fri Jun 09, 2006 1:23 pm

Cheers guys. thanks for all the help. My layout was pretty much liek the code above.

Ended up using marks-

* html body div#main { this is for IE
float: left;
width: 370px;
margin: 0px;
padding:0px;
}

bit and cheated with a graphic.

Tried the same layout the other day and no problem what so ever. strange world.

Thanks again for your time

CMS Made Simple Forums

3 col layout issue

3 col layout issue

Re: 3 col layout issue

Re: 3 col layout issue

Re: 3 col layout issue

Re: 3 col layout issue

Re: 3 col layout issue

Re: 3 col layout issue