mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 10:39 Benutzername: Passwort: Auto-Login

Thema: CSS Problem: Waagerechte Navigation mit Hintergrund vom 26.05.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Problem: Waagerechte Navigation mit Hintergrund
Autor Nachricht
netnite
Threadersteller

Dabei seit: 24.12.2005
Ort: Thüringen
Alter: 43
Geschlecht: Männlich
Verfasst Mo 26.05.2008 18:59
Titel

CSS Problem: Waagerechte Navigation mit Hintergrund

 Antworten mit Zitat Zum Seitenanfang
Hab folgendes Problem.

Ich habe eine Navigation aus Listenpunkten die Waagerecht dargestellt werden soll. Hab schon unzählige Versionen probiert mit Float und Display: block; etc etc. Nix funktioniert. Ich bekomme die die Navigation nicht waagerecht.

Hier mal die testseite:
http://marcushesse.de/test/test.html

Hier mal die CSS Definitionen:

Code:

div#navihead {
height:68px;
border: 1px solid #000000;
position: relative;
display: block;
}

#navi
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

#navi li
{
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;


}

#navi li a
{
    margin: 0;
    padding: 0;
    height: 68px;
    background-repeat: no-repeat;
    background-position: left top;
    text-indent: -9999px;

}

#navi .marcus { background-image: url(../images/about-us.jpg); height:68px; width:94px; }
#navi .uwe { background-image: url(../images/family.jpg)}
#navi .auto { background-image: url(../images/advice.jpg) }
#navi .team { background-image: url(../images/health.jpg) }
#navi .galerie { background-image: url(../images/contacts.jpg) }


#navi .marcus:hover { background-image: url(../images/about-us-over.jpg) }
#navi .uwe:hover { background-image: url(../images/family-over.jpg) }
#navi .auto:hover { background-image: url(../images/advice-over.jpg) }
#navi .team:hover { background-image: url(../images/health-over.jpg) }
#navi .galerie:hover { background-image: url(../images/contacts-over.jpg) }


So zeigt der Browser die Hintergrundgrafiken untereinander an, anstatt nebeneinander. Mit float:left sind sie komplett verschwunden.

Zuletzt bearbeitet von netnite am Mo 26.05.2008 19:01, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
koshie

Dabei seit: 29.06.2007
Ort: Unter der Brücke
Alter: -
Geschlecht: Männlich
Verfasst Mo 26.05.2008 19:04
Titel

Antworten mit Zitat Zum Seitenanfang
eigentlich sollte das mit float:left; im li gehen. Nur seltsam, dass die dann verschwinden... lass mal das display:inline; weg? Sonst fällt mir grad nichts ein.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
netnite
Threadersteller

Dabei seit: 24.12.2005
Ort: Thüringen
Alter: 43
Geschlecht: Männlich
Verfasst Mo 26.05.2008 19:17
Titel

Antworten mit Zitat Zum Seitenanfang
Hab das li mal geändert, sieht jetzt so aus:

Code:
#navi li
{
    margin: 0;
    padding: 0;
    float:left;
    list-style-type: none;


}


Und raus kommt das hier:




Der erste Button wird angezeigt, die anderen sind verschwunden!

Zuletzt bearbeitet von netnite am Mo 26.05.2008 19:17, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
netnite
Threadersteller

Dabei seit: 24.12.2005
Ort: Thüringen
Alter: 43
Geschlecht: Männlich
Verfasst Di 27.05.2008 09:05
Titel

Antworten mit Zitat Zum Seitenanfang
Keiner mehr eine Idee?
  View user's profile Private Nachricht senden
accessoire

Dabei seit: 05.02.2007
Ort: -
Alter: 34
Geschlecht: Männlich
Verfasst Di 27.05.2008 09:11
Titel

Antworten mit Zitat Zum Seitenanfang
Ich habs mir jetzt zwar nicht genau angeschaut (da du wohl ohnehin bessere CSS-Kenntnisse besitzt als ich), aber als ich es im HTML-Validator geöffnet habe, ist mir als allererstes aufgefallen, dass du einen Fehler im Dokument hast: Kein Doctype angegeben. Vielleicht liegt es daran.
  View user's profile Private Nachricht senden
Snifferdog

Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht: Männlich
Verfasst Di 27.05.2008 09:31
Titel

Antworten mit Zitat Zum Seitenanfang
Hallo,

allsoo ich hab mir einfach mal deinen Quelltext kopiert und ein bisschen rumgeguckt woran es liegen könnte...
ich hab ein paar Sachen gefunden und bei mir funktionierts jetzt ...

also erstmal fehlt bei dir hinter jedem #navi .... background ein Semikolon ...
dann muss display:block überall raus, denn das erzeugt ja genau das Gegenteil von dem was du willst.
Bock zwingt ja das nächste Element in der nächsten Zeile anzufangen.


Ich guck gleich nochmal genauer .. aber das sollte es eigentlich sein *zwinker*
Gruß

EDIT: So hab jetzt nochmal geschaut welche Änderung genau es war.... ich hab sonst einfach nur ein float: left; bei #navi li hinzugefügt und das wars *zwinker*

EDIT 2: Sorry hatte übersehen, dass dus auch schon hast .. natürlich musst du deinen Elementen dann auch eine Größe zuweisen sonst sind sie nicht mehr sichtbar *zwinker* Momentan hast du nur dem ersten eine Größe gegeben.

Zuletzt bearbeitet von Snifferdog am Di 27.05.2008 09:51, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Di 27.05.2008 11:08
Titel

Antworten mit Zitat Zum Seitenanfang
Wie man eine Grafik-Navigation erstellt, findet sich in diesem Beitrag von mir (man verzeihe mir den Link auf's "Fremd-Forum"): http://xhtmlforum.de/40267-faq-h-ufig-gestellte-fragen-und.html#post296439 (letztes Drittel)
  View user's profile Private Nachricht senden
 
Ähnliche Themen CCS Problem in der Navigation mit IE
IE Problem mit CSS Navigation
[CSS] Problem mit Navigation
Problem mit Navigation
problem mit listen navigation
[css] Problem mit Navigation (solved)
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB