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, 2777 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 ..
Neuester Wissensbeitrag
Internet

Unbemerkt - Telekom Netzumschaltung! - BNG - Broadband Network Gateway

(3)

Erfahrungsbericht von ashnod zum Thema Internet ...

Ähnliche Inhalte
Erkennung und -Abwehr
Port 7547 SOAP Remote Code Execution Attack Against DSL Modems Internet Storm Center (5)

Link von Lochkartenstanzer zum Thema Erkennung und -Abwehr ...

Batch & Shell
gelöst Findstr - code für schwieriger Abfrage gesucht (9)

Frage von reissaus73 zum Thema Batch & Shell ...

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

Frage von Flodsche zum Thema CSS ...

Suse
gelöst SquidGuard filtert CSS (3)

Frage von killtec zum Thema Suse ...

Heiß diskutierte Inhalte
Switche und Hubs
Trunk für 2xCisco Switch. Wo liegt der Fehler? (17)

Frage von JayyyH zum Thema Switche und Hubs ...

Windows Server
Outlook Verbindungsversuch mit Exchange (15)

Frage von xbast1x zum Thema Windows Server ...

DSL, VDSL
DSL-Signal bewerten (14)

Frage von SarekHL zum Thema DSL, VDSL ...