Erstellen einer Startseite

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

basti1012

Senior HTML'ler
26 November 2017
1.570
172
63
Minden
basti1012.de
Fang gleich mit Flexbox oder Grid an , das ist einfacher , responsiver und leicht anzupassen.
Damit ersparst du dir auch unnötige Feste Größen und Positionsangaben die dir das Designen schwer machen werden.
 
Werbung:

PierreVerley

Neues Mitglied
29 April 2021
9
0
1
33
Wie sieht dein Code den dazu aus?
Optisch kommt es deiner Zeichnung doch schon sehr nah.
HTML-Code

<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="HTML und CSS sind die Basis aller Webseiten">
<title>Pierre Verley | Startseite</title>
<link rel="stylesheet" href="startseite.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Neuigkeiten</a></li>
<li><a href="home.html" class="aktuell">Home</a></li>
<li><a href="#.html">Haftungsausschluss</a></li>
<li><a href="#.html">Weiterer Link</a></li>
</ul>
</nav>
</header>
<main>
<center><div id="info_box1">
<img src="ilmenauer_sh.jpg" alt="Ilmenauer Schwimmhalle" width="349" height="150">

</div>

<div id="info_box2">
<img src="goethe.jpg" alt="Goethe auf der Bank" width="349" height="150">
</div>

<div id="info_box3">
<img src="layout_startseite.jpg" alt="Altes Layout" width="349" height="150">
</div>

<div id="info_box4">
<img src="pierre.jpg" alt="Pierre Verley" width="349" height="150">
</div>
<div id="info_box5">
<img src="layout_startseite.jpg" width="349" height="150">

</div>

<div id="info_box6">
<img src="layout_home.jpg" width="349" height="150">
</div>

<div id="info_box7">
<img src="ilmenauer_sh.jpg" width="349" height="150">
</div>

<div id="info_box8">
<img src="goethe.jpg" width="349" height="150">
</div>
</center>
</main>
<footer>
<center><p>© 2021 | <a href="https://pierre-verley.lima-city.de/startseite.htm" target="_blank" class="aktuell">Pierre Verley</a></p>
<p align="center"><font color="#0000ff"><marquee bgcolor="ffff00"> <b>Eilmeldung:</b>keine<b>News:</b>keine<b>News:</b> keine <b>News:</b> keine </marquee><font></p></center>

</footer>
</body>
</html>

CSS-Code
body {font-size: 120%; font-family: "Helvetica", Arial, sans-serif; line-height: 1.4; color: #263238; background-color: #ffff00; margin: 0;}
h3 { font-size: 3rem; font-weight: normal; text-align: center; padding: 2rem; margin: 0;}
nav {background-color: #ff9900;}
nav ul {margin: 0; display: flex; list-style: none;}
#info_box1{
float:left;
background: #ff9900;
width: 350px;
height: 150px;
margin-top:5px;
padding: 5px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}
#info_box2{
float: left;
background: #ff9900;
width: 350px;
height: 150px;
margin-top:5px;
padding: 5px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}

#info_box3{
float: left;
background: #ff9900;
width: 350px;
height: 150px;
margin-top:5px;
padding: 5px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}

#info_box4{
float: left;
background: #ff9900;
width: 350px;
height: 150px;
margin-top:5px;
padding: 5px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}
#info_box5{
float:left;
background: #ff9900;
width: 350px;
height: 150px;
margin-top:5px;
padding: 5px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}
#info_box6{
float: left;
background: #ff9900;
width: 350px;
height: 150px;
margin-top:5px;
padding: 5px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}

#info_box7{
float: left;
background: #ff9900;
width: 350px;
height: 150px;
margin-top:5px;
padding: 5px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}

#info_box8{
float: left;
background: #ff9900;
width: 350px;
height: 150px;
margin-top:5px;
padding: 5px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}
nav a {color: white; text-decoration: none; display: block; padding: 0.8rem;}
nav a.aktuell {font-weight: bold;}
main, .img{max-width: 62rem; margin: auto; display: flex;}
article {width: 50%; margin: 0 2rem;}
footer {background-color: #ff9900; color: ffffff; padding: 5rem; height: 100px; margin-top: 0px;}
footer a.aktuell{background-color: #ff9900; color: ffffff; padding: 5px; margin-top: 100px;}
#infobox img {max-width: 100%; float: position; height: auto;}
©media screen and (max-width: 530px;) {
main {disply: block;}
article {width: auto;}

Aber ich habe jetzt noch ein anderes Problem, ich würde gerne die eingefügten Bilder zentrieren
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Aber ich habe jetzt noch ein anderes Problem, ich würde gerne die eingefügten Bilder zentrieren
Wie man Elemente, z. B. Bilder, zentriert, habe ich gerade hier beschrieben:
 

basti1012

Senior HTML'ler
26 November 2017
1.570
172
63
Minden
basti1012.de
Inline-style wie
Code:
<font color="#0000ff">
macht man so auch nicht mehr , das macht man über Css.

Dann fehlt noch dein doctype.
Die festen größen der Bilder
Code:
<img src="goethe.jpg" width="349" height="150">
könnten beim responsiven design stören, kommt auch drauf an was die Bilder zeigen usw.
Besser wäre es wenn du die größen auch in der Css schreibst.

Dieses gedönsrat
Code:
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
kann man eigentlich auch weglassen.
Ich habe schon oft genug gelesen das man das bei den heutigen Browsern nicht mehr brauch.
Bitte verbessert mich wenn ich falsch liege
 
Werbung:

PierreVerley

Neues Mitglied
29 April 2021
9
0
1
33
Wie man auf dem Bild nun erkennen kann, habe ich es geschafft den Abstand zwischen den umrandeten Bildern hinzubekommen, bleibt jetzt nur noch die Anordnung der Bilder, bei der ich fast am verzweifeln bin.

Es sollen oben und unten jeweils 3 sein, wo ich mir die Frage stelle wie mache ich das jetzt ?

2021-05-08.png
 
Zuletzt bearbeitet:

m.scatello

Senior HTML'ler
15 Februar 2017
1.533
183
63
Wie sieht dein aktueller HTML-Code aus? Ohne den zu kennen, kann man nur raten. Besser wäre ein Link zur Seite.
 

PierreVerley

Neues Mitglied
29 April 2021
9
0
1
33
Wie sieht dein aktueller HTML-Code aus? Ohne den zu kennen, kann man nur raten. Besser wäre ein Link zur Seite.
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Herzlich Wikommen</title>
<meta name="description" content="Pierre Verley - Meine persönliche Homepage">
<link href="start_inhalt.css" rel="stylesheet">
</head>
<body>
<u><i><h1>Herzlich Willkommen!</h1></i></u>
<div id="info_box1">
<img src="ilmenauer_sh.jpg" alt="Ilmenauer Schwimmhalle" width="349" height="150">

</div>

<div id="info_box2">
<img src="goethe.jpg" alt="Goethe auf der Bank" width="349" height="150">
</div>

<div id="info_box3">
<img src="layout_startseite.jpg" alt="Altes Layout" width="349" height="150">
</div>

<div id="info_box4">
<img src="pierre.jpg" alt="Pierre Verley" width="349" height="150">
</div>

<div id="info_box5">
<img src="layout_startseite.jpg" alt="Altes Layout" width="349" height="150">
</div>

<div id="info_box6">
<img src="layout_home.jpg" alt="Altes Layout" width="349" height="150">
</div>




</body>
</html>

CSS

h1{text-align: center; color: #ff9900; font-family: Georgia;}

u {color: #6699FF;}

#info_box1{
float:left;
background: #ff9900;
width: 350px;
height: 150px;
margin-top:85px;
padding: 5px;
margin-left: 20px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}
#info_box2{
float: left;
background: #ff9900;
width: 350px;
height: 150px;
margin-top:85px;
padding: 5px;
margin-left: 20px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}

#info_box3{
float: left;
background: #6699FF;
width: 350px;
height: 150px;
margin-top:85px;
padding: 5px;
margin-left: 20px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}

#info_box4{
float: left;
background: #ff9900;
width: 350px;
height: 150px;
margin-top:85px;
padding: 5px;
margin-left: 20px;
float: clear;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}

#info_box5{
float:left;
background: #6699FF;
width: 350px;
height: 150px;
margin-top:85px;
padding: 5px;
margin-left: 20px;
float: clear;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}
#info_box6{
float: left;
background: #6699FF;
width: 350px;
height: 150px;
margin-top:30px;
padding: 5px;
margin-left: 20px;
float: clear;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}

div, img, {padding-right: 70px; padding-left: 0px; float: clear;}
 
Werbung:

basti1012

Senior HTML'ler
26 November 2017
1.570
172
63
Minden
basti1012.de
Warum nutzt du keine Klassen?
Das ganze ID Gedöns brauchst du nicht.
Auch schade, dass du die anderen Tipps irgendwie nicht benutzt.
Weil dann ist das ganz einfach

dein <ul> kannst du auch weglassen und dafür text-decoration:undeline benutzen.
Das Gleiche geht mit den <i> auch, nur weiß ich gerade die CSS Anweisung dafür nicht aus den Kopf
 

PierreVerley

Neues Mitglied
29 April 2021
9
0
1
33
Warum nutzt du keine Klassen?
Das ganze ID Gedöns brauchst du nicht.
Auch schade, dass du die anderen Tipps irgendwie nicht benutzt.
Weil dann ist das ganz einfach

dein <ul> kannst du auch weglassen und dafür text-decoration:undeline benutzen.
Das Gleiche geht mit den <i> auch, nur weiß ich gerade die CSS Anweisung dafür nicht aus den Kopf
es ist noch nicht sowie ich es mir vorstelle,
 
Werbung:

m.scatello

Senior HTML'ler
15 Februar 2017
1.533
183
63

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Vermutlich ist der Grund, dass der Defaultwert für height "auto" ist, d. h. die natürliche Höhe des Bildes. Versuche, bei dem CSS der Bilder min-height: 1px; hinzu zu fügen.
Wenn das nicht hilft, poste das HTML und CSS.
 
Werbung:

PierreVerley

Neues Mitglied
29 April 2021
9
0
1
33
Wenn es anders wäre, würde du ja hier nicht fragen.

Eine angehängte Grafik. :D :D :D

Solange du nicht auf Flexbox oder Grid umstellst, macht es keinen Sinn, sich mit diesem Thema hier weiter zu beschäftigen. Und wenn du das erledigt hast und es dann immer noch nicht passt, poste einen Link zur Seite, damit man sich das ansehen kann.
Ich habe es hinbekommen!
 

basti1012

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