PHP Forum

PHP Forum (http://www.selfphp.de/forum/index.php)
-   HTML, CSS und JavaScript Help! (http://www.selfphp.de/forum/forumdisplay.php?f=24)
-   -   Bilder umfleißen lassen (http://www.selfphp.de/forum/showthread.php?t=13890)

MatMel 03.07.2006 17:31:46

Bilder umfleißen lassen
 
Hallo

Ich möchte Bilder in einem Artikel von Text umlaufen lassen.
Da ist ja auch mit float: left/right und dann clear nicht weiter Problematisch.

Das gaze soll dann so aussehen:
Code:

########### Text Text Text Text Text
#        # Text Text Text Text Text
#        # Text Text Text Text Text
# BILD    # Text Text Text Text Text
#        # Text Text Text Text Text
########### Text Text Text Text Text
Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text
Text Text Text Text Text  ###########
Text Text Text Text Text  #        #
Text Text Text Text Text  #        #
Text Text Text Text Text  #BILD    #
Text Text Text Text Text  #        #
Text Text Text Text Text  ###########
########### Text Text Text Text Text
#        # Text Text Text Text Text
#        # Text Text Text Text Text
# BILD    # Text Text Text Text Text
#        # Text Text Text Text Text
###########
usw.

Problem ist jetzt, dass ich den Text dynamisch per php da reinschreib und die Bilder vorher nicht kenn.
Wie schaff ich es jetzt dass es keinen (oder einen festgelegten) horizontalen Abstand gibt?

Gruß,
Matze

xabbuh 03.07.2006 19:20:18

AW: Bilder umfleißen lassen
 
Dann setze doch über margin für das Bild einen bestimmten Abstand.

MatMel 03.07.2006 19:32:29

AW: Bilder umfleißen lassen
 
Hmm mach ich mit margin nicht nur einen Innenabstand?
Das Problem ist ja, dass ich den Text an einem Stück hab, wenn ich jetzt aber die Bilder wirklich ohne Abstand untereinander machen will bis jetzt jedenfalls aufteilen muss.
Nur weiß ich natürlich nicht wieviele Zeilen Text jetzt neben die Bilder passen (weil die Bilder sowie der Text halt vom Benutzer hochgeladen bzw gespeichert werden).

maiskolben 11.05.2007 16:48:00

AW: Bilder umfleißen lassen
 
Du meinst einen vertikalen Abstand, oder?
Also die Bilder sollen jeweisl Link/Rechts, aber ohne Abstand zum oberen/unteren Bild sein, richtig?

CSS-Aussenabstand:
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-buttom: 10px;

Doch Du kannst auch versuchen, die Bilder relativ zu positionieren...

Gruß, maiskolben

needcoffee 13.05.2007 03:51:20

AW: Bilder umfleißen lassen
 
Zitat:

Zitat von MatMel (Beitrag 84227)
Hmm mach ich mit margin nicht nur einen Innenabstand?
Das Problem ist ja, dass ich den Text an einem Stück hab, wenn ich jetzt aber die Bilder wirklich ohne Abstand untereinander machen will bis jetzt jedenfalls aufteilen muss.

Nein, margin ist der äußere Abstand, padding der innere. Wenn du es also so haben möchtest, das links und rechts von deinem Bild ein Rand ist, aber oben und unten nicht, dann müsste z.B. folgendes in dein Stylesheet:
Code:

img {
margin: 0 10px;
}

In diesem Bsp. würde es bewirken das du oben sowie unten keinen Abstand hast und links sowie rechts einen Abstand von 10px. Du kannst den Abstand natürlich auch für jede Seite einzeln festlegen. Dabei kann man alles einzeln ausschreiben oder man gibt die Werte einfach im Uhrzeigersinn an. Also wäre das Ergebnis von:
Code:

img {
margin-top:12px;
margin-right:3px;
margin-bottom:6px;
margin-left:9px;
}

gleich dieser Schreibweise:
Code:

img {
margin:12px 3px 6px 9px;
}

Bei diesen Beispielen würden jetzt alle Bilder deiner Seite diese Formatierungen haben, achte also darauf das du die Werte dem img Attribut der gewünschten Klasse oder ID zuweist.


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:40:01 Uhr.

Powered by vBulletin® Version 3.8.3 (Deutsch)
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.