PDA

View Full Version : Problems with my CSS layout

Lickable
23-06-2005, 09:37
Can anyone help me to get this so its centred in the window regardless of the resolution?

I have the main flash box surrounded by 4 jpg's, i wish for all this to stay centrered but remain in its current positions in relation to each other.

Thanks peeps


<html><head><title>lsbk</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><!-- ImageReady Styles (lsbk.jpg) -->

<style type="text/css">
<!--

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:760px;
height:420px;
}

#lsbk-01 {
position:absolute;
left:0px;
top:0px;
width:760px;
height:46px;
}

#lsbk-02 {
position:absolute;
left:0px;
top:46px;
width:47px;
height:320px;
}

#lsbk-03 {
position:absolute;
left:47px;
top:46px;
width:660px;
height:320px;
}

#lsbk-04 {
position:absolute;
left:707px;
top:46px;
width:53px;
height:320px;
}

#lsbk-05 {
position:absolute;
left:0px;
top:366px;
width:760px;
height:54px;
}

-->
</style><!-- End ImageReady Styles --></head>
<body style="margin: 0px; background-color: rgb(177, 202, 223);">
<!-- ImageReady Slices (lsbk.jpg) -->
<div id="Table_01">
<div id="lsbk-01">
<img src="LS_files/lsbk_01.jpg" alt="" height="46" width="760">
</div>
<div id="lsbk-02">
<img src="LS_files/lsbk_02.jpg" alt="" height="320" width="47">
</div>

<div id="lsbk-03">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="660" height="320">
<param name="movie" value="New%20Lick%20Square%20mx2.swf">
<param name="quality" value="high">
<embed src="Noname.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="660" height="320"></embed></object>
</div>
<div id="lsbk-04">
<img src="LS_files/lsbk_04.jpg" alt="" height="320" width="53">
</div>

<div id="lsbk-05"> <img src="LS_files/lsbk_05.jpg" alt="" height="54" width="760"></div>
</div>
<!-- End ImageReady Slices -->
</body></html>
march
23-06-2005, 09:47
I had a similar problem before and solved it by creating a container <div> for everything and then putting a <div> around that with align center.
adaline
23-06-2005, 09:56
Hiya! Try this:

<html>
<head>
<title>lsbk</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--

#Table_01 {
margin-left: auto;
margin-right: auto;
width:760px;
height:420px;
}

#lsbk-01 {
width:760px;
height:46px;
}

#lsbk-02 {
width:47px;
height:320px;
float: left;
}

#lsbk-03 {
width:660px;
height:320px;
float: left;
}

#lsbk-04 {
width:53px;
height:320px;
float: left;
}

#lsbk-05 {
width:760px;
height:54px;
}

-->
</style>
</head>
<body style="margin: 0px; background-color: rgb(177, 202, 223);">

<div id="Table_01">
<div id="lsbk-01">
<img src="LS_files/lsbk_01.jpg" alt="" height="46" width="760">
</div>
<div id="lsbk-02">
<img src="LS_files/lsbk_02.jpg" alt="" height="320" width="47">
</div>
<div id="lsbk-03">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="660" height="320">
<param name="movie" value="New%20Lick%20Square%20mx2.swf">
<param name="quality" value="high">
<embed src="Noname.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="660" height="320"></embed>
</object>
</div>
<div id="lsbk-04">
<img src="LS_files/lsbk_04.jpg" alt="" height="320" width="53">
</div>
<div id="lsbk-05"> <img src="LS_files/lsbk_05.jpg" alt="" height="54" width="760"></div>
</div>
</body>
</html>
Lickable
23-06-2005, 12:22
Thats the one adaline, thank you all for looking. Cheers!
Lickable
23-06-2005, 12:47
Ok... i just found another problem with the same code.

In internet explorer above the flash movie there is a gap about 5 pixels in size, and at the bottom too. This however is not the case in firfox. Any ideas?
adaline
23-06-2005, 13:38
IE takes invisibel charecters and makes a good mess :D
This will sort it out.
PS sorry for a huge page distortion fellow forumers!

<html>
<head>
<title>lsbk</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body{
text-align: center;
}
#Table_01 {
margin-left: auto;
margin-right: auto;
width:760px;
height:420px;
}

#lsbk-01 {
width:760px;
height:46px;
padding: 0px;
}

#lsbk-02 {
width:47px;
height:320px;
float: left;
}

#lsbk-03 {
width:660px;
height:320px;
float: left;
}

#lsbk-04 {
width:53px;
height:320px;
float: left;
}

#lsbk-05 {
width:760px;
height:54px;
}

-->
</style>
</head>
<body style="margin: 0px; background-color: rgb(177, 202, 223);">

<div id="Table_01">
<div id="lsbk-01"><img src="LS_files/lsbk_01.jpg" alt="" height="46" width="760"></div>
<div id="lsbk-02"><img src="LS_files/lsbk_02.jpg" alt="" height="320" width="47"></div>
<div id="lsbk-03"><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="660" height="320"><param name="movie" value="New%20Lick%20Square%20mx2.swf"><param name="quality" value="high"><embed src="Noname.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="660" height="320"></embed></object></div>
<div id="lsbk-04"><img src="LS_files/lsbk_04.jpg" alt="" height="320" width="53"></div>
<div id="lsbk-05"><img src="LS_files/lsbk_05.jpg" alt="" height="54" width="760"></div>
</div>
</body>
</html>
Lickable
23-06-2005, 13:57
Thanks for that, again. :)