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

hr rutscht aus p

Hannes Tunk

Neues Mitglied
Hallo liebe Community,
ich habe folgendes Problem:


Html-Code:

<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Lebenslauf</title>
<link rel="stylesheet" href="TEST.css">
</head>
<body>

<h1>Lebenslauf</h1>
<div class="flexbox-container">

<div class="flexbox-item">
<h2 class="L">Persönliche Daten:</h2>
</div>

<div class="break"></div>

<div class="flexbox-item">

<p class="L">Vorname/Nachname<br>
Adresse<br>
Tel.<br>
E-Mail<br>
<br>
Staatsangehörigkeit<br>
Geburtsdatum<br>
Geschlecht<br>
<hr>
</p>
</div>

<div class="flexbox-item ">
<p class="R">
<strong>1</strong><br>
1<br>
1<br>
[email protected]<br>
<br>
Deutsch<br>
1<br>
Männlich<br>
<hr>
</p>
</div>

<div class="flexbox-item">
<h2 class="L">Schulische Laufbahn</h2>
</div>

<div class="break"></div>

<div class="flexbox-item" >
<p class="L">Grundschule 1<br>
Mittelschule 1<br>
FOS 1<br>
Aktuell<br>
<hr>
</p>
</div>

<div class="flexbox-item">
<p class="R">
2009-2013<br>
2013-2019 Mittlere-Reife Abschluss<br>
2019-2020<br>
1<br>
<hr>
</p>
</div>

<div class="flexbox-item">
<h2 class="L">Praktika</h2>
</div>

<div class="break"></div>

<div class="flexbox-item ">
<p class="L">


EDV-Service<br>
Datum<br>
<br>
Polizei<br>
Datum<br>
<br>
Liebherr<br>
Datum<br>
<hr>
</p>
</div>

<div class="flexbox-item">
<p class="R">
Vom 08.05.2017<br>
Bis 12.05.2017<br>
<br>
Vom 20.02.2017<br>
Bis 24.02.2017<br>
<br>
Vom 23.10.2017<br>
Bis 27.10.2017<br>
<hr>
</p>
</div>

</body>
</html>



CSS-Code:
* {
text-align: center;
}
h1 {
font-size: 500%;
}
.flexbox-container{
display: flex;
flex-wrap: wrap;
}
.flexbox-item {
width: 50%;
height: 100%;
}
.break {
height: 0;
width: 100%;
}
.L{
text-align: right;
margin-right: 15px;
}
.R {
text-align: left;
margin-left: 15px;
}







... und zwar rutscht mir die <hr> immer in die DIV, ich möchte, dass die <hr> nicht den Platz in der Mitte einnimmt.
Die 30px durch den Margin.

Ideen?
Mfg Hannes
 

ThomasF

Neues Mitglied
Hallo Hannes
Der div.flexbox-container ist nicht geschlossen.
Du könntest dem hr einen seitlichen abstand geben so wie Du es den classen .L und .R auch gegeben hast
CSS:
hr { margin: auto 15px; }
 

Sempervivum

Senior HTML'ler
... und zwar rutscht mir die <hr> immer in die DIV, ich möchte, dass die <hr> nicht den Platz in der Mitte einnimmt.
Die 30px durch den Margin.
Da habe ich einen Moment gerätselt was Du damit meinst. Ich verstehe es so, dass die Linien links und rechts bis ganz an den Rand gehen sollen, ohne Abstand?
 
Zuletzt bearbeitet:

Hannes Tunk

Neues Mitglied
Hey Leute,
danke für die Infos, habe es jetzt mit ner Klasse und nem Margin gemacht.

Gruß und schönen Sonntag
 

basti1012

Senior HTML'ler
Das ganze HTML hätte ich schon ganz anders gemacht.
Damit die rechten und linken Angaben überein stimmen( gleiche höhe ), nutzt du <br>, das finde ich fehl an Platz.
Du nutzt doch schon Flexbox , dann mach es doch anders.
<hr> in einen <p> zu nutzen finde ich hier auch unnötig.
Wenn du flexbox hier anders nutzen würdest, könntest du auch einen Border nutzen.
Dann nutzt du leere
<div class="break"></div>
Container , die man eigentlich auch nicht brauch.

Das ist meine Meinung zu deinem Code
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
Ich hätte das auch anders aufgezogen und zwar mit Gridlayout. Dann braucht man nur die Elemente aneinander zu reihen und CSS erledigt die Anordnung. Zusätzliche Container werden weitgehend überflüssig.
 
Werbung:
Oben