Moin Zusammen,
ich habe mal endlich angefangen mich mit Responsive Webdesign auseinander zu setzen und weg von der Tabellen Struktur - Bin ich froh, dass ich die Möglichkeit von Grids gefunden habe, das macht es schon mal einfacher.
Nun meine Fragen:
Wenn ich ein Layout aufbaue gehe ich wie folgt für Header, Navi, Content und Footer vor:
Code
<style>
html, body{
color: #000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
background-color: lightblue;
margin: 0px;
width: 100%;
height: 100%;
}
.container {
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-column-gap: 32px;
}
.header {
background: #E20074;
grid-column: 1 / 17;
grid-row: 1 / 2;
border-radius: 50px 50px 0 0;
}
.navi {
background: lightyellow;
grid-column: 1 / 4;
grid-row: 2 / 3;
border-radius: 20px;
}
.content {
background: lightgreen;
grid-column: 4/17;
grid-row: 2/3;
}
.footer {
background: red;
grid-column: 1/17;
grid-row: 3/4;
}
</style>
Alles anzeigen
Und HTML baue ich dann so auf:
Code
<div class="container">
<div class="header"><img src="images/logo.png"></div>
<div class="navi">Navi</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
Im Header habe ich ein Logo, dieses Logo bekomme ich aber nicht zentriert bzgl Höhe und Breite. Wie bekomme ich das hin?
Den Content Bereich erstelle ich in der Regel immer dynamisch mit PHP und MySQL. Macht es Sinn hier ein 2. Grid innerhalb des Contents zu erzeugen, um den eigentlichen Content in dem Bereich zu positionieren?