No replies
srihards
Offline
newbie
Last seen: 8 years 14 weeks ago
Timezone: GMT+3
Joined: 2011-07-09
Posts: 1
Points: 2

Hey,
So I'm slowly starting to move the website im working at to normal css instead of tables everywhere.
And I ran into a small problem today while doing that.

Before:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="http://static.utgersoft.com/img/red_smallheader_left.png" alt=""></td>
<td class="header" width="35"><img src="http://static.utgersoft.com/img/icon_goto.png" alt=""></td>
<td class="header" width="100%">Enter Habia World</td>
<td><img src="http://static.utgersoft.com/img/red_smallheader_right.png" alt=""></td>
</tr>
</tbody></table>
 
.header {
background-image: url("/img/headers_combined.png");
background-position: 0% -53px;
vertical-align: middle;
}

And I got it this far:

<div style="height:27px;">
<img src="http://static.utgersoft.com/img/red_smallheader_left.png" alt="" style="float: left;">
<div style="float: left; line-height: 27px;" class="header">Enter Habia World</div>
<img src="http://static.utgersoft.com/img/red_smallheader_right.png" alt="" style="float: left;">
</div>

But the problem is that I need the middle part to fill the space and I yet got to put an icon before the text too (http://static.utgersoft.com/img/icon_goto.png).
You can check it here: www.habiaworld.com. You will find the orange headers for the boxes easly.