Ergebnis 1 bis 3 von 3

Thema: Padding-top bezugsgröße?

  1. #1
    HTML Newbie
    Registriert seit
    06.06.2016
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Padding-top bezugsgröße?

    Hallo,

    ich habe folgenden HTML/CSS Code:

    Code:
    html, body{
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
        box-sizing: border-box;
        font-family:Lucida Console;
        font-size:14px;
        /*-webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;*/
    }
    
    *, *:before, *:after {
      box-sizing: border-box;
    }
    
    * {
        margin:0px;
        padding:0px;
    }
    
    /*topbar----------------*/
    #topbar{
        background-image:url("../img/background.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-color:#1c1009;
        padding-left:5%;
        padding-top:1%;
        height:28%;
        text-align:left;
        vertical-align:top;
        border-bottom:1px solid #b17b50;
    }
    
    #logo{
        height:34%;
    }
    
    #canvasholder{
        float:right;
    }
    
    #canvasholder canvas{
        background-color:#ff0000;
    }
    /*topbar----------------*/
    HTML-Code:
    <div id="topbar">
         <img src="img/logo.svg" id="logo">
            <div id="canvasholder">
                    <div class="txt_logout"></div>
                    <canvas id="onoff" onClick="kr.onoff();" class="topdiagram" width="10" height="10"></canvas>
                    <canvas id="logout" onClick="kr.logout();" class="topdiagram"></canvas>
                    <canvas id="Zulufttemperatur" class="topdiagram" class="topdiagram"></canvas>
                    <canvas id="Produkttemperatur" class="topdiagram" class="topdiagram"></canvas>
                    <canvas id="Luefterleistung" class="topdiagram" class="topdiagram"></canvas>
            </div>
        </div>
    Meine Frage: Das Padding-leftbezieht sich genau auf die 100% Fensterbreite, da das DIV ja selber 100% Breite hat und diese vomBody erbt (auch 100%).
    Das Padding-top - jetzt bei 1% - zerstört jedoch das ganze Layout, da das Padding auf eine Größe gesetzt wird, die ich nicht nachvollziehen kann.
    Body hat 100% Höhe, das DIV hat 28% und selbst bei 10% Padding-top wird dieses auf ein Viertel des Bildschirmes gezogen - und das Logo in der Topbar ist nur noch ein paar Pixel groß.

    Kann mir da jemand sagen, warum das so ist?

    Danke!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Padding-top bezugsgröße?

    Hallo

    Kann mir da jemand sagen, warum das so ist?
    Ja, das orientiert sich an der Praxis und ist für Anfänger nicht unbedingt nachvollziehbar.

    Wenn sich padding-top/-bottom mit Prozentangaben an der Fensterhöhe orientieren würden würde das Layout schnell unansehnlich werden. Deshalb richten sie sich nach der Fensterbreite.

    Du kannst das folgendermaßen ausprobieren:

    Ändere mal

    Code:
    #topbar{
    ...
        padding-top:1%;
    ...
    }
    auf 10%.

    Dann verkleinere und vergrößere mal die Fensterhöhe. Am padding-top wird sich nichts ändern.

    Anschließend verkleinere mal die Fensterbreite. Das padding-top wird kleiner werden und bei einer Vergrößerung der Fensterbreite entsprechend größer. Laß dich nicht durch das Umspringen der roten Container irritieren oder lösch testweise mal drei der Container.

    Das Verhalten ist so gewollt.

    Gruss

    MrMurphy

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    06.06.2016
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Padding-top bezugsgröße?

    Zitat Zitat von MrMurphy Beitrag anzeigen
    Wenn sich padding-top/-bottom mit Prozentangaben an der Fensterhöhe orientieren würden würde das Layout schnell unansehnlich werden. Deshalb richten sie sich nach der Fensterbreite.
    Das schießt den Vogel ja total ab. Dann soll man ermöglichen, dass man dynamische Zuweisungen macht, wie paddong-top: 5% of width; ....


    Aber danke.

Ähnliche Themen

  1. Problem: padding
    Von davidos_no.1 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 24.01.2009, 00:50
  2. Komisches padding problem IE
    Von Stephan im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 12.06.2008, 18:49
  3. padding problem
    Von gelöschter User im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 10.02.2008, 18:53
  4. CSS Padding streikt.
    Von im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.07.2007, 21:46
  5. h + padding-top
    Von ad3nau im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 27.11.2006, 21:54

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •