Hilfe - Suche - Mitglieder - Kalender
Vollansicht: Abstand
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML
tobias
Hallo...

die Bilder meiner Homepage sollen nebeneinander angezeigt werden.Zwischen den einzelnden Bildern sollte aber ein geringer Abstand vorhanden sein.Wie kann ich solch ein Abstand beim Editor einstellen?!

Viele Dank im voraus
Gruss
Tobias
Worgan
Mögen mich die Cracks des Forums steinigen, mit Leerzeichen (Steuerung + Blank =  ).
Falls ich falsch liegen sollte tut mir das jetzt schon furchtbar leid (aber es funktioniert devlish.gif )


Martin (der sich schon auf die Antworten freut)
Terry
Und wieder kann CSS helfen!

Gib einfach folgendes ein:

<img style="margin:10px;" src="bild.jpg">

Beim Editor selber kann man das aber nicht einstellen, soviel ich weiß. Bei mehreren Bildern kannst Du es ja oben im head so definieren:

<style type="text/css">
<!--
img
{margin:10px;}
-->
</style>

Danach einfach nur noch die Bilder hintereinander einfügen, die halten dann brav Abstand! smile.gif

@ Worgan: bis vor kurzem hab ich das genauso gemacht... wink.gif
Worgan
Es geht natürlich auch mit DIV Containern und CSS. Ist evtl. der bessere Weg, hängt aber auch davon ab wieviel Du weißt. Auf jeden Fall würde es Sinn machn sich damit auseinánder zu setzen.

Martin
Terry
Die <div>-Container brauchst Du dafür gar nicht - einfach die style-Anweisung in den <img>-tag geben - reicht völlig!
Conny
Hallo,
die einfachste Möglichkeit liegt im IMG-Tag selbst!
Hier kann man mit hspace=n ein horizontaler freier Raum links und rechts vom Bild definieren. Vertikal geht das dann mit vspace=n für oben und unten...

Nachtrag: n = eine Zahl in Pixel

cu
Conny
tobias
ZITAT
Hallo,
die einfachste Möglichkeit liegt im IMG-Tag selbst!
Hier kann man mit hspace=n ein horizontaler freier Raum links und rechts vom Bild definieren. Vertikal geht das dann mit vspace=n für oben und unten...

Nachtrag: n = eine Zahl in Pixel



Habe in mein Html Code dieses hspace=n reingeschrieben... nur jetzt ist zwar ein Abstand vorhanden...dafür zeigt er aber zusätzlich noch - Binnestrich an...

Wieso das?!

icon14.gif huh.gif
Conny
Hi,
ich gebe Dir mal ein Beispiel:
QUELLTEXT
<IMG SRC="bild1.gif" WIDTH="80" HEIGHT="70" hspace="5" BORDER="0" ALT="ein Bild"><IMG SRC="bild2.gif" WIDTH="80" HEIGHT="70" hspace="5" BORDER="0" ALT="ein Bild">


Diese zwei Bilder stehen neben einander mit einem Abstand von 10 Pixel zueinander.

Wieso 10?
Weil sowohl das eine Bild ein 'leere' von 5 Pixel neben sich hat, als auch das andere Bild eine 'leere' von 5 Pixel neben sich hat; in der Summe ist der Abstand also 10 Pixel (5 + 5 = 10)

n bedeutet Zahl! Nicht Buchstabe 'n'

cu
Conny
Worgan
Hallo zusammen,

ich liebe es wie schnell man hier nützliche Dinge lernen kann. icon13.gif
Wie lange habt Ihr eigentlich gebraucht um so gut zu werden?

Ja ja ja - meine Signatur trage ich ja nicht umsonst rolleyes.gif

Martin
Terry
Wenn man zu diesem Thema noch mal die "Bibel" Selfhtml befragt, erhält man folgende Information: "Den automatischen Textumfluss können Sie auch abbrechen und die Textfortsetzung unterhalb der Grafik erzwingen. Alle dazu notwendigen Attribute sind allerdings als deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit CSS Stylesheets erzielen."

Also besser mit CSS - ich hab letzte Nacht allerdings nur die Kurzvariante gepostet - korrekter und exakter wäre es, alle margin-Angaben (top, right, bottom, left) zu definieren.

Hier der direkte Link zu Selfhtml (CSS): http://selfhtml.teamone.de/html/grafiken/ausrichten.htm#css

Und nochmal zur HTML-Variante: http://selfhtml.teamone.de/html/grafiken/a...htm#textumfluss
Netizen
ZITAT(Conny @ 25.04.2004 - 0:23)
die einfachste Möglichkeit liegt im IMG-Tag selbst!
Hier kann man mit hspace=n ein horizontaler freier Raum links und rechts vom Bild definieren. Vertikal geht das dann mit vspace=n für oben und unten...

Warum im Zeitalter von CSS solchen veralteten und wartungsunfreundlichen Kram verwenden?

Gruß
n!
Conny
ZITAT(Netizen @ 27.04.2004 - 0:17)
...Warum im Zeitalter von CSS solchen veralteten und wartungsunfreundlichen Kram verwenden?...

Muß man natürlich nicht!
Nur, je nachdem wie fortgeschritten der User ist, ist es zunächst einfacher diese Elemente einzubauen als dafür eigens ein CSS style sheet zu erstellen.

Heute verwende ich auch die Möglichkeiten die mir CSS bietet, damals -als Rookie- habe ich 'alles' zunächst mit HTML gemacht inklusive 'spacer Gifs' und so'n Kram.
in ältere Teile meiner Webseite sind diese Elemente heute noch zu finden...
Was bei weitem nicht heißt, daß man sich deswegen nicht weiterentwickelt.

Das was für ein Profi so selbstverständlich scheint, ist aus der Sicht eines Amateurs oft nicht wieder zu erkennen. Seine Einsichten entwickeln sich nun mal anders (z.B., learning by doing).

Mit meinem Beitrag habe ich lediglich versucht diese Tatsache Rechnung zu tragen... sogar in der Überzeugung, daß man geteilter Meinung sein kann wink.gif

cu
Conny
uschi
ZITAT
Das was für ein Profi so selbstverständlich scheint, ist aus der Sicht eines Amateurs oft nicht wieder zu erkennen. Seine Einsichten entwickeln sich nun mal anders (z.B., learning by doing).

Dem kann ich mich nur anschließen. Noch vor Wochen war CSS ein Buch mit 7 Siegeln für mich. Aber es öffnen sich wirklich neue Welten, wenn man es mal völlig kapiert hat (was bei mir immer noch nicht der Fall ist).

Weiterhin finde ich es manchmal ziemlich verletzend, wie mit den Fragen mancher User umgegangen wird. Immer diese ewigen Weiterleitungen zur SELFHTML.... lipssealed.gif

Trotzdem finde ich das Forum klasse, obwohl ich mich nicht wirklich traue Fragen zu stellen aus o. a. Grund sick.gif Doch zum Nachschauen ist es wirklich klasse!

Wie gesagt, es können nicht alle Profis sein!

Uschi wub.gif
harlequin
moin!

Ja, oft mag der Verweis auf SELFHTML ziemlich schnell und manchmal auch barsch erscheinen.
Aber man darf nicht vergessen, dass das Hauptaugenmerk von www.qhaut.de eigentlich darin liegt, Support und Hilfe für den HTML-Editor zu bieten.

Ich habe damals die beiden Foren (HTML, Talktime) als einen Kompromiss eingerichtet, da immer wieder Fragen zu Webdesign und anderen Glaubensdingen aufkamen.

Ich weiss noch von ein paar Mails, die mir Ulli vor zig Jahren geschickt hat, in denen er um HTML Beistand gebeten wurde (um es ziemlich vorsichtig auszudrücken).

Wo wir helfen können tun wir das meist gerne, aber alles vorkauen wollen wir nicht wink.gif. Das Erfolgserlebnis ist auch ein ganz anderes, wenn man sich seine ersten Designs selbst ausgefummelt hat (*seufz* waren das noch Zeiten..., 1996, meine ersten Gehversuche...), oh, ich schweife ab...

Aller Anfang ist schwer, frustrierend, aber auch spannend! :-)
Andreas
ZITAT(uschi @ 27.04.2004 - 10:38)
Trotzdem finde ich das Forum klasse, obwohl ich mich nicht wirklich traue Fragen zu stellen aus o. a. Grund sick.gif  Doch zum Nachschauen ist es wirklich klasse!

Hier ist aber doch noch niemand geköpft worden ph34r.gif

Immer fragen! Schlimmer als ein Hinweis auf SelfHTML, die FAQ oder die Suche kann's doch gar nicht werden. devlish.gif

Grüße

Andreas
heinzelhund
ZITAT(uschi @ 27.04.2004 - 10:38)
Weiterhin finde ich es manchmal ziemlich verletzend, wie mit den Fragen mancher User umgegangen wird. Immer diese ewigen Weiterleitungen zur SELFHTML.... lipssealed.gif

Hallo,

ich geb mir da zumindestens die Mühe, den Fragesteller auch auf die richtige Seite weiterzuleiten. biggrin.gif Das ist dann auch wirklich als Hilfe gedacht und nicht als Umschreibung für "Mach deinen Schei ... doch alleine."

Wenn die Fragesteller jedoch in dem Stil fragen:
"Ich hab da neulich so 'ne Suchmaschine gesehen auf Google.de, wie schreibe ich denn soetwas für meine Seite. Ich hab von HTML nur wenig Ahnung, vielleicht könntet ihr mir ja 'nen paar Codeschnipsel schreiben."

Dann ist der Verweis auf selfHTML die didaktisch sinnvollste Möglichkeit, den Fragesteller darauf hinzuweisen, dass es sich da um ein durchaus umfangreiches Themengebiet handelt, wo er - mit Verlaub - bei seinem vermutlichen Wissensstand eh nicht durchblicken wird, da ihm alle Grundlagen zu fehlen scheinen. (Womit ich nicht behaupten will, dass ich Google hätte programmieren können laugh.gif .)

Der Fragesteller sollte bei seinen Fragen auch darauf achten, eine konkrete Frage zu stellen und - immer gut - durchblicken lassen, dass er sich selber vielleicht schon einmal um eine Lösung bemüht hat. Man will ja schließlich jemanden bei seiner Arbeit helfen und nicht dessen Arbeit komplett selber machen. devlish.gif

Ciao
Heinzelhund
Netizen
ZITAT(Conny @ 27.04.2004 - 8:47)
Nur, je nachdem wie fortgeschritten der User ist, ist es zunächst einfacher diese Elemente einzubauen als dafür eigens ein CSS style sheet zu erstellen.

Stümpt wohl, es kann dann aber problematisch werden, wenn er erst später die Möglichkeiten von CSS erkennt und dann alle seine Seiten wieder ändern bzw. neuschreiben darf. Nicht immer reicht ein simples search & replace. Zumindest ein Hinweis auf die bessere - wenn auch anfangs möglicherweise schwierigere - Variante wäre vielleicht noch angebracht gewesen.

ZITAT
Heute verwende ich auch die Möglichkeiten die mir CSS bietet, damals -als Rookie- habe ich 'alles' zunächst mit HTML gemacht inklusive 'spacer Gifs' und so'n Kram.
Ich hatte sogar Frames, jeder davon mit eigenem bunten Hintergrund, unten in der Ecke ein rotierendes Netscape-Logo, in der Mitte ein "Diese Seiten wurden programmiert für ...", "Die ideale Auflösung ..." und ein "site created with Notepad"-Bapperl, jeder Link der Hauptnavigation mit eigenem Bild, fast jede Unterseite wieder mit anderem Hintergrundbild ... naja, Jugendsünde halt.biggrin.gif

ZITAT
Das was für ein Profi so selbstverständlich scheint, ist aus der Sicht eines Amateurs oft nicht wieder zu erkennen. Seine Einsichten entwickeln sich nun mal anders (z.B., learning by doing).

Bei mir wars trial & error ...

Gruß
n!
Conny
ZITAT(Netizen @ 27.04.2004 - 11:44)
...wenn er erst später die Möglichkeiten von CSS erkennt und dann alle seine Seiten wieder ändern bzw. neuschreiben darf...

Hi,
genau darauf läuft es in der Praxis doch meist hinaus, überarbeiten und/oder neuschreiben!

So war's bei Dir, so war's bei mir (schon das dritte mal!) wink.gif

So wird's auch bei den anderen sein -oder kommen-!

Und...? Schlim...?

Ich glaube nicht! cool.gif

cu
Conny
amethyst
Das muss irgendwie am Namen liegen ;-))
ZITAT(uschi @ 27.04.2004 - 10:38)
Weiterhin finde ich es manchmal ziemlich verletzend, wie mit den Fragen mancher User umgegangen wird. Immer diese ewigen Weiterleitungen zur SELFHTML.... 

Genauso ging es mir am Anfang, ich hätte XY (nein, ich nenne jetzt keine Namen) manchmal umbringen können, wenn da wieder der Satz kam: Lies es bei Selfthtml nach". Und was passierte mir vor gar nicht allzu langer Zeit? Ich hab auf Selfhtml verwiesen, noch dazu mit dem Zusatz, wenn Du das nicht verstehst, dann lies doch bitte mal von Anfang an. Und ich schäm mich nicht mal dafür ;-))

Aber Conny hat recht, es gibt hier die Profis (zu denen zähle ich mich nicht) und es gibt die Amateure und wenn ein Anfänger fragt, dann erzähl ich ihm möglichst nichts von CSS, es sei denn, er will was drüber wissen. Natürlich gibt es das Argument, warum denn erst was "falsches" zeigen, wenn es irgendwann doch anders gemacht wird.

Sicher, aber hat schon mal jemand versucht einem oder mehreren Anfängern die Webseitenerstellung näher zu bringen und das dann gleich mit HTML u n d CSS? Es ist schon schwer genug, denen begreiflich zu machen, dass man nicht gewillt ist, ihnen einen Klick-Editor zu zeigen.

Aus meiner Erfahrung heraus, sag ich ganz klar, dass erst wenn jemand die Strukturen von HTML begriffen hat und zwar mit dem herkömmlichen Tabellenlayout und damit Seiten erstellt hat, der kann danach auch mit CSS umgehen, denn erst dann weiß er was er tut und was er will. Und dann lernt er neu, ärgert sich über seine Seiten und fängt noch mal von vorne an. Und dann merkt er, dass die Seiten immer noch nicht so sind, wie Profis sie sehen wollen und strickt die Seiten wieder um. Sie werden eben nie fertig diese Websites.

Ich habe mich bei der Einsteigerhilfe für Phase5, die ja wie ein Workshop konzipiert ist, ganz bewußt für das Tabellenlayout entschieden und nichts zu CSS geschrieben, denn erstmal muss man den Editor begreifen und Phase 5 ist ein HTML-Editor und nur in 2. Linie ein CSS oder Java-Script-Editor, ich glaube das will Phase 5 auch gar nicht sein.

Gruß Uschi
SteffenG
Hallo Tobias,

Ich weiss jetzt nicht, wie viele Bilder du nebeneinander anzeigen möchtest, aber wenn's eine Gallerie ist (mit Thumbnails z.B.), dann gibt's eine nette Möglichkeit:

HTML
<div id="bilder">
<img src... />
<img src... />
<img src... />
<img src... />
</div>


und in's CSS:
HTML
div#bilder img{float:left;margin-right:5px;width:150px}


Wenn's auf der Seite nur diese Bilder gibt, kannst du sogar das div (und das #bilder im CSS) weglassen.

Das coole an dieser Lösung ist, dass sich die Anzahl der Bilder pro Zeile an die Breite des Browserfensters anpasst. Das kommt durch's floaten.
Weil floaten das Element automatisch als Blockelement auszeichnet, musst du jedem einzelnen Bild noch eine Breite zuweisen (siehe CSS). In einer Thumbnailgallerie ist das wohl EIN Wert für alle Bilder. Bei verschiedenen Werten müsstest du jedem img-Element noch eine id verpassen und der dann eine Breite geben:
HTML
<img src... id="bild1" />

und das CSS:
HTML
img#bild1 {width:150px;}


Eine Demonstration dieser Lösung findest du in dieser Gallerie. Einfach mal experimentieren und die Größe/Breite des Browserfensters ändern... wink.gif
Auf dieser Seite ist das Ganze etwas anders realisiert, weil zu jedem Bild noch Text gekommen ist:
HTML
<div class="thumb">
<img ... /><br />text
</div>



schöne Grüße
Steffen
Dakar
ZITAT
Weiterhin finde ich es manchmal ziemlich verletzend, wie mit den Fragen mancher User umgegangen wird. Immer diese ewigen Weiterleitungen zur SELFHTML.... lipssealed.gif


Hi,

siehst Du... kaum so etwas geäussert und schon wirst Du zugeschmissen mit netten Antworten. biggrin.gif Ist alles nicht so gemeint. Anfangs stand ich auch als Nixblicker da (manchmal heute noch omg.gif ) und musste mich erst an die Herrschaften hier gewöhnen... dry.gif

Heute kann ich nur sagen: qhaut = weltbeste Html-Teilzeit-Forum, wo gibt! w00t.gif Grübel nicht soviel, sondern probiere einfach aus, was die Fachkundigen vorschlagen; führt meist zum gewünschten Ergebnis (...auch wenn man es anfangs nicht glauben mag)

Um es in Lars Worten auszudrücken: "Have fun!"
(Oje, wenn das kein Ärger gibt...)

Viele Grüße
harlequin
ZITAT(Dakar @ 30.04.2004 - 18:10)
Um es in Lars Worten auszudrücken: "Have fun!"
(Oje, wenn das kein Ärger gibt...)

moin!

Bis dahin war alles sehr schön, aber einen von mir geklauten, allgemeinen Auspruch nochmal zu verwerten... Naja, ich weiss ja nicht... dry.gif

have fun! tongue.gif
Lars
Dakar
ZITAT(Dakar @ 30.04.2004 - 18:10)
(Oje, wenn das kein Ärger gibt...)


...hab ich`s gewußt! lipssealed.gif
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.
Invision Power Board © 2001-2012 Invision Power Services, Inc.