Du bist nicht angemeldet. [Anmelden]
Optionen
Thema bewerten
Texte/Bilder in eine Zeile/Reihe - #1534222 - 24.07.2008, 02:58:07
Titus1989
Nicht registriert


Hi Leute
Ich habe mal eine Frage, bei der Bearbeitung der Knuddels HP.
Auf einigen HPs habe ich gesehen, dass z.B. zwei verschiedene Bilder in einer Reihe, auf gleicher Höhe sind.
Das eine Bild auf linker Seite und das andere auf rechter Seite und in der mitte ist halt nix.
Und genau das Selbe auch mit Textkästen.
Nun wollt ich fragen, wie soetwas geht.
Es wäre echt super nett, wenn ihr mir hier die Codes dafür rein machen könnt.

Mit freundlichen Grüßen.

Titus!

[zum Seitenanfang]  
Re: Texte/Bilder in eine Zeile/Reihe [Re: ] - #1534255 - 24.07.2008, 09:08:43
flirting Boy13
Forum​user​

Registriert: 24.05.2008
Beiträge: 138
Dafür gibts ne SuFu,die du bestimmt nicht benutzt hast.
Hab eine minute gebraucht,um das hier aus dem Forum zu finden.Du hättest einfach ein paar Seiten weiter gucken müssen.Übrigens,guck mal ins ganze Forum,dann kannst du auch lesen,wies mit texten geht lach

[zum Seitenanfang]  
Re: Texte/Bilder in eine Zeile/Reihe [Re: flirting Boy13] - #1534274 - 24.07.2008, 10:29:32
lutz39
​Innovationsbremse

Registriert: 08.04.2003
Beiträge: 12.930
Ort: Dresden
Das ausrichten von Bildern/Texten wird heute fast nur noch mit DIV Containern gemacht.
Beispiel:
<div style="position: absolute; width: 300px; left: 150px; top: 50px"><img src="http://www.deinbildhoster.de/musterbild.jpg" width="280" height="340" border="0" alt="chatbild"></div>

Die entsprechenden Werte muss man natürlich anpassen.
position: absolute; width: 300px; left: 10px; top: 300px"><
width gibt die Breite des Containers an (in Pixeln)
left gibt den Abstand vom linken Rand an (in Pixeln)
top bedeutet Entfernung von oben (in Pixeln)
Die Größenangaben beim Bild muss man dann eben auch anpassen:
<img src="http://www.deinbildhoster.de/musterbild.jpg" width="280" height="340" border="0" alt="chatbild">
width = ist die Breite des Bildes
height = Höhe des Bildes
border="0" = gibt an das der Rand 0 Pixel stark sein soll (also hier ohne rand)
bei alt schreibt man eine Beschreibung für das Bild rein (wenn Bild mal nicht geladen wird sieht man diese Beschreibung wenigstens)
Für mehrere Bilder an verschiedenen Stellen, musst du dann auch mehrere DIV Container verwenden.
An stelle des Bildes kann man natürlich auch Text nutzen => einfach statt des
<img src="http://www.deinbildhoster.de/musterbild.jpg" width="280" height="340" border="0" alt="chatbild">
deinen Text einfügen.
Für weitere Fragen zu DIV Containern nutze ruhig mal die Forensuche => "Div Container"
_________________________
Hilf & sei nett zu allen. Versuche es wenigstens ;-)
Problem gelöst, bitte Rückmeldung damit andere auch davon profitieren. Beitrag wieder öffnen -> /m ...

[zum Seitenanfang]  
Re: Texte/Bilder in eine Zeile/Reihe [Re: lutz39] - #1534291 - 24.07.2008, 11:11:58
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Weil lutz es so super erklaert hat und es soweit auch recht komplett aussieht, moechte ich hier an dieser Stelle gleich mal anschliessen um das ganze noch ein bisschen zu vervollstaendigen und den Tipp geben.

Wenn man nicht will, das sich das absolut positionierte Element, direkt an der oberen Browserkante orientiert, man einfach einen relativ positionierten Div-Container drum herum macht und diesem dann statt die Werte der absoluten Positionierung (top, right, bottom u left) einfach eine Margin mitgibt.

Um es auf das obere Beispiel von lutz anzuwenden:

Zitat:

[color:"red"]<div style="width:960; height:560;">[/color]
<div style="position: absolute; width: 300px; [color:"red"]margin-top:5px; margin-right:-3px; margin-bottom:0; margin-left:0[/color] ;"><img src="http://www.deinbildhoster.de/musterbild.jpg" width="280" height="340" border="0" alt="chatbild"></div></div>


Wenn man allerding nur die bilder positionieren will, dann reicht es in der Regel auch, wenn man den Bildelementen die Formatierung mitgibt:
Zitat:
<img style="margin-top:5px; margin-right:-3px; margin-bottom:0; margin-left:0" src="http://www.deinbildhoster.de/musterbild.jpg" width="280" height="340" border="0" alt="chatbild">


Oder man positioniert sie absolut, in dem man einfach lutzts Div-Code einfach in den img - Tag hineinkopiert.

[zum Seitenanfang]