Hallo zusammen,
ich erstelle derzeit für meine Sportmannschaft eine Website. Die Programmierung ist soweit fertig, das Erstellen des Designs inkl. slicen ist auch erledigt. Probleme sind jetzt leider beim zusammenfügen des Designs via CSS aufgetreten.
Zunächst einmal der Design-Entwurf:
Problem 1:
Ich möchte, dass sich die goldene Leiste mit dem Logo bei kleineren Bildschirmen bzw. einem resize des Browserfenster dem Platz anpassen ... derzeit sticht die komplett außen raus ... einzige Abhilfe waren bislang fixe Werte, dich ich aber gerne vermeiden würde.
So sieht es derzeit aus:
Problem 2:
Ich möchte die grauen Boxen gerne wie auf dem Entwurf hinter die goldene Leiste schieben ... das bekomme ich aber nicht hin, ohne das gesamte Design zu zerschießen.
Weitere Informationen:
Zerlegt habe ich das Design wie folgt:
- eine 1px breite Hintergrundgrafik (für den Hintergrundverlauf)
- einmal den gesamten goldenen Balken inkl. Text und Logo sowie die dazugehörigen Schatten
- eine 1px breite Grafik "Box" für den Verlauf in der Box
die Schatten der Boxen möchte ich später via CSS hinzufügen
(Ich hoffe, dass es halbwegs sinnvoll zerlegt ist)
Mein Code:
Viele Grüße
René
ich erstelle derzeit für meine Sportmannschaft eine Website. Die Programmierung ist soweit fertig, das Erstellen des Designs inkl. slicen ist auch erledigt. Probleme sind jetzt leider beim zusammenfügen des Designs via CSS aufgetreten.
Zunächst einmal der Design-Entwurf:
Problem 1:
Ich möchte, dass sich die goldene Leiste mit dem Logo bei kleineren Bildschirmen bzw. einem resize des Browserfenster dem Platz anpassen ... derzeit sticht die komplett außen raus ... einzige Abhilfe waren bislang fixe Werte, dich ich aber gerne vermeiden würde.
So sieht es derzeit aus:
Problem 2:
Ich möchte die grauen Boxen gerne wie auf dem Entwurf hinter die goldene Leiste schieben ... das bekomme ich aber nicht hin, ohne das gesamte Design zu zerschießen.
Weitere Informationen:
Zerlegt habe ich das Design wie folgt:
- eine 1px breite Hintergrundgrafik (für den Hintergrundverlauf)
- einmal den gesamten goldenen Balken inkl. Text und Logo sowie die dazugehörigen Schatten
- eine 1px breite Grafik "Box" für den Verlauf in der Box
die Schatten der Boxen möchte ich später via CSS hinzufügen
(Ich hoffe, dass es halbwegs sinnvoll zerlegt ist)
Mein Code:
HTML:
<html>
<head>
<title>Jugg-Knights Erlangen</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url(hintergrund.png);
background-repeat: repeat-x;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
header,
article,
aside,
footer {
border: 1px solid;
-webkit-flex: 1 100%;
flex: 1 100%;
}
article,
aside {
padding: 10px;
margin: 10px;
}
header {
border-color: #d5d5d5;
}
article {
background-image: url(box_mitte.png);
-webkit-flex: 3 1 0%;
flex: 3 1 0%;
}
aside {
background-image: url(box_mitte.png);
-webkit-flex: 1 1 0%;
flex: 1 1 0%;
}
footer {
text-align: center;
border-color: #8a9da8;
}
</style>
</head>
<body>
<header>
<img src="titel_leiste.png">
</header>
<aside>
<h2>Navigation</h2>
</aside>
<article>
<h2>Hier kommen die Inhalte hin</h2>
</article>
<aside>
<h2>Galerie</h2>
</aside>
<footer>
© 2017 by Jugg-Knights Erlangen - Impressum - Disclaimer - Kontakt
</footer>
</body>
</html>Viele Grüße
René
