Height/fill problems 2

[TrueDeviL]

Ok, so.. I've been writing & messing about with web design for a while now.. And I can write a whole site, with my eyes shut..

However, I've recently started a course to be a certified Web Design Manager, and the course introduced me to XHTML..

Now, so far, I've found 1 thing.. HTML 3.2/4.01 & tables, are far easier to use to design a site, I can put items where I want them, and they generally do as they're told.

But this XHTML stuff... Just don't work.. Or at least don't seem to work..

So maybe someone can lemme know where I went wrong?
--

A test website, for my Web Design site, trying to write it in 100% XHTML & CSS.

But some thing sjust don't work.. Like.. How to make the page background, 100% height? as in, I tell it to do 100%, and it leaves a gap at the bottom.

Also.. Scrolling? I have elements that go off the page, and either, you can't see all of them (they sit behind the footer), or they just don't work at all?

And.. I can make 3 colums easily.. But.. How to make 4? or 5.. Tables was so much easier..

Anyway, help appreciated

http://www.tdweb.co.uk

 

[vacunita]

Tables, are for tabular data, even back when it was o.k to use them for layout it was still technically wrong. They may seem easy at first, but in the long run they alwasy make things harder. Maintainance of websites that use tables is completely frustrating at least to me because you have to dig into cells and rows. That's hardly intuitive design to me.

But some thing sjust don't work.. Like.. How to make the page background, 100% height? as in, I tell it to do 100%, and it leaves a gap at the bottom.

Without seeing what you are doing, its hard to say. The Page you linked to shows the background all the way to the bottom in Firefox and IE8. So not sure what gap you are referring to.

And.. I can make 3 colums easily.. But.. How to make 4? or 5.. Tables was so much easier..

Columns are a tricky business in CSS, but at its most basic its really not to difficult. It gets difficult when you need them to shrink and grow with their content. But here try this:

html, body{
height:100%;
}

.column{
float:left;
width:19%;
border:1px solid gray;
height:100%;
}

------


<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
<div class="column">Column 5</div>

If you are starting, I would avoid using any type of positioning, your site seems to abuse it for no particular reason. And if you don't know what you are doing with it, it can have undesirable results that are hard to correct.

For most layouts positioning is mostly unnecessary.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[TrueDeviL]

Thanx for your reply Vacunita.

Yes, the site looks fine(ish) in full screen, but in a window (minimised) it no longer works how it's suppose to, I forgot to mention that bit, sorry.

Also that bit of code didn't seem to do anything, at least not on my site/page. So I dunno..

I'm fully aware what tables are for, and I also know it was wrong to use them, but let's be honest, you could get what you wanted, where you wanted at least, and they grew with thier content, and they did all the things that XHTML can't seem to manage.

I'm beginning to feel XHTML was a step backwards, I really do see it's advantages in some respects, but in other's it fails terribly.

 

[TrueDeviL]

Ok, with a very, very slight modification of the code, I've managed to get the site to layout roughly how I wanted..

Maybe after doing it all morning, and figuring out 1 'problem' after another, I got blinded.. Like the old saying "couldn't see the wood, for the trees"..

Let's see how I get on from here..

Thanx again.

I'm sure I'll be back once I get stuck again..

 

[vacunita]

Glad you got it to work.

The code should have produced 5 columns. The first 2 things were CSS, the last was the html required.

Placing each in its proper section in an html file should make it work.

Her you can try it here instead:

http://web101.site90.com/columns.php

I know CSS/XHTML may seem confusing at first, but once you get the hang of it gets easier and easier.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/