✔ DIV-Hintergrund aus 3 Grafiken automatisch anpassen

G

Godstyle

Erfahrenes Mitglied
Moin Leute,

mein vorhaben ist das ich einem Div Container ein Hintergrund verpassse, dieser besteht aus 3 Grafiken. Der Oberste bereich, dann der text Hintergrund Bereich und zuletzt der abschluss Bereich.
Da ich via JS die Höhe des Divs verändere da andere zeilen eingefügt werden muss sich auch die Mittlere Grafik verändern in der Höhe.

div container:

Code: 
<div id="div1" class="divbg"><span><span>
<ul>
    <li>
        <a href="#" onclick="show('cat1')">Test 1</a>
        <div id="cat1" style="display:none">Test 1</div>
    </li>
    <li>
        <a href="#" onclick="show('cat2')">test 2</a>
        <div id="cat2" style="display:none">Test 2</div>
    </li>
</ul></span></span></div>

nun der css teil:

Code: 
a.divbg {   
 background: transparent url('../img/bot.png') no-repeat scroll top right;    
 color: #444;  
 padding-top: 15px;   
 text-decoration: none;
 } 
 a.divbg span {    
 background: transparent url('../img/topf.png') no-repeat top left;   
  float:left;    
  height: 20px;   
   padding: 15px 0 0 0;
   } 
   a.divbg span span {    
   background: transparent url('../img/mid.jpg') repeat-x top left;    
   display: block;    
	}

leider zeigt er mir gar nichts an.

Hoffe die Erfahrenen User können mir weiter helfen.

lg
 
Godstyle hat gesagt.:
leider zeigt er mir gar nichts an.
Zum Vergrößern anklicken....
Der Browser zeigt nichts, weil du in den drei Selektoren das <a>-Element anstelle des <div>-Elements vor dem Klassenbezeichner .divbg angegeben hast.

Somit existiert hier keine Übereinstimmung mit deinem Markup, und die Regelblöcke werden daher nicht angewendet.

mfg Maik
 
Danke Maik,

habe es umgehend geändert, nun hat er mir die Wörter übereinander geschrieben aber die grafiken nicht eingebunden.
 
Kannst du das bitte irgendwo online stellen, damit ich es auch direkt und live begutachten kann?

mfg Maik
 
Ich habe das problem mit dem überschreiben gelöst, es lag an line hight habe es rausgenommen und nun geht es. aber die grafiken liest er mir nicht ein.
Die pfade stimmen habe es mit dreamweaver cs5 gemacht und die grafiken direkt ausgewählt.

habe derzeit leider keinen online server
 
Wem oder was nützt die schickeste Website ohne einen Server im Netz auf dem lokalen Entwicklungsserver (z.B. XAMPP) :suspekt:

Anyway, dann pack bitte den HTML-/CSS-Code, sowie die Grafikdateien in ein ZIP-Archiv, und lad es hier als Anhang hoch.

Wenn ich sie mir gezogen habe, kannst du sie auch gerne direkt wieder entfernen, falls die Seite noch nicht für die breite Öffentlichkeit bestimmt ist ;-)

mfg Maik
 
ansicht ist im anhang.

css:

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

datei:

PHP: 
<div id="votecat" class="button"><span><span>
<ul>
    <li>
        <a href="#" onclick="show('cat1')">Allgemein</a>
        <div id="cat1" style="display:none">Allgemein</div>
    </li>
    <li>
        <a href="#" onclick="show('cat2')">Gesicht</a>
        <div id="cat2" style="display:none">Gesicht</div>
    </li>
</ul></span></span></div>
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    8,9 KB · Aufrufe: 195
Könntest du meiner Bitte nachkommen, die Grafikdateien hier hochzuladen, die in deinem CSS genannt sind, anstelle des Schnappschußes? :rolleyes:

Aus Jux und Dollerei hab ich dich schließlich nicht darum gebeten.

mfg Maik
 
Code: 
div.button {   
 background: transparent url('../img/top.png') no-repeat scroll top right;    
 color: #444;
 overflow:      
 text-decoration: none;
 }
Das hängt jetzt zwar nicht unmittelbar und direkt mit dem Problem zusammen, aber dir ist doch wohl bekannt, dass die rotmarkierte Zeile in dieser Form und ohne das Semikolon am Zeilenende den Abbruch der Browserinterpretation für alle nachfolgenden Regeln innerhalb dieses Deklarationsblockes bedeutet?

Aus diesem Grund ist es in einer solchen Regelmenge auschließlich der letztgenannten Regel vorbehalten, ohne Semikolon angegeben zu werden, weil die darauffolgende }-Klammer diesen Deklarationsblock schließt.

Hier dreht es sich zwar nur um text-decoration:none, was eh der Voreinstellung eines DIV-Elements entspricht, seinen enthaltenden Text nicht zu unterstreichen , aber ebenso könnten da auch relevante Regeln folgen, wie z.B. das Hintergrundbild.

Außerdem dürfen grundsätzlich Inline-Elemente (hier: <span> keine Block-Elemente (hier: <ul>, <div>) enthalten, sondern nur weitere Elementypen dieser Art, oder Text.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück