✔ Transparente Bilder - automatische div-Höhe

N

NTDY

Erfahrenes Mitglied
Ich habe ein 3 spaltiges HTML-Gerüst, welches an den Rändern transparente Bilder besitzt. (siehe Anhang problem.png)
Kennt jemand eine Möglichkeit, dass sich die Hintergrundbilder automatisch nach unten vergrößern?

Ich habe bereits gute Quellen gelesen, die vorschlagen, dass man um die äußere Div-Box ein Hintergrundbild legen soll:
http://www.alistapart.com/articles/fauxcolumns/
Die Option fällt bei mir leider aus, da sich bei der Anwendung die transparenten Bilder überlagern. (siehe Anhang problem2.png)
 

Anhänge

  • problem.png
    problem.png
    44,5 KB · Aufrufe: 41
  • problem2.png
    problem2.png
    43,2 KB · Aufrufe: 36
Die von Dir vorgeschlagenen Quellen sind exzellent. Mein Problemfall scheint aber nicht aufgeführt zu sein.

Ich habe versucht das Problem anhand des folgenden Codes zusammen zu fassen.
Hier möchte, dass sich links-box2 und rechts-box2 automatisch vergrößern.
(In ausgehenden Beispiel befinden sich darin jeweils Hintergrundbilder, die zur y-Achse gekachelt werden.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body{
	margin:0;
	padding:0;
}
.rand {
	width: 800px;
	background-color:#9FF;
	margin: 0 auto;
}

ul{
	margin:0;
	padding:0;
	list-style:none;
}

p{
	margin:0;
	padding:0;
}

.links {
	width: 200px;
	float:left;
	background-color:#CCC;
}

.mitte {
	width: 400px;
	float:left;
	background-color:#DDD;
}

.rechts {
	width: 200px;
	float:left;
	background-color:#EEE;
}

.links-box1 {
	background-color:#0FF;
}

.links-box2 {
	background-color:#0CF;
}

.links-box3 {
	background-color:#0DF;
}

.rechts-box1 {
	background-color:#0F9;
}

.rechts-box2 {
	background-color:#0C6;
}

.rechts-box3 {
	background-color:#0D3;
}
</style>
</head>

<body>
	<div class="rand">
    	<div class="links">
        	<div class="links-box1">
            	<ul>
                	<li>Menu1</li>
                	<li>Menu2</li>
                	<li>Menu3</li>
                	<li>Menu4</li>
                	<li>Menu5</li>
                	<li>Menu6</li>                                                                                                    
                </ul>
            </div>
        	<div class="links-box2">AUTOMATISCH AUFFÜLLEN</div> 
        	<div class="links-box3">
            	<p>Ein wenig Text zum Auflockern.</p>
            	<p>Ein wenig Text zum Auflockern.</p>
            	<p>Ein wenig Text zum Auflockern.</p>
            	<p>Ein wenig Text zum Auflockern.</p>                                                
            </div>                                    
        </div>
        
        <div class="mitte">
        <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.        
        </p>
        <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.        
        </p>        
        </div>
        <div class="rechts">
        	<div class="rechts-box1">
            	<ul>
                	<li>Menu1</li>
                	<li>Menu2</li>
                	<li>Menu3</li>
                	<li>Menu4</li>
                	<li>Menu5</li>
                	<li>Menu6</li>                                                                                                    
                </ul>
            </div>
        	<div class="rechts-box2">AUTOMATISCH AUFFÜLLEN</div>          
        	<div class="rechts-box3">
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
            </div>                      
        </div>
    </div>
</body>
</html>
 
Da es sich um ein Layout mit fester Breite handelt, hast du die Möglichkeit, die unteren Hintergrundbilder der drei Spaltenblöcke zu einer Bilddatei zusammenzufügen, und diese als Hintergrundbild für .rand zu nutzen, das an dessen unteren Boxenrand positioniert wird.

Die zwischenliegenden Blöcke .links-box2 und .rechts-box2 lassen sich so nicht automatisch auffüllen.

NTDY hat gesagt.:
Die von Dir vorgeschlagenen Quellen sind exzellent. Mein Problemfall scheint aber nicht aufgeführt zu sein.
Zum Vergrößern anklicken....
Mein empfohlener Artikel beschäftigt sich auch nicht mit allen denkbaren Problemfällen in der Praxis, sondern nennt im Grundsatz Techniken, um die Spaltenhöhen optisch automatisch anzugleichen.

mfg Maik
 
Ich bin leider mit den Quellen nicht vorwärts gekommen.
Ich überlege, ob das Problem mit CSS-Elementen wie: table, table-row, table-cell zu lösen ist.
Problem ist halt stets, dass ich mit transparenten Rändern arbeite
 
Mmh, für meinen gestrigen letzten Beitrag hast du dich per Bewertung bedankt, und das Thema als erledigt markiert :confused:

Wenn dir die transparenten Flächen innerhalb der Bilddateien Probleme bereiten, dann solltest du vielleicht auf sie verzichten.

mfg Maik
 
Der Ansatz Transparenz teilweise übereinander zu lagern ist in der Tag ein interessanter Ansatz.
Vielen Dank für diesen Tipp.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück