8
Finde den Wurm im css-Code nicht
Hi, ich arbeiter zur Zeit an einem neuen Design, für meine Seite und komme seit gut zwei Wochen nicht mehr weiter.
Hier ist ersteinmal der Link: http://abbrechen-entertainment.com/new_ab/
Wie die jenigen, die ein geschultes Auge haben oder die Seite durch den wc3-Validator jagen, werden feststellen, dass dort ein paar Fehler sind, doch selbst mit einer validierten html- u. css-Datei, ist das, was ich versuche, nicht zu erreichen.
Und zwar seht ihr die oberste Zeile, über der Navi (mit dem fb-Button), die möchte patu nicht an die Navi ran, ebenso der Footer, in dem das Impressum, usw. steht.
Beim Hover der Navi werdet ihr dann feststellen, dass das Submenu (beim Portfolio), sehr klein und zerstückelt angezeigt wird, dabei sollte es eigntlich dieselbe Größe wie der Hover jedes Menüpunktes haben, was mich gleich zum nächsten Problem führt: Dem Hover-Hintergrund.
Dieser sollte eigentlich so groß sein, dass er an den nächsten Navigationspunkt andockt, sodass es keine Lücken gibt, wenn man zwischen den einzelnen Punkten switcht, tatsache ist jedoch, dass massive Lücken vorhanden sind.
Ich habe es schon mit einigen Varianten probiert, um das zu beheben, auch mit margin und padding, leider erfolglos.
Kennt einer von euch die rettende Lösung?
EDIT: Und aus irgendeinem Grund, wird die Seite im IE nicht richtig angezeigt.
Ich benutze übrigens Firefox.
Hier ist ersteinmal der Link: http://abbrechen-entertainment.com/new_ab/
Wie die jenigen, die ein geschultes Auge haben oder die Seite durch den wc3-Validator jagen, werden feststellen, dass dort ein paar Fehler sind, doch selbst mit einer validierten html- u. css-Datei, ist das, was ich versuche, nicht zu erreichen.
Und zwar seht ihr die oberste Zeile, über der Navi (mit dem fb-Button), die möchte patu nicht an die Navi ran, ebenso der Footer, in dem das Impressum, usw. steht.
Beim Hover der Navi werdet ihr dann feststellen, dass das Submenu (beim Portfolio), sehr klein und zerstückelt angezeigt wird, dabei sollte es eigntlich dieselbe Größe wie der Hover jedes Menüpunktes haben, was mich gleich zum nächsten Problem führt: Dem Hover-Hintergrund.
Dieser sollte eigentlich so groß sein, dass er an den nächsten Navigationspunkt andockt, sodass es keine Lücken gibt, wenn man zwischen den einzelnen Punkten switcht, tatsache ist jedoch, dass massive Lücken vorhanden sind.
Ich habe es schon mit einigen Varianten probiert, um das zu beheben, auch mit margin und padding, leider erfolglos.
Kennt einer von euch die rettende Lösung?
EDIT: Und aus irgendeinem Grund, wird die Seite im IE nicht richtig angezeigt.
Ich benutze übrigens Firefox.
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 188104
Url: https://administrator.de/contentid/188104
Ausgedruckt am: 22.11.2024 um 19:11 Uhr
8 Kommentare
Neuester Kommentar
Hallo,
ich arbeite mich stückweise durch.
Damit der Header wieder passt auch im Bereich
Und auch ein float: left;
Würde dir auch empfehlen, einen Container für die Page an sich zu erstellen und dort alle Angaben (Breite, etc.) rein zu packen und dann erst mit #media etc. beginnen.
==EDIT==
Zu mehr komm ich auf die schnelle nicht. Gucke noch einmal, wenn ich Zeit hab.
ich arbeite mich stückweise durch.
#navi
Füg mal ein float: left; im CSS ein.Damit der Header wieder passt auch im Bereich
#header
float: left;#navi ul
Padding entfernen#inhalt
Würde ich die Höhe auf 100% stellen. Dann hast du keine Probleme mehr mit der Länge des Textes.Und auch ein float: left;
#inhalt_text
float: left; und padding:15px#footer
Wieder ein float: left;Würde dir auch empfehlen, einen Container für die Page an sich zu erstellen und dort alle Angaben (Breite, etc.) rein zu packen und dann erst mit #media etc. beginnen.
==EDIT==
Zu mehr komm ich auf die schnelle nicht. Gucke noch einmal, wenn ich Zeit hab.
Hi !
Grundsätzlich gibt es immer noch Unterschiede bei der Darstellung zwischen den verschiedenen Browsern bzw. Rendering-Engines. Notfalls musst Du mit einer Browserweiche arbeiten. Um aber zumindest die Feinheiten der Gecko-Engine herauszukitzeln, kannst Du das Firefox Add-On Firebug verwenden. Damit kannst Du schnell mal Änderungen an deinem HTML/CSS vornehmen und quasi in Echtzeit das Ergebnis anschauen.
mrtux
Grundsätzlich gibt es immer noch Unterschiede bei der Darstellung zwischen den verschiedenen Browsern bzw. Rendering-Engines. Notfalls musst Du mit einer Browserweiche arbeiten. Um aber zumindest die Feinheiten der Gecko-Engine herauszukitzeln, kannst Du das Firefox Add-On Firebug verwenden. Damit kannst Du schnell mal Änderungen an deinem HTML/CSS vornehmen und quasi in Echtzeit das Ergebnis anschauen.
mrtux
Guten Morgen,
habe noch ein wenig überarbeitet. Nur den Punkt bzgl. deiner Navigation und dem Hover, da fehlt mir die Zeit im Moment zu. Aber ich vergesse es nicht. Aber vielleicht hilft ja noch jemand anders mit.
Aber schau dir die CSS-Datei mal von hier an:
http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm
Dort entferne bei
und bei
Sollte dann deinen gewünschten Effekt liefern. Muss dann nur noch farblich angepasst werden.
Gruß
habe noch ein wenig überarbeitet. Nur den Punkt bzgl. deiner Navigation und dem Hover, da fehlt mir die Zeit im Moment zu. Aber ich vergesse es nicht. Aber vielleicht hilft ja noch jemand anders mit.
Aber schau dir die CSS-Datei mal von hier an:
http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm
Dort entferne bei
ul#Navigation li ul li {
das margin-bottom.und bei
ul#Navigation li {
das margin.Sollte dann deinen gewünschten Effekt liefern. Muss dann nur noch farblich angepasst werden.
Gruß
Vielen Dank ersteinmal für deine Hilfe, d4shoerncheN.
Ich werde den Code mal korregieren.
Ja, bei selfhtml war ich auch und ich habe ihn auch mit dem Code, meiner aktuellen Hauptseite verglichen, ob ich nicht vllt etwas anders als sonst gemacht habe, aber den Fehler fand ich wie gesagt nicht.
Achso, ein #ul navi li habe ich gar nicht. o.O
Ich werde den Code mal korregieren.
Ja, bei selfhtml war ich auch und ich habe ihn auch mit dem Code, meiner aktuellen Hauptseite verglichen, ob ich nicht vllt etwas anders als sonst gemacht habe, aber den Fehler fand ich wie gesagt nicht.
Achso, ein #ul navi li habe ich gar nicht. o.O
Hallo,
Gruß
Achso, ein #ul navi li habe ich gar nicht. o.O
Das war auch auf das CSS von SelfHTML bezogen. Wenn du 1 zu 1 die Datei von dort für deine Navigation übernehmen würdest. Dort befinden sich die oben genannten Punkte.Gruß
Hallo,
wie mir scheint hast du nun alles hin bekommen. Dann bitte die Frage als "gelöst" markieren.
Gruß
d4shoerncheN
wie mir scheint hast du nun alles hin bekommen. Dann bitte die Frage als "gelöst" markieren.
Gruß
d4shoerncheN
Zitat von @abbrechen:
Und zwar seht ihr die oberste Zeile, über der Navi (mit dem fb-Button), die möchte patu nicht an die Navi ran,
Kein Wunder, du hast um den fb-Button ja auch ein Div mit der ID media welches über die gesamte Breite von 800px geht!Und zwar seht ihr die oberste Zeile, über der Navi (mit dem fb-Button), die möchte patu nicht an die Navi ran,
Ohje, da liegt ja einiges im Magen!
So sollte es aber klappen:
#media {
background-color: #101010;
height: 70px;
padding: 0;
float: right;
position: relative;
right: 264px;
width: 80px;
.navi {
background-color: #101010;
float: left;
font-family: Headline;
font-size: 15px;
height: 70px;
margin-left: 240px;
position: relative;
width: 720px;
z-index: 5;
.naviwidth {
width: 180px;
z-index: 5;
}
#header {
background: url("Banner.png") no-repeat scroll center center #FFFFFF;
clear: left;
height: 200px;
margin-left: 240px;
margin-right: 150px;
width: 800px;
}
Den Hover musst du halt in der Breite jetzt auch noch anpassen weil es sonst eine Überlappung zum nächsten Menüpunkt gibt.
Generell hätte ich die Seite aber eh anders aufgebaut so dass der Content immer zentriert ist.
Was soll da nicht passen?
Du hast dem Div mit der ID inhalt eine Höhe von 300px gegeben, also wird das richtig dargestellt.
Willst du, dass der Footer (Div mit der ID footer) näher an den Inhalt rückt, dann müsstest du jetzt ja wissen woran es liegt und wie man es ausbessert.
Zitat von @abbrechen:
Beim Hover der Navi werdet ihr dann feststellen, dass das Submenu (beim Portfolio), sehr klein und zerstückelt angezeigt
wird, dabei sollte es eigntlich dieselbe Größe wie der Hover jedes Menüpunktes haben, was mich gleich zum
nächsten Problem führt: Dem Hover-Hintergrund.
Dieser sollte eigentlich so groß sein, dass er an den nächsten Navigationspunkt andockt, sodass es keine Lücken
gibt, wenn man zwischen den einzelnen Punkten switcht, tatsache ist jedoch, dass massive Lücken vorhanden sind.
Ich habe es schon mit einigen Varianten probiert, um das zu beheben, auch mit margin und padding, leider erfolglos.
Kennt einer von euch die rettende Lösung?
das passt doch?!Beim Hover der Navi werdet ihr dann feststellen, dass das Submenu (beim Portfolio), sehr klein und zerstückelt angezeigt
wird, dabei sollte es eigntlich dieselbe Größe wie der Hover jedes Menüpunktes haben, was mich gleich zum
nächsten Problem führt: Dem Hover-Hintergrund.
Dieser sollte eigentlich so groß sein, dass er an den nächsten Navigationspunkt andockt, sodass es keine Lücken
gibt, wenn man zwischen den einzelnen Punkten switcht, tatsache ist jedoch, dass massive Lücken vorhanden sind.
Ich habe es schon mit einigen Varianten probiert, um das zu beheben, auch mit margin und padding, leider erfolglos.
Kennt einer von euch die rettende Lösung?
PS: Ich hab mir das Ganze jetzt nur im Firefox 15.x angeschaut!
PPS: Lern CSS!
Danke noch mal für die Hilfe und es hat dann auch irgendwie geklappt, es dauert wohl noch, bis ich im css sehr gut bin. ;)
Meine Seite sieht bislang wie folgt aus: http://abbrechen-entertainment.com/
Meine Seite sieht bislang wie folgt aus: http://abbrechen-entertainment.com/
