• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder untereinander ohne Abstand anzeigen

C

chrysi

Neues Mitglied
Hi,
es sollen 2 Bilder bündig untereinander angezeigt werden. Leider zeigt meine HTML-Datei einen Abstand zwischen den Bildern an, wenn ich sie durch den br-Tag trenne. Deshalb habe ich versucht, eine CSS-Datei zu erstellen, die den Abstand entfernt, leider ohne Erfolg. Wie lässt sich der Abstand zwischen den Bildern entfernen?
MfG, chrysi.

Hier ist sind die HTML- und die CSS-Dateien:
------------------------------------------------------------------------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="css/basic2.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<img src="Bilder/Pacman/Mauer.jpg"></img>
<br></br>
<img src="Bilder/Pacman/Mauer.jpg"></img>
</body></html>
------------------------------------------------------------------------------------------------------------------------------------------------
br, img {
padding: 0;
border-collapse: collapse;
border-spacing: 0px;
margin: 0;}
------------------------------------------------------------------------------------------------------------------------------------------------
 
Werbung:
chrysi schrieb:
Hi,
es sollen 2 Bilder bündig untereinander angezeigt werden. Leider zeigt meine HTML-Datei einen Abstand zwischen den Bildern an, wenn ich sie durch den br-Tag trenne. Deshalb habe ich versucht, eine CSS-Datei zu erstellen, die den Abstand entfernt, leider ohne Erfolg. Wie lässt sich der Abstand zwischen den Bildern entfernen?
MfG, chrysi.

Hier ist sind die HTML- und die CSS-Dateien:
------------------------------------------------------------------------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="css/basic2.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<img src="Bilder/Pacman/Mauer.jpg"></img>
<br></br>
<img src="Bilder/Pacman/Mauer.jpg"></img>
</body></html>
------------------------------------------------------------------------------------------------------------------------------------------------
br, img {
padding: 0;
border-collapse: collapse;
border-spacing: 0px;
margin: 0;}
------------------------------------------------------------------------------------------------------------------------------------------------
Zum Vergrößern anklicken....

Wow...
Ähm:
Code: 
img {vertical-algin:top|bottom|wasweissich}
 
@ scbawik:
Danke, funktioniert leider immer noch nicht.
Ich habe am Ende der CSS-Datei die Anweisung hinzugefügt:
vertical-align: top|bottom|wasweissich}
 
Werbung:
chrysi schrieb:
@ scbawik:
Danke, funktioniert leider immer noch nicht.
Ich habe am Ende der CSS-Datei die Anweisung hinzugefügt:
vertical-align: top|bottom|wasweissich}
Zum Vergrößern anklicken....

Ernsthaft, ja? :)

Also, du solltest dich dringend mit den Grundlagen beschäftigen bevor du die nächste Frage stellst, denn diese fehlen dir offensichtlich.

Damit du dennoch dein aktuelles Problem gelöst bekommst:
vertical-align: bottom;
 
Nun habe ich die letzte Zeile erstetzt durch:
vertical-align: bottom; }
Leider immer noch ohne Erfolg. Der Abstand ist immer noch zu sehen.
 
chrysi schrieb:
Nun habe ich die letzte Zeile erstetzt durch:
vertical-align: bottom; }
Leider immer noch ohne Erfolg. Der Abstand ist immer noch zu sehen.
Zum Vergrößern anklicken....

Poste bitte nochmal den ganzen Inhalt deiner CSS-Datei. Dort befindet sich mit großer Sicherheit noch ein oder mehrere Fehler. Sieh dir doch bitte vorher die Grundlagen an, wie scbawik schon meinte. Denn wenn du es wirklich so
HTML: 
vertical-align: bottom; }
in deine CSS geschrieben hast, kann es nicht funktionieren.

scbawik schrieb:
Ernsthaft, ja? :)

Also, du solltest dich dringend mit den Grundlagen beschäftigen bevor du die nächste Frage stellst, denn diese fehlen dir offensichtlich.

Damit du dennoch dein aktuelles Problem gelöst bekommst:
vertical-align: bottom;
Zum Vergrößern anklicken....

Ich musste eben so lachen. :D
 
Werbung:
Hallo nookie,
in der CSS-Datei steht jetzt:
--------------------------------------------------------------
br, img {
padding: 0;
border-collapse: collapse;
border-spacing: 0px;
margin: 0;
vertical-align: bottom;}
 
chrysi schrieb:
Hallo nookie,
in der CSS-Datei steht jetzt:
--------------------------------------------------------------
br, img {
padding: 0;
border-collapse: collapse;
border-spacing: 0px;
margin: 0;
vertical-align: bottom;}
Zum Vergrößern anklicken....
Ich bin ja kein Experte in Sachen CSS, aber sollte es nicht "br.img" statt "br,img" sein? Oder geht das komma auch???

Ausserdem habe ich Zweifel, daß sich das br mit vertical-align annullieren lässt, aber was weiss ich schon.
Mal ne ganz blöde Frage: Warum lässt du das "<br></br>"(wobei ich noch nicht mal weiss, ob das valide ist, <br> reicht) nicht einfach weg, wenn du es nicht willst. Und ist das br bei dir übrigens keiner Klasse zugeordnet. Dann müsste es Child sein und das br hinter die Klasse des parents, oder aber natürlich alle br-s auflösen.

Ich würde den <br> in die Tonne treten und
Code: 
clear:left;
float:left;
in die Klasse des Bildes schreiben.



Edit: Achso, bei xhtml müsste es natürlich "<br />" sein, aber ich würde das br-Tag ganz weglassen.
 
Zuletzt bearbeitet:
Hallo-Welt schrieb:
Ich bin ja kein Experte in Sachen CSS, aber sollte es nicht "br.img" statt "br,img" sein? Oder geht das komma auch???

Ausserdem habe ich Zweifel, daß sich das br mit vertical-align annullieren lässt, aber was weiss ich schon.
Mal ne ganz blöde Frage: Warum lässt du das "<br></br>"(wobei ich noch nicht mal weiss, ob das valide ist, <br> reicht) nicht einfach weg, wenn du es nicht willst. Und ist das br bei dir übrigens keiner Klasse zugeordnet. Dann müsste es Child sein und das br hinter die Klasse des parents, oder aber natürlich alle br-s auflösen.

Ich würde den <br> in die Tonne treten und
Code: 
clear:left;
float:left;
in die Klasse des Bildes schreiben.



Edit: Achso, bei xhtml müsste es natürlich "<br />" sein, aber ich würde das br-Tag ganz weglassen.
Zum Vergrößern anklicken....

Ob das Komma in diesem Fall geht oder allgemein? Allgemein ja.
 
Werbung:
@ Hallo-Welt: Danke für den Hinweis. Ich habe deine beiden Zeilen in der CSS-Datei am Ende eingefügt, leider hat es nicht funktioniert.

Mittlerweile habe ich eine eigene Lösung entwickelt:
------------------------------------------------------------------------------------------
<script>
function Startwerte(){
var src = document.getElementById("gamediv");
var bilddatei = "Bilder/Pacman/Mauer.jpg";
var a = document.createElement("img");
a.src = bilddatei;
a.style.position = 'absolute';
src.appendChild(a);
var b = document.createElement("img");
b.src = bilddatei;
b.style.position = 'absolute';
b.style.top = 40;
src.appendChild(b); }
</script>

<div id="gamediv">
<script type="text/javascript">
Startwerte();
</script>
</div>
------------------------------------------------------------------------------------------
MfG, chrysi.
 
Gerade fällt mir auf, dass meine eben genannte Lösung nur in GoLive funktioniert, nicht aber auf der hochgeladenen Internetseite.
Der Browser akzeptiert folgende Anweisung nicht:
b.style.top = 40;

Sowei ich weiß, darf man left und top bei images nicht mehr benutzen.
Kennt ihr alternative Anweisungen, um left und top bei Bildern zu ändern?
MfG, chrysi.
 
chrysi schrieb:
Gerade fällt mir auf, dass meine eben genannte Lösung nur in GoLive funktioniert, nicht aber auf der hochgeladenen Internetseite.
Der Browser akzeptiert folgende Anweisung nicht:
b.style.top = 40;

Sowei ich weiß, darf man left und top bei images nicht mehr benutzen.
Kennt ihr alternative Anweisungen, um left und top bei Bildern zu ändern?
MfG, chrysi.
Zum Vergrößern anklicken....

<br> löschen.
CSS löschen.

Code: 
img {
margin:0;
padding:0;
display:block;
}

Wie bereits geschrieben, fehlen dir offensichtlich alle CSS und HTML Grundlagen. Du solltest dich zuerst einmal damit beschäftigen.
 
Werbung:
Danke scbawik, das hat funktioniert.
Kennt ihr eine gute Seite, in der erklärt wird, wie man Bilder mithilfe von CSS und HTML anzeigen lassen kann?
Ich habe früher einmal ein Pacmanspiel in Java programmiert. Das wollte ich ursprünglich auf eine Internetseite als Java-Applet einbinden. Leider ist bei den meisten Browsern Java deaktiviert, daher wollte ich das Spiel in HTML neu schreiben.
 
chrysi schrieb:
Danke scbawik, das hat funktioniert.
Kennt ihr eine gute Seite, in der erklärt wird, wie man Bilder mithilfe von CSS und HTML anzeigen lassen kann?
Ich habe früher einmal ein Pacmanspiel in Java programmiert. Das wollte ich ursprünglich auf eine Internetseite als Java-Applet einbinden. Leider ist bei den meisten Browsern Java deaktiviert, daher wollte ich das Spiel in HTML neu schreiben.
Zum Vergrößern anklicken....

Um Bilder anzeigen zu lassen brauchst du lediglich den <img>-Tag oder du bindest es per CSS als background-image ein. Die positionierung von Elementen erfolgt dann, wie schon öfters erwähnt über CSS. Für alles andere www.gidf.de

Meinst du Java oder Javascript?
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben