tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
7
ZUGRIFFE
635
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 06.04.10 10:31 #1
    NTDY NTDY ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    no-comment
    Beiträge
    136
    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)
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Transparente Bilder - automatische div-Höhe-problem.png   Transparente Bilder - automatische div-Höhe-problem2.png  

     
    Zitieren Zitieren
  2. 06.04.10 10:33 #2
    Maik Tutorials.de Gastzugang
    Hi,

    AnyColumnLongest listet noch weitere Techniken für dein Vorhaben auf.

    mfg Maik
     
    Zitieren Zitieren
  3. 06.04.10 11:36 #3
    NTDY NTDY ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    no-comment
    Beiträge
    136
    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-Code:
    <!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>
     
    Zitieren Zitieren
  4. 06.04.10 14:39 #4
    Maik Tutorials.de Gastzugang
    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.

    Zitat Zitat von NTDY Beitrag anzeigen
    Die von Dir vorgeschlagenen Quellen sind exzellent. Mein Problemfall scheint aber nicht aufgeführt zu sein.
    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
     
    Zitieren Zitieren
  5. 07.04.10 13:05 #5
    NTDY NTDY ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    no-comment
    Beiträge
    136
    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
     
    Zitieren Zitieren
  6. 07.04.10 13:07 #6
    Maik Tutorials.de Gastzugang
    Mmh, für meinen gestrigen letzten Beitrag hast du dich per Bewertung bedankt, und das Thema als erledigt markiert

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

    mfg Maik
     
    Zitieren Zitieren
  7. 07.04.10 16:04 #7
    Maik Tutorials.de Gastzugang
    Zitat Zitat von Maik Beitrag anzeigen
    Wenn dir die transparenten Flächen innerhalb der Bilddateien Probleme bereiten, dann solltest du vielleicht auf sie verzichten.
    Oder du orientierst dich mal an dem Beispiel http://www.paulhaxter.com/2008/07/25/cssframe/, wo ebenfalls transparente PNG-Grafiken genutzt, und mittels margin- und padding-Regeln die unerwünschten sichtbaren Überschneidungen der Boxen vermieden werden.

    mfg Maik
     
    Zitieren Zitieren
  8. 08.04.10 07:39 #8
    NTDY NTDY ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    no-comment
    Beiträge
    136
    Der Ansatz Transparenz teilweise übereinander zu lagern ist in der Tag ein interessanter Ansatz.
    Vielen Dank für diesen Tipp.
     
    Zitieren Zitieren
« PHP&MYSQL in Divs | Entfernen des Listenelements »

Ähnliche Themen

  1. C# - Transparente PNG-Bilder
    Von sebbi1234 im Forum .NET Windows Forms
    Antworten: 8
    Letzter Beitrag: 22.01.09, 14:10
  2. Transparente Bilder
    Von Developer_Y im Forum Stellenangebote (unentgeltlich)
    Antworten: 4
    Letzter Beitrag: 14.01.09, 15:35
  3. Transparente Bilder
    Von Snewi133 im Forum CSS
    Antworten: 5
    Letzter Beitrag: 27.11.07, 23:29
  4. Textfeld Automatische höhe?
    Von DD2k3 im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 06.04.07, 09:00
  5. textarea automatische höhe (autorows)
    Von pasciii im Forum HTML & XHTML
    Antworten: 5
    Letzter Beitrag: 07.11.03, 09:40

Stichworte