Erstellen einer Startseite

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

PierreVerley

Neues Mitglied
29 April 2021
11
0
1
34
Ich habe es hinbekommen!
Es wäre schön wenn du uns den Fehler gleich mit Code gezeigt hättest.
Wenn ich jetzt davon ausgehe, dass du meinen Code einfach kopiert hast, ohne dir den genaue anzuschauen, kann das natürlich so aussehen wie auf dein Bild.
Ich hatte da auch keine Bilder reinkopiert, weil ich damit gerechnet habe das man das IMG , selber stylen kann.

Mit Bilder sieht es jetzt anders aus.

Wie sieht den jetzt deine Variante aus, die du anscheinend, erfolgreich absolviert hast ??
Nein natürlich nicht! Das ist auch nicht der Sinn und Zweck des Lernens von HTML und CSS, ich habe diesen so weit es mir möglich war, bei der einen oder anderen Stelle abgewandelt.

Aber es gibt immer noch gewisse Punkte, die noch angepasst werden müssen, wie z.B. die Optimierung der Seite auf verschiedene Browser oder wenn man sich die Seite als Druckansicht aufruft.
 

basti1012

Senior HTML'ler
26 November 2017
1.593
173
63
Minden
basti1012.de
Aber es gibt immer noch gewisse Punkte, die noch angepasst werden müssen, wie z.B. die Optimierung der Seite auf verschiedene Browser oder wenn man sich die Seite als Druckansicht aufruft.
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
 

PierreVerley

Neues Mitglied
29 April 2021
11
0
1
34
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

basti1012

Senior HTML'ler
26 November 2017
1.593
173
63
Minden
basti1012.de
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.
 
Zuletzt bearbeitet:

PierreVerley

Neues Mitglied
29 April 2021
11
0
1
34
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,
 

basti1012

Senior HTML'ler
26 November 2017
1.593
173
63
Minden
basti1012.de
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.
 
Werbung:

Neueste Beiträge