place84: Meine orangebar

Hallo,

hab folgendes Problem mit meiner "orangebar" hier das Beispiel:

  
<html>  
  
 <head>  
    <title>Websitetest1</title>  
  
  
    <link href="websitetest.css" type="text/css" rel="stylesheet"/>  
 </head>  
  
<body>  
  
<div class="orangebar">  
</div>  
  
<div id="wrapper">  
  
<input class="loginid" type="text"/>  
  
  
</div>  
  
 </body>  
 </html>  

Und hier die .css

  
#wrapper{  
    margin: auto;  
    width: 980px;  
  
}  
.orangebar  
{   background-color:#CB8758;  
    height:82px;  
    min-width:980px;  
  
}  
  
.loginid{  
    float: right;  
}  

Meine orangebar hat oben,links und rechts noch einen weißen Rand vom Hintergrund.
Wie lässt sich diese richtig setzen, also komplett nach oben z.B. ?

Daniel

  1. So, hab es eben selbst herausgefunden :) :)

    Undzwar muss man den zusätzlichen Rand mit Margin weg ergänzen. Sprich mit negativen Pixeln. z.B. Margin-top: -15px; Dann hab ich keinen Abstand mehr zum Rand.. Muss man erstmal drauf kommen dass hier auch neg. Zahlen gehen :)

    MfG
    Daniel

    1. Hast Du mal probiert, wenn Du das CSS vorher "normalized"? Klingt irgendwie unsauber mit dem negativen margin.

      normalize.css

      1. Sowas ist viel besser bekannt und verbreitet unter dem Namen Reset-Stylesheet.

        1. Hallo!

          Sowas ist viel besser bekannt und verbreitet unter dem Namen Reset-Stylesheet.

          Nein, eben nicht!
          Es gibt schon von der Philosophie her einen entscheidenden Unterschied zwischen dem "Reset" und "Normalize" Ansatz.

          Vereinfacht ausgedrückt, wird bei einem Reset "alles platt gemacht", wohingegen bei Normalize die Einstellungen eher "angeglichen" werden.

          Beispiel:
          * {margin:0; padding: 0;}
          Das verursacht i.d.R. mehr "Probleme", als es beseitigt.

          Ich würde daher eher zu dem Normalize Ansatz raten.

          Gruß Gunther

    2. Tach!

      Undzwar muss man den zusätzlichen Rand mit Margin weg ergänzen. Sprich mit negativen Pixeln. z.B. Margin-top: -15px; Dann hab ich keinen Abstand mehr zum Rand.. Muss man erstmal drauf kommen dass hier auch neg. Zahlen gehen :)

      Besser wäre es, du machtest dich mit den in den Browsern eingebauten (oder nachrüstbaren) Entwicklerwerkzeugen bekannt, dann könntest du sehen, woher dein Rahmen kommt. Es wäre besser, dem verursachenden Elternelement margin und padding abzugewöhnen, als ihn im Kindelement auszugleichen zu versuchen. Das wird nämlich dann schwierig, wenn diverse Browser unterschiedliche Default-Werte haben.

      dedlfix.

      1. Hi,

        Es wäre besser, dem verursachenden Elternelement margin und padding abzugewöhnen, als ihn im Kindelement auszugleichen zu versuchen. Das wird nämlich dann schwierig, wenn diverse Browser unterschiedliche Default-Werte haben.

        deshalb ergänzend der Hinweis, dass sich place84 mit dem Thema Reset-Stylesheets befassen sollte.

        Mit freundlichen Grüßen

        Hugo Egon Balder

        1. Tach!

          Es wäre besser, dem verursachenden Elternelement margin und padding abzugewöhnen, als ihn im Kindelement auszugleichen zu versuchen. Das wird nämlich dann schwierig, wenn diverse Browser unterschiedliche Default-Werte haben.

          deshalb ergänzend der Hinweis, dass sich place84 mit dem Thema Reset-Stylesheets befassen sollte.

          Naja, das ist mitunter die Spatzenkanone mit Kollateralschadenpotenzial. Man kann das einsetzen, sollte sich aber der Auswirkungen bewusst sein. Hinterher fehlt je nach Ausführung eine ganze Menge, auch die Abstände in den Absätzen und Einrückungen von Listen. Einen Hinweis auf diese radikalen Eigenschaften fände ich angebracht, wenn man solche Tools offensichtlichen Anfänger empfiehlt. Und umsomehr sollte man dann seine Werkzeuge kennen und beherrschen, damit man direkt im Browser die Quelle einer bestimmten Formatierung finden und auch direktamente damit experimentieren kann, ohne jedes Mal den Zyklus Editieren, Speichern, ggf. Hochladen, Anschauen absolvieren zu müssen.

          dedlfix.

        2. Om nah hoo pez nyeetz, Hugo Egon Balder!

          http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil#Normalisierung

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rum und Rumpelstilzchen.