Anzeige

Problem mit margin und footer

Problem mit margin und footer | PSD-Tutorials.de

Erstellt von DanielB86, 07.12.2011.

  1. DanielB86

    DanielB86 liebt das Wochenende

    Dabei seit:
    05.12.2008
    Beiträge:
    61
    Geschlecht:
    männlich
    Ort:
    Neuhütten
    Software:
    PS CS5 Ext./ Dreamweaver CS5
    Kameratyp:
    CANON EOS 450D
    Problem mit margin und footer
    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
     
    #1      
  2. schnullerbacke

    schnullerbacke Aktives Mitglied

    Dabei seit:
    22.03.2006
    Beiträge:
    268
    Problem mit margin und footer
    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.
     
    #2      
  3. DanielB86

    DanielB86 liebt das Wochenende

    Dabei seit:
    05.12.2008
    Beiträge:
    61
    Geschlecht:
    männlich
    Ort:
    Neuhütten
    Software:
    PS CS5 Ext./ Dreamweaver CS5
    Kameratyp:
    CANON EOS 450D
    Problem mit margin und footer
    AW: Problem mit margin und footer

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

    schnullerbacke Aktives Mitglied

    Dabei seit:
    22.03.2006
    Beiträge:
    268
    Problem mit margin und footer
    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.
     
    #4      
  5. kyle66

    kyle66 Guest

    Problem mit margin und footer
    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
     
    #5      
  6. LaFaSiLuc

    LaFaSiLuc pauschalschuldig

    543
    Dabei seit:
    06.07.2011
    Beiträge:
    2.281
    Geschlecht:
    weiblich
    Software:
    PS Creative Suite
    Kameratyp:
    Nikon D40
    Problem mit margin und footer
    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)
     
    #6      
  7. DanielB86

    DanielB86 liebt das Wochenende

    Dabei seit:
    05.12.2008
    Beiträge:
    61
    Geschlecht:
    männlich
    Ort:
    Neuhütten
    Software:
    PS CS5 Ext./ Dreamweaver CS5
    Kameratyp:
    CANON EOS 450D
    Problem mit margin und footer
    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.
     
    #7      
  8. DanielB86

    DanielB86 liebt das Wochenende

    Dabei seit:
    05.12.2008
    Beiträge:
    61
    Geschlecht:
    männlich
    Ort:
    Neuhütten
    Software:
    PS CS5 Ext./ Dreamweaver CS5
    Kameratyp:
    CANON EOS 450D
    Problem mit margin und footer
    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?
     
    Zuletzt bearbeitet: 08.12.2011
    #8      
  9. DanielB86

    DanielB86 liebt das Wochenende

    Dabei seit:
    05.12.2008
    Beiträge:
    61
    Geschlecht:
    männlich
    Ort:
    Neuhütten
    Software:
    PS CS5 Ext./ Dreamweaver CS5
    Kameratyp:
    CANON EOS 450D
    Problem mit margin und footer
    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.
     
    #9      
  10. schnullerbacke

    schnullerbacke Aktives Mitglied

    Dabei seit:
    22.03.2006
    Beiträge:
    268
    Problem mit margin und footer
    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.
     
    #10      
  11. LaFaSiLuc

    LaFaSiLuc pauschalschuldig

    543
    Dabei seit:
    06.07.2011
    Beiträge:
    2.281
    Geschlecht:
    weiblich
    Software:
    PS Creative Suite
    Kameratyp:
    Nikon D40
    Problem mit margin und footer
    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.
     
    #11      
  12. DanielB86

    DanielB86 liebt das Wochenende

    Dabei seit:
    05.12.2008
    Beiträge:
    61
    Geschlecht:
    männlich
    Ort:
    Neuhütten
    Software:
    PS CS5 Ext./ Dreamweaver CS5
    Kameratyp:
    CANON EOS 450D
    Problem mit margin und footer
    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.
     
    #12      
  13. schnullerbacke

    schnullerbacke Aktives Mitglied

    Dabei seit:
    22.03.2006
    Beiträge:
    268
    Problem mit margin und footer
    AW: Problem mit margin und footer

    Hast du mein post von 18:33 gelesen?
     
    #13      
  14. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    Problem mit margin und footer
    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.
     
    #14      
  15. DanielB86

    DanielB86 liebt das Wochenende

    Dabei seit:
    05.12.2008
    Beiträge:
    61
    Geschlecht:
    männlich
    Ort:
    Neuhütten
    Software:
    PS CS5 Ext./ Dreamweaver CS5
    Kameratyp:
    CANON EOS 450D
    Problem mit margin und footer
    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.:)
     
    #15      
  16. Paric

    Paric von allem ein bisschen

    Dabei seit:
    27.04.2010
    Beiträge:
    112
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    CS 4 (PS, AI, AID)
    Problem mit margin und footer
    AW: Problem mit margin und footer

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

    LaFaSiLuc pauschalschuldig

    543
    Dabei seit:
    06.07.2011
    Beiträge:
    2.281
    Geschlecht:
    weiblich
    Software:
    PS Creative Suite
    Kameratyp:
    Nikon D40
    Problem mit margin und footer
    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 ;)
     
    #17      
  18. DanielB86

    DanielB86 liebt das Wochenende

    Dabei seit:
    05.12.2008
    Beiträge:
    61
    Geschlecht:
    männlich
    Ort:
    Neuhütten
    Software:
    PS CS5 Ext./ Dreamweaver CS5
    Kameratyp:
    CANON EOS 450D
    Problem mit margin und footer
    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.

    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.

    s. navi

    ok, versuche es anders umzusetzen.

    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?

    Das stimmt. Das wird noch geändert.

    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.
     
    #18      
  19. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    Problem mit margin und footer
    AW: Problem mit margin und footer

    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.

    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

    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.
    Guter Artikel dazu Die Umrechnung geht auch leichter als in dem Artikel beschrieben:
    Setze im CSS als ersten Befehl
    Code (Text):
    1.  
    2. html{font-size:62.5%}
    3.  
    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.
     
    #19      
  20. Davi2000

    Davi2000 Nicht mehr ganz neu hier

    Dabei seit:
    28.11.2011
    Beiträge:
    140
    Geschlecht:
    männlich
    Software:
    CS5.5 , Dreamweaver CS5, notepad++
    Problem mit margin und footer
    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.
     
    #20      
x
×
×