PDA

Click to See Complete Forum and Search --> : Photoshop, CSS problem.

ShaReB
10-10-2007, 11:59 PM
hi,
the website is by photoshop, and the slices (DIVs) are like this:
http://i27.photobucket.com/albums/c162/ShaReB/internet/slices.jpg
the problem is when i add HTML inline frame to the DIV number 5, the whole layout becomes a mess.

note: all the div elements are absolute positioned
so .. how to fix this?
Fang
10-11-2007, 01:21 AM
Re-write the layout without using position:absolute.
In any event we can't help unless we see the complete document.
ShaReB
10-11-2007, 02:11 AM
alright, I've changed some positioning and left others as absolute, added the inline frame and it's way better now except that there's a missing div in the bottom left of the page
http://i27.photobucket.com/albums/c162/ShaReB/internet/2.jpg

<style type="text/css">


#Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}

#Interface-css-01 {
position:absolute;
left:0px;
top:0px;
width:929px;
height:165px;
}

#Interface-css-02 {
position:absolute;
left:929px;
top:0px;
width:95px;
height:768px;
}

#Interface-css-03 {
margin-top: 165px;
float: left;
width:75px;
height:491px;
}

#Interface-css-04 {
position:absolute;
left:75px;
top:165px;
width:186px;
height:52px;
}

#nav-container
{
float:left;
width: 186;
}
#Interface-css-05 {
float:left;
width:668px;
height:491px;
}

#Interface-css-06 {
position:absolute;
left:75px;
top:217px;
width:186px;
height:45px;
}

#Interface-css-07 {
position:absolute;
left:75px;
top:262px;
width:186px;
height:48px;
}

#Interface-css-08 {
position:absolute;
left:75px;
top:310px;
width:186px;
height:45px;
}

#Interface-css-09 {
position:absolute;
left:75px;
top:355px;
width:186px;
height:45px;
}

#Interface-css-10 {
position:absolute;
left:75px;
top:400px;
width:186px;
height:256px;
}

#Interface-css-11 {
position:absolute;
left:0px;
top:656px;
width:400px;
height:112px;
background-image: url('images/Interface-css_11.gif');
}

</style>


<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div id="Table_01">
<div id="Interface-css-01">
<img src="images/Interface-css_01.gif" width="929" height="165" alt="">
</div>
<div id="Interface-css-02">
<img src="images/Interface-css_02.gif" width="95" height="768" alt="">
</div>
<div id="Interface-css-03">
<img src="images/Interface-css_03.gif" width="75" height="491" alt="">
</div>
<div id="nav-container">

<div id="Interface-css-04">
<img src="images/Interface-css_04.gif" width="186" height="52" alt="">
</div>

<div id="Interface-css-06">
<img src="images/Interface-css_06.gif" width="186" height="45" alt="">
</div>
<div id="Interface-css-07">
<img src="images/Interface-css_07.gif" width="186" height="48" alt="">
</div>
<div id="Interface-css-08">
<img src="images/Interface-css_08.gif" width="186" height="45" alt="">
</div>
<div id="Interface-css-09">
<img src="images/Interface-css_09.gif" width="186" height="45" alt="">
</div>
<div id="Interface-css-10">
<img src="images/Interface-css_10.gif" width="186" height="256" alt="">
</div>
</div>
<div id="Interface-css-05">
<iframe src="http://google.com" width=400 height=300 />
</div>
<div id="Interface-css-11">
text..
</div>

</div>
</body>

I tried to change the position to float:left; and add top margin but in vain

thanks in advance..
~Shareb