New Portfolio css issues, please help :)

[sitedesign]

Ok I am in the middle of starting my portfolio site,this time taking on css3 with a few little tricks i have picked up along teh way, trying to keep imagery off the template as much as I can.

So I am playing about at the moment just started a page with a huge logo in type or selectable text rather than an image, I am trying something new with it
Untitled Document

Take a peek

Anyway, the problem I am having is trying to get rid of the large amount of space I have at the foot of the page.
To make the "design" text I used a series of spans with a display: block in teh css to make them stand on top of each other..this seems to be the problem ..however I like this effect and how I achived it.. I really just want to keep it but also lose that large amount of empty space..

Any suggestions??

[Stevie D]

Just to say that is a really cool bit of design work there, I'm very impressed at how you've got it all lined up. Yes, the extra space at the bottom is because you've used position:relative; with big negative values to pull the letters up the page.

A quick play around in Dragonfly suggests that you can set a height on #content and it will crop the content div at that point but will leave the relatively positioned text exactly where you want it. You can set height:1em; if that's all you're having on the page, or work out the relevant height in ems (which should be pretty consistent across browsers, if you're lucky) if you need anything following the crossword.

Disclaimer: I have tested this in Opera 11.5 but nothing else!

[sitedesign]

Just to say that is a really cool bit of design work there, I'm very impressed at how you've got it all lined up. Yes, the extra space at the bottom is because you've used position:relative; with big negative values to pull the letters up the page.

A quick play around in Dragonfly suggests that you can set a height on #content and it will crop the content div at that point but will leave the relatively positioned text exactly where you want it. You can set height:1em; if that's all you're having on the page, or work out the relevant height in ems (which should be pretty consistent across browsers, if you're lucky) if you need anything following the crossword.

Disclaimer: I have tested this in Opera 11.5 but nothing else!

Thanks for the comment I did indeed try your suggestion but it didnt work, I put a background colour on #content and teh container does shrink however the page remains quite long.

I am going to have anotehr play with it and try to get rid of those negative margins, I really have never used them until today as this is quite different from the kind of stuff i usually come up with

[sitedesign]

Ok I fixed it very happy indeed with the result Basically I got rid of all negatiove margins and floated teh two vertical words to the left and right BEFORE relatively positioning them on the screen.