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

Erstellen einer Startseite

Falls du damit Probleme hast, poste uns bitte ein link zu Seite.
Oder du erstellst bei codepen.io ein Beispiel (Am besten mit den original Bildern oder Dummy Bildern).
Oder du postest den vollständigen HTML, CSS (ggf. Javascript, wenn es nötig ist) code.
So können wir gleich sehen was Sache ist
So dasselbe noch einmal, bei dem es sich jetzt wirklich um Infoboxen handelt nur dieses Mal mit Text

Folgenden Code habe ich dazu

HTML

<div class="infobox">
<div class="titel">
<h2>News aus der Stadt</h2>
</div>
<div class="inhalt">
<p>Und hier kommt nun viel Inhalt, damit wir auch früher oder
später mehr Inhalt haben, wie Platz auf dem Bildschirm vorhanden
ist. Notfalls einfach nochmals den Text wiederholen und die Box
sehr schmal machen.</p>
<p>Und hier kommt nun viel Inhalt, damit wir auch früher oder
später mehr Inhalt haben, wie Platz auf dem Bildschirm vorhanden
ist. Notfalls einfach nochmals den Text wiederholen und die Box
sehr schmal machen.</p>
</div>

<div class="infobox">
<div class="titel">
<h2>........................</h2>
</div>
<div class="inhalt">
<p>Und hier kommt nun viel Inhalt, damit wir auch früher oder
später mehr Inhalt haben, wie Platz auf dem Bildschirm vorhanden
ist. Notfalls einfach nochmals den Text wiederholen und die Box
sehr schmal machen.</p>
<p>Und hier kommt nun viel Inhalt, damit wir auch früher oder
später mehr Inhalt haben, wie Platz auf dem Bildschirm vorhanden
ist. Notfalls einfach nochmals den Text wiederholen und die Box
sehr schmal machen.</p>
</div>
</div>

CSS

*{
box-sizing: border-box;
margin:0;
padding:0;
padding-left: 30px;


}
.infobox {
height: 100%;
width: 150px;
}

h2 {
color: yellow;
}

.titel, h2{
width:690px;
height: 40px;
line-height: 40px;
background-color: orange;
padding-left: 1em;
margin-top: 30px;
border-radius:10px;

}
.inhalt, p{
height: calc(150 px);
min-width: 700px;
min-height: 100px;
overflow: none;
background-color: yellow;
line-height: 1.6em;
padding: 1em;
border-radius:10px;
}

Wie bei den Bildern möchte ich dies jetzt hier haben, wobei es jetzt nur um die Anordnung geht
 

Anhänge

  • 2021-05-11.png
    2021-05-11.png
    133,9 KB · Aufrufe: 5
Werbung:
Wäre schön wenn du da noch was zugeschrieben hättest, was du erreichen willst.
1. Bei der ersten Box fehlt ein schließendes </div>
2. Das ist für mich Blödsinn.
Code:
*{
padding-left: 30px;
}
3. Hier sollten wohl die Kommers weg
Code:
.titel, h2{}
.inhalt, p{}
zumindest ergibt es für mich mehr Sinn
4. so ist das falsch
Code:
height: calc(150 px);
Da fehlt eine zweite einheit
wenn dann so
height:calc(150px - 20%);
5. overflow:none gibt, es glaube ich nicht.
Wenn dann visible | hidden | scroll | auto | inherit
6. Die Fehler beseitigen und mit etwas Flex, würde ich es auf der schnelle so machen.
**Link entfernt, weil Seite nicht mehr erreichbar **
 
Zuletzt bearbeitet:
Wäre schön wenn du da noch was zugeschrieben hättest, was du erreichen willst.
1. Bei der ersten Box fehlt ein schließendes </div>
2. Das ist für mich Blödsinn.
Code:
*{
padding-left: 30px;
}
3. Hier sollten wohl die Kommers weg
Code:
.titel, h2{}
.inhalt, p{}
zumindest ergibt es für mich mehr Sinn
4. so ist das falsch
Code:
height: calc(150 px);
Da fehlt eine zweite einheit
wenn dann so
height:calc(150px - 20%);
5. overflow:none gibt, es glaube ich nicht.
Wenn dann visible | hidden | scroll | auto | inherit
6. Die Fehler beseitigen und mit etwas Flex, würde ich es auf der schnelle so machen.
Ich möchte an dieser Stelle erst einmal Danke für die bisherige Hilfestellung sagen, da ich das nicht als selbstverständlich ansehe bzw. betrachte.

Herzlichen Danke für den Hinweis, ich wollte die zwei Infoboxen nebeneinander anordnen,
 
Werbung:
Herzlichen Danke für den Hinweis, ich wollte die zwei Infoboxen nebeneinander anordnen,
Dann musst du flex-direction:row; auf den Body anwenden (bei meinem Beispiel), oder die Zeile komplett weglassen.
Du könntest dann noch flex-wrap:wrap einbauen, dann wird bei kleineren Bildschirmen die Boxen untereinander gelegt, wenn die Fensterbreite, die Boxbreite erreicht .

Man kann da aber auch @media queries benutzen.
Da kannst du feste Werte angeben, ab wann die Boxen über, oder nebeneinander gesetzt werden.
Das solltest du in dein Fall schon machen weil bei kleineren Bildschirmen nebeneinander kein Platz ist und seitlich Scrollen will keiner.
 
Zurück
Oben