Hallo,
das ganze Responsive Webdesign macht mich mittlerweile fertig. Es zeigt mir das ich CSS wohl noch nie so wirklich verstanden habe und meine bisherigen Seiten hauptsächlich nach Trail und Error wie ein Kartenhaus aufgebaut habe.
Wann ist es sinnvoll das Responsive Grid zu benutzen? Wie benutzt man es?
Im Anhang ein konkretes Beispiel bei dem ich gerade nicht weiter weiß.
Ich habe eine Seite, ziemlich Standardmäßig aufgebaut (alter Standard?).
Header
Nav
Content
Footer
Das Ganze sitzt im Wrapper der eine fixe Breite hat und zentriert ist.
Code:
#wrapper {
width:1000px;
margin:0 auto;
}
In den Content soll jetzt beispielsweise ein Bild und daneben ein Text und darum einen Kasten. (Siehe die Bilder im Anhang)
Im Desktop/Tablet Modus soll das ganze wie bei der Desktop.png aussehen.
Bei kleiner werdender Auflösung soll das Bild dann irgendwann nach oben rutschen und dort zentriert sein.
Wie mache ich das richtig?
Ich würde nun so vorgehen:
Bild und Text kommen in ein div (class="rahmen"). (hier schon die erste Frage, im Text Editor bei der Code Funktion mit eigenem HTML Code hinzufügen, oder komplett alles als eigener HTML Code?)
Dieses div bekommt
Code:
.rahmen {
border: 2px solid;
margin: 10px;
padding: 10px;
}
Nun habe ich einen Rahmen und darin ein Bild welches an dem Text (Bestehend aus einer h1 Überschrift und einem <p>) "rangeklebt" ist.
Wie bekomme ich das Bild korrekt vom Text getrennt? Mit margin-right: 10px;?
Wie funktioniert das mit dem Responsive Grid, brauche ich das dafür? Gebe ich zum Beispiel dem Rahmen Div eine grid klasse, oder dem img oder und dem h1 und p?
Wie muss ich das dann in mein "mobile" Stylesheet mit Media Query (max-width:700px) ändern um die Darstellung wie bei Mobile.png zu bekommen?
Was für CSS Deklarationen muss ich den Elementen geben?
Floaten die Divs, img, h1, p?
Sind sie static? position relativ?
Diplay block oder display inline?
Ich verstehe mittlerweile Überhauptnichts mehr und wäre für jede Hilfe/Tipps/Ratschläge dankbar!!
MfG Drapper