Hilfestellung für einen Anfänger? Bild und Text
gothmod
- css
Hi Leute,
ich krieg da was nicht hin.
ich habe mir folgendes vorgestellt:
ich möchte das neben ein bild ein text steht.
der Text klebt aber leider immer am unteren rechten Rand des bildes, wenn nun
ein weiteres bild drunter kommt verschiebt dieses sich beim auto-umbruch des textes.
Ich habe diesen Code generiert.
in der Css Datei is das das DIV id="Content":
#content {
margin-left:260px;
margin-right:15px;
padding:25px;
top:50px;
background-color:#fff;
}
hier habe ich schon versucht mit "float" und "vertical-center" zu arbeiten,Leider hat es auf diese box bei diesem html Tag:
<div id="content">
<h1>Willkommen in der Bildergalarie von gothmod</h1>
<a href="memberliste.html"><p>hier unsere Mitglieder</p>
<img src="images/pwna.jpg" heigt="250px" width="250px" border="0"/>
</a>
keinerlei wirkung????
Wie löst man das elegnat?
Hallo,
wenn ich das richtig interpretiere baust Du eine DIV-Kiste, darin ist ein link in dem ein Bild und Text ist. Du willst das das Text neben und nicht unter dem Bild steht. Richtig?
Nun, mein Minitest:
<div> <a href=''> <img src='y:\\birne6.png'> Ne hole birne</a><div>
Zeigt mir das es das auch im Normalfall tut.
Ich vermute mal durch Deine großen http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=margin und Paddingwerte hast Du einfach nur riesige Ränder geschaffen. Der inner Platz reichte nun warscheinlich nicht mehr aus. Also fing der Browser an umzubrechen. Nimm also mal die margin-Werte weg und exerimentiere mit dem http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=width-Wert. das sollte bessere Ergebnisse liefern.
Hoffe ich habs richtig verstanden.
Viele Grüße,
Rob
Hallo,
wenn ich das richtig interpretiere baust Du eine DIV-Kiste, darin ist ein link in dem ein Bild und Text ist. Du willst das das Text neben und nicht unter dem Bild steht. Richtig?
Nun, mein Minitest:
<div> <a href=''> <img src='y:\birne6.png'> Ne hole birne</a><div>
>
> Zeigt mir das es das auch im Normalfall tut.
> Ich vermute mal durch Deine großen <http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=margin> und Paddingwerte hast Du einfach nur riesige Ränder geschaffen. Der inner Platz reichte nun warscheinlich nicht mehr aus. Also fing der Browser an umzubrechen. Nimm also mal die margin-Werte weg und exerimentiere mit dem <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=width>-Wert. das sollte bessere Ergebnisse liefern.
>
>
> Hoffe ich habs richtig verstanden.
>
> Viele Grüße,
> Rob
Hallo Rob,
Danke für die Antwort. ich weis leider noch nit wir ich manche sachen fachlich richtig ausdrücke. Das mit dem div stimmt (BOX)
Hm.. der Text steht schon neben dem Bild das geht schon. allerdings hängt dieser dann direkt an der unteren rechten ecke des Bildes. dieser text soll eigntlch nur nach oben genommen werden. Die breite der Ränder is so eingtlich perfekt. Das ergbnis sieht man hier :
www.gothmod.de/members.html
ich will die bilder alle neu anordnen und eben den text nicht mehr so blöd umbrechen lassen sonder positionieren können. direkt in der mittlerne vertikalen ausrichtung des bildes links davon.
Thx roland
Hallo,
Danke für die Antwort. ich weis leider noch nit wir ich manche sachen fachlich richtig ausdrücke. Das mit dem div stimmt (BOX)
ich will die bilder alle neu anordnen und eben den text nicht mehr so blöd umbrechen lassen sonder positionieren können. direkt in der mittlerne vertikalen ausrichtung des bildes links davon.
Hi, die anderen haben Dich ja schon auf Float hingewiesen. Und das ist auch der Schlüssel.
Der Trick dabei sit das Float sich auf 'nachfolgende' Objekte bezieht.
Nach etwas rumspielen hat mein beispiel von oben jetzt auch den Text am oberen rechten Rand:
<div style="width:800px; float:left;"><a href='' > <img src='y:\\birne6.png'></div> ne hole birne</a>
Was aber wie ich mir vorstellen kann nicht der Weißheit letzes Schluss ist, da das <div> den link <a> durchbricht. Was ich persönlich jetzt nicht so schön finde.
Viele Grüße,
Rob
Hallo,
Danke für die Antwort. ich weis leider noch nit wir ich manche sachen fachlich richtig ausdrücke. Das mit dem div stimmt (BOX)
ich will die bilder alle neu anordnen und eben den text nicht mehr so blöd umbrechen lassen sonder positionieren können. direkt in der mittlerne vertikalen ausrichtung des bildes links davon.
Hi, die anderen haben Dich ja schon auf Float hingewiesen. Und das ist auch der Schlüssel.
Der Trick dabei sit das Float sich auf 'nachfolgende' Objekte bezieht.
Nach etwas rumspielen hat mein beispiel von oben jetzt auch den Text am oberen rechten Rand:
<div style="width:800px; float:left;"><a href='' > <img src='y:\birne6.png'></div> ne hole birne</a>
>
> Was aber wie ich mir vorstellen kann nicht der Weißheit letzes Schluss ist, da das <div> den link <a> durchbricht. Was ich persönlich jetzt nicht so schön finde.
>
> Viele Grüße,
> Rob
Vielen Dank so klappst perfekt danke schön für deine GEduld mit einem NOOB wie mir so einfach eigentlich. Der Link von dem bild funktioniert auch noch der text läßt sich nun schön innerhalb vonm <P> tag umbrechen ohne das die bilder unten dran gleich beeinflusst werden sehr genial genau so wollt ich es hinbekommen. THX nochmal ehrlich.
Kotáka!
<div style="width:800px; float:left;"><a href='' > <img src='y:\birne6.png'></div> ne hole birne</a>
> >
> > Was aber wie ich mir vorstellen kann nicht der Weißheit letzes Schluss ist, da das <div> den link <a> durchbricht. Was ich persönlich jetzt nicht so schön finde.
Der Weißheit letzter Schluß ist #fff, aber auch weise ist der obige Code nicht, sondern falsch.
> Vielen Dank so klappst perfekt
Unter "perfekt" verstehe ich was anderes. Daß die Browser hieraus überhaupt etwas machen, fällt in die Kategorie "Dieses satz grotten falsch du Verstehn trotzdem".
Die Browser korrigieren das wohl so, daß das div nur noch das img umschließt. In dem Fall ist es überflüssig, weil es ein gruppierendes Element ist und man ein einzelnes Bild nicht zu gruppieren braucht. Der Style, also float:left, kann dann direkt aufs img angewandt werden. Und genau diese Lösung hatten wir schon ...
Viele Grüße vom Længlich
--
Mein aktueller Gruß ist:
Enga (Papua-Neuguinea)
hier habe ich schon versucht mit "float" ... zu arbeiten,
Wie genau, worauf genau hast du das float angewendet?
Wie löst man das elegnat?
Mit float.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float
hier habe ich schon versucht mit "float" ... zu arbeiten,
Wie genau, worauf genau hast du das float angewendet?
Wie löst man das elegnat?
Mit float.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float
ich hab das float in die css datei reingeschrieben.
Siehe so:
#content {
margin-left:260px;
margin-right:15px;
padding:25px;
top:50px;
background-color:#fff;
span: vertical-align;
text:float;
}
thx Gothmod
Daa daa oo!
text:float;
Gehe zurück zu http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float. Gehe nicht über Los. Ziehe nicht DM 4000 ein.
Viele Grüße vom Længlich
Daa daa oo!
text:float;
Gehe zurück zu http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float. Gehe nicht über Los. Ziehe nicht DM 4000 ein.
Viele Grüße vom Længlich
aber genau das checkich eben nicht hmmm... anfänger eben
is float:left richtig?? weil das hat auch keine auswirkung!!! text klebt immer nach an der unteren rechten ecke des bildes
keine 4000 schade
thx
Mingabu!
is float:left richtig?? weil das hat auch keine auswirkung!!! text klebt immer nach an der unteren rechten ecke des bildes
Ja, ist richtig. Aber nicht für das Container-Div, sondern für das Element, das umflossen werden soll. Also in Deinem Fall das img.
Viele Grüße vom Længlich
Mingabu!
is float:left richtig?? weil das hat auch keine auswirkung!!! text klebt immer nach an der unteren rechten ecke des bildes
Ja, ist richtig. Aber nicht für das Container-Div, sondern für das Element, das umflossen werden soll. Also in Deinem Fall das img.
Viele Grüße vom Længlich
ok das muss ich dannauch probieren , ich habs nun aber in das <p> tag eingebunden und das geht dann besten weil nicht das bild nach rechts soll sonder der text soll direkt neben an stehen.
thx thx
Hi,
bitte mach nicht ständig neue Threads auf, wenn dein Problemchen thematisch noch gut in einen bestehenden reinpasst, bzw. sogar nur die Fortsetzung davon ist.
Bitte lies nach, warum Doppelpostings hier unerwünscht sind - und beherzige es künftig.
MfG ChrisB
Hi,
bitte mach nicht ständig neue Threads auf, wenn dein Problemchen thematisch noch gut in einen bestehenden reinpasst, bzw. sogar nur die Fortsetzung davon ist.
Bitte lies nach, warum Doppelpostings hier unerwünscht sind - und beherzige es künftig.
MfG ChrisB
»»
Ja geht klar ich dachte nur das es etwas einfacher wird wenn die leute wissen das ich ein anfänger bin, da kommt doch eher verständins dabei raus.
Trozdem werden ich mich daran halten .
thx Roland
Ja geht klar ich dachte nur das es etwas einfacher wird wenn die leute wissen das ich ein anfänger bin, da kommt doch eher verständins dabei raus.
Der Titel eines Postings lässt sich in jeder Vorschau ändern.
Gerade als Anfänger solltest du eigentlich Vorschauen nutzen und das angebotene Formular wahrnehmen.
mfg Beat
'ǝɯɐu$ ıɥ
<a href="memberliste.html"><p>hier unsere Mitglieder</p>
<img src="images/pwna.jpg" heigt="250px" width="250px" border="0"/>
</a>
Nur mal so am Rande, du hast einen Verschachtelungsfehler (wehe einer sagt jetzt: aber HTML5 da darf...), das <p> kommt nach außen, bemühe bitte das nächste mal einen Validator der hätte es dir gesagt.
ssnɹƃ
ʍopɐɥs