Topic awaiting preservation: CSS Problems (Page 1 of 1)

I have designed a new CSS2 compliant page. However, I have bunches of trouble with getting it to flow.

I am doing some semi-complicated stuff in this, something that might be better suited to tables, yet I would like it to be completely compliant with CSS.

This is my first working draft. However, I have a few problems that I can't really figure out. The code is not near compliant yet, I will have to add a bunch of different styles to make it compliant. That will come once I figure out these big problems.

1) Notice in the body, the end line does not line up correctly. I am not sure how to get this to line up correctly. http://www.jackassjokes.com/newfrontpage/index2.html

2) I do not think you can not notice the problem with the navigation area. http://www.jackassjokes.com/newfrontpage/index.html

You could view source to see the style sheet because it is embedded for the time being. I have also placed it below.

If you need any further information please ask. I would be more than willing to provide it.

<style type="text/css">



	body {

		background-color: white;

		color: black;

		font-size: 100%;

		font-family: verdana,arial,serif;

	}



	h1 {

		font-size: 200%;

		font-weight: bold;

	}

	

	.top1 {

		margin:			0px;

		padding:		0px;

		background:		url(top_background.gif);

		width:			100%;

		float:			left;

	}



	.top2 {

		margin:			0px;

		padding:		0px;

		float:			right;

	}



	.title1 {

		margin-top:		0px;

		padding:		0px;

		background:		url(title_background.gif);

		width:			100%;

		float:			left;

	}



	.title2 {

		margin:			0px;

		padding:		0px;

		float:			right;

	}



	.navigation {

		padding:		5px;

		border-bottom:	none;

		border-left:	1px solid black; 

		border-right:	1px solid black; 

		border-bottom:	1px solid black;

		width:			138px;

		float:			left;

	}



	.body {

		margin-left:	5px;

		padding:		5px;

		border-bottom:	none;

		border-left:	1px solid black; 

		border-right:	1px solid black; 

		border-bottom:	1px solid black;

		float:			left; 

		width:			83%;

	}



	.footer {

		font-size:		75%;

		margin-top:		5px; 

		padding:		2px;

		border:			1px solid black; 

		clear:			left; 

		width:			100%; 

		text-align:		center;

	}



	</style>

Well I played around with it a little bit but I used relative positioning.
Anywho I don't know its compliance with css2 but the code I used to make the body on the first page be flush with the other boxes.

.body {

                position: relative;

                left: 2px;

                margin-right: 1px;

		padding:		5px;

		border-bottom:	none;

		border-left:	1px solid black; 

		border-right:	1px solid black; 

		border-bottom:	1px solid black;

		width:			100%;

	}

Let me know if it works =)
THANKS!
-YoYoFREAK

Oh yea I forgot about the second page.
If you want to the nave to be fixed in size at all times I would go for:

overflow: hidden;

I was looking at your code and that last line of every definition ends with a semicolon which you don't need to do.
so if overflow:hidden is your last line for a div then there does not need to be a semicolon behind it.

anywho
Thanks!
-YoYoFREAK

Thanks for the quick response.

Those solutions worked well. Thank you. I have it working really nice now.

There is one more thing that I am not sure if it can be fixed.

When you take the browser window and make it incredibly small you get a weird thing where the title area becomes 2 lines as opposed to a single line. I am not really sure how to fix this.

Warmage,
I know what it is wrapping like that but I don't have a solution as of yet, Maybe Emps would like to join in and perhaps he will have a solution I don't know of. The reason it is wrapping to the next line is because of the width of the images combined if you made the second image to the right a background image it would not wrap, however I would not quite know how to make a background image of your current green image with the black borders.

( edit idea: you could absolute position the div's from the top then have the title1 div background-color transparent make the z-index two and then have another div underneath it with a z index of one this way the one with the background image could be over the green back with with the borders just an idea =) )

THANKS!
-YoYoFREAK


[This message has been edited by YoYoFREAK (edited 12-28-2001).]

Alright I feel like an idiot now =)

.title1 {

		margin-top:		0px;

		padding:		0px;

		width:			100%;

                height: 30px;

                background-image:		url(http://www.jackassjokes.com/newfrontpage/title_background.gif);

                overflow:               hidden;

                float:			left;

	}

Basically you need to specify the height so it won't wrap, and the overflow: hidden so it won't show it when it does wrap. However there is a catch hehe when you specify that if the windows is smaller than the images width to the left
it won't show the second image in IE 5.5/Me, but atleast it won't wrap around to the next line.
Hope that helps =)
THANKS!
-YoYoFREAK

Thanks for the assistance. Where did you learn all this from? Just experiementing?

Thanks again.

Yourwelcome Warmage =)

I did my first css layout about 2 weeks ago and have just been really experimenting with it and learning off of http://www.glish.com/css and the links they have as well as http://www.w3schools.com which has been an invaluable rescource to me so far.
Thats about all I have been learning off of and the best way to learn is just make alot of css layouts with the above links as guides to your ideas.
THANKS!
-YoYoFREAK

Thanks for the information.