Wie kann ich mit css die zwei div container untereinander mit Abstand dazwischen anzeigen lassen?

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style>
         .haupt {
         margint top: 50px;
         }
         .b1 {
         float: left;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
         .b2 {
         float: both;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
      </style>
   </head>
   <body>
      <div class="haupt">
         <div class="b1">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
         <div class="b2">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
      </div>
   </body>
</html>

3 Antworten

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS

21.05.2020, 16:15

Geh erst mal Dein CSS durch.

Falsch

.haupt {
  margint top: 50px;
  }

Richtig

.haupt {
  margin-top: 50px;
  }

Und dann hier

.b1 {
  float: left; /* kann raus, ist überflüssig */
  width: 400px;
  padding: 20px 0;
  color: #01DF01;
  border-bottom-width: 3px;
  border-style: solid;
  width: 50;   /* Einheit fehlt */
  height: 30;  /* Einheit fehlt */
  background-color: #fff;
}
.b2 {
  float: both; /* den Wert 'both' gibt's nicht für float */
  width: 400px;
  padding: 20px 0;
  color: #01DF01;
  border-bottom-width: 3px;
  border-style: solid;
  width: 50;  /* Einheit fehlt */
  height: 30; /* Einheit fehlt */
  background-color: #fff;
}

Wenn Du alle Fehler korrigiert hast, ergänzt Du

.b1 {
  margin-bottom:50px
}

Alex

RakonDark

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

21.05.2020, 11:02

nimm einfach die floats weg , die eh nichts bingen und dann mit magin-top: 20px; arbeiten .

https://jsfiddle.net/7hyr9wab/1/

mrSaturas

21.05.2020, 11:01

Kannst <br>s zwischen die container machen, oder auch ein <p></p>

oder Platz nach oben von 15 Pixeln oder so...

<div class="b2" margin-top: 15px;>

EinAlexander

21.05.2020, 16:18

Kannst <br>s zwischen die container machen,

Nein. Das Element <br> wird nicht verwendet, um Abstände einzurichten. HTML ist nur für die Semantik, das Aussehen wird mit CSS geregelt.

<p></p>

auch das ist falsch.

<div class="b2" margin-top: 15px;>

Die Idee dahinter ist gut, die Ausführung ist fehlerhaft. Richtig wäre natürlich

<div class="b2" style="margin-top: 15px">

Ähnliche Beiträge

Drupal Zeilenumbruch

Hallo Leute,

bin gerade dabei mit Drupal eine Homepage zu gestalten. Das Problem ist halt, dass wenn ich einen Text auf die Startseite schreibe dann hat er keinen Zeilenumbruch.

Beispiel:

Ist: "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."

Soll: "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."

Bin noch ein totaler Anfänger und habe schon gegooglet aber leider nichts gefunden.

Vielen Dank für eure Hilfe!

...zum Beitrag

Kann jemand diesen lateinischen Text (Lorem Ipsum ) übersetzen?

Hallo! hier der Text:

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.

Vielen Dank für jede sinnvolle Übersetzung schon mal im Vorhinein!

...zum Beitrag

Komischer Text?

Hallo, also mein Lehrer hat in meine Abgabe für mein Layout einen komischen Lateinischen Text geschrieben, er lautet "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." Ist das eine Bewertung? Warum auf Latein?? Google Übersetzer gibt nichts Sinnvolles. Ich hatte nie Latein.

...zum Beitrag

Ich will anfangen zu programmieren aber welche Sprache/Plattform?

Ich will wie schon gesagt mit dem programmieren anfangen um ein paar Spiele aus spaß zu machen UND um für die Zukunft vielleicht ein paar Systeme einstellen kann und ich so auch es im Beruflichen Leben nutzen kann. Jetzt kommt aber bei mir die Frage soll ich C# mit Unity lernen oder C++ mit Unreal Engine lernen? Was lohnt sich eher auch auf die Zukunft gesehen? :D Ich freue mich auf eure Antworten L.G. Lando ^^

...zum Beitrag

Englischer Lebenslauf - Wie Gymnasium schreiben?

Wie schreibe ich auf englisch, dass ich Gymnasium X besucht habe?:

EDUCATION

School Name, Location — Degree

MONTH 20XX - MONTH 20XX

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

...zum Beitrag

Latein?

"Pius Aeneas"

Iam nostis fabulam Didonis et Aeneae. Puta si regina Dido prima neas uxor fuerit. Creusa. potest scribere litteras exprimens iram et dolorem. quod eam reliquit Aeneas.

Negotium 1: Mark in variis coloribus adiectiva in textu ad Didonem pertinentia. Aeneam et Creusam narrant.

Negotium II: Underline ablativum comparationis (Ablativus comparationis).

Omnes Aeneam pium appellant, sed nemo improbior est quam ille pius Aeneas.

Nemo eximius. nemo crudelior est duce Troianorum.

Nam reliquit et te, honestissimam omnium uxorum;

et me potentissimam omnium reginarum';

quod imperio deorum parere debut, ut ipse condit.

Homines fatum et officium gravius amore esse dicunt,

quamquam nihil tristius est officio.

nihil dulcius amore.

Ille dux fortis, qui amorem officio praeponere² non audet;

miserrimum omnium se praebuit.

Talis est virtus virorum! Talis est animus viri, qui urbem potentissimam condet.

1 regina, reginae f.

Negotium 3: textum in linguam germanicam transferre.

...zum Beitrag

Js Funktion funktioniert nicht?

Ich bekomme immer diese Fehlermeldung: Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

at OnClick ((Index):16:25)

at HTMLButtonElement.onclick ((Index):33:33)

Code:

<!DOCTYPE html>

<head>

<title>Document</title>

const TextElement = document.getElementById("text");

function OnClick() {

TextElement.setAttribute('style', 'color: red;');

}

</script>

<style>

#text {

color: black;

}

</style>

</head>

<body>

<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, et placeat, asperiores reprehenderit praesentium esse possimus quia sed tempore, unde autem illo. Illum, voluptate laboriosam. Doloribus unde mollitia necessitatibus dicta?</div>

<button onclick="OnClick()">button</button>

</body>

</html>

Danke

...zum Beitrag

Latein Participium coniunctum...Hilfe?

Salvete;),

Leider bin ich ehrlich gesagt eine Niete in Latein und bräuchte mal eure Hilfe!
Ich hätte da mal eine Frage zum PC (Participium coniunctum).
Unzwar sind uns sechs Sätze (siehe unten) vorgegeben und die Aufgabenstellung lautet: Markiere zuerst das Partizip und sein Bezugswort. Übersetze dann den Satz: Beachte die Sinnrichtung des PCs.
Wähle einen passenden Satzbau (Beiordnung / Unterordnung / Substantivisierung).
1. Troia a Graecis obsessa tandem capta est.
Also ich bin mir nicht ganz sicher, aber obsessa ist doch das PPP von obsidere (belagern).
Aber den Rest verstehe ich nicht.
Ich wäre euch dankbar, wenn ihr vielleicht eine Frage oder einige Fragen beantworten könntet:
Woran erkennt man ein Partizip bzw. sein Bezugswort und die Sinnrichtung des PCs? Und was ist mit "Beiordnung, Unterordnung etc." gemeint?
-

2. In bello a Graecis gesto multi viri interfecti sunt.
3. Primo Aeneas e Troia a Graecis deleta fugere non cupivit.
4. At denique Aeneas a Venere dea persuasus decrevit familam suam servare.
5. Sed uxorum in flammis amissam relinquere debuit.
6. Maximo dolore commotus Aeneas tamen cum filio et patre navem petivit.

Ich wäre euch unendlich dankbar, wenn ihr mir beantworten könntet, was ein Partizip ist, voran man es erkennt bzw. sein Bezugswort, die Sinnrichtung und was mit Beiordnung, Unterordunung und Substantivisierung gemeint ist!

Vielen lieben Dank!

...zum Beitrag

Html semibold und bold schauen gleich aus?

Hallo, ich arbeite aktuell an einem NextJS Projekt mit TailwindCSS. Mein Problem ist, dass Font-Weight 600 und 700, 100 bis 500 und 800 und 900 gleich ausschauen. Das ist aber auch bei einem Normalen HTML Dokument so.

Das Problem besteht in allen Browsern.
Danke für die Antwort im Vorraus.

Code zum Nachmachen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Test</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Using a widely available font */
        }
        .thin {
            font-weight: 100;
        }
        .light {
            font-weight: 300;
        }
        .normal {
            font-weight: 400;
        }
        .medium {
            font-weight: 500;
        }
        .semibold {
            font-weight: 600;
        }
        .bold {
            font-weight: 700;
        }
        .extrabold {
            font-weight: 800;
        }
        .black {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <h1>Font Weight Test</h1>
    <p class="thin">This is thin text (100).</p>
    <p class="light">This is light text (300).</p>
    <p class="normal">This is normal text (400).</p>
    <p class="medium">This is medium text (500).</p>
    <p class="semibold">This is semibold text (600).</p>
    <p class="bold">This is bold text (700).</p>
    <p class="extrabold">This is extrabold text (800).</p>
    <p class="black">This is black text (900).</p>
</body>
</html>

...zum Beitrag

Stilmittel Latein?

Hallo,

im folgenden Abschnitt muss ich nach stilistischen Mitteln suchen. Ich habe leider bis jetzt nur eine Anapher gefunden. (Non illi.., non bonorum ..., non ...)
Ich wäre wirklich sehr dankbar über einige Antworten.

Non illi decumarum imperia, non bonorum direptiones, non iniqua iudicia, non importunas istius libidines, non vim, non contumelias quibus vexati oppressique erant conquerebantur; Cereris numen, sacrorum vetustatem, fani religionem istius sceleratissimi atque audacissimi supplicio expiari volebant; Omnia se cetera pati ac neglegere dicebant.Hic dolor erat tantus ut Verres alter Orcus venisse Hennam et non Proserpinam asportasse sed ipsam abripuisse Cererem videretur.
(Cicero in Verrem , Kapitel 20, 9-20)

...zum Beitrag

Latein GFS morgen?

Hallo muss morgen meine Latein gfs machen und einen text dazu übersetzen. Wäre dankbar wenn sich jemand dass mal anschauen könnte. Danke schonmal im vorraus. Es kommt auch dreimal ein Participium Conijunctum vor. ich habs aber nicht gefunden.

Lateinisch:

Von Troia nach Italien

Postquam Troia dolo Graecorum expugnata est, Aeneas cum comitibus per maria diu errabat et tandem navibus ad Iitus Africae venit. Aeneas autem a Didone regina vehementer amatus hinc abire noluit. Sed a Mercurio de voluntate deorum monitus occulte classem paravit. Magno dolore affectus reginam reliquit - non sua sponte, sed a deis coactus. Paulo post Aeneas incolumis in Italiam pervenit. Ibi Iulus, filius Aeneae, urbem condidit, ubi posteri eius civitatem diu clementer regebant.

Deutsch:

Von Troia nach Italien

Nachdem Troia durch eine List der Griechen erobert ist, irrt Äneas lange Zeit mit seinen Gefährten auf dem Meer herum und kommt schließlich mit dem Schiff an der Küste Afrikas an. Äneas aber verliebt sich heftig mit der Königin Dido und will deshalb von dort nicht mehr weggehen. Aber von Merkur wurde er an den Willen der Götter erinnert, heimlich die Flotte vorzubereiten. Das hinterließ bei der Königin großen Schmerz - nicht aus eigener Kraft, aber durch den zwang der Götter. Dort, gründete Iulius, Äneas Sohn, eine Stadt, wo die Nachkommen lange Zeit herrschten.

...zum Beitrag

Habe ich diesen Text grammatikalisch richtig?

Bellicus: „Oppido acerrime oppugnato paucis Gallis contigit, ut ad nos
fugerent. Qui nobis prodiderunt Gallos omni frumento consumpto
condiciones pessimas vitae suae diutius sustinere non posse. Homines
etiam minimam spem salutis deposuisse nuntiaverunt. Praeterea
rettulerunt Critognatum ducem, cui maxima auctoritas apud eos erat,
hanc fere orationem habuisse:
Nihil de eorum opinione dicturus sum, qui deditionem1 rem meliorem
esse putant quam pugnam. Qui turpissimam servitutem Romanorum
facilius et libentius sustinent quam libertatem. Eos maxime laudo, qui
parati sunt ad pugnandum, qui nostrum oppidum, nostram patriam,
nostram libertatem quam fortissime defendunt. Turpissime agunt ii, qui
inopiam et famem diutius sustinere nolunt. Facilius est ultro mortem
subire quam dolorem fortissime tolerare2. Ne perdideritis vestra
deditione omnem Galliam! Ne tradideritis omnem Galliam perpetuae
servituti! Galli servitutem vehementer oderunt.“
Pudens: „Scire velim, utrum Galli se defenderint an se dediderint. Quis
minorem auctoritatem habuit, quis maiorem?“
Bellicus: „Galli verbis Critognati permoti proelium acerrimum
inierunt, maiore virtute contenderunt quam antea. Sed nostri milites
vehementissime pugnantes copias hostium vel in oppidum reppulerunt
vel in fuga ceperunt vel interfecerunt. Ita ingens bellum confectum est.“
Tampius: „Vos res miras de Sicilia, de moribus Germanorum, de
superbia Gallorum narratis. Britanniam autem numquam cognovistis.
Equidem cum classe Romana in eam insulam transii.“

Übersetzung
ist in der Antwort

...zum Beitrag

Wie bekomme ich es hin, das die Kästen beim verkleinern des Fensters über die gesamte Länge geht?

Ich habe bisher das:

und verkleinert sieht es so aus:

Aussehen soll es aber so:

Hier mein Code:

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
      <style>
         header {
         text-align: center;
         font-size: 3em;
         padding: 5px;
         color: #fff;
         background-color: #FFBF00;
         }
         .wrapper { display:flex }
         @media screen and (max-width:620px) {
         .wrapper {display:block }
         }
         nav {
         width:15%;
         text-align: center;
         font-size: 2em;
         padding-right: 60px;
         color: #fff;
         background-color: #819FF7;
         margin-right: 10px;
         margin-bottom: 150px;
         }
         a {color: #fff }
         li {list-style: none }
         article {
         width:70%;
         color: #BDBDBD;
         }
         aside {
         color: #fff;
         width: 15%
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #01DFD7;
         margin-bottom: 150px;
         }
         footer {
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #D8D8D8;
         color: #A4A4A4;
         }
      </style>
   </head>
   <body>
      <header><h2>Header</h2></header>
      <div class="wrapper">
           <nav>
            <ul>
               <li><a href="" target="_blank">Link 1</a></li>
               <li><a href="" target="_blank">Link 2</a></li>
               <li><a href="" target="_blank">Link 3</a></li>
               <li><a href="" target="_blank">Link 4</a></li>
            </ul>
         </nav>
         <article>
            <h3>Lorem Ipsum</h3>
               <p>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.</p>
         </article>
         <aside>
            <h2>About</h2>
            <p>Lorem ipsum dolor<br>
               sit ametr,<br>
               consecteteuer<br>
               adipiscing elit.
            </p>
         </aside>
      </div>
      <footer>
         <p>&copy; </p>
      </footer>
   </body>
</html>

...zum Beitrag