Closed Thread Icon

Topic awaiting preservation: CSS Problems (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=8003" title="Pages that link to Topic awaiting preservation: CSS Problems (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: CSS Problems <span class="small">(Page 1 of 1)</span>\

 
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

posted posted 12-27-2001 08:22

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.

code:
<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>



YoYoFREAK
Paranoid (IV) Mad Scientist

From: A lost remnant
Insane since: Jun 2001

posted posted 12-27-2001 17:36

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.

code:
.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

YoYoFREAK
Paranoid (IV) Mad Scientist

From: A lost remnant
Insane since: Jun 2001

posted posted 12-27-2001 17:54

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:

code:
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

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

posted posted 12-27-2001 19:34

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.



YoYoFREAK
Paranoid (IV) Mad Scientist

From: A lost remnant
Insane since: Jun 2001

posted posted 12-28-2001 02:32

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).]

YoYoFREAK
Paranoid (IV) Mad Scientist

From: A lost remnant
Insane since: Jun 2001

posted posted 12-28-2001 03:57

Alright I feel like an idiot now =)

code:
.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

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

posted posted 12-28-2001 18:53

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

Thanks again.

YoYoFREAK
Paranoid (IV) Mad Scientist

From: A lost remnant
Insane since: Jun 2001

posted posted 12-29-2001 00:14

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

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

posted posted 12-30-2001 20:10

Thanks for the information.

« BackwardsOnwards »

Show Forum Drop Down Menu