17 replies [Last post]
Nemuro
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2007-11-22
Posts: 5
Points: 0

Hello, Robert is my name.
I am a junior designer and I am learning as I go, as most people do.
I have used only tables because they seem to render not so differently cross-browser like the div's do.

I have the example below, which shows of the kind of layout I am working with. I tried to make a div based layout like that one, but with little success. I am a total beginner with Divs and the way they are positioned, so please, if you take on this quest, give me some guidelines.

I would also be pleased to be guided into making this layout tableless, I am not trying to make anyone do my work. I am just overwhelmed of the way the divs are positioned.

So here goes, this is what I want to achieve using Doctype and ONLY Divs:

*, BODY, HTML { margin:0;padding:0;border:0 }
table {border:1px solid black;}






 
 


 
 
 










 
 
 

 
 
 









 
 
 











 
 
 

 
 
 





Footer Text

I am grateful to you already, for you have read so far Smile

Thanks,
Robert.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

http://www.google.co.uk/searc

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

On second thoughts, your

On second thoughts, your page looks very pretty, but has zero content.

What exactly do you envisage using this type of layout for?

Verschwindende wrote:
  • CSS doesn't make pies

Nemuro
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2007-11-22
Posts: 5
Points: 0

What could be the point in

What could be the point in including content? I want to stick to positioning, I don't want to clutter the page, I just want to point out easier what I am trying to achieve.

This is just a sketch of a page Smile

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Nemuro wrote:What could be

Nemuro wrote:
What could be the point in including content? I want to stick to positioning, I don't want to clutter the page, I just want to point out easier what I am trying to achieve.

This is just a sketch of a page Smile

Without knowing what the page is going to contain it's impossible to lay it out properly.

All we'd do is replicate the entire page using hundreds of divs, which is not the point of CSS.

If you have content, eg a navigation bar, a page title, a footer, etc, and you want it to look like your example, we can do that.

Verschwindende wrote:
  • CSS doesn't make pies

Nemuro
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2007-11-22
Posts: 5
Points: 0

Just imagine it has &nbsp ;

Just imagine it has &nbsp ; all over it.

Triumph (not verified)
Anonymous's picture
Guru

Nemuro wrote:Just imagine it

Nemuro wrote:
Just imagine it has &nbsp ; all over it.

Thank you for playing. We have some consolation prizes backstage on your way out.

Nemuro
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2007-11-22
Posts: 5
Points: 0

I was talking about the

I was talking about the positioning of the containers, why won't anyone understand?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

More to the point, why don't

More to the point, why don't you understand? Don't you suppose we know pretty much what we're talking about?

The way things work is that you have content that is well structured and marked up with semantic (meaningful) html tags. The content may be dummy text, eg. lorem ipsum, and dummy images of appropriate size.

Only after you have content with valid markup is the css written to create the layout.

Remember, done correctly, the css is layered on top of the html, so you must have something to begin with. This is not some PhotoShop or GoLive slice and dice exercise.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Nemuro wrote:I was talking

Nemuro wrote:
I was talking about the positioning of the containers, why won't anyone understand?

if all you want is a page full of coloured boxes then use tables.

If you actually have a point to the design (eg each box will contain something) then we'll help you do it properly in CSS.

It's like asking us how to build a house out of trifle. Unless you have a reason for it there's no point.

Verschwindende wrote:
  • CSS doesn't make pies

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 7 years 3 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

In best Homer Simpson

In best Homer Simpson voice.

'Mmmmm house made of trifle.'

Life's a journey. Enjoy the trip.

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 14 years 49 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

solution here

This demo hangs together with divs and no tables. inline styles (shudder) but he's not paying me so ....

The class=table / row / cell are there to help someone used to tables to see how to convert over to DIV

It'll get a newbie off the ground quick and thats what the gentleman ordered. Some of the other posts were somewhat less than gracious; please accept my apologies for my fellow team members; they have lofty ideals.

*, BODY, HTML { margin:0;padding:0;border:0 }

.row, .table {clear:left;} /* class that starts another row */

.cell {float:left;} /* line them up one after another */

header left
header center
111111111 
222222222 
333333333 
Active Button 
Active Button 
Active Button 
Inactive Button 
Inactive Button 
Inactive Button 
content left 
content center 
content right 
Active Button 
Active Button 
Active Button 
Inactive Button 
Inactive Button 
Inactive Button 
Footer Text

Just doin' my best at www.jinotega.com
Tony Robins

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

jinoturistica wrote:Some of

jinoturistica wrote:
Some of the other posts were somewhat less than gracious; please accept my apologies for my fellow team members; they have lofty ideals.

Please don't apologise for us Wink Most of us are at the stage that rather than waste our time giving somebody code, we ask why they want to do something, what they're trying to achieve, then we educate them on the best way to do it.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

inoturistica I would rather

inoturistica I would rather that you didn't applogise on behalf of other 'fellow' team members, maybe wait a while until you've built up a few posts for that Smile

'Getting a newbie off the ground quickly' is seldom the best approach and most of us have spent a while trying to instill good practices based on our collective experience with standards based CSS/HTML coding.

As for 'Lofty Ideals' if that is what you think of our approach to coding and web development then I'm afraid your wrong, these are not 'Lofty Ideals' they are the necessary standards that we appreciate and follow and which the forum is based around.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Nemuro
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2007-11-22
Posts: 5
Points: 0

I would like to thank you

I would like to thank you all for your help,but mostly jinoturistica, the code he/she supplied helped me alot.

Sorry for those who have been disturbed by me.

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 14 years 49 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

horses for courses

You have a job and keep busy. I am retired with all the time in the world. You know a lot about CSS, I do not and take every opportunity to accept a new learning challenge. I don't have a manager to give me impossible tasks so I subscribe to forums and see what I can get involved with.

OTOH, I've been programming for 40 years so perhaps I don't know how CSS would do something but back in the days of Rexx and PL/1, I might have seen something similar.

As for asking people what they are trying to do then trying to educate them, WOW! thats a pair of serious challenges. Even 40 years of programming for big corporations doesn't prepare me for those 2.

I'll eat some humble pie now. Does Birds custard still exist?

Just doin' my best at www.jinotega.com
Tony Robins

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 5 years 33 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:I would like to thank

Quote:
I would like to thank you all for your help,but mostly jinoturistica, the code he/she supplied helped me alot.

S'pose it's more than the folks who answered your post at Sitepoint got anywho.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

emmtqg
Offline
Regular
Last seen: 13 years 9 weeks ago
Timezone: GMT-5
Joined: 2007-04-20
Posts: 44
Points: 0

Robert - as someone myself

Robert - as someone myself starting out w/ css (not that recently, but still learning because I'm juggling lots) - reading this post kinda made me think: Have you read posts where everyone here, especially those much more experienced, helped ALOT of people out and in a way where you actually get to learn the language and the integration with X/HTML AND help w/ the problem at hand? I read the above post at Sitepoint as well. Lotsa help around. Just have to read and do the common sense things here that I learned here: doctype/layouts/semantics. There's ALOT here - and ALOT of good practices and advice.

Should thank the people at sitepoint BTW.

Just my take at the whole thread. :shrug: