kostenloser Webspace werbefrei: lima-city


Mobile Layout

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    buddix

    buddix hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. w*****e

    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
  4. thomasba

    Co-Admin Kostenloser Webspace von thomasba

    thomasba hat kostenlosen Webspace.

    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*
  5. h**s

    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 ?
  6. 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 ;)
  7. Nur ein Stichwort, da das Thema einfach zu vielfältig ist: Repsonsive Design

    Gute Übersicht: http://bradfrost.github.com/this-is-responsive/index.html

  8. 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
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!