Need suggestions to makes everything line up.

[mchernecki]

I am modifying some code for the webtop interface for some software. Pages are coded in HTML and CSS. A preprocessor replaces string, content, etc befor ebeing served up to the client. I want to redesign the header of a dialog box defined within <DIV> tags, I though I had it working until some icons are added, then things fall apart. I am including a piece of sample code where the <DIV> statement are and the CSS style for this block. I am also providing an image of how I need it to look. Everything looks fine until any of the the 3 icons are added then one icon appears after the right end, one on top, the title get pushed down,etc. It all turns to a big mess. I have been playing with this for a few days with no luck. Originally, there was no background image and no left and right corner images, and the title was one line above. Any suggestions would be appreciated.


Thanks
Mike C.

CSS

DIV.eclipToolbarView {
cursor: move;
position: relative;
background- color:$BackgroundColor$
background-image:url($EclipMainTitleBackground$);
background-repeat:repeat-x;
color: $EclipMainTitleTextColor$;
font-family: $DefaultFont$;
font-weight: bolder;
text-align: center;
width: 100%;
height:$EclipMainTitleHeight$px;
}

HTML code

<DIV id="EIPtlb$UPID$" CLASS="eclipToolbarView">

<nobr><nowrap>
<IMG SRC="topleft_cor.gif" BORDER="0" ALIGN="left" STYLE="margin-left=-3px;">

<!-- Substituted when page is served up may be empty -->
$eClipAboutButton$ $eClipHelpButton$ $eClipRefreshButton$

<IMG SRC="topright_cor.gif" BORDER="0" ALIGN="RIGHT" STYLE="margin-right=-3px;">

</nowrap></nobr>
<center><br>$eClipTitle$</center>

</DIV>


$eClipAboutButton$

<A HREF="$eClipAboutURL$" target="_blank">
<IMG SRC="$SystemServlet$?cmd=image&theme=$ThemeName$&object=portalButtonEclipAbout.gif"
ALIGN="RIGHT" TITLE="Show About for this $EClip$" ALT="Show About for this $EClip$" BORDER="0"></A>

$eClipHelpButton$ $eClipRefreshButton$ - same as for eClipAboutButton

http://www.adapsys.ca/sample.gif

[Vladdy]

Your graphical design does not take into account the text scaling - that is your major obstacle in making it work.

[TimeBandit]

you want a CSS-only solution, or are tables OK w/you?

[mchernecki]

TimeBandit - I was looking for a CSS solution and I believe I found something that works.

Vladdy - You were right, most of my problem was caused be the text scaling.

Solution: I left the text where it is now, but moved the left and right images to nested DIV's that align to the top outside edges of the parent DIV. The three button images were place in separate DIV's aligned x-pixels from the right edge of the parent frame and with a z-index: 1. so that they floated above the other elements and were still clickable. Everything now looks the way it is suppose to and the button images align properly.

Thanks
Mike C