Suche im Forum:
Suchen


Autor Nachricht
Beitrag02.07.2009 um 16:08 (UTC)    
Titel: CSS: Abstände - Für alle Browser gleich gestellt

Hi Leute,

ich stelle in CSS- Designs des HPBK immer wieder fest, dass diese keine
Kalibrierung besitzen... Aber genau diese sind wichtig, damit sich die Designer
unter euch nicht immer über die verschiedenen Browser ärgern müssen,
die mit ihrer Browser.css oder der Benutzer.css Datei immer dazwischen funken.

Der Code den ich euch hier gepostet habe, setzt alle Abstände auf null. Das gilt für die innen und außen Abstände, sowie für die geordneten und ungeordneten Listen (ul, ol)... Damit dieser wirkt müsst ihr ihn an erster Stelle im CSS- Code einbauen, damit der Browser sie als erstes einlesen kann!


Zitat:
/* Kalibrierung der wichtigsten Abstände */
* { padding: 0; margin: 0; }


Wenn ihr diesen Code benutzt habt, erschreckt euch nicht, ihr habt im Grunde genommen nichts kaputt gemacht, sondern die Browser.css damit außer Kraft gesätzt. Diese beachten ihre eigene CSS- Datei nicht mehr und übernehmen jetzt die Kaliebrierung. Die wichtigsten Abstäde müsst ihr zwar im CSS manuell für jedes Element neu einfügen, aber es lohnt sich !


Da wir allerdings nicht wollen, dass unsere geordneten und ungeordneten Listen auf null gesätzt werden, kommt noch eine neue Zeile hinzu:

Zitat:
/* Kalibrierung der wichtigsten Abstände */
* { padding: 0; margin: 0; }
h2, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }


Sicherlich denkt ihr euch jetzt: ,,Was ein Quatsch, als erstes machen wir es kaputt und dann wieder heile!" aber ich versichere euch, diese Methode ist zwar drasstisch, aber sie hilft.

Damit unsere Listen jetzt noch eine kleine Einrückug bekommen, verwenden wir eine weitere Zeile, in der wir den Abstand nach "left" regeln.

Zitat:
/* Kalibrierung der wichtigsten Abstände */
* { padding: 0; margin: 0; }
h2, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em; }


Ihr müsst die Werte -1em- nicht übernehmen, ihr könnt da selber ein wenig basteln, je nach dem, wie es euch gerade besser gefällt!


Dann habe ich noch gesehen, dass viele Leute mit Firefox unterwegs sind...
Firefox hat eine besondere Eigenschaft, wenn eure Seite nicht groß genug ist, bledet der Firefox die Scrollleiste automatisch aus und euer Design, dass ihr ja immer mit "auto" zentriert habt, springt ab und an hin und her.
Dieses Problem kann man ganz einfach mit einem Code lösen, der ebenfals direkt unter dem Code für die Kalibrierung gesätzt wird:

Zitat:
html { height: 101%; } /* erzwingt Scrollbar im Firefox */


Damit habt ihr in meinem kleinen Tourial eure Seite schon ein wenig aufgebessert und wünsche viel Spaß dabei... Wink


MfG: René
______________
Das bin ich und meine Art, 17 halt.

Projekt Nr. 2- http://freunde-des-pussel.de.tl


Zuletzt bearbeitet von don-ambiente am 02.08.2009, 19:12, insgesamt 3-mal bearbeitet
Beitrag02.07.2009 um 20:51 (UTC)    
Titel: Re: CSS: Browser.css

Zitat:
html { height: 101%; } /* erzwingt Scrollbar im Firefox */

Das kann man auch so lösen (abgekuckt von phpBB3):
Code:
html {
   height: 100%;
   margin-bottom: 1px;
}

Funktioniert aber nicht im IE

Ansonsten ganz nettes Tutorial und ich finde es hat einen Platz im Tutorial-Bereich verdient!
Wink
______________
*** Signatur editiert vom Support Team - Signatur zu groß - max. 650 x 150 px ***
Beitrag02.07.2009 um 21:12 (UTC)    
Titel:

Schöne Erklärung, habe das mal in die Profituts verschoben Wink
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de