Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Finde den Wurm im css-Code nicht

Frage Entwicklung CSS

Mitglied: abbrechen

abbrechen (Level 1) - Jetzt verbinden

16.07.2012, aktualisiert 24.07.2012, 2797 Aufrufe, 8 Kommentare

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.
Mitglied: d4shoerncheN
16.07.2012, aktualisiert 17.07.2012
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.
Bitte warten ..
Mitglied: mrtux
16.07.2012, aktualisiert um 22:22 Uhr
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
Bitte warten ..
Mitglied: d4shoerncheN
17.07.2012, aktualisiert um 08:19 Uhr
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ß
Bitte warten ..
Mitglied: abbrechen
19.07.2012, aktualisiert um 16:00 Uhr
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
Bitte warten ..
Mitglied: d4shoerncheN
19.07.2012 um 16:08 Uhr
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ß
Bitte warten ..
Mitglied: d4shoerncheN
07.08.2012 um 13:50 Uhr
Hallo,

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


Gruß
d4shoerncheN
Bitte warten ..
Mitglied: Oli-nux
30.09.2012 um 13:21 Uhr
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.

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

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.

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!
Bitte warten ..
Mitglied: abbrechen
18.10.2012 um 16:43 Uhr
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/
Bitte warten ..
Ähnliche Inhalte
CSS
CSS Background-image erscheint einfach nicht (3)

Frage von MyApps2GO.de zum Thema CSS ...

HTML
gelöst Angebundenes CSS funktioniert nach Link nicht mehr (4)

Frage von fugu zum Thema HTML ...

Entwicklung
gelöst IOS WebApp lädt CSS nicht mit (2)

Frage von maddig zum Thema Entwicklung ...

CSS
gelöst Jimdo Webseiten Header per css verkleinern (6)

Frage von Flodsche zum Thema CSS ...

Neue Wissensbeiträge
Heiß diskutierte Inhalte
Internet
gelöst Jeden morgen Internet-Probleme (59)

Frage von pjrtvly zum Thema Internet ...

DSL, VDSL
VDSL Signal via PowerLine an Fritzbox - Möglich? (19)

Frage von Seichobob zum Thema DSL, VDSL ...

Windows Server
Benutzer sperrt sich immer wieder im Active Directory Contoller (18)

Frage von Kirdy1301 zum Thema Windows Server ...