Problem mit margin und footer

patrick_l · 13.12.2011

AW: Problem mit margin und footer

Ich würde an deiner Stelle auch schauen mehr Ordnung in dein "Grundgerüst" rein zu bekommen. Halt alles vom Code übersichtlicher umsetzen. Wie hier schon einmal angesprochen unnötige Vierschachtelungen, Divs etc. löschen.

Zu deiner Frage: UL ansprechen. Listen und Listenelemente können selbstverständlich im CSS angesprochen und formatiert werden. Dafür muss nicht einmal eine ID's oder Klasse vergeben werden. Es macht jedoch Sinn. Auf deine Seite bezogen würde ich zunächst die Navigation in eine UL packen, dieser dann eine Klasse od. ID zuweisen und im Stylesheet ansprechen.

Ein weiter Tipp von mir, ich würde vor allen anderen Angaben sämtliche Browser "reseten". Sprich dafür sorgen das alle Werte auf null sind. Das geht ganz einfach, dafür ganz oben in deinem CSS folgendes notieren.

Code:

* {    margin: 0; padding: 0; }
img { margin: 0; padding: 0; border: none;}

html { 
    min-height: 101%;  /* sorgt dafür das sofort der Scrollbalken erscheint*/
}

Grüße Otto

Myhar · 13.12.2011

AW: Problem mit margin und footer

Davi2000 schrieb:
Wenn du Elemente floatest, musst du diesen Float dann wieder stoppen. Oft nimmt man dafür extra ein Div mit der Klasse clear.

Der erste Satz stimmt, das extra div ist jedoch in 99% der Fälle nicht notwendig. Es ist oft ausreichend, für das Element, welches die gefloateten Elemente beinhaltet, ein overflow:auto zu definieren.

Paric · 13.12.2011

AW: Problem mit margin und footer

Myhar schrieb:
Der erste Satz stimmt, das extra div ist jedoch in 99% der Fälle nicht notwendig. Es ist oft ausreichend, für das Element, welches die gefloateten Elemente beinhaltet, ein overflow:auto zu definieren.

Da muss ich jetzt aber widersprechen. Der overflow hat mit dem float so mal rein garnix zu tun. Der overflow steuert lediglich das Element, wie es sich am Elementende verhalten soll, falls der Inhalt über die Größe des Elements rüber hinausschliesst. Also Inhalt abschneiden, inhalt über das Element hinaus anzeigen, scrollbalken innerhalb des Elements...

Warum soll ich bitte von Anfang an angeben das ich auf jedenfall einen Scrollbalken haben will? Macht in meinen Augen wenig Sinn.

Gruß,
Paric

Myhar · 13.12.2011

AW: Problem mit margin und footer

Overflow hat mit float in der Hinsicht eben doch etwas zu tun.
Bsp:
Man nehme folgendes HTML und CSS:

HTML:

<div class="overflowed">
    <div class="left">ich bin links</div>
    <div class="right">ich bin rechts</div>
<div>

.left{float:left;width:100px;height:100px}
.right{float:right;width:100px;height:100px}
.overflowed{border:1px solid black;}

Der border des overflowed divs geht in diesem Fall nicht um die beiden divs left und right herum.
Fügt man im CSS noch overflow:auto zu der definition von .overflowed hinzu, dann passiert das sehr wohl und man erspart sich das clear div nach dem div mit der Klasse right.
Leicht nachzuprüfen auf zB jsfiddle.net

Die min-height von 101% finde ich aber auch unnötig.

Paric · 13.12.2011

AW: Problem mit margin und footer

*grmpf....
Das war mir auch neu, danke für den Hinweis. Aber trotzdem ist das overflow-element ursprünglich zum steuern von zu großem Inhalt.

patrick_l · 13.12.2011

AW: Problem mit margin und footer

Myhar schrieb:
Die min-height von 101% finde ich aber auch unnötig.

Wenn die eigene Site mehrere unterschiedliche bzw. unterschiedlich große Unterseiten hat, macht die min-height sehr wohl Sinn. So sorgt man dafür das die gerade angezeigte Seite bei einem Aufruf einer anderen nicht springt. Genau deshalb direkt den Scrollbalken ins Bild holen damit einheitlicher durch die Site navigiert wird.

Im übrigen würde ich noch etwas weiter geht und

Code:

font-size: 100%;
font: inherit;

hinzufügen. In meinen Augen gehört das mit zu einem einfachem Workflow. Besonders wenn man bedacht ist auf eine überall gleiche Site (Browser, Plattform, Smartphone..)

DanielB86 · 14.12.2011

AW: Problem mit margin und footer

So, ich melde mich auch mal wieder zu Wort.
Also ich lade das abgeänderte Skript gleich mal hoch. Es wird nicht sonderlich schön aussehen.
Konnte einiges umsetzen, einiges nicht so recht und es gibts natürlich ein paar neue kleine Probleme.

Dann mal los.
Ich hab das div um das Logo weggemacht, war wirklich total unnötig und ging auch problemlos.
Dann hab ich die Navi in eine ul gepackt und im css formatiert. könnt ja mal drüber gucken.
Ich seh grad für navi2 hab ich das vergessen kommt noch, is mir jetzt zu spät. Muss um 7 raus.
Die Fußzeile hab ich auch in eine ul gepackt.

So nun zum Eingemachten:
-begrüssung und öffnungszeiten bleiben immer sehr dicht an der navi kleben, habs mit margin versucht, bringt aber nichts.
-die Größe von h1 lässt sich nicht regulieren.
-öffnungszeiten hat ne fest Breite, aber der Text fließt trotzdem unter die Begrüßung. Das will ich nicht, auch wenn da gar nix stehen würde sollen die Öffn.ze. immer rechts am Rand bleiben. Wie geht das?
-Zum Abschluss (für heute noch): die Fußzeile würde ich gerne noch oben/unten und rechts/links mittig ausrichten. Bekomme es aber nicht hin.

So, falls ihr noch was entdeckt, was ich falsch oder unschön gemacht habe, was mir aber nicht auffällt, da es in meinen Augen "gut" aussieht immer her mit der Kritik. Ich steck das schon weg.

Davi2000 · 14.12.2011

AW: Problem mit margin und footer

Wieso hast du in der Fußzeile die Adresse in ein <ul> gesteckt? Ein <p> würde vollkommen reichen und dann automatisch ausrichten und schon ist es in der Mitte.

DanielB86 · 14.12.2011

AW: Problem mit margin und footer

Davi2000 schrieb:
Wieso hast du in der Fußzeile die Adresse in ein <ul> gesteckt? Ein <p> würde vollkommen reichen und dann automatisch ausrichten und schon ist es in der Mitte.

So hatte ich das zuerst auch, aber mir wurde hier angeraten es nicht so zu tun.

Myhar · 14.12.2011

AW: Problem mit margin und footer

DerOtto schrieb:
Wenn die eigene Site mehrere unterschiedliche bzw. unterschiedlich große Unterseiten hat, macht die min-height sehr wohl Sinn. So sorgt man dafür das die gerade angezeigte Seite bei einem Aufruf einer anderen nicht springt. Genau deshalb direkt den Scrollbalken ins Bild holen damit einheitlicher durch die Site navigiert wird.

Das fällt meistens gar nicht auf. Oder man löst es so wie google, mit einem overflow-y: scroll; für den body. Aber ein scrollbalken, den man nicht scrollen kann, finde ich äußerst unprofesionell. Bzw. scrollen geht ja, aber man bekommt nicht mehr zu sehen. Das ist nicht nur unprofesionell, sondern auch unschön.

DerOtto schrieb:
Im übrigen würde ich noch etwas weiter geht und

Code:

font-size: 100%; font: inherit;

hinzufügen. In meinen Augen gehört das mit zu einem einfachem Workflow. Besonders wenn man bedacht ist auf eine überall gleiche Site (Browser, Plattform, Smartphone..)

Bezüglich überall gleiche Seite. Und ich würde sowieso einen forgefertigten CSS Reset verwenden, da sind die Sachen wie font-size etc. mit bedacht und man muss nicht für jedes Projekt das Rad neu erfinden.

Nun zu der neuen Seite von Daniel:

Sie ist schon mal viel besser

DanielB86 schrieb:
So nun zum Eingemachten:
-begrüssung und öffnungszeiten bleiben immer sehr dicht an der navi kleben, habs mit margin versucht, bringt aber nichts.

In Zeile 73 von vom design.css kannst du #navi2 einen margin-bottom mit beliebiger Größe geben, dann hast du deinen Abstand.

DanielB86 schrieb:
-die Größe von h1 lässt sich nicht regulieren.

Sicher lässt sie sich regulieren. In Zeile 158 hast du #wrapper #inhalt #begruessung h1 mit 36px definiert. Mit #inhalt h1 auf Zeile 91 hast du wohl versucht, diese 36px zu überschreiben. Diese Deklaration hat eine niedrigere Gewichtung als die zweite, deshalb wird sie überschrieben. Entweder du gibst deiner zweiten Deklaration mehr Gewichtung oder du löscht die, die du nicht brauchst, raus.

DanielB86 schrieb:
-öffnungszeiten hat ne fest Breite, aber der Text fließt trotzdem unter die Begrüßung. Das will ich nicht, auch wenn da gar nix stehen würde sollen die Öffn.ze. immer rechts am Rand bleiben. Wie geht das?

Du hast deinem oeffnungszeiten div nirgends gesagt, dass es rechts floaten soll. Du musst also in deinem CSS eine entsprechende Regel dafür definieren #oeffnungszeiten{float:right} und eine entsprechende Breite definieren.
Dann musst du nur dem div mit der id=inhalt nur ein overflow:auto geben, damit der weiße Hintergrund sichtbar wird.

DanielB86 schrieb:
-Zum Abschluss (für heute noch): die Fußzeile würde ich gerne noch oben/unten und rechts/links mittig ausrichten. Bekomme es aber nicht hin.

Zur Fußzeile kann ich noch sagen: Mach deine vertikalen Trennstriche doch als border von dem li. Sonst ist es Text, welcher auf markiert und von Suchmaschinen erfasst werden kann.
Zum horizontalen Ausrichten: gib deiner ul eine fixe Breite, dann kannst du sie mittels margin:0 auto zentrieren. Durch ausprobieren habe ich einen Wert von 20em ermittelt.

DanielB86 schrieb:
So, falls ihr noch was entdeckt, was ich falsch oder unschön gemacht habe, was mir aber nicht auffällt, da es in meinen Augen "gut" aussieht immer her mit der Kritik. Ich steck das schon weg.

Auf den ersten Blick schon einmal viel besser als vorher

Nur nicht entmutigen lassen, das wird schon.

patrick_l · 21.12.2011

AW: Problem mit margin und footer

Myhar schrieb:
...finde ich äußerst unprofesionell. Bzw. scrollen geht ja, aber man bekommt nicht mehr zu sehen. Das ist nicht nur unprofesionell, sondern auch unschön.

Das ist quatsch. Klar kann man das ganze auch über overflow-y bewerkstelligen. Aber auch min-height gehört mit dazu.

Myhar schrieb:
.
ich würde sowieso einen forgefertigten CSS Reset verwenden, da sind die Sachen wie font-size etc. mit bedacht und man muss nicht für jedes Projekt das Rad neu erfinden.

So würde ich das ganze ja auch handhaben. Ein Reset-Stylesheet, eines für Monitorausgabe, eventuell eines für mobile Geräte (iPad, Smartphone etc.), Print und gegeben falls auch eines extra für den IE. Jedes dann im Head eingefügt oder in einem "Site CSS" mit @import

style.css:

Code:

@import url(resources/css/reset.css);
@import url(resources/css/screen.css);
@import url(resources/css/mobil.css);
@import url(resources/css/print.css);

Bei der zweiten Methode besteht nur das Problem das der IE kein Import versteht. Hat aber auch etwas gutes. So kann man bestimmte Formatierung für andere Browser vornehmen, ohne das der IE etwas damit anstellt.

Aber da jeder so seinen eigenen Workflow. Wichtig ist für am Ende nur das der Code schlank, valide und überschaubar bzw. gut lesbar bleibt. Erleichtert auch zu späterem Zeitpunkt das verbessern und ausbauen der Seite.