Probleme mit div bereichen

[JG]

Hallo zusammen,
ich habe folgendes Problem:
Ich sitze seit Tagen an der Realisierung eines Dynamischen Menüs, das heißt bei mir, der Menülink soll sich dynamisch an seinen Inhalt anpassen.

Ich habe 3 Div Bereiche einen Links (1) vom Div, wo sich das background-image nicht weiterkopieren soll. Einen in der Mitte (2) wo sich das background-image weiterkopieren soll. Und einen rechts vom Link wo sich das Background-Image ebefalls nicht weiterkopieren soll.

Hier mal ein Beispiel wie der Div Bereich angeordnet ist:

----------------------------------------------
|(1)| Link1 (2)| (3) | (1)| Link2 (2)| (3)| usw.
----------------------------------------------

Das Funktioniert auch soweit, nur der rechte Div (3) Bereich ist nur beim ersten und dritten Link richtig, da diese gleichlang sind, aber beim mittleren ist die dritte Grafik dort wo sie bei Link 1 und 3 auch ist.

Ein Beispiel hab ich hochgeladen unter: www.gran-world.de/new
die CSS Datei ist unter www.gran-world.de/new/css/design.css

Danke im Vorraus

Gruß Julian

[Nico]

Hallo Julian,

das ist m.E. zu kompliziert gedacht (und außerdem stark fehlerhaft; s.u.). Geh z.B. so vor:

1. HTML-Code:
<ul id="navigation">
<li><a href="link1.html"><span>Linktext 1</span></a>
<li><a href="link2.html"><span>Linktext 2</span></a>
<li><a href="link3.html"><span>Linktext 3</span></a>
</ul>

2. Bilddatei:
Erzeuge _eine_ Bilddatei, die links die linke abgerundete Ecke hat, rechts die rechte abgerundete Ecke und in der Mitte eine ruhig 200px oder 300px lange Gerade. Achte darauf dass sie genügend hoch ist.

3. CSS-Formatierung:
#navigaton a { background: url(hintergrund.jpg) 100% 0% no-repeat;
  display: block; }
#navigation a span { background: url(hintergrund.jpg) 0% 0% no-repeat;
  display: block; }

Da musst du bestimmt noch ein bisschen dran feilen. Aber so ungefähr dürfte es funktionieren.

Ferner solltest du darauf achten, valides HTML zu schreiben. Der W3-Validator findet 11 Fehler.

Ciao

Nico

[Detlef G.]

Hallo Nico

das ist m.E. zu kompliziert gedacht (und außerdem stark fehlerhaft; s.u.). Geh z.B. so vor:

Auch du denkst noch komplizierter als wirklich nötig.

1. HTML-Code:
   <ul id="navigation">
   <li><a href="link1.html"><span>Linktext 1</span></a>
   <li><a href="link2.html"><span>Linktext 2</span></a>
   <li><a href="link3.html"><span>Linktext 3</span></a>
   </ul>

Wozu brauchen wir das span?

1. HTML-Code:

<ul id="navigation">  
<li><a href="link1.html">Linktext 1</a></li>  
<li><a href="link2.html">Linktext 2</a></li>  
<li><a href="link3.html">Linktext 3</a></li>  
</ul>  

3. CSS-Formatierung:

#navigaton li {  
  background: url(hintergrund.jpg) right top no-repeat;  
  padding-right:13px;  
}  
#navigation a {  
  display: block;  
  background: url(hintergrund.jpg) left top no-repeat;  
  padding-left:13px;  
}  

Auf Wiederlesen
Detlef

[Nico]

Auch du denkst noch komplizierter als wirklich nötig.

Recht hast du! :-)
N

[JG]

Gut ich kann die Div Bereiche jetzt durch span bereiche ersetzten aber trozdem kommen Sie dann noch mehrfach vor, was bei dem Test von Nico ja als Fehler angezeigt wurde. Und ich brauche ja drei bereiche, weil ich 3 verschiedene Hintergründe habe.

Gruß Julian

[wahsaga]

hi,

Gut ich kann die Div Bereiche jetzt durch span bereiche ersetzten aber trozdem kommen Sie dann noch mehrfach vor, was bei dem Test von Nico ja als Fehler angezeigt wurde.

Vielleicht solltest du die Fehlermeldungen erst mal verstehen, bevor du in (ohne das sinnlosen) Aktionismus verfällst.

Die mehrfache Verwendung einer ID innerhalb eines HTML-Dokumentes ist nicht erlaubt - mit dem mehrfachen Auftauchen von HTML-Elementen wie Div hat das nichts zu tun, und auch ein Ersetzen von Div durch Span würde an diesem Fehler nichts ändern.

gruß,
wahsaga

[JG]

Die mehrfache Verwendung einer ID innerhalb eines HTML-Dokumentes ist nicht erlaubt - mit dem mehrfachen Auftauchen von HTML-Elementen wie Div hat das nichts zu tun, und auch ein Ersetzen von Div durch Span würde an diesem Fehler nichts ändern.

Das ist mir auch klar, aber gibt es da ne andere möglichkeit?

Danke für die bisherigen antworten

[Daniel]

Ahoi JG,

Das ist mir auch klar, aber gibt es da ne andere möglichkeit?

Klassen ermöglichen dies.

MfG

[JG]

Ahoi JG,

Das ist mir auch klar, aber gibt es da ne andere möglichkeit?

Klassen ermöglichen dies.

MfG

ahso ;-)
Danke, ich hab zwar schon mal damit gearbeitet, aber der unterschied war mir noch net so klar.

Vielen Dank

[JG]

Servus,
also habs für den IE jetzt hinbekommen nur im Feuerfux sieht es katastrophal aus. *help*

Danke für die Zahlreichen antworten.

Gruß Julian