Erstellen einer Startseite

[PierreVerley]

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

 

[basti1012]

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.

*{
padding-left: 30px;
}

3. Hier sollten wohl die Kommers weg

.titel, h2{}
.inhalt, p{}

zumindest ergibt es für mich mehr Sinn
4. so ist das falsch

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 **

 

[PierreVerley]

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.

*{
padding-left: 30px;
}

3. Hier sollten wohl die Kommers weg

.titel, h2{}
.inhalt, p{}

zumindest ergibt es für mich mehr Sinn
4. so ist das falsch

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.

https://codepen.io/basti1012/pen/oNZjQGd

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,

 

[basti1012]

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.