abbrechen
Goto Top

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.

Content-ID: 188104

Url: https://administrator.de/forum/finde-den-wurm-im-css-code-nicht-188104.html

Ausgedruckt am: 23.12.2024 um 05:12 Uhr

d4shoerncheN
d4shoerncheN 16.07.2012, aktualisiert am 17.07.2012 um 08:08:31 Uhr
Goto Top
Hallo,

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.
mrtux
mrtux 16.07.2012 aktualisiert um 22:22:53 Uhr
Goto Top
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
d4shoerncheN
d4shoerncheN 17.07.2012 aktualisiert um 08:19:25 Uhr
Goto Top
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
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ß
abbrechen
abbrechen 19.07.2012 aktualisiert um 16:00:20 Uhr
Goto Top
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
d4shoerncheN
d4shoerncheN 19.07.2012 um 16:08:30 Uhr
Goto Top
Hallo,

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ß
d4shoerncheN
d4shoerncheN 07.08.2012 um 13:50:02 Uhr
Goto Top
Hallo,

wie mir scheint hast du nun alles hin bekommen. Dann bitte die Frage als "gelöst" markieren.


Gruß
d4shoerncheN
Oli-nux
Oli-nux 30.09.2012 um 13:21:01 Uhr
Goto Top
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!
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.face-wink

Generell hätte ich die Seite aber eh anders aufgebaut so dass der Content immer zentriert ist.face-wink

Zitat von @abbrechen:
ebenso der Footer, in dem das Impressum, usw. steht.
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.face-wink

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?!

PS: Ich hab mir das Ganze jetzt nur im Firefox 15.x angeschaut!
PPS: Lern CSS!face-big-smile
abbrechen
abbrechen 18.10.2012 um 16:43:37 Uhr
Goto Top
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/