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

Erstellen einer Startseite

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.
 
basti1012 schrieb:
Wie sieht dein Code den dazu aus?
Optisch kommt es deiner Zeichnung doch schon sehr nah.
Zum Vergrößern anklicken....
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
 
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
 
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:
Wie sieht dein aktueller HTML-Code aus? Ohne den zu kennen, kann man nur raten. Besser wäre ein Link zur Seite.
 
m.scatello schrieb:
Wie sieht dein aktueller HTML-Code aus? Ohne den zu kennen, kann man nur raten. Besser wäre ein Link zur Seite.
Zum Vergrößern anklicken....
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;}
 
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
**Link entfernt, weil Seite nicht mehr erreichbar **

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
 
Zuletzt bearbeitet:
basti1012 schrieb:
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
Zum Vergrößern anklicken....
es ist noch nicht sowie ich es mir vorstelle,
 
m.scatello schrieb:
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.
Zum Vergrößern anklicken....
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 ??
 
PierreVerley schrieb:
Ich habe es hinbekommen!
Zum Vergrößern anklicken....
basti1012 schrieb:
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 ??
Zum Vergrößern anklicken....
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.
 
PierreVerley schrieb:
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.
Zum Vergrößern anklicken....
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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben