✔ DIV-Hintergrund aus 3 Grafiken automatisch anpassen

Ok danke,

nur anders habe ich keine Ahnung wie ich mein vorhaben realisieren soll.
Werd mir was anderes einfallen lassen müssen.

danke trotzdem.

lg
 
Im ersten Schritt hab ich mal das angesprochene Markup validiert, sprich <span></span> durch <div></div ersetzt, damit darin weitere Block-Elemente folgen dürfen:
HTML: 
<div id="votecat" class="button"><div><div>
<ul>
...
</ul>
</div></div></div>


Und das mittlere Hintergrundbild soll doch sicherlich in seinem Anzeigebereich vertikal wiederholt werden, womit die Anweisung repeat-y anstelle von repeat-x lautet:
CSS: 
div.button {
 background: transparent url('../img/top.png') no-repeat scroll top right;
 color: #444;
 text-decoration: none;
 }
 div.button div {
 background: transparent url('../img/top.png') no-repeat top left;
  float:left;
   padding: 15px 0 0 0 ;
   }
   div.button div div {
   background: transparent url('../img/mid.jpg') repeat-y top left;
   display: block;
        }


mfg Maik
 
habe ess sofort versucht, es kommt der sache recht nahe.

jedoch:

padding: 15px 0 0 0 ;

sorgt für einen unerwünschten effekt. sobald ich einen Oberlink anklicke ist ein abstand von 15px zum unterlink.
Wenn ich 15 auf 0 setze verschwindet der gelbe Top balken.
Ebenfalls fehlt der Abschliesende gelbe Balken.

Mit span hat es im Horizontalen bereich so immer geklappt.

lg
 
Für eines der beiden "top.png"-Hintergrundbilder muß zumindest schon mal die vertikale Hintergrundposition bottom, und nicht top lauten, damit es an den unteren Boxenrand rückt.

mfg Maik
 
sry, ich denke ich bin grade echt zu blöd dafür.

PHP: 
div.button {
 background: transparent url('../img/top.png') no-repeat scroll bottom left;
 color: #444;
 text-decoration: none;
 }
 div.button div {
 background: transparent url('../img/top.png') no-repeat top left;
  float:left;
   padding: 15px 0 0 0 ;
   }
   div.button div div {
   background: transparent url('../img/mid.jpg') repeat-y top left;
   display: block;
        }

wenn ich das untere Top gegen bottom ändere zeigt er top.png gar nicht mehr an. Der abstand von 15px auf den oberlink behält er auch bei. setze ich ihn auf 0 zeigt er mir top.png nicht an dafür stimmt der abstand wieder...
 
Ich hab's in der Zwischenzeit auf diese Weise umgesetzt ;-)

CSS: 
div.button {
 background:url('../img/mid.jpg') repeat-y top left;
 overflow:hidden;
 color:#444;
 float:left;
}
div.button div {
 background:url('../img/top.png') no-repeat scroll top right;
 float:left;
}
div.button div div {
 background:url('../img/top.png') no-repeat bottom left;
 padding:15px 0;
 float:left;
}
div.button div div ul div { 
background:none;
float:none;
padding:0;
}

mfg Maik
 
den unteren gelben balken sehe ich nun auch.

padding:15px 0;

verursacht immer noch einen Abstand unter und Oberhalb des unterlinks.

und wenn ich auf 7 <li> erweitere setzt er den 7ten in den 6ten unter link mit rein. Nehme ich den 7ten und 6ten raus macht er den fehler im 5ten li tag somit muss es der fehler im css bereich liegen.

Im Anhang sind die aktuellen codes
 
Bei dir fehlen die beiden zuletzt genannten Regeln für diesen Selektor, der den ein- und auszublendenden DIV-Block innerhalb der Listenstruktur definiert, und der in diesen drei CSS-Eigenschaften nicht der Formatierung seiner übergeordneten DIV-Blöcke entsprechen / folgen soll.
CSS: 
div.button div div ul div {
background:none; /* kein Hintergrundbild */
float:none; /* kein Umfluß */
padding:0; /* kein vertikaler Innenabstand */
}

mfg Maik
 
endlich, nun hab auch ich es kapiert, werde nun alles durch gehen um sicher zu sein das ich es alles verstehe und beim nächsten mal selbst schaffe. Ich danke dir von ganzem Herzen .
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück