Bilder formatieren + bestimmte Links ändern

[JonesH]

Hallo,

ich habe zwei Probleme bei meiner ersten Webseite.
Hier ist der erste grafische Ausschnitt:

http://imageshack.us/photo/my-images/853/bsp.png

Ich habe mehrere ähnliche Abschnitte bei denen auch ein Download-Link vorkommt. Jetzt möchte ich mithilfe von CSS, alle Download-Links vergrößern. Wie bekomme ich das hin?

Nächstes Problem:

http://imageshack.us/photo/my-images/225/bsp2.png/

Hier soll die Grafik links neben den Text und der Text rechts daneben "fließen".
Dies ist wohl mit float möglich. Ich dachte ich muss jetzt um den Bild-Link einen div-Container machen und diesen in der CSS-Datei regulieren!? Habe ich schon versucht (mit float), aber es hat sich nichts getan.

In HTML:

  
<div id="bild">  
<p><img src=... /></p>  
</div>  

Und dann mit CSS:

  
div#bild{  
float:left;  
}  

Hoffe auf Hilfe.

MfG
Jones

[wurzelbert]

servus JonesH,

Ich habe mehrere ähnliche Abschnitte bei denen auch ein Download-Link vorkommt. Jetzt möchte ich mithilfe von CSS, alle Download-Links vergrößern. Wie bekomme ich das hin?

Gib diesen Links eine Klasse, z.B. "download_link" und gib mit CSS entsprechende Eigenschaften an.

Hier soll die Grafik links neben den Text und der Text rechts daneben "fließen".
Dies ist wohl mit float möglich.

richtig

Ich dachte ich muss jetzt um den Bild-Link einen div-Container machen und diesen in der CSS-Datei regulieren!? Habe ich schon versucht (mit float), aber es hat sich nichts getan.

nope

<div id="bild">
<p><img src=... /></p>
</div>

  
Kein div, kein p. Du kannst das Bild direkt floaten. Nach deinen Angaben ist es aber unter dem Text, das heißt, es ignoriert den Text und floatet darunter.  
Setz das Bild nach oben und floate dann.  
  
  
der wurzelbert

-- 
Ist es ein Vogel?  
Ist es ein Flugzeug?  
  
Nein, es ist Reis, Baby!

[JonesH]

Danke euch beiden.

Das mit den Download-Links habe ich jetzt hinbekommen.

Mit den Bildern haperts leider noch.
Hier mal mein Code:

  
<h2>Visualisierung</h2>  
  
<div class="bild">  
 <img src="images/sternmotor.gif" alt="Animation eines arbeitenden   Sternmotors" width="150" height="150" />  
</div>  
<p>Animationen können zur Veranschaulichung komplexer Zusammenhänge...</p>  

Der Text soll jetzt rechts neben dem Bild erscheinen.

Mein CSS-Code:

  
bild {  
float: left;  
width: 300px;  
/* Abstand um das Bild herum: */  
margin: 10px 0 5px 30px;  
}  
.bild p { /* Bildunterschrift */  
padding: 0px 80px;  
font-size: 11px;  
}  
img { border: 0; }  

Es verändert sich leider nichts. Es sieht immernoch so aus wie auf diesem Bild. Nur ist das Bild jetzt eben über dem Text und es gibt eine Bildunterschrift.

Um Hilfe bittend,
Jones H

[ChrisB]

Hi,

Mein CSS-Code:

bild {
float: left;

>   
> Es verändert sich leider nichts.  
  
Natürlich nicht, du hast das Bild ja auch nicht gefloatet.  
(Stattdessen hast du versucht, ein HTML-Element mit dem Elementnamen "bild" zu formatieren. Ein solches gibt es aber [in deinem Code] nicht.)  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[JonesH]

Hmm okay danke, wie soll es denn aussehen, so?

  
div#bild {  
float: left;  
width: 300px;  
/* Abstand um das Bild herum: */  
margin: 10px 0 5px 30px;  
}  

[ChrisB]

Hi,

Hmm okay danke, wie soll es denn aussehen, so?

div#bild {

  
Nein, das DIV hat in deinem zuletzt gezeigten HTML-Code keine solche ID.  
  
Bitte beschäftige dich mit den Grundlaen: <http://de.selfhtml.org/css/formate/zentrale.htm>  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[JonesH]

Juhu
Ich hab's hinbekommen
Danke Danke :)

[Felix Riesterer]

Lieber JonesH,

ich habe zwei Probleme bei meiner ersten Webseite.

mein ganz großer Verdacht ist, dass Deine Dokumentstruktur ein wildverwachsener Urwald ist. Wenn ich nämlich sowas hier sehe...

<div id="bild">

<p><img src=... /></p>
</div>

... drängt sich dieser Verdacht förmlich auf.  
  
Deine zwei Probleme sind vermutlich diese:  
  
1\.) Du hast Deine Dokumentstruktur nicht vernünftig erstellt.  
2\.) Deine CSS-Kenntnisse reichen noch nicht aus, bei einer vernünftigen Dokumentstruktur eine passende Gestaltung umzusetzen.  
  
Ich würde Dir gerne helfen, aber Deine Bilder verraten mir im Grunde nichts von Bedeutung. Und Deine Code-Schnipsel sind zu wenig, um Dein \_eigentliches\_ Problem zu lösen.  
  
Für das zu umfließende Bild kannst Du die Eigenschaft "float" direkt auf das <img>-Element anwenden. Das umfassende <div>-Element solltest Du gleich wieder in die Tonne treten.  
  
Nächstes Mal postest Du bitte keine Bilder (deren URL man zu allem Überfluss auch noch mit copy&paste zu einer neuen Browserseite holen muss, anstatt dass sie bequem [verlinkt](/hilfe/bedienung.htm#verweise-einbinden) sind!), sondern einen Link zu Deiner (Test-)Seite. Dort kann man dann sofort alles Wesentliche sehen, um Dir kompetent Rat zu geben. So kann man nur raten - und das ist nicht das gleiche!  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)