Wie das Bild mit CSS formatieren, dass es auf die Höhe der Schrift kommt?

maromedia84 · 19.11.2008

Wie kann ich die Grafik auf der rechten Seite mittels Css formatieren, dass Sie immer oben ist ohne die nervigen   einfügen zu müssen.
Und möchte ausserdem dass sich das Layout an den Inhalt von der Größe anpasst!

Habe schon einiges versucht bekomme es aber nicht hin!

Danke für eurer hilfe schon mal im voraus!

<html>
<head>
<title>Produktbeschreibung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<style type="text/css">

</style>

</head>

<body bgcolor="#E1E1E1" text="#000000">
<table width="800px" border="0" align="center" cellpadding="5">
<tr>
<td bgcolor="#000066" class="header">

<h2>


International TOP HITS 1956 Audio CD


</h2>
</td>
<td width="30%" bgcolor="#E1E1E1" text="#000000">
<center>


<img src="http://schuetz-neue-medien.de/covers/audio/banner_musik_cds_200x100.jpg">

</center></td>
</tr>
<tr>
<td bgcolor="#000000" colspan="2"> </td>
</tr>
<tr>
<td bgcolor="#E1E1E1" class="content">


Eigenschaften: 



- sehr guter Zustand in Jewel Case 
- Inklusive Rechnung mit Mwst. 
- Abspielbar auf allen gängigen CD- und DVD-Playern 
- Bei uns erhalten Sie ausschliesslich Originalware (keine billigen ASIA Kopien)

 
Trackliste: 




<ol>
<li> Platters - My Prayer
<li> Gogi Grant - The Wayward Wind
<li> Little Richard - Long Tall Sally
<li> Chordettes - Born to be With you
<li> Winifred Atwell - Port-Au-Prince
<li> Jimmy Young - More
<li> Diamonds - Why Do Fools Fall in Love
<li> Dave King - Memories are made of this
<li> Frankie Vaughan - Green Door
<li> Platters - (You've Got) The Magic Touch
<li> Little Richard - Tutti Frutti
<li> Rusty Draper - In the Middle of the the House
<li> Ronnie Carroll - Walk Hand in Hand
<li> Patti Page - Go on with the Wedding
<li> Jimmy Young - Chain Gang
<li> Cathy Carr - Ivory Tower
<li> Ted Heath - Faithful Hussar
<li> Stargazers - Hot Diggity

</ol>





 



<ul>

</ul>







</td>
<td width="30%" bgcolor="#000066">


<img src="http://schuetz-neue-medien.de/covers/audio/musik/audio_cd_international_top_hits_1956.jpg" width="240px"> 



</td>
</tr>
</table>

</body>
</html>

Jazo · 19.11.2008

AW: Wie das Bild mit CSS formatieren, dass es auf die Höhe der Schrift kommt?

Also ich würde einfach das TB-Tag mit valign="top" erweitern...
Zieht das in deinem Code unten so aus:

<td width="30%" bgcolor="#000066" valign="top">


<img src="http://schuetz-neue-medien.de/covers/audio/musik/audio_cd_international_top_hits_1956.jpg" width="240px"> 
</td>
</tr>
</table>
 
</body>
</html>

Die ganzen tags kannste dann weg machen... geht dann ohne die und das Bild bleibt immer oben egal wie lang der Content ist...

MFG
Jazo

progfrog · 19.11.2008

AW: Wie das Bild mit CSS formatieren, dass es auf die Höhe der Schrift kommt?

Hey maromedia84
Das mit dem Bild nach oben bekommen ist ein simple CSS Befehl. Dazu schreibst du einfach in das Element, in dem das "<img>" Element drin ist folgendes Attribut rein style="vertical-align:top;"

Ansonsten muss man sagen, dass das Layout sehr im HTML 1.0 Stil gehalten ist. Was ich meine, ist, dass du all das was du geschrieben hast, mit ein paar Zeilen HTML und einem vernünftigen CSS hättest viel sauberer lösen können. Ich denke du solltest dir nochmal bisschen was zum Thema Layout mit CSS angucken.

Die Seite hier find ich z.B. klasse. Dann klappts auch mit dem Seite an Inhalt anpassen.

Also nicht abschrecken lassen und üben üben üben

Gruß progfrog

[edit]Ups doppelt, naja variert ja immerhin ein bisschen von der Antwort her

BigBilly · 19.11.2008

AW: Wie das Bild mit CSS formatieren, dass es auf die Höhe der Schrift kommt?

Moin macro.
Ich habe da auch einen kleinen Tipp.
CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen

is im prinzip dasselbe wie im Link vorher. Aber falls das nicht ausreichen sollte

sokie · 20.11.2008

AW: Wie das Bild mit CSS formatieren, dass es auf die Höhe der Schrift kommt?

in einer Tabellenzelle richtest du jedes Bild passend rechts aus, indem du ihm die css-Eigenschaft float:right gibst.
zB.

Code:

...
<td>
    <img src="bild.png" alt="bildbeschreibung" style="float:right; margin:0 0 3px 3px;">
    jede Menge Text, der nun hübsch dank float und margin um das Bild fliesst und automatisch passend umbricht.
</td>

maromedia84 · 20.11.2008

AW: Wie das Bild mit CSS formatieren, dass es auf die Höhe der Schrift kommt?

Thx habe das Problem gelöst! Ihr seit einfach spitze!!!!