• Welcome to Overclockers Forums! Join us to reply in threads, receive reduced ads, and to customize your site experience!

CSS Problem..

Overclockers is supported by our readers. When you click a link to make a purchase, we may earn a commission. Learn More.
asusradeon

asusradeon

Member
​
Joined
Oct 25, 2004
Location
127.0.0.1
Hi guys, got a dilema, i've generated a page in Photoshop using CSS, (Trying to steer clear of tables) problem is i cant centre it all and i also want to add an iframe in the postion of image19. i've tryed everything i can think of to centre it and no luck..

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/1999/xhtml">
<head>
<title>proto_1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (proto_1.psd) -->
<style type="text/css">
<!--

#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:790px;
    height:870px;
}

#index-01_ {
    position:absolute;
    left:0px;
    top:0px;
    width:790px;
    height:86px;
}

#index-02_ {
    position:absolute;
    left:0px;
    top:86px;
    width:88px;
    height:39px;
}

#index-03_ {
    position:absolute;
    left:88px;
    top:86px;
    width:46px;
    height:13px;
}

#index-04_ {
    position:absolute;
    left:134px;
    top:86px;
    width:66px;
    height:39px;
}

#index-05_ {
    position:absolute;
    left:200px;
    top:86px;
    width:81px;
    height:13px;
}

#index-06_ {
    position:absolute;
    left:281px;
    top:86px;
    width:59px;
    height:39px;
}

#index-07_ {
    position:absolute;
    left:340px;
    top:86px;
    width:79px;
    height:13px;
}

#index-08_ {
    position:absolute;
    left:419px;
    top:86px;
    width:66px;
    height:39px;
}

#index-09_ {
    position:absolute;
    left:485px;
    top:86px;
    width:46px;
    height:13px;
}

#index-10_ {
    position:absolute;
    left:531px;
    top:86px;
    width:62px;
    height:39px;
}

#index-11_ {
    position:absolute;
    left:593px;
    top:86px;
    width:98px;
    height:13px;
}

#index-12_ {
    position:absolute;
    left:691px;
    top:86px;
    width:99px;
    height:39px;
}

#index-13_ {
    position:absolute;
    left:88px;
    top:99px;
    width:46px;
    height:26px;
}

#index-14_ {
    position:absolute;
    left:200px;
    top:99px;
    width:81px;
    height:26px;
}

#index-15_ {
    position:absolute;
    left:340px;
    top:99px;
    width:79px;
    height:26px;
}

#index-16_ {
    position:absolute;
    left:485px;
    top:99px;
    width:46px;
    height:26px;
}

#index-17_ {
    position:absolute;
    left:593px;
    top:99px;
    width:98px;
    height:26px;
}

#index-18_ {
    position:absolute;
    left:0px;
    top:125px;
    width:31px;
    height:745px;
}

#index-19_ {
    position:absolute;
    left:31px;
    top:125px;
    width:726px;
    height:677px;
}

#index-20_ {
    position:absolute;
    left:757px;
    top:125px;
    width:33px;
    height:745px;
}

#index-21_ {
    position:absolute;
    left:31px;
    top:802px;
    width:726px;
    height:17px;
}

#index-22_ {
    position:absolute;
    left:31px;
    top:819px;
    width:292px;
    height:51px;
}

#index-23_ {
    position:absolute;
    left:323px;
    top:819px;
    width:150px;
    height:19px;
}

#index-24_ {
    position:absolute;
    left:473px;
    top:819px;
    width:284px;
    height:51px;
}

#index-25_ {
    position:absolute;
    left:323px;
    top:838px;
    width:150px;
    height:32px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#606060;">
<!-- ImageReady Slices (proto_1.psd) -->
<div id="Table_01">
    <div id="index-01_">
        <img id="index_01" src="images/index_01.jpg" width="790" height="86" alt="" />
    </div>
    <div id="index-02_">
        <img id="index_02" src="images/index_02.jpg" width="88" height="39" alt="" />
    </div>
    <div id="index-03_">
        <img id="index_03" src="images/index_03.jpg" width="46" height="13" alt="" />
    </div>
    <div id="index-04_">
        <img id="index_04" src="images/index_04.jpg" width="66" height="39" alt="" />
    </div>
    <div id="index-05_">
        <img id="index_05" src="images/index_05.jpg" width="81" height="13" alt="" />
    </div>
    <div id="index-06_">
        <img id="index_06" src="images/index_06.jpg" width="59" height="39" alt="" />
    </div>
    <div id="index-07_">
        <img id="index_07" src="images/index_07.jpg" width="79" height="13" alt="" />
    </div>
    <div id="index-08_">
        <img id="index_08" src="images/index_08.jpg" width="66" height="39" alt="" />
    </div>
    <div id="index-09_">
        <img id="index_09" src="images/index_09.jpg" width="46" height="13" alt="" />
    </div>
    <div id="index-10_">
        <img id="index_10" src="images/index_10.jpg" width="62" height="39" alt="" />
    </div>
    <div id="index-11_">
        <img id="index_11" src="images/index_11.jpg" width="98" height="13" alt="" />
    </div>
    <div id="index-12_">
        <img id="index_12" src="images/index_12.jpg" width="99" height="39" alt="" />
    </div>
    <div id="index-13_">
        <img id="index_13" src="images/index_13.jpg" width="46" height="26" alt="" />
    </div>
    <div id="index-14_">
        <img id="index_14" src="images/index_14.jpg" width="81" height="26" alt="" />
    </div>
    <div id="index-15_">
        <img id="index_15" src="images/index_15.jpg" width="79" height="26" alt="" />
    </div>
    <div id="index-16_">
        <img id="index_16" src="images/index_16.jpg" width="46" height="26" alt="" />
    </div>
    <div id="index-17_">
        <img id="index_17" src="images/index_17.jpg" width="98" height="26" alt="" />
    </div>
    <div id="index-18_">
        <img id="index_18" src="images/index_18.jpg" width="31" height="745" alt="" />
    </div>
    <div id="index-19_">
        <img id="index_19" src="images/index_19.jpg" width="726" height="677" alt="" />
    </div>
    <div id="index-20_">
        <img id="index_20" src="images/index_20.jpg" width="33" height="745" alt="" />
    </div>
    <div id="index-21_">
        <img id="index_21" src="images/index_21.jpg" width="726" height="17" alt="" />
    </div>
    <div id="index-22_">
        <img id="index_22" src="images/index_22.jpg" width="292" height="51" alt="" />
    </div>
    <div id="index-23_">
        <img id="index_23" src="images/index_23.jpg" width="150" height="19" alt="" />
    </div>
    <div id="index-24_">
        <img id="index_24" src="images/index_24.jpg" width="284" height="51" alt="" />
    </div>
    <div id="index-25_">
        <img id="index_25" src="images/index_25.jpg" width="150" height="32" alt="" />
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

With the iframe, when i replace: "<img id="index_19" src="images/index_19.jpg" width="726" height="677" alt="" />" with: "<iframe src="pages/home.html" width="726" height="677" alt="" />"

it completely screws the layout... see screeny..

Any help would be awesome !! thanks in advance..
 

Attachments

  • web_screen.jpg
    web_screen.jpg
    83.2 KB · Views: 162
I never got the whole "tables r teh sux" deal. I've always found formatting with <div>'s every bit as big a headache as tables. To each his/her own, I suppose. :p

Anyway, maybe take a look at your positioning. I see you're using absolute positioning with your <div> tags. I'd be very careful here. I've known both MSIE and FF to handle absolute positioning completely differently. So again, tread carefully.

I'm not sure how to address your specific problem aside from try dropping the iframe's dimensions and see what happens. It looks like it's blowing up your layout.
 
CSS gone bad right there.

You might as well use tables with all the CSS you're using. Rethink how to do a layout. I've attached a PDF of how I would do the divs to give you an idea. To answer your question, with all those absolute values you've got to be rendering something outside the main frame. Expand it and see what happens. Also, while you are testing, you could set each of those images to something different to see where they all are (or not are).
 

Attachments

  • Unfiled Notes.pdf
    27.5 KB · Views: 216
That's what I was thinking too... again... to each his own, I suppose. Gotta love that PhotoShop-generated code. IMO, he'd be better off scrapping the whole thing and coding it by hand.
 
Well, i tryed with tables and when i replace the centre image with an iframe it screws it up again but worse.. i think its the iframe that does it.. why would this happen ?? I'm confused now :S ! hehe

Any thoughts ?

thanks
 
sorry to bring this up again but...

i use iframes to keep each product page etc easy to manage. adding a new product is easy.. just a new page with dark background and some text.

the other reason is that it scrolls in the center without the rest of the page moving..
 
Well, I suppose the alternative would be to design your pages in such a way that iframes are not a requirement. You could also work on setting up page templates via php, asp.net, or whatever your preferred flavor of server-side programming is.

/edit

The thing is, HTML is not very good at displaying dynamic content. CSS helps, but HTML/XHTML alone with a bit of CSS and JavaScript doesn't necessarily cut it for complex pages that pull content from an outside source (whether it be database, text file, xml, etc).
 
You must log in or register to reply here.

Similar threads

S
Web dev...for IE
Replies
6
Views
1K
MortalSynz
M
O
Project "Stealth" (Zalman Z11)
Replies
1
Views
2K
mokrunka
mokrunka
Mag10
My future project(Fractal Design Define XL R2)
Replies
10
Views
3K
Mag10
Mag10
J
Footer.php Help!
Replies
4
Views
2K
JayoxD
J
RedDragonXXX
HTML (Search Box) help
Replies
1
Views
1K
RedDragonXXX
RedDragonXXX
Back