Hi. I posted a topic in the website review on a new site I am working on - trying to not use tables for layout. LadyNRed mentioned a few ideas to help with layout especially after I replied to a topic on this forum about CSS layouts.

http://www.gryffindor.me.uk/www.fant...late-test.html

Here I have tried to cut the code down and now at least have sorted out centering and columns and floating footer but now have a few new problems.

How on earth do I get those graphics to be placed where I want without using a table? I tried different float techniques with numbers of columns etc but just came unstuck.

What can I do to stop the transparency effecting my text. In the old design
http://www.gryffindor.me.uk/www.fant...ut1-index.html I had a floating extra layer over the background squares with transparency so that the text etc was not effected. Now what do I do? Can I still have relative or absolutely positioned div's / layers within a div / layer?

Also the menu. I have switched the orange box to the list style but the problem is now it does not sit in the right place. When it was a placed graphic I could tell it to align text middle. Now its just ... wrong !

PLEASE HELP !!!!! Tearing my hair out trying to achieve this effortless CSS layout that everyone keeps banging on is soooo easy & soooo much better than tables & keep wanting to just go back to putting stuff into a table and it be so much easier.

ORRRR do I go back to absolutely positioned div's / layers as in Mark 1 effort ???

so much work to be done lets start:

1. about transparency. not a good idea to use because its not cross-browser. and since we like our site to be shown great in mostly circumstances, forget about transparent elements . Its better to "cheat" and hand-make pictures that seem partly transparent. for example you could redesign the rounded box with snowy heighs behind them DIRECTLY in image. Look thr girl on www.musicdept.it to have an idea

2. about the list. perhaps you could have problems to get it centered, but u can freely set margin and padding from left, to place UL block in desired position so why bother about?. finally if you like to continue to use the orange squares, you can alter the default bullet style for list with a custom image. check out here http://www.echoecho.com/csslists.htm

home this help! ciao!

Ok, for 1 thing you are missing the closing </div> tag for the #page div, that will help for starters. The page is still not centering in Firefox.

It is not centering in FF because your cSS is incorrect:

margin-left:0 auto;
margin-right:0 auto;

The correct rule is margin: 0 auto;

Most of your code is pretty good, you're not that far out of whack. You DO need to learn to CLEAR your floats though. I've made some modifications as an example for you:

body{ background-color:#53A6D5;
text-align:center;
margin:10px 0 0 0;
padding: 0;
}

#page {
position:relative;
width: 731px;
margin: 0 auto;
/*margin-left:0 auto;
margin-right:0 auto;*/
text-align:left;
}

.Header {
margin-top: 1px;
border-left: 1px solid #2C7FB6;
border-bottom: 0px;
border-right:1px solid #2C7FB6;
border-top: 1px solid #2C7FB6;
height:132px;
/*margin-left:auto;
margin-right:auto;*/
background: url(Layout1_r1_c1.jpg);
background-position:center;
}

.numbers {position:absolute;
margin-left: 0px;
margin-top: 0px;
left: 303px;
width: 393px;
height: 22px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #F7931D;
font-size:22px; font-weight: bold;
padding: 5px;
line-height: 18px; z-index:6;
}
.Mid {
background: url(Layout1_r2_c1.jpg) no-repeat;
/*background-repeat:no-repeat;
background-position:top;*/
height: 423px;
border-left: 1px solid #2C7FB6;
border-bottom: 0px;
border-right:1px solid #2C7FB6;
border-top: 0px solid #2C7FB6;

}
.footer{
/* z-index: 2; */
/* left: 10px;*/

}
.footer-back{
border: 0px solid #2C7FB6;
height: 70px;
padding-top: 1px;
padding-bottom: 1px;
}
.footer h1{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #163F5A;
font-size: 15px;
font-weight: bold;
text-align: center;
line-height: 17px;
margin-bottom: 0px;
}
.footer p{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #163F5A;
font-size: 10px;
font-weight: bold;
text-align: center;
height: 13px;
padding-top: 0px;
padding-bottom: 2px;
margin-top: 0px;
}
.footer a{
color: #163F5A;
text-decoration: none;
}
.footer a:visited{
color: #163F5A;
text-decoration: none;
}
.footer a:hover{
color: #FFFFFF;
text-decoration: none;
}

#menu-background, #Column2
{ float:left;
margin-left: 11px;
margin-top: 8px;
}
#menu-background {
width: 151px;
height: 182px;
padding: 5px;
background-color:#FFFFFF;
/*filter: progid:DXImageTransform.Microsoft.BasicImage(opaci ty=.7);
opacity: .7; border:1px solid #2C7FB6;*/
/* text-align:left;*/

}

.menu {
margin-left: 0px;
margin-top: 0px;
/*z-index: 3; */
width: 151px;
height: 182px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size:11px; font-weight: bold;
padding-left: 3px;
/*line-height: 20px;*/
}

.menu li {
text-align:left;
list-style: none;
margin-left: 0px;
/*list-style-position:outside; */
background: url(orange-square2.gif) no-repeat;
/*vertical-align: bottom;*/
padding: 0 0 6px 14px;



}

.menu a{
padding: 0;
margin: 0;
color: #666666;
text-decoration: none;
}
.menu a:visited{
color: #666666;
text-decoration: none;
}
.menu a:hover{
color: #F7931D;
text-decoration: underline;
}

#Column2 {
width:520px;
padding: 0px;
/*z-index:1;*/
/*filter: progid:DXImageTransform.Microsoft.BasicImage(opaci ty=.7);
opacity: .7; text-align:left;*/

}

.border {
background-color:#FFFFFF;
/*filter: progid:DXImageTransform.Microsoft.BasicImage(opaci ty=.7);
opacity: .7; border:1px solid #2C7FB6;}*/
margin-bottom: 10px;
padding-bottom: 10px;

}

h1{
color: #F46404;
line-height: 22px;
font-size: 20px;
padding-left: 5px;
font-weight: bold;
margin-top: 1px;
}
h2{
line-height: 16px;
font-size: 12px;
padding-left: 5px;
}
.border p{
padding-left: 5px;
border: 0px;
margin-bottom: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #12344B;
font-size: 11px;
font-weight: normal;
text-align: left;
}

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

<div id="page">
<div class="Header">
<div class="numbers">01622 861 533 01622 862 563</div>
</div><!-- end header -->

<div class="Mid">
<div id="menu-background">
<ul class="menu">
<li><a href="http://www.gryffindor.me.uk/www.fantiski/Layout1-index.html">Index</a></li>
<li><a href="http://www.gryffindor.me.uk/www.fantiski/Layout2-contact.html">Contact Us</a></li>
<li><a href="http://www.gryffindor.me.uk/www.fantiski/Layout7-details.html">Apartment </a></li>
<li><a href="http://www.gryffindor.me.uk/www.fantiski/Layout4-prices.html">Apartment </a></li>
<li><a href="http://www.gryffindor.me.uk/www.fantiski/Layout4-prices.html">Prices</a></li>
<li><a href="http://www.gryffindor.me.uk/www.fantiski/Layout6-map.html">Val d'Isère map</a> </li>
<li><a href="http://www.gryffindor.me.uk/www.fantiski/Layout4-arrivals.html">Arrival
&amp; Departure</a></li>
<li><a href="http://www.gryffindor.me.uk/www.fantiski/Layout2-snowfun.html">Snow Fun</a></li>
<li> Links </li>
</ul>
</div><!-- end menu-background -->


<div id="Column2">
<div class="border">
<h1>Ski Apartment to Rent in Val d'Isère </h1>
<p>Welcome to the discription of this lovely self catering
ski apartment chalet owned by Fantiski. Fantiski in val
d’Isere are sure that you will enjoy your visit to
our apartment and hope you will find all the answers to
your questions on our site. If not please ring us and we
will be pleased to talk to you about our lovely self catering
ski apartment in Val d’Isere. </p>
<p>We Hope to see you in Val d’isere </p>
<p>Fantaski Rue du rondpoint 73150 Val d’sere</p>
</div>

<div class="border">
<table align="center" border="0" cellpadding="6" cellspacing="5" width="93%">
<tbody><tr>
<td height="84"><div align="center"><img src="template-test_files/smalpic1.png" alt="Pic1" height="54" width="59"></div></td>
<td><div align="center"><img src="template-test_files/smalpic2.png" alt="PIc2" height="54" width="59"></div></td>
<td><div align="center"><img src="template-test_files/smalpic5.png" alt="Pic5" height="54" width="59"></div></td>
<td rowspan="2"><div align="center"><img src="template-test_files/snow-board-pic.png" alt="Snow" height="156" width="200"></div></td>
</tr>
<tr>
<td height="58"><div align="center"><img src="template-test_files/smalpic3.png" alt="Pic3" height="54" width="59"></div></td>
<td><div align="center"><img src="template-test_files/smalpic4.png" alt="Pic4" height="54" width="59"></div></td>
<td><div align="center"><img src="template-test_files/smalpic6.png" alt="Pic6" height="54" width="59"></div></td>
</tr>
</tbody></table>
</div><!-- close border div> -->
</div><!-- close Column2 -->
</div> <!-- close Mid -->

<br class="brclear" />
<div class="footer">
<div class="footer-back">
<h1>Contact Fantiski on Tel: 01622 861 533 Fax: 01622
862 563</h1>
<p><a href="http://www.gryffindor.me.uk/www.fantiski/Layout1-index.html">Index</a> | <a href="http://www.gryffindor.me.uk/www.fantiski/Layout2-contact.html">Contact
Fantiski</a> | <a href="http://www.gryffindor.me.uk/www.fantiski/Layout7-details.html">Apartment Details</a> | <a href="http://www.gryffindor.me.uk/www.fantiski/Layout4-prices.html">Apartment
Prices</a> | <a href="http://www.gryffindor.me.uk/www.fantiski/Layout6-map.html">Val d'Isère Map</a> <br>
<a href="http://www.gryffindor.me.uk/www.fantiski/Layout4-arrivals.html">Arrival &amp; Departure</a> | <a href="http://www.gryffindor.me.uk/www.fantiski/Layout2-snowfun.html">Snow
Fun</a> | <a href="http://www.gryffindor.me.uk/www.fantiski/Layout3-links.html">Links</a> </p>
<p>Website Design and Hosting by BITS Computers Bitsmedia -<a href="http://www.bits.co.uk/" target="_blank"> http://www.bits.co.uk</a>|
<a href="http://bitsmedia.net/" target="_blank">http://bitsmedia.net</a> </p>
</div><!-- close fotter-back -->
</div><!-- close footer -->

</div> <!-- close page -->

Hope that helps :)

The images in the center can be done with CSS and lists, actually. They call it 'floating thumbnails' and it works pretty well.
http://css-discuss.incutio.com/?page=GalleryFloat

Once again LadyNRed thanks.

I have eventually sorted the problem with the orange button in the list by putting no image for the list style but placing a graphic element inside the link. It mean I could background position both left and bottom then pad the text to sit just to the right of the image - it works great. TheClue it was already placed as a graphic inside the list style as the default bullet list image anyway.

I will look at your revisions for code & work on remembering to clear floats. LOL

As for transparent issue - thanks for your comment TheClue but I am against better advisement going to stick with it. The boxes are white in the background so if the transparency does not work then it is ok as the text will be on a white background anyway. Trying to create a portion of the graphic that is transparent then flood this into the background would be too time consumiing as the layouts change and with later edits and text changes I will always get called back to redo the graphics unecessarily. So completely cross browser it may not be but for the moment I will have to see how it goes. The client likes the idea that the background shos through and I have resolved to darken the text so that it shows up better and sharper.

I will have a go at list styling the graphics - I will need to learn this as my next job involves a dynamic gallery in PHP or ASP with lots of thumbnails which I want to do in CSS rather than the old fashioned way of creating a table.

Thankyou LadynRed - I have ammended my code.
I added the page close div tag that I had left out.
Cleared my columns and sorted out the page centering in Firefox.
Since working on this I have worked on one or two other sites and got better at distinguishing between using ID's for layout stuff and classes for formatting & styling which does help my CSS.

I am still having problems getting rid of the tables on the details page and after many trials with additional split columns and formatting I went back to tables. Although I can't work out why the border2's here will not show the margin between them in IE only in firefox etc.

Any idea ?

Also I can get the tables to center in Firefox but not in IE? Any idea why?

Got a new URL so I can see the code ?

This is the new link to new code

http://www.gryffindor.me.uk/www.fantiski/index.html

They look centered in FF 2.0.
If you're referring to the table inside the div with a class of .border2, it's centered in FF.

Ah but not in IE. for example if you go to the details page the tables I have got the details in are on the left. I have left these tables for the ease of the person likely to do the updates who was really upset I am switchingt o CSS as she is not that proficient.

In order to make IE center you have to use text-align: center on .border2.