12 replies [Last post]
Glass Casket
Offline
newbie
Last seen: 16 years 35 weeks ago
Joined: 2005-10-29
Posts: 9
Points: 0

I'm going to redo the CSS for http://review4u.org/new/alnew.php layout because I feel as if I didnt do it right at all, even though it may look right.

My question is, what is the best way to approach this problem with the way I want my tables? I seemed to have wasted alot of time positioning them.

Thanks.

Glass Casket
Offline
newbie
Last seen: 16 years 35 weeks ago
Joined: 2005-10-29
Posts: 9
Points: 0

Tips on doing CSS layout

Also, am I doing it right?

Any comments on the CSS?

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Tips on doing CSS layout

I think you should use the validation services as there are a few xhtml errors. (<div id="dhtmltooltip"></div> in the head part ...)
the css in your html has a comment problem (border:1px solid black; */) closed but never opened.
I suppose you didn't test your page with mozilla / firefox as the DIVs overlap and your footer is in the middle of the page.

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

Tips on doing CSS layout

To be honest with you I find the layout perplexing and am wondering how you arrived at it; whats the #divider achieving ?

I would look at the table-layout property your using, how do you see that effecting your layout, are you assuming that it is actually causing those divs to behave as though tables? as far as I was aware this property was for use in conjunction with tables to dictate how the table was rendered and that on it's own did not actually do anything.

I think that you need to take a different approach to how your laying this out, your footer in FF is some way up the page behind the lower boxes and needs to cleared bellow them.

Hugo.

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

Glass Casket
Offline
newbie
Last seen: 16 years 35 weeks ago
Joined: 2005-10-29
Posts: 9
Points: 0

Tips on doing CSS layout

Thanks for the replies, but this is my first CSS layout, although I know failry well how to use CSS. But I have absolutly no idea how to approach how to code this layout. I have read many tutorial, but none of them seem to talk about what I want to do.

itspersonal5
Offline
newbie
Last seen: 16 years 34 weeks ago
Joined: 2005-11-05
Posts: 8
Points: 0

Tips on doing CSS layout

The layout doesn't need to be as complicated as you have it... Looks to me like you could just use a 2 column approach with a header and footer. The "blocks" of info (text, photos, whatever) can be positioned in your columns.

tspersonal5

Glass Casket
Offline
newbie
Last seen: 16 years 35 weeks ago
Joined: 2005-10-29
Posts: 9
Points: 0

Tips on doing CSS layout

itspersonal5 wrote:
The layout doesn't need to be as complicated as you have it... Looks to me like you could just use a 2 column approach with a header and footer. The "blocks" of info (text, photos, whatever) can be positioned in your columns.

tspersonal5

I completly agree. So do you suggest I simply do my header, two colums, then my footer? After that is done, do my other CSS tables within those two colums?

I am still a bit troubled on how to do the Featured Band, Latest News tables eficently :?

Thank you.

Glass Casket
Offline
newbie
Last seen: 16 years 35 weeks ago
Joined: 2005-10-29
Posts: 9
Points: 0

Tips on doing CSS layout

I made my layout with a headert, two colums and footer. But i'm stuck dividing my header into three parts.

Glass Casket
Offline
newbie
Last seen: 16 years 35 weeks ago
Joined: 2005-10-29
Posts: 9
Points: 0

Tips on doing CSS layout

I have

<div id="container">
	<div id="header">
		<div id="ad">
		<div id="logo">
dhhhh
		</div>
		<div id="login">
			Username: <input type="text" /><br />
			Password: <input type="password" />
			<input type="submit" name="Submit" />
		</div>
<img src="with_honor.gif" alt="" />

	</div>
		<div id="left">
		
		</div>

			<div id="right">
			
			</div>
			<div id="footer">a</div>

</div>

 #footer
{
	background-color: #000000;
	width: 100%;
}

- But the footer does not appear, any ideas?

Thanks.

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Tips on doing CSS layout

Have you got a link to the page ?

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

Tips on doing CSS layout

Do you want to update us with a new link then? I presume the original link is now out of date.

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

Glass Casket
Offline
newbie
Last seen: 16 years 35 weeks ago
Joined: 2005-10-29
Posts: 9
Points: 0

Tips on doing CSS layout

http://review4u.org/new/OMGZ.html

Sorry about that, my internet is really dumb so I couldnt upload the files.

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

Tips on doing CSS layout

You need to pay attention to escaping floats, header needs to contain the elements that are nested in it; if it does then it will allow the right div to slide up alongside the left, your footer will then take up position bellow those two floats.

It's just a case of understanding how floats work and that with the login and image dropping down there wasn't room for the for the right float.

Hugo.

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