Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Problem mit margin und footer“

patrick_l

Hat es drauf

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

Hat es drauf

AW: Problem mit margin und footer

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

von allem ein bisschen

AW: Problem mit margin und footer

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

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

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

Hat es drauf

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

von allem ein bisschen

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. :p
 

patrick_l

Hat es drauf

AW: Problem mit margin und footer

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

liebt das Wochenende

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. :D
 

Davi2000

Nicht mehr ganz neu hier

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.
 

Myhar

Hat es drauf

AW: Problem mit margin und footer

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.

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 :)

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.

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

-ö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.


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

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. :D

Auf den ersten Blick schon einmal viel besser als vorher :)
Nur nicht entmutigen lassen, das wird schon.
 

patrick_l

Hat es drauf

AW: Problem mit margin und footer

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

.
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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.849
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben