hi, im playing with my first div layout, and basically i have it so its two divs next to each other one with the navi and one with content,

http://calm.dansgalaxy.co.uk/div/contact.php

as u can see the contact form goes under the navi, i want the navi (like with tables) to be like one cell of content and the content to be another and not over lap, i have tried settign the height of both divs to 100% and just did nought, hope someone can help,

Also this layout dont work right it FF, if u look at http://calm.dansgalaxy.co.uk/div u will see that its got white space, this is basically how i want the layout, but in FF it seems to ignore it and the bottem footers and HRs jumpe up and cram and aargh. i dunno

css: http://calm.dansgalaxy.co.uk/div/calmcss.css

Also anyother POSITIVE or at least contructive comments about the layout and colours will be greatly apprieciated.

Thanks all!,

Awaiting your answers obediantly refreshing the page XD..

Dan

Add float: left; to your content div and remember to clear your float at the end of the content div.

And I know you're new to the whole tableless layout thing, so I'm gonna try and be gentler than LNR probably would be. But you should also look at doing things using other elements that you're presently doing with tables as well (to wit, your menu). But yeah, tackle one thing at at time. That's always the smartest approach.

By the way, that boxing turtle thing is kinda creepy. Can you lose that?

so I'm gonna try and be gentler than LNR probably would be.

What are you saying Adam ?? You think I'm a harsh (web)mistress ??
He's at least making an effort and I"ll help anyone along that at least tries to make the switch to table-less layouts. It's not simple by any means.

Dan the site's looking a lot better than the original you had. I have to agree about the boxing turtle, it looks pixelated to me.

You're using transparent PNGs for the menu, which is fine.. except for IE6, it can't handle transparent png so you'll have to remember to use either the filter or the JS trick to force it.

The menu is best done with an unordered list, and you can then dump the table for your nav.

Firstly, i know the navi is the same file i used for the new one as the old one, but i will eventually convert it later,

And i am already using float: left i think... heres the css for the nav and content divs what u mean "clear" it? sorry its probally the first time i ahve used float.

.nav
{
 
   float:left;
   margin-left: 0px;
   margin-right: 20px;
   width: 150px;
   height: auto;
}
.content
{  
   text-align: left;
   margin-right: 10px;
   margin-left: 10px;
   height: auto;
}

please tell me what i need to Add/Remove.

I was seriously going to title this thread "LadynRed HELP!" but i thought could annouy someone so i didnt...

anyway thanks,

i have heard about the whole transparent thing in certain broswers but at the moment untill the final colors and what not are sorted, i shall leave them as they are and im hoping to work it so its only one graphic wirth out text on and the text is on to or soemin but for now im doing the rest.

With regard to the boxing turtle (which is really annouying me becasue everyone always says its crap! makes bad impression) anyway i would really really love for someone (not be coz i simple cant! [makin the buttons for the navi was hard enough]) to recreate it, in a larger better quilty etc,

And yes it HAS to stay its the Charity Logo! its all about fighting through and that, and the turtle for "slow and steady wins the race" its the charity thing it is a cancer charity. PLEASE if u can make it better PLEASE feel free, i will be very happy and frankly it will look good if i can make a site with a better graphic and say "it was done by a pro i know" even if ur not if u make a good graphic you will be for the sake of it! XD

again thanks,
and please tell me what i have to do thanks
Dan

i added float: left to the content one too it works sorry i mis understood you.

hi, i never said thanks btw really do apprieciate your help, and i have to say i have got quite a repect for LNR (with many others),

Can someone please tell me why the layout just dont work in FF? its all wrong.. but almost fine in IE,

Thanks

Dan

Ok, try this instead - fix the paths to the images to fit your structure.

HTML:

<!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"><head><title>C.A.L.M Children's Cancer And Laeukemia Movement: Home</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-gb">
<meta name="robots" content="index, follow">
<meta name="rating" content="General">
<meta name="author" content="CALM Charity, Dan Rodgers">
<meta name="keywords" content="calm, c.a.l.m, C.A.L.M, calm charity, charity, cancer, laeukemia, children">
<meta name="description" content="C.A.L.M Charity is a independent local charity, Which cares for the needs of famillies in the swindon health district (Wiltshire, UK), who have children suffering from Cancer or Leukaemia.">
<link href="http://calm.dansgalaxy.co.uk/div/favicon.ico" rel="shortcut icon">
<link href="index.php_files/calmstyle.css" rel="stylesheet" type="text/css"></head><body>
<div id="wrapper">
<div class="main">

<div class="header">
<img class="fltlft" src="index.php_files/calmsmall100.gif" height="100" width="223" alt="CALM logo" />

<img class="logort" src="index.php_files/logogif.gif" alt="CALM logo of fighting turtle" />

</div>
<br class="brclear" /><!-- clears floated elements in header -->

<div class="quickmenu">

Children's Cancer And Leukaemia Movement
</div><!-- end quickmenu -->

<div class="nav">
<!-- ************************************************** ************************* NAVI ************************************************** *********************-->
<ul id="navi">
<li><a href="http://calm.dansgalaxy.co.uk/div/index.php" title="Home"><img src="index.php_files/home.png" alt="Home" name="Image11"></a></li>
<li><a href="http://calm.dansgalaxy.co.uk/div/about.php" title="About Calm Charity"><img src="index.php_files/about.png" alt="About CALM" name="Image12"></a></li>
<li><a href="http://calm.dansgalaxy.co.uk/div/events.php" title="Upcoming Events"><img src="index.php_files/events.png" alt="Upcoming Events" name="Image13"></a></li>
<li><a href="http://calm.dansgalaxy.co.uk/div/howtohelp.php" title="How You Can Help"><img src="index.php_files/howhelp.png" alt="How you can help" name="Image14"></a></li>
<li><a href="http://calm.dansgalaxy.co.uk/div/calmarea.php" title="CALM area"><img src="index.php_files/calmarea.png" alt="How you can help" name="Image15"></a></li>
<li><a href="http://calm.dansgalaxy.co.uk/div/kidsarea.php" title="KIDS STUFF!"><img src="index.php_files/kids.png" alt="How you can help" name="Image16"></a></li>
<li><a href="http://calm.dansgalaxy.co.uk/div/calmlogo.php" title="History of the CALM Logo"><img src="index.php_files/logo.png" alt="CALM logo" name="Image17"></a></li>
<li><a href="http://calm.dansgalaxy.co.uk/div/howtohelp.php" title="What the families say..."><img src="index.php_files/families.png" alt="What the families say..." name="Image18"></a></li>
<li><a href="http://calm.dansgalaxy.co.uk/div/contact.php" title="Contact Calm"><img src="index.php_files/contactcalm.png" alt="Contact CALM" name="Image19"></a></li>
<li><a href="http://calm.dansgalaxy.co.uk/div/guestbook.php" title="Sign CALM's Guestbook"><img src="index.php_files/guestbook.png" alt="Sign CALM's Guestbook" name="Image20"></a></li>
<li><a href="http://calm.dansgalaxy.co.uk/div/links.php" title="Some useful links"><img src="index.php_files/links.png" alt="Some Useful links" name="Image21"></a></li>
</ul>
<!-- END OF NAVi -->
</div>


<div class="content">
<p>Content goes here</p>
</div>
<br class="brclear" />

<div class="footer">
<span class="lrgfooter">© C.A.L.M Trust. <a href="http://www.charity-commission.gov.uk/registeredcharities/showcharity.asp?regno=292318">Registerd Charity No. 292318</a></span>
<br>
<span class="smlfooter">Designed and Hosted by © 2006 - 2007 <a href="http://dansgalaxy.co.uk/">Dansgalaxy.co.uk</a></span>
<hr class="hr">
<a href="http://validator.w3.org/check?uri=referer" shape="rect">
<img src="xhtml.htm" alt="Valid XHTML 1.0!" height="31" width="88"></a>

<a href="http://jigsaw.w3.org/css-validator/" shape="rect">
<img src="w3ccss.bmp" alt="Valid CSS!" height="31" width="88"></a>

<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level A Conformance">
<img src="w3cwai.png" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" height="32" width="88"></a>

<a href="http://php.net/" title="PHP.net"><img src="phplogo.png" alt="Powerd By PHP"></a>
</div>

</div><!--end main -->
</div><!-- end wrapper -->

</body></html>

CSS

body
{
background-color: #FFFF66;
margin: 0;
padding: 0;
text-align: center;

}
#wrapper{
width: 891px;
position: relative;
margin: 0 auto;
}


.header{
height: 100px;

}


a img
{
border: 0px;
}

.main
{
color: green;
height: auto;
width: 891px;
background-color: #ffffff;
text-align: left;
}


.hr
{
width: 99%;
color: green;
text-align: center;
}

.quickmenu
{
height: 30px;
text-align: center;
border-top: 2px solid #ADADAD;
border-bottom: 2px solid #ADADAD;
margin: 10px 0;
padding: 5px 0;
}

.nav
{

float:left;
margin-left: 0px;
margin-right: 20px;
width: 150px;

}

#navi{
margin: 0 0 0 10px;
padding: 0;
list-style: none;
}

.content
{
text-align: left;
margin-right: 10px;
margin-left: 10px;

}

.footer
{
text-align: center;
margin-left: auto;
margin-right: auto;
width: 891px;
margin-top: 300px;
background-color: #ffffff;
}
.smlfooter
{
font-size: 10pt;
}
.lrgfooter
{
font-size: 12pt;
}

.logort{
float: right;
padding: 12px 10px 0 0;

}

.fltlft{
float: left;

}

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

You should always include width and height attributes on your <img> tags and do not resize a grapic in the HTML, create the correctly sized graphic first. I've created a 100px high version of the CALM logo. See attached.

ok thanks alot, ill ahve to slice and dice it and hopefully it will all work!

Dan

i have now implemented all the stuff u did LNR but the navigation buttons, are seperated. they have like spaces in between.
the buttons.

hope u can tell me why...
Thanks
Dan

Have you got it uploaded to your server ?
If you don't want spaces between the <li> items, set the top and bottom margins and padding to zero:

#navi li{
margin: 0;
padding: 0;
}

hi,
No just realised i havent updated the server copy i was doing some of it late last night so i obviously forgot to do it before i loged off..

anyway thanks alot, i will do that and upload the newer more table less copy.

i have updated and uplaoded the site... http://calm.dansgalaxy.co.uk/div and that #navi li{
margin: 0;
padding: 0;
}

didnt work, still has spaces

or am i doing somin wrong.

thanks
Dan

Umm... looks like you forgot to upload the graphics

It is likely a combination of line-height and properties on the <a>'s themselves. There's also some bugs in IE related to extra spacing on lists.

Nope all there, you might have jumped in as the program was replacing all the files..
anyway all there now,
and it looks the same (it has spaces) in IE AND FF...

also when it didnt work i have set ALL margins and paddings on the navi to 0

Thanks
Dan

you might have jumped in as the program was replacing all the files..

Uhh.. nope.. still not seeing any images and now most of your links on the menu are broken.

ok... im seeing all images and the links not work because i havent amde the pages yet at the moment i only have index a contact page done, i want to have the design all done before i start making loads of pages etc so i dont have to keep going back and editing the layout in every one etc... not sure why your not seeing images...


i just looked now, (at school using IE6) and they arnt there...

Sorry i have just reaslised why im stupid i havent chage a setting in my config file so all the patsh are http://localhost/calm not http://calm.dansgalaxy.co.uk/div... ill change now and then u should be able to see all ok and it should work

I wondered if the path wasn't the issue

Ok, make this change:
#navi li{
margin: 0;
padding: 0;
height: 35px;
}

Set the height to the same height as the images, the gaps close.

thanks thats fixed it,
btw what do people think about the turtle background? i wasnt sure when i did it.. i took the pic and faded it not sure what people will think...

opinions welcome

no doubt i will be back soon when i come accross another problem and ill try to tp you LadyNRed not sure i will be able to i think i done it only little while ago...

Dan