Mobile Layout
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abschneiden
abstand
angabe
bildschirm
boxen
code
design
eigenschaft
entsprechend einstellen
http
index
kenntnis
mobil layout
mobile layout
modell
position
rand
richtung
tag
url
-
Hi,
ich habe ein problem mit meinem Mobil-Layout.
Ich möchte ein divüber den ganzen tag/bildschirm">Bildschirm haben, aber rechts und links mit einem Abstand von 5px.
Darunter dann ein Div, das sich über die ganze Breite erstreckt (normale 100% with).
Hat jemand eine Ahnung wie ich das machen kann? Denn 100% mit margin/padding addiert diese ja auf die 100% auf.
LG und vielen Dank -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
warum willst du erst ein div mit 5px abstand in jede Richtung und dann noch eins Unterdiv ohne Abstand?
Ansonsten unterelement abolut mit 0px Abstand in Rechts und Links
lg -
Wenn du bei dem body-Tag margin und padding entsprechend setzt (0), hast du bei dem unteren div eine Breite von 100%, bei dem oberen kannst du das margin dann entsprechend einstellen.
Bsp.: *klick* -
100% mit margin/padding addiert diese ja
wäre durch das-box-modell in soeinem fall tatsächlich so (oder zumindest im ie) wenn mann sowohl width:100% und margin/padding festlegt - aber warum denn überhaupt eine feste breite ? ein div nimmt als blockelement ja sowieso die ganze verfügbare breite ein, ohne angabe zu width, bzw width:auto (und wenn kein float ist) - und dann kannst du auch wiederum margin/padding benutzen.
also einfach:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body style="margin:0px;padding:0px;text-align:center;"> <div style="margin:0px 5px;text-align:left;background-color:#0C0;"> mit Rand, grün </div> <div style="text-align:left;background-color:#00C;"> ohne Rand, blau </div> </body> </html>oder nicht ? -
Für Mobil-Layouts kann ich auch jQuery-Mobile empfehlen. Damit musst du dich um das Design/Layout nicht mehr kümmern. (http://jquerymobile.com/)
Seitenaufbau wäre hier folgendermaßen:
<body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <div data-role="content"> <p>Hello world</p> </div><!-- /content --> </div> <div data-role="page"> <!-- Weitere Page --> </div> </body>
Alles weitere ist im verlinkten Abschnitt --Docs-- zu finden. Wenn du deine CSS-Kenntnisse verbessern willst hilft das ganze natürlich eher weniger ;) -
Erstes div soll über ganzen Bildschirm:
Einfach keine width oder height angeben, sondern nur position: relative; und top: 5px; right: 5px; bottom: 5px; left: 5px; z-index: 2;
Zweites div soll drunter sein:
position: relative; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
Zum Thema Box-Modell gibts in CSS3 eine neue Eigenschaft. Standardmäßig wird die width, padding und der border addiert. Das ergibt die Gesamt-Breite. Mit box-sizing: border-box wird das Ganze so wie im alten IE: http://www.css3.info/preview/box-sizing/
MfG
Dominic -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
