Border richtig einstellen

Diskutiere Border richtig einstellen im CSS Forum im Bereich Programmierung; Hey! Es sollen Onepager zu den Bundesländern erstellt werden. So soll er aussehen: So sieht meiner aus: Wie bekomme ich es richtig hin...
Neues Thema erstellen Antworten
G

GeradeDabei

New member
Beiträge
3
Punkte Reaktionen
0
Hey!
Es sollen Onepager zu den Bundesländern erstellt werden.

So soll er aussehen:
1655733006443.png

So sieht meiner aus:
1655733034277.png

Wie bekomme ich es richtig hin?

Edit:
So habe ich die Selektoren gemacht:
img {
width: 280px;
padding: 5px;
}

p,h1 {
width: 280px;
padding: 5px;
}


.oben {
border-top: 10px solid;

border-left: 10px solid;
border-right: 10px solid;

border-bottom: none;
}

.mitte {
border-top: none;

border-left: 10px solid red;
border-right: 10px solid red;

border-bottom: none;
}


.unten {
border-top: none;

border-left: 10px solid orange;
border-right: 10px solid orange;

border-bottom: 10px solid orange;
}
 
Zuletzt bearbeitet:
S

Sempervivum

Well-known member
Beiträge
215
Punkte Reaktionen
35
Poste am besten auch das HTML, damit man nicht Rätsel raten muss.
 
G

GeradeDabei

New member
Beiträge
3
Punkte Reaktionen
0
Hier die HTML-Datei:
<!DOCTYPE HTML> <!-- Legt die HTML5 Spezifikation fest -->
<html lang="de">

<head>
<title> Übung16 </title>

<style type="text/css">
img {
width: 280px;
padding: 5px;
}

p,h1 {
width: 280px;
padding: 5px;
}


.oben {
border-top: 10px solid;

border-left: 10px solid;
border-right: 10px solid;

border-bottom: none;
}

.mitte {
border-top: none;

border-left: 10px solid red;
border-right: 10px solid red;

border-bottom: none;
}


.unten {
border-top: none;

border-left: 10px solid orange;
border-right: 10px solid orange;

border-bottom: 10px solid orange;
}


</style>

</head>


<body>

<img class="oben" src="oben.jpg">
<h1 class="mitte">Niedersachsen</h1>
<p class="mitte">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img class="unten" src="unten.jpg">



</body>

</html>
 
S

Sempervivum

Well-known member
Beiträge
215
Punkte Reaktionen
35
Danke, dann ist alles klar:

h1 und p haben per Default ein Margin bzw. einen Außenabstand, durch den entstehen die Lücken. Wenn Du das Margin auf 0 setzt, verschwinden sie weit gehend:
Code: 
h1, p {
    margin: 0;
}
Dann bleibt jedoch noch eine kleine Lücke unter dem Bild. Die kommt dadurch zu Stande, dass der Default-Wert für die vertikale Ausrichtung eines Bildes baseline ist und kann beseitigt werden indem man sie z. B. auf top setzt:
Code: 
img {
    vertical-align: top;
}
 
G

GeradeDabei

New member
Beiträge
3
Punkte Reaktionen
0
Danke!
Hat wunderbar geklappt.

Kann geschlossen werden.
 
Thema:

Border richtig einstellen

Oben Unten