|
| |
|
|
GolfMad
Posts: 190
Joined: 3/20/2002
From: UK
Status: offline
 |
Trying tableless layout - help please? - 5/30/2007 11:43:20
http://www.engagepd.com/test/
Thought I would try to lay out a load of divs and style using css to get
header with 3 columns, room for artistic banner, menu, actual content and
footer.
I started doing this trying postion relative and float left and right for
the headers internal columns. I then placed relevant words in all banner, menu, content and footer sections to see what it would look like.
Well, I must be missing something basic and I cannot find by research what
probably fundamental errors I am making.
While in IE, the divs seem to be under each other, in Firefox the lower divs
have just risen to the top centre with two images left and right in the header
showing over the top of them (also if I wanted 3 columns in the header did i
need to set up a middle column, i only placed a left and right floated div
within the overall div).
Thanks for anyone who can get me to understand this side of tableless layout.
Regards
Phil
|
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Trying tableless layout - help please? - 5/30/2007 12:04:59
Hi
Leave off position:relative - it's useful on occasion (to get around the odd IE bug or to add to a div containing an absolutely positioned item) but generally not needed.
I'm assuming that you want the menu to be under the banner - in which case add "clear:both" to the rule for the menu.
With Firefox, Opera, safari etc (basically anything not IE) you need to clear floats otherwise it goes a bit wonky. Once you float an item or a div (you don't actually need the divs around the images - you could for instance just give them a class instead - not a major issue!) it basically doesn't take up any room any more (personally I think it does - but literally just a thin line's worth) and so whatever's following it will behave accordingly.
edit: just seen the second question there - if you wanted three divs in the header area then you can just float them all one way or the other.
BUT do you really need three divs? Personally I tend to go for adding in as little extra markup as possible (less to go wrong!) so I might try having it all in the header div, giving the two images a class which would float them left or right accordingly and then for instance if you've got text in the middle bit, just adjust the margins as appropriate (make sure the images are first in the code).
If you've got three images then I'd just have them in the header div and make up a rule in the stylesheet to float all images left or right for instance:
#header img {float:left; margin-right:10px;}
< Message edited by Tailslide -- 5/30/2007 12:22:46 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Trying tableless layout - help please? - 5/30/2007 12:51:23
Just messing about - here's how I'd do it (and I'm not saying it's the best way by any means - just a way)
http://www.littleblueplane.com/test/test.html
Obviously colours are just to make it easier to see bits - but I've added them in so you can see where you could change stuff. All styles are in the document head.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
GolfMad
Posts: 190
Joined: 3/20/2002
From: UK
Status: offline
|
RE: Trying tableless layout - help please? - 5/30/2007 15:37:59
Thanks ever so much for all your help Tailslide.
As I am learning slowly at this I think I can see most of what you are saying but will study the coding in more detail later and your help in providing the dummy page is so much appreciated. That is exactly what I wanted to do with text or an image based tag line in the middle of the header and I was just stumped even after Googling for help.
- where else would you get help of this nature - Outfront rules!!
Thanks very much Tailslide.
Kind regards
Phil
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Trying tableless layout - help please? - 5/30/2007 16:19:49
No problem at all. It takes a while to get your head round tableless design but it's well worth getting to grips with - it really does make life easier in the long run. I'm certainly not claiming to be brilliant at it - but I do use it day in day out and sometimes it does make your life easier when you're learning to see a working version of what you're aiming at.
When I started with CSS I tended to stick divs around everything (it's called divitis) and it took me a long time to learn that it's better to use as little extraneous markup as necessary (for instance that menu doesn't really need a div around it) however it's also useful to add ids to stuff on the page such as lists or divs so that in future you'll be able to change the whole layout of the page just by fiddling with the stylesheet - a big time saver - so it's a bit of a balancing act!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
GolfMad
Posts: 190
Joined: 3/20/2002
From: UK
Status: offline
|
RE: Trying tableless layout - help please? - 5/31/2007 3:09:27
Its really making more sense to me now thanks but I wonder if you would be good enough to help with a couple more points on that layout please.
I am using a dwt in EWD and where you have the content " Next Heading......end of Latin" will need to be editable on each page. If we dont give that section a Div I cannot see how I could highlight an area to "Manage Editable regions", apologies if i am wrong on this.
Could we have a div with ID of content but would it need more css and or allow the p style to work as set within it. I guess as it is just a p rule and not a class it will filter into that div ok unless that div had a p class statement.
Does this having another div give rise to the content floating to the top again in Firefox or from what you are saying and apologies for not getting it fully; the clear:both rule will stop this happening - could you explain a bit more about the clear both please?
Thanks again
Regards
Phil
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Trying tableless layout - help please? - 5/31/2007 4:07:34
Ah ok - I'm not familiar with how DWTs work but it's fine to have a div for the content frankly. The p style will work for all paragraphs on the page unless overridden by another rule (such as #header p or #footer p). You can add specific rules for the paragraph within the content div if you need to (#content p) again - not a problem.
Adding in divs isn't necessarily a problem - I usually start with a container, header, content, sidebar and footer (plus or minus a few). You can style most stuff within those divs just by referencing them properly e.g. #header img - but it does often help to add classes or ids to stuff within the basic framework to aid layout building. Back to that balance thing I guess.
The thing to avoid is throwing divs in without considering if they're really necessary (like around a list to style the list for instance) as I find that the more stuff you put in there, the more chance of things not working properly! If it's necessary and or you think it'll be helpful in future then go for it!
The content wouldn't float to the top because the menu above it has acted as a clearing element and so the content div is just butting up next to the menu. If for some reason you floated the menu (can't see why you would in this context) then yes you'd add clear:both to the content div.
Clear:both (you can also do clear:left or clear:right which work better in some circumstances) basically forces the elements in the normal flow of the page to start past the floated elements - it's as though the floated elements suddenly exist again in the normal flow of the elements.
Here's quite a good tutorial on floats and usages for floats: http://css.maxdesign.com.au/floatutorial/definitions.htm
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
GolfMad
Posts: 190
Joined: 3/20/2002
From: UK
Status: offline
|
RE: Trying tableless layout - help please? - 5/31/2007 4:17:01
Briilant Tailslide, thanks very much for the good explainition.
Regards
Phil
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
