Bild in Rahmen

[cyr4x]

Hallo,

also ich habe mit css einen Rahmen erzeugt in den ich jetzt gerne ein Bild einsetzen würde das klappt aber leider nicht so ganz kann mir da vll jemand helfen?

 

[_Thor_]

Dann zeig mal, was du hast und beschreib etwas genauer, was da nicht klappt.

 

[MasteR ChieF]

du kannst dem BildTag ja selbst schon einen Rahmen vergeben.

<img style="border:10px double #FF7300;" ...

Schöner natürlich in einem Externen CSS.
Dann gibst du dem BIld einfach eine ID, oder definierst eine KLasse.

mfg
MasterChief

 

[cyr4x]

hier: justaskit.de


soll das fragezeichen symbol in den rahmen rein aber ich bekomme das nicht wirklich hin mit margin-bottom und die % angabe geht es nicht höher als es jetzt schon ist was mache ich flasch bzw sollte ich anders machen

 

[neuroleptika]

Das Float von img drückt #rahmen nicht auseinander.
Du könntest dem letzten <br / > clear: left geben ( um den Float in #rahmen einzuschließen).

#rahmen img {
margin-bottom:60%;
..
}

Dieser Prozentwert geht von der Breite des Containers #page aus.
Das möchtest du bestimmt nicht.

 

[cyr4x]

ich muss nochmal nachfargen irgendwie hab ich das mit dem clear left nicht ganz verstanden oder mache was falsch da ich ja meine box fertig gebastelt habe und nun versuche den button da einzufügen bleibt er ja leider immer am rahmen hängen und ich bekomme ihn nicht in die box

 

[_Thor_]

Die Grafik soll rechts neben den Text?

Dann muss die Grafik im Code vor dem Text stehen und float: right haben, dann passt es.

 

[cyr4x]

Saubere Sache danke dir :) hat geklappt eine frage ^^


wieso muss die Grafik vor den Text um das so umzusetzen??

 

[_Thor_]

Weil float bewirkt, dass der nachfolgende Text das Element umfließt. Du willst ja die Grafik Rechts haben und wenn dein Text länger wäre, würde er das Bild nun umfließen. Wenn erst der Text und dann das Bild kommt, weiß der Text nicht, dass er das Bild umfließen soll.

 

[Hannes]

Mhh, du sagst es hat geklappt. Aber in dem Link steht der Button jetzt Mitten auf dem Rahmen unten:

Versuche folgendes:

<div id="rahmen">
            <img src="button2.JPG"/><h3>Hier entsteht der 2te text</h3> 
            
            
            </div>

Css:

#rahmen img {
float:right;
}

#rahmen {
-moz-border-radius:5px;
border:1px solid green;
clear:both;
margin-left:400px;
padding:7px;
width:400px;
}

#content {
-moz-border-radius:5px;
border:1px solid green;
margin-left:400px;
padding:7px;
width:400px;
}