Problem mit margin und footer

[DanielB86]

Hallo,

ich habe mit einem Bekannten zusammen eine Webseite für dessen Bruder erstellt: www.gesundheitspraxis-schmitt.de
Nach ein paar Schönheitsarbeiten hat mein Bekannter aber noch hier und da was umgebastelt. Ich bekomms aber selber nicht mehr richtig.
Und zwar bestehen folgende Probleme(von denen ich weiß ):
Im IE9 und FF8 rückt die Seite zu weit nach unten, ein grüner Trennbalken klebt oben am Rand (sollte unterhalb der Slideshow sein) und der Test im Footer wird ganz nach rechts übereinander geschrieben.
Im Opera 11.6 besteht auf den ersten Blick das Problem des oberen Abstandes und des Balkens + die Slideshow liegt über Navi und Logo.
Ich bin leider nicht "gut" genug in CSS um das wieder hinzubekommen, hoffe aber es ist nicht zuviel. Soviel Code haben wir ja da auch nicht.
Wurde bisher hier immer sehr gut zu all meinen Fragen beraten und hoffe ihr könnt mir auch dieses Mal weiterhelfen.

P.S.: Falls euch noch was auffällt wäre ich sehr nett, wenn ihr mir das mitteilen würdet.

Gruß Daniel

 

[schnullerbacke]

AW: Problem mit margin und footer

Ich hab nur auf die Schnelle mal geschaut, meine Antwort ist also mehr geraten als gewusst:
Die slideshow hat ein float:left, das würde ich löschen und dafür ein clear:both einsetzen. Das scheint erst mal das Hauptproblem zu sein und sollte das Überlagern beenden.
Dann müssen aber wahrscheinlich noch ein paar margins verändert/angepasst werden.

Im Footer sehe ich keinen Fehler, bzw. verstehe nicht, was du meinst.

 

[DanielB86]

AW: Problem mit margin und footer

Ok, das werde ich dann mal tun und dann hier updaten.
Welchen Browser nutzt du denn?

 

[schnullerbacke]

AW: Problem mit margin und footer

Normal den Firefox 8.
Hab aber auch Opera 11.

Wenn das float erst mal durch das clear ersetzt ist, ist (glaube ich) erstmal ein großer Fehler weg. Der Rest ist dann wahrscheinlich nur Kosmetik.

 

[kyle66]

AW: Problem mit margin und footer

Hallo,

außerdem wird das oeffungszeiten-Div wird nicht geschloßen. Dann ist auch der Bug mit dem Footer weg.

Grüße
kyle

 

[LaFaSiLuc]

AW: Problem mit margin und footer

Hey, Daniel,
die Öffnungszeiten etc rechts sind sooooo winzig, auf einem größeren Bildschirm kaum lesbar.
Die links funktionieren alle nicht, ausser beim Impressum und da rutscht der Inhalt in den grünen Bereich des footers (firefox)

 

[DanielB86]

AW: Problem mit margin und footer

Vielen Dank an euch schonmal. Sowas mit dem div Tag übersieht man gerne mal. Da hätte ich ewig nach gesucht. Naja, hätte es auch mal wieder validieren können.

 

[DanielB86]

AW: Problem mit margin und footer

@schnullerbacke: Das float:left der slideshow habe ich in ein clear:both getauscht. Das hat sehr viel gebracht. Vielen Dank. Nach der Kosmetik passen jetzt auch alle Abstände.

@kyle66: Habe alle div-Tags nochmal durchgesehen. Alle werden ordnungsgemäß geöffnet/geschlossen, jeweils 10. Oder verstehe ich da was falsch? Am Ende kann ich nicht richtig zählen.

@LaFaSiLuc: Da hast du schon recht. Um sowas wollte ich mich später kümmern, aber deine Kritik ist berechtigt. Links sind auch noch keine drin. Die Seite sollte so im Netz bleiben.
Das mit dem Impressum weiß ich auch. Da muss ich noch was an den Größen anpassen. Falls ich da Probleme bekomme melde ich mich wieder.


So, abschliesendes Fazit:
Im Opera 11.6 sieht es so aus wie es soll.
Im FF8 verrutscht der Text im footer weiterhin leicht.
Im IE9 verrutscht der Text im footer noch ein wenig mehr.

Könntet ihr mir da noch helfen?

Edit: Im IE9 mobile unter Windows Phone 7.5 sieht der footer perfekt aus, dafür wird das Öffnungszeiten div mit einer Lücke und größerem Text unter der Begrüßung angezeigt. Jemand ne Ahnung woran das liegen könnte?

 

[DanielB86]

AW: Problem mit margin und footer

Hab das Problem entdeckt. Die Höhe des begrüßungs-div war komischerweise zu hoch. jetzt besteht nur noch das Problem im mobilen Browser. Weiß net wie es mit Safari aufm iPhone aussieht.

 

[schnullerbacke]

AW: Problem mit margin und footer

Jetzt hast du das Problem, dass der letzte Satz bei den Öffnungszeiten
"... entgegennimmt, während wir uns in einer Behandlung befinden. Wir rufen garantiert zurück!"
unter das Begrüßungs-Div rutscht.

Versuch mal dem Div oeffnungszeiten ein margin-left von 600px zu geben.

 

[LaFaSiLuc]

AW: Problem mit margin und footer

Daniel, die Seite ist Online und die Links gehen nicht? Versteh ich das richtig? Das ist natürlich tödlich für so eine kleine Firma, wenn die Patienten sich Infos holen wollen. Zumindest ein Baustellenschild sollte verlinkt werden.

 

[DanielB86]

AW: Problem mit margin und footer

@LaFaSiLuc: Da hast du schon recht. Habe auch davon abgeraten, aber es ist ja nicht mein Betrieb. Das wird aber auch in den kommenden Tagen behoben.


So nebenbei. Im Safari auf dem iPhone sieht es auch nicht gut aus. Da vermischt sich der Text von Begrüßung und Öffnungszeiten nun. Da muss ich mir was anderes ausdenken.
für kleine Hilfen wäre ich da sehr dankbar.

 

[schnullerbacke]

AW: Problem mit margin und footer

Hast du mein post von 18:33 gelesen?

 

[Myhar]

AW: Problem mit margin und footer

Bei der Seite gibt es noch viele Verbessungsmöglichkeiten:
Erstens ist es nicht notwendig, jedes Element in ein eigenes div zu packen. Beim Logo hast du dies gemacht, das div mit der id=logo kannst du komplett weg lassen und die ID direkt dem Bild zuweisen (falls dies überhaupt notwendig ist)
Das div mit der id=navi ist ebenfalls unnötig, hier ist eine ul gefordert. Und nein, du musst die ul nicht extra mit einem div umschließen, eine ul ist schon ein Block-Element.

Eine gute, benutzerfreundliche Slideshow kann man auch Stoppen, dafür fehlen jedoch Steuerungsmöglichkeiten.

Dann weiter mit dem div id=inhalt:
Das div mit der id=navi2 ist ebenfalls unnötig (siehe das, was ich zu dem navi-div geschrieben habe)
Das div id=begruessung hat eine fixe Höhe und Breite. So etwas ist, gerade wenn das div Text enthalten soll, sehr schlecht. Hat ein Benutzer einen zu großen Text eingestellt, dann wird dieser unter Umständen abgeschnitten. Außerdem ist gerade das eine gute Sache bei HTML: Elemente wachsen mit ihrem Inhalt, du brauchst keine fixen Höhen und Breiten angeben (entweder Breiten- oder Höhenangabe ist ausreichend)

Positiv kann man hier anmerken, dass du wenigstens hier nicht komplett mit divs gearbeitet hast, sondern h1, h2 etc. genommen hast. Nur warum nicht komplett durchgezogen bei der Navigation?

Der oeffnungszeiten div ist wiederum sehr sonderbar gestyled. Ein zweispaltiges Layout setzt man doch komplett anders um. Man hat eine Gesamtbreite und gibt den darin enthaltenen Containern jeweils eine Breite, damit sie nebeneinander Platz finden.
zB inhalt-div hat eine Breite von 100em, dann bekommt begruessung eine Breite von 65em und oeffnungszeiten eine von 30em. Dann ist noch ein kleiner Abstand zwischen den Beiden und skalierbar ist es auch.
Des Weiteren ist die Schriftgröße des oeffnungszeiten-divs sehr klein. Gerade mal 10px hier bei mir.

Bei der Fußzeile stellt sich mir die Frage, warum hier keine ul verwendet wurde. Weißt du nicht, dass es dieses Element gibt? Oder warum verweigerst du dich diesem Element so konsequent auf deiner Seite?
Man könnte natürlich auch andenken, die Adresse in eine Tabelle zu schreiben, da es sich um tabellarische Daten handelt. Aber einfach in einer langen Textwurst? Das ist nicht zu empfehlen.

 

[DanielB86]

AW: Problem mit margin und footer

Hast du mein post von 18:33 gelesen?

Den hab ich gerade entdeckt. Werde deinen Tipp aber umsetzen.

Mein Bekannter (Bruder des Seiteninhabers) hat heute morgen auf eigene Faust wieder an der Seite rumgewerkelt und jetzt stimmen so manche Sachen wieder nicht. Muss mal wieder alles durchgucken.

@Myhar: Danke für die Infos. Auch diese werde ich so gut ich kann umsetzen.

 

[Paric]

AW: Problem mit margin und footer

Den hab ich gerade entdeckt. Werde deinen Tipp aber umsetzen.

Mein Bekannter (Bruder des Seiteninhabers) hat heute morgen auf eigene Faust wieder an der Seite rumgewerkelt und jetzt stimmen so manche Sachen wieder nicht. Muss mal wieder alles durchgucken.

@Myhar: Danke für die Infos. Auch diese werde ich so gut ich kann umsetzen.

änder doch mal das FTP-Passwort *g* dann funkt dir keiner mehr dazwischen...

 

[LaFaSiLuc]

AW: Problem mit margin und footer

Daniel, tu dir das doch nicht an, das da noch einer drin rummust^^. Und ja, Passwwort ändern ist bei sowas immer die allererste Wahl

 

[DanielB86]

AW: Problem mit margin und footer

Beim Logo hast du dies gemacht, das div mit der id=logo kannst du komplett weg lassen und die ID direkt dem Bild zuweisen

Hab ich umgesetzt.

Das div mit der id=navi ist ebenfalls unnötig, hier ist eine ul gefordert. Und nein, du musst die ul nicht extra mit einem div umschließen.

Wenn ich das mache habe ich da aber ne Liste stehen. Wie müsste ich das denn im CSS umformatieren. Steh da en bisschen augm Schlauch.

Eine gute, benutzerfreundliche Slideshow kann man auch Stoppen, dafür fehlen jedoch Steuerungsmöglichkeiten.

Weiß ich, aber wir hatten uns bewusst dagegen entschieden, da es allen Beteiligten in diesem Fall besser gefallen hat. Notfall ein y für ein n im js, das wars dann.

Das div mit der id=navi2 ist ebenfalls unnötig

s. navi

Das div id=begruessung hat eine fixe Höhe und Breite. So etwas ist, gerade wenn das div Text enthalten soll, sehr schlecht. Hat ein Benutzer einen zu großen Text eingestellt, dann wird dieser unter Umständen abgeschnitten. Außerdem ist gerade das eine gute Sache bei HTML: Elemente wachsen mit ihrem Inhalt, du brauchst keine fixen Höhen und Breiten angeben (entweder Breiten- oder Höhenangabe ist ausreichend)

ok, versuche es anders umzusetzen.

Der oeffnungszeiten div ist wiederum sehr sonderbar gestyled. zB inhalt-div hat eine Breite von 100em, dann bekommt begruessung eine Breite von 65em und oeffnungszeiten eine von 30em.

Ja, habs nicht anders hinbekommen. Habe deinen Tipp mit em mal umsetzt, aber dann ist es viel größer als die festgelegt Breite. Mach ich da was falsch?
Habs dann mit % gemacht, dann siehts schon eher nach was aus. Allerdings gehen dann die Navi2, das border-top(inhalt) und die hr über die seite raus. Ist da meine Herangehensweise mit % nicht das Richtige?

Des Weiteren ist die Schriftgröße des oeffnungszeiten-divs sehr klein. Gerade mal 10px hier bei mir.

Das stimmt. Das wird noch geändert.

Bei der Fußzeile stellt sich mir die Frage, warum hier keine ul verwendet wurde. Weißt du nicht, dass es dieses Element gibt?

Kenne das Element schon, aber wusste/weiß nicht in wie weit es da was bringt. So schlecht ist doch meine einfache Lösung doch auch nicht, oder? Hat die ul hier noch irgendwelche Vorteile?

Auf jeden Fall schon mal ein großes Dankeschön an euch alle. Hoffe mit noch ein wenig weiterer Hilfe bekomm ich alles in den nächsten Tagen hin.

Habe die Seite jetzt mal noch nicht angeändert hochgeladen, da ich mir den Inhalt so ein wenig zerschossen habe und mal noch die Tipps abwarte wie ich es besser machen soll. Falls sich einer wundert.

 

[Myhar]

AW: Problem mit margin und footer

Hab ich umgesetzt.

Wenn ich das mache habe ich da aber ne Liste stehen. Wie müsste ich das denn im CSS umformatieren. Steh da en bisschen augm Schlauch.
[...]
Kenne das Element schon, aber wusste/weiß nicht in wie weit es da was bringt. So schlecht ist doch meine einfache Lösung doch auch nicht, oder? Hat die ul hier noch irgendwelche Vorteile?

Eine Liste hat den Vorteil, dass sie eine Aufzählung ist. Ein div ist ein bedeutungsloser Container. Sieht sich ein User deine Seite ohne CSS an (zB mit einem Textbrowser) dann erkennt er eine Liste sehr wohl, einzelne divs werden jedoch nicht wahrgenommen. Der Vorteil ist also, dass du das semantisch korrekte Element für etwas nimmst. Genauso wie man p für einen Paragraphen, h1-h6 für Überschriften etc. verwendet und nicht alles mit divs baut.
Sicher, die Liste muss man mit CSS Stylen, das muss man die divs aber auch.
Ein Float auf die li dann ist die Navigation horizontal und dann noch margin, padding etc. bis es passt. Keine große Sache.

Weiß ich, aber wir hatten uns bewusst dagegen entschieden, da es allen Beteiligten in diesem Fall besser gefallen hat. Notfall ein y für ein n im js, das wars dann.

Es sollte doch nicht nur nach den Beteiligten sondern auch nach den Besuchern der Seite gehen. Und die freuen sich bestimmt über so etwas. :-D

Ja, habs nicht anders hinbekommen. Habe deinen Tipp mit em mal umsetzt, aber dann ist es viel größer als die festgelegt Breite. Mach ich da was falsch?
Habs dann mit % gemacht, dann siehts schon eher nach was aus. Allerdings gehen dann die Navi2, das border-top(inhalt) und die hr über die seite raus. Ist da meine Herangehensweise mit % nicht das Richtige?

Meine Zahlen war nur irgendwelche Beispielzahlen.
Ob man jetzt em oder % nimmt ist beides nicht verkehrt, beides sind relative Größen. Ich präferiere em, aber % ist auch nicht falsch.
Die Umrechnung geht auch leichter als in dem Artikel beschrieben:
Setze im CSS als ersten Befehl

html{font-size:62.5%}

Dann ist bei den Standardeinstellungen 1em = 10px. Dann kannst du mit 10.5em eine Breite von 105px erreichen. Oder du verwendest die Umrechnung von dem Artikel oder einfach nach Gefühl und ausprobieren bis es passt :-D

Und ja, wenn du die Sachen anpasst und änderst, dann wird es sicher noch zu Problemen kommen. Falls du diese nicht lösen kannst, hier wird dir geholfen.
Ansonsten noch gutes Gelingen.

 

[Davi2000]

AW: Problem mit margin und footer

An der #Fußzeile anstatt clear: none; , clear: both; und float: none; wegnehmen. Und das Problem mit der Fußzeile ist im Firefox auch weg.

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