Wie kann ich den Abstand verkleinern?

letterbox · 10. März 2018

Hallo, ich übe gerade mit css und will den Abstand zwischen dem Bild, dem Text 'Eis' und dem nachfolgenden Text wenn möglich, verkleinern

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
	
<style type="text/css">
h2 {
  color:#5858FA;   /* Farbe blau */
  font-size:28pt;  /* Größe 28pt   */
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

      h2 { font-size: 30px; }
      p  { font-size: 1.2em; }
      a  { font-size: 0.7cm; }
h3 { font-size: 20px; }
      p  { font-size: 1.2em; }
      a  { font-size: 0.7cm; }
   
body {
	background-color: #67E1F4;
}
</style>
</head>

<body><bgcolor=blue>
<p align=center>Bild 1:
<p align=center><img src="Malerei/Acrylmalerei/album/thumbs/Eis.jpg" width="200" height="150" alt=""/>
	<h2><p align=center>"Eis"</h2>
<h3><p align=center>Acryl auf Leinwand<br>60 x 50cm

</body>

</html>

IRID1UM · 10. März 2018

Das Problem bei deinem Code ist, dass du mit H2 und H3 vordefinierte Überschriftenformate verwendest, die, weil es sich um Überschriften handelt, automatisch einen Abstand besitzen. Wenn du also den Text normal formatierst, dann wird auch der Abstand verschwinden.

Abgesehen davon kannst du einfach statt <p align=center>Bild 1: ein <div align=center> verwenden und zum Schluss das </div>-Tag setzen. Dazwischen brauchst du dann keine <p align=center>, da das div dann von oben bis unten gilt.
Du kannst hier live an deinem HTML-Code arbeiten und die Ergebnisse direkt anschauen, wenn dir das hilft: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
MfG,
IRID1UM

letterbox · 10. März 2018

Danke IRIDIUM
nun sieht mein Quelltext so aus:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
	
<style type="text/css">
h2 {
  color:#5858FA;   /* Farbe blau */
  font-size:28pt;  /* Größe 28pt   */
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

      h2 { font-size: 30px; }
      p  { font-size: 1.2em; }
      a  { font-size: 0.7cm; }
h3 { font-size: 20px; }
      p  { font-size: 1.2em; }
      a  { font-size: 0.7cm; }
   
body {
	background-color: #67E1F4;
}
</style>
</head>

<body><bgcolor=blue>
<p align=center>Bild 1:
<div align=center><img src="Malerei/Acrylmalerei/album/thumbs/Eis.jpg" width="200" height="150" alt=""/>
	<p align=center>"Eis"
<p align=center>Acryl auf Leinwand<br>60 x 50cm
</div>
</body>

</html>

die Schrift hat nun keine Formatierung mehr, aber am Abstand hat sich nichts geändert.

KnolleJupp · 10. März 2018

Die passende Antwort hast du doch schon bekommen:

IRID1UM schrieb:
Das Problem bei deinem Code ist, dass du mit H2 und H3 vordefinierte Überschriftenformate verwendest, die, weil es sich um Überschriften handelt, automatisch einen Abstand besitzen.

gravitas · 10. März 2018

Hi!

IRID1UM hat das Problem schon benannt. Etwas selbst forschen musst du schon; einfach erklären wird dir nicht helfen; hier musst Du die Grundstruktur von CSS, verbunden mit HTMl selbst erarbeiten. Nur so verstehst du die Hierarchie und die Verbindung der Elemente zueinander am Ende viel besser.

Weiter: Du hast da grundlegend einige Fehler.

1. Du hast <p> und <a> doppelt definiert
2. Du hast <h2> bzgl. der Schriftgröße doppelt definiert
3. Entscheide dich für ein Maß: Also entweder "em", "px" (die Genannten sind auch die gebräuchlichsten)
4. In <h> bzw. Überschriften definiert man allgemein kein <p>, weil <h> schon ein Textelement definiert
5. <bgcolor=blue> benötigst du nicht, weil du ja schon den <body> im Style definiert hast
6. Ach ja; zu guter Schluss noch: Wenn du ein Element öffnest, solltest bzw. musst du es auch schließen! Beispiel: <p>TEST</p>

Du solltest also nicht nur CSS, sondern dringend auch den Bereich HTML, noch mal üben! Dein Scripten sieht aus, als hättest du einzelne Schnipsel nur aus Tutorials herauskopiert.

Folgende Stichpunkte sind für dich nun relevant: CSS: "padding", "margin" und allgemein "class=" (Bereich HTML). Schaue dir einfach auch mal die Definitionen zu "<div>" (Bereich HTML) an.

So, jetzt heißt es lernen und üben. Wir sind ja nicht dafür da dir "gebratene Tauben" in den Mund zu werfen!

LieberNetterFlo · 10. März 2018

das geht trotzdem ganz einfach ... oben in den "Style" Abschnitt einfach noch

#id1 { margin-top: 10px; }

und unten dann in das <p> das id="id1"

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
	
<style type="text/css">
h2 {
  color:#5858FA;   /* Farbe blau */
  font-size:28pt;  /* Größe 28pt   */
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

h3 { font-size: 20px; }

p  { font-size: 1.2em; }

a  { font-size: 0.7cm; }

#id1 { margin-top: 5px; }

body {
	background-color: #67E1F4;
}
</style>
</head>
 
<body>
<p align=center>Bild 1:</p>
<div align=center><img src="eis.jpg" width="200" height="150" alt=""/>
<p  id="id1" align=center>"Eis"</p>
<p align=center>Acryl auf Leinwand<br>60 x 50cm</p>
</div>
</body>
 
</html>

ich hab nochn paar doppelte Sachen rausgemacht, aber lange nicht alle Fehler korrigiert

sorry dass ich die Lösung verraten hab ... halte dich trotzdem an @gravitas

gravitas · 10. März 2018

@ LieberNetterFlo: Warum eine ID? Ist das Element so einzigartig, dass es nur einmal verwendet wird?

Gebratene Tauben mit Fehlern:

Warum machst DU das erste p nicht ins div? Und warum hast Du die p center nicht gelöscht?

Nicht böse sein; aber gebratene Tauben mit Fehlern geht gar nicht!

Schluss mit meinen Belehrungen!

LieberNetterFlo · 10. März 2018

was sind gebratene Tauben mit Fehlern?

in dem Code könnte man noch einiges korrigieren, hab ja geschrieben dass ich nicht alles korrigiert hatte ...

war nur mal quick&dirty, geht auch mit ner Klasse, wenn man es öfters nutzen mag

Bin auch nicht der HTMl Profi, in folgendem sind bestimmt immernoch Fehler drin

Code:

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8">
		<title>Unbenanntes Dokument</title>
		
		<style type="text/css">
		h2 {
		  color:#5858FA;   /* Farbe blau */
		  font-size:28pt;  /* Größe 28pt   */
		  font-family:arial, "lucida console", sans-serif; /* Schriftart */
		}

		h3 { font-size: 20px; }

		p  { font-size: 1.2em; }

		a  { font-size: 0.7cm; }

		.subtitle { margin-top: 0px; }

		body {
			background-color: #67E1F4;
		}
		</style>
	</head>
 
	<body>
		<div align=center>
			<p>Bild 1:</p>
			<img src="eis.jpg" width="200" height="150" alt="Eis"/>
			<p class="subtitle">"Eis"</p>
			<p >Acryl auf Leinwand<br />60 x 50cm</p>
		</div>
	</body>
</html>

letterbox · 10. März 2018

Nun habe ich den code von LieberNetterFlo verwendet, aber der
Abstand ist immer noch der gleiche. btw. in meinem code sind zwar noch bei den Styleangaben h1, h2 und h3, werden aber im body nicht mehr verwendet.

gravitas · 10. März 2018

OK! Schon besser!

Aber - wer A sagt, muss auch B sagen! Ich sage nur gebratene Tauben! Wenn, dann aber richtig!

Und wie macht man das nun, wenn wir (denn, wie war das noch gleich mit den gebratenen Tauben?

) in der Vorlage verschiede Schriftgrößen definiert bekommen haben?

Eventuell kommt ja nun der Threadverfasser selbst drauf?

Ach ja; wir sind hier übrigens in der falschen Rubrik; zum Glück!

EDIT: Naja hier stand Mist ...

IRID1UM · 10. März 2018

Der Abstand ist immer noch vorhanden weil das <p>-Tag einen Paragraphen mit Abstand erzeugt. In meinem ersten Post habe ich es nicht direkt erwähnt, aber impliziert, dass das Problem gelöst ist, wenn der umschließende <div>-Tag alle <p>-Tags ersetzt. Innerhalb vom <div> sind also keine <p> notwendig, nur ein <br> für den Zeilenumbruch ohne Paragraphenabstand.
Wie die Schrift dann formatiert werden kann, damit sie wieder blau wird, ist grundlegendes HTML, bitte dazu diverse HTML-Tutorials (etwa von w3c schools) konsultieren.
MfG,
IRID1UM

retho · 10. März 2018

Wie wäre es mit

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Unbenanntes Dokument</title>
<style type="text/css">
.bilder {
  font-size: 1.2em;
  text-align: center;
}
.bild_unterschrift1 {
  color:#5858FA;   /* Farbe blau */
  font-size:28pt;  /* Größe 28pt   */
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}
.bild_unterschrift2 { 
  font-size: 20px; 
}
body {
  background-color: #67E1F4;
}
</style>
</head>
<body>
<div class="bilder">Bild 1:<br>
<img src="Malerei/Acrylmalerei/album/thumbs/Eis.jpg"  width="200" height="150" alt="">
<div class="bild_unterschrift1">"Eis"</div>
<div class="bild_unterschrift2">Acryl auf Leinwand<br>60 x 50cm</div>
</div>
</body>
</html>

letterbox · 10. März 2018

Vielen Dank an Euch alle; nun passt es, aber wie kann ich nun die Schrift formatieren?

Suche

Wie kann ich den Abstand verkleinern?

letterbox

Banned

IRID1UM

Commodore

letterbox

Banned

KnolleJupp

Fleet Admiral

gravitas

Lieutenant

LieberNetterFlo

Rear Admiral

gravitas

Lieutenant

LieberNetterFlo

Rear Admiral

letterbox

Banned

gravitas

Lieutenant

IRID1UM

Commodore

retho

Lt. Junior Grade

letterbox

Banned

Ähnliche Themen