Text neben einem Bild anordnen

[CKay1]

Hey liebe Leut,

versuche mich gerade daran in einer Box mit abgerundeten ecken einen Text an die richtige Stelle zu bekommen. Leider klappt das net so ganz.
Soll mehr oder weniger der Titel sein der auf allen Seiten erscheint.
Nun habe ich in der Box links das Logo danaben den SChriftzug und auf der rechten Seite will ich Telefonnummer und Email vertikal mittig einfügen. Leider setzt der Text immer direkt am rechten unteren Ende des Schriftzugbildes an. Was mach ich nun? Habe float: left eingestellt. evtl. ist das der fehler.

Code ist leider auf dem anderen Computer - Sorry.

Chris[/code]

[Laus]

Deiner Beschreibung nach hilft dir eventuell -->sowas<--

Gruß Xaver

[CKay1]

Hat geholfen!!!

Tabelle war der notwendige Tip. Den Rest habe ich schon durchgekaut gehabt.

Vielen Dank mal wieder!!!

[CKay1]

jetzt ist der gesamte block aber linksbündig, wo er doch davor noch in der mitte war

[Laus]

Ich meinte eigentlich nicht die Tabelle sondern vertical-align (vertikale Ausrichtung).

[CKay1]

vertical-align habe ich davor schon versucht aber das hat nicht hingehauen.
In der Tabelle hat es dann klar funktioniert.
Gerne würde ich aber die Tabelle rauslassen. Hier der Code:

Code: Alles auswählen

/*HTML*/

<center>
<div id="main">
   <div id="ro">
   <div id="lo">
   <div id="ru">
   <div id="lu">
   <table>
   <td><img src="Bib/LogoB2.png" style="padding-left:5px; margin-left:5px; " /></td>
   <td><img src="Bib/Schriftzug.png" style="padding-left:2px; margin-left:2px; "/></td>
   <td width="250px" style="vertical-align:middle; text-align:center">
   <img src="Pics/telefon.gif" />   telefon<br />
   <img src="Pics/Fax.gif" />    fax<br />
   <img src="Pics/Mail.gif" />email</td>
   </table>
   </div>
   </div>
   </div>
   </div>
</div>
</center>

/*CSS*/

body {
   font-family: trebuchet ms, verdana, arial, tahoma;
   font-size: 90%;
   color: #6b6a6f;
   background-color: #EFEFEF;
   line-height: 180%;
   margin: 0;
   padding: 0;
   text-align: center;
}

#main {
   width: 800px;
   background-color: #FFFFFF;
   margin-top:30px;
   text-align:left;
   float:left;
}

#ro {
   background-image: url(Pics/roundedbox_ro.gif);
   background-position:top right;
   background-repeat:no-repeat;
}

#lo {
   background-image: url(Pics/roundedbox_lo.gif);
   background-position:top left;
   background-repeat:no-repeat;
}

#ru {
   background-image: url(Pics/roundedbox_ru.gif);
   background-position:bottom right;
   background-repeat:no-repeat;
}

#lu {
   background-image: url(Pics/roundedbox_lu.gif);
   background-position:bottom left;
   background-repeat:no-repeat;
}


[Laus]

Da ich nicht soo genau weis wie du das meinst habe ich mal vermutet
Die styles sind nur zum verständniss in den Quelltext geschrieben, auch die größenangaben sind nur zwecks Mangel an Originalbildern.

Code: Alles auswählen

<div id="main">
   <div id="ro">
    <div id="lo">
     <div id="ru">
      <div id="lu">
       <div id="mittig">
       <img style=" float:left;text-align:center;padding-left:5px; margin-left:5px;" src="Bib/LogoB2.png" height"200" width="100"  />
       <img style=" float:left;text-align:center;padding-left:5px; margin-left:5px;" src="Bib/Schriftzug.png" height"200" width="100" />
        <div id= "mittig2" style="margin: 10px;">
        <img style="vertical-align:middle; text-align:center;" src="Pics/telefon.gif" />   telefon<br />
        <img style="vertical-align:middle; text-align:center;" src="Pics/Fax.gif" />    fax<br />
        <img style="vertical-align:middle; text-align:center;" src="Pics/Mail.gif" />email  <br />
        <hr style="display: none; clear:left;">
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
</div>

Ich hoffe du hast das so gemeint.

Gruß Xaver