...

View Full Version : HELP! problem with HTML CSS code please help!!!!



Wazzup_7
11-24-2005, 04:20 PM
I have some code here, I'm sorry if its hard to follow, but it's fairly simple CSS and HTML, my problem is when I view this with IE at 1024x768 it runs past the bottom of the browser window and I cannot see the last bit of my page...whats wrong?

(here is the code)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/transitional">
<head>
<title>180&deg; Youth - Events</title>



<style type="text/css">

#stupid {position:absolute;
top:700;
z-index:0
}


#topbar {position:absolute;
background-color:#4080B0;
left:200px;
top:10px;
height:20px;
width:500px;
z-index:1
}

#event1 {position:absolute;
background-color:#4080B0;
height:20px;
width:400px;
z-index:3
}

#event2 {position:absolute;
background-color:#4080B0;
height:20px;
width:400px;
z-index:3
}

#mainbox {position:absolute;
background-color:#EFEFEF;
left:100px;
top:100px;
width:680px;
z-index:2
}

#logo {position:absolute;
left:0px;
top:0px;
z-index:2
}

#copyright {position:relative;
top:50px;
z-index:2
}


font {color:white;
font-weight:bold;
size:20pt
}

p {color:white;
size:20pt
}

</style>
</head>

<body bgcolor = "#F1F1F1">




<div id="logo">
<img src="logo.jpg" alt="180&deg;"/>
</div>



<!-- ##################################################### -->
<!-- ############## Title/Welcome Bar ################# -->
<!-- ##################################################### -->
<div style = "border:1px black solid;" id = "topbar">
<font>Welcome</font>
</div>


<!-- ##################################################### -->
<!-- ############## main info box ################### -->
<!-- ##################################################### -->
<div id = "mainbox" style = "border:1px black solid;" >
<br />
<center><h1>Events</h1></center>

<hr />
<br />

<table>

<!-- ##################################################### -->
<!-- ############## Event 1 ################### -->
<!-- ##################################################### -->
<tr>
<td></td><td></td><td></td><td></td>
<td>
<br />
<br />
<div id = "event1">
<font><b><i>**180 Christmas Dinner**</i></b></font>
</div>
<b><i>180 Christmas Dinner</i></b>
<br /><br />
Kelsey's
<br />
(Kingston)
<br />
December 15 2005
<br />
Meet @ the Church @ 5:30pm
<br />
Each Person is Responsible For Their Own Meal!
<br />
Any Questions ask Pastor Kevin
<br /><br />
</td>
</tr>
<!-- ############## end of event 1 ################### -->



<!-- ##################################################### -->
<!-- ############## Event #2 ################### -->
<!-- ##################################################### -->
<tr>
<td></td><td></td><td></td><td></td>
<td>
<div id = "event2">
<font><b>\\//--[| Movie Night |]--\\//</b><br /></font>
</div>
<br />
<br />
December 9 2005
<br />
Pastor Kevin's House
<br />
7:00pm-11:00pm
<br />
Cost $2.00
<br /><br />
Questions call Pastor Kevin @ 354-4281
<br /><br />
Left Behind:World at War
<br />
<br /><br /><br />

</td>
</tr>
<!-- ############## end of event 2 ################### -->


</table>

<center>"So that if any one is in Christ, that one is a new creature; old things have passed away; behold, all things have become new." -- 2Cor 5:17
</center>
<br />

<!-- ##################################################### -->
<!-- ############## copyright info ################### -->
<!-- ##################################################### -->
<div id = "copyright">
Website Design &copy; Scott Carpenter & Evangel Temple Napanee, Ontario 2005
</div>

</div>



<div id="stupid">
</div>

<!-- style = "border:1px black solid;" -->

</body>
</html>

_Aerospace_Eng_
11-24-2005, 04:24 PM
Absolute positioning. Its causing you your problems. There really is no need for it in your layout. Divs will naturally stack on top of each other. If you are going to use CSS, don't use tags like font, or center, or attributes like bgcolor etc.

Wazzup_7
11-24-2005, 04:38 PM
thanks, can i use the tables the way they are?

_Aerospace_Eng_
11-24-2005, 04:40 PM
They could be cleaned up a bit. What is with the empty td's?

Wazzup_7
11-24-2005, 05:10 PM
lazy way to move over the text:(

Wazzup_7
11-25-2005, 06:01 AM
I really appreciate the feedback thanks

what I use the CSS for is it give different properties to the text so I can have a different atturbute everytime I use the font tag instead of having to give it the property everytime I type it

and the center tag I use so it dosn't center everything in the div...

Oh I solved my problem from before, I had it set up so that the larger or longer my "#mainbox" div got the copyright info would always be 20px below it...

somehow that screwed up along the way, and I am not sure how, so what I have done is make it absolute and now I'll just have to change its position manually everytime I change the page, any other suggestions on ways I could do this...preferably without table, I only use them when it's absolutely necessary

_Aerospace_Eng_
11-25-2005, 06:47 AM
I really appreciate the feedback thanks

what I use the CSS for is it give different properties to the text so I can have a different atturbute everytime I use the font tag instead of having to give it the property everytime I type it

and the center tag I use so it dosn't center everything in the div...

Oh I solved my problem from before, I had it set up so that the larger or longer my "#mainbox" div got the copyright info would always be 20px below it...

somehow that screwed up along the way, and I am not sure how, so what I have done is make it absolute and now I'll just have to change its position manually everytime I change the page, any other suggestions on ways I could do this...preferably without table, I only use them when it's absolutely necessary

Both font and center tags are deprecated (old) and shouldn't be used. CSS should be used in its place. Rather than font tags use spans, rather than center use margin:auto; to center an element or text-align:center; to center text. Is there any way you can post up an example page somewhere? Its alot easier that way especially since you didn't even use the [ code][ /code] vbcode to post your html.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum