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

Frage Abstände in CSS

F

FrankaE

Neues Mitglied
Hallo!
Ich muss für die Uni eine Website erstellen und bis jetzt funktioniert alles super! Leider hake ich gerade daran den Abstand zwischen gewissen Texten einzustellen....
Ich hätte gerne einen Abstand zwischen den beiden Sätzen. Momentan ist da nämlich kein erkennenswerter Absatz. Aber es handelt sich um verschiedene Teile der Seite, deswegen wäre es gut, wenn man das auch optisch erkennbar ist. Hab's schon mit Margin probiert, aber entweder hat es nicht funktioniert, oder ich habe nicht den richtigen genommen.... Ich hoffe ihr könnt mir helfen!
Hier der kopierte Code (es wäre zu lange, alles zu kopieren und vor allem brauche ich nur diese eine Stelle):

<br/>Hier findest du Antworten auf all deine Fragen !
</p>
</div>

<footer>
<p>Entdecke die Geschichte hier!</p>

P.s natürlich beginnt die <div> weiter oben und der <footer> endet auch weiter unten.
 
Das sind eindeutig zu wenig Informationen. Die paar Zeilen HTML-Code sind nicht wirklich hilfreich und deinen CSS-Code verschweigst du komplett.
 
Ich hoffe es ist übersichtlich genug...
Hier der HTML:

<body>
<h1>Les traditions de noël germaniques</h1>
<div class="contenu">
<img src="Images/MarchéP.jpg" alt="Acceuil"/>

<p>La neige crisse légèrement sous vos chaussures, l'odeur d'amandes confites et des saucisses grillées est dans l'air, l'arôme du vin chaud monte dans vos poumons et donne à votre corps une chaleur réconfortante.
<br/>De petits stands de souffleurs de verre, de fabricants de bougies et de sculpteurs sur bois sont alignés les uns à côté des autres.
<br/>Au bout se trouve une petite cabane discrète qui vend des couronnes de l'Avent.
<br/>Vous êtes-vous déjà demandé en quoi consistent les couronnes de l'Avent ? D'où viennent-elles et que signifient-elles ?
<br/>Vous trouverez une réponse à cette question et bien d'autres encore sur cette page !
</p>
</div>

<footer>
<p id="menutexte">Découvrez les traditions de noël germaniques ici !</p>
<div class="menu1">
<a href="Pages/Couronne.html" ><img src="Images/CouronnePP.jpg"/></a>
<p>Combien des fois il va falloir dormir avant d'ouvrir les cadeaux ? C'est combien de jour 24 ? C'est long ? Ou court? Jusqu'à la semaine prochaine on aura dormi 24 fois déjà ?
<br/>Ah mais tiens, il paraït qu'une couronne de noël a été spécialement conçue pour nous aider nous, les enfants, à nous repérer dans le temps !</p>
</div>

<div class="menu2">
<a href="Pages/Calendrier.html" ><img src="Images/VCalendrierP.jpg"/></a>
<p>La période de l’Avent et celle qui précède l'avènement, et donc noël. Quelle excitation!
<br/>Mais qu’est-ce que c’est l’avènement au fait ? Comment on va faire pour patienter si longtemps?!</p>
</div>

<div class="menu3">
<a href="Pages/Nicolas.html" ><img src="Images/NicolasPP.jpg"/></a>
<p>Il parait que le 6 au matin, les enfants allemands reçoivent des gourmandises, elles seraient directement déposées dans leurs bottes !
<br/>Mais pourquoi ? Elles viennent d’où ? Qui les leur à offert ?</p>
</div>
</footer>

</body>


Und CSS:

body{ background-color: #08298A;
}
h1,h2{ text-align: center;
margin: auto;
width: 75%;
color: #FFBF00;
}

.contenu{ text-align: center;
margin: auto;
width: 75%;
color: #FFFFFF;
}

#menutexte{ color: #F7BE81;
}
.menu1{ display: flex;
color: #F7BE81;
text-align: center, block;
}

.menu1 > img {
width: 100%;
height: auto;
max-height: 250px;
}

.menu2{ display: flex;
color: #F7BE81;
text-align: center, block;
}

.menu2 > img {
width: 100%;
height: auto;
max-height: 250px;
}

.menu3{ display: flex;
color: #F7BE81;
text-align: center, block;
}

.menu3 > img {
width: 100%;
height: auto;
max-height: 250px;
}
 
Sempervivum schrieb:
Wenn Du mit Absätzen bzw. p-Tags arbeitest bekommst Du die Abstände von allein:
Code: 
<p>La neige crisse légèrement sous vos chaussures, l'odeur d'amandes confites et des saucisses grillées est dans l'air, l'arôme du vin chaud monte dans vos poumons et donne à votre corps une chaleur réconfortante.
</p>
<p>De petits stands de souffleurs de verre, de fabricants de bougies et de sculpteurs sur bois sont alignés les uns à côté des autres.
</p>
<p>Au bout se trouve une petite cabane discrète qui vend des couronnes de l'Avent.
</p>
<p>Vous êtes-vous déjà demandé en quoi consistent les couronnes de l'Avent ? D'où viennent-elles et que signifient-elles ?
</p>
<p>Vous trouverez une réponse à cette question et bien d'autres encore sur cette page !
</p>

BTW: Code besser in Codetags posten, das Menüsymbol oben rechts und dann </>

BTW2: Die Vermutung liegt nahe, dass sich die Sätze auf das Bild beziehen. In dem Fall würde es sich anbieten, ein figure-Tag mit figcaption zu verwenden.
Zum Vergrößern anklicken....
Schonmal danke! Aber riskiere ich nicht dann auch, dass alle p-Tags die gleiche Farbe haben? (Ab "Découvrez...." soll es eine andere Farbe werden)
Und mir geht es vor allem um den Abstand zwischen <div class="contenu"> und <footer>
Ideen ? :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben