Die einfachste CSS-Programmierung?

[ReneStaubli]

Ich suche eine möglichst einfache CSS-Programmierung für ein bestimmtes Erscheinungsbild (siehe beiliegender Screenshot). Die dritte Zeile des Textes soll auf gleicher Höhe sein wie der untere Rand des Bildes. Wenn ich den Browser verbreitere, soll der rechte Rand des Textes bei 400 px Abstand vom linken Browserrand bleiben. Und wenn ich das Browserfenster verschmälere, soll der Text nach links bis zum Bild wandern, aber nicht darunterfallen. Herzlichen Dank für Eurer Knowhow.

 

[nookie]

CSS ist keine Programmiersprache.

Such mal in Google nach float und media queries.

 

[ReneStaubli]

Bei der Recherche ist mir eher schlecht geworden...

 

[threadi]

Und wie soll das uns helfen um dir zu helfen? ;)

 

[ReneStaubli]

Der Satz bedeutete wohl eher, dass mir kaum mehr zu helfen ist. Ich habe jetzt ungefähr 7 Stunden probiert: Floating, alles in eine Tabelle, nichts hat geklappt. der werd... Texte rückt einfach nicht an die richtige Stelle. Da dachte ich einfach: Vielleicht schüttelt das einer von Euch CSS-Freaks aus dem Ärmel. Aber zugegeben: vielleicht ist das der zu bequeme Weg. Habe mich jedenfalls kurzerhand für einen CSS-Kurs angemeldet, um noch ein bisschen mehr Grundwissen zu sammeln.

 

[ReneStaubli]

Gegen Mitternacht habe ich via Google-Recherche eine Möglichkeit gefunden, das Problem zu lösen. Gleichzeitig habe ich aber im Netz gelesen, es sei ein Depp, wer so ein Ding in eine Tabelle packe. Allerdings stelle ich Depp fest, dass es zumindest funktioniert:
<h1>Barbara Lukesch, Texte und Seminare</h1>
<table>
<table-width="400px" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td valign="top" align="left"><img id="lukesch" src="logo/lukesch.png" alt="Barbara Lukesch"></td>
<td valign="bottom" width="200px" align="right">[email protected]<br> Presseladen<br> +41 79 654 79 16</td>
</tr>
</table>

 

[nookie]

Gegen Mitternacht habe ich via Google-Recherche eine Möglichkeit gefunden, das Problem zu lösen. Gleichzeitig habe ich aber im Netz gelesen, es sei ein Depp, wer so ein Ding in eine Tabelle packe. Allerdings stelle ich Depp fest, dass es zumindest funktioniert:
<h1>Barbara Lukesch, Texte und Seminare</h1>
<table>
<table-width="400px" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td valign="top" align="left"><img id="lukesch" src="logo/lukesch.png" alt="Barbara Lukesch"></td>
<td valign="bottom" width="200px" align="right">[email protected]<br> Presseladen<br> +41 79 654 79 16</td>
</tr>
</table>

Sowas stellst du auch normalerweise nicht in einer Tabelle da. Tabellen dienen eigentlich rein der auflistung von Daten (wie z.B. bei Excel).

Dein HTML-Code könnte wie folgt aussehn, allerdings musst du das ganze dann noch per CSS richtig formatieren.

<h1>Barbara Lukesch, Texte und Seminare</h1>
<div>
<img src="" alt="">
<ul>
  <li>E-Mail</li>
  <li>Firmenname</li>
  <li>Telefonnummer</li>
</ul>
</div>

 

[bodo92]

Wäre es nach HTML5 nicht besser mit figure?

<figure>
    <h3>Titel</h3>
    <img src="/pfad/Bild.png" alt="Bild">
    <figcaption>
        <p>Beschreibung</p>
    </figcaption> 
</figure>

 

[nookie]

Wäre es nach HTML5 nicht besser mit figure?

<figure>
    <h3>Titel</h3>
    <img src="/pfad/Bild.png" alt="Bild">
    <figcaption>
        <p>Beschreibung</p>
    </figcaption>
</figure>

Joa, wenn er das Bild mit zusätzlichen Informationen bestücken möchte schon.

 

[ReneStaubli]

Danke für die guten Ratschläge, aber mit dem Listenbefehl bekomme ich Punkte neben den Textzeilen und mit dem <figcaption> fällt der Text unter das Bild. Was wirklich gut funktioniert, ist die Tabelle; ich glaub, ich leiste mir diesen Schönheitsfehler und mache dafür wieder mal eine Kaffeepause ;-)