3 replies [Last post]
mulr1966
Offline
newbie
New York
Last seen: 15 years 33 weeks ago
New York
Joined: 2004-04-04
Posts: 2
Points: 0

hello everyone, I am pretty new to web page design and have been reading quite a bit about css , the following link is a page I created but would like some constructive criticism on the following issues.

First and foremost The page looks like GARBAGE when I view it with Mozilla, Not sure why the tables get all screwed up...

Secondly I was looking for better way to create the Schedule table without having to use a Table.
any Ideas on this would be appreciated
Thank you
Robert
the Link is http://users.rcn.com.njmulhern/ODINSOFTBALL.htm

Thanks again
sorry if this DBL posted

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 1 year 6 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

help with Web page layout

google for css floats... lots of tutorials to get you pointed in the right direction
I think the table for the schedule is OK.. it's tabular data which is what tables are for.

mulr1966
Offline
newbie
New York
Last seen: 15 years 33 weeks ago
New York
Joined: 2004-04-04
Posts: 2
Points: 0

help with Web page layout

rmfred
Thank your for pointing me into the direction of the Floats

I have been doing some testing and changed the page layout but still
I am having a problem understandingf the Float problems.
If you look at the original page and or the new page
they both look good in IE 6 however when I look at them using Firefox the layouts get whacked.
Some of the things I have attempted such as Clearing the Divs did not correct this problem (probably becuase I am not fully understanding where this needs to occur based upon the layouts I have used.)
I am assuming (based on some of the Float pages I have been reading) that the problem resides with clearing the Divs correctly.

on the New_odin.htm if you look at the the Text appears to cross the border on the right side and the content div seems to extend down way too far.

Can anyone assist me further with this issue ?

The New_odin page is the one I am working on clearing up float issues with...

Thank you again
Robert
The links I am using are
http://users.rcn.com/njmulhern/ODINSOFTBALL.htm OLD layout
http://users.rcn.com/njmulhern/New_odin.htm

timhobbs
timhobbs's picture
Offline
Regular
Monterey, CA
Last seen: 16 years 3 weeks ago
Monterey, CA
Timezone: GMT-8
Joined: 2003-10-27
Posts: 37
Points: 0

help with Web page layout

You use ems for padding, and they are an arbitrary number of pixels (based on user font sizes, I believe). The width of #leftnav is actually 2em + 200px + 2em which is more than 201px (where your border-left for #content is.

Remove the em padding and use px, or remove the padding all together. Try this, for example:

#leftnav {
	float: left;
	width: 196px;
	margin: 0;
	padding: 2px;
	border: 1px solid gray;
}

This will give you 2px + 196px + 2px = 200px total and your border will be fine.