tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
543
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 08.10.07 22:27 #1
    Philipp- Tutorials.de Gastzugang
    Liebe Community,

    habe mal wieder ein Problem. Habe folgenden Code:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

    <style type="text/css">
.forumTop {
    background-image:url(wcf/images/ph1.0/forumTop.png);
    background-repeat:no-repeat;
    height:20px;
    width:500px;
    }
    
.content {
    width:500px;
    height:auto !important;
    }
    
.content ul li {
    list-style:none;
    float:left;
    }
    
.content ul {
    padding:0;
    margin:0;
    }
    
.forumLeft {
    background-image:url(wcf/images/ph1.0/forumLeft.png);
    background-repeat:repeat-y; 
    width:20px;
    }
    
.forum {
    width:460px;
    height:auto !important;
    }
    
.forumRight {
    background-image:url(wcf/images/ph1.0/forumRight.png);
    background-repeat:repeat-y; 
    width:20px;
    }
    
.forumBottom {
    clear:both;
    background-image:url(wcf/images/ph1.0/forumBottom.png);
    background-repeat:no-repeat;
    height:20px;
    width:500px;
    }       
</style>
<div style="width:500px;">
 <div class="forumTop">[-] Kategorie Titel</div>
 <div class="content">
  <ul>
   <li class="forumLeft">-</li>
   <li class="forum">Inhalt d. Forums</li>
   <li class="forumRight">-</li>
  </ul>
 </div>
 <div class="forumBottom">Forum Bottom</div>
</div>

    Nun will ich dass die Klassen forumLeft, forum, und forumRight immer gleich Groß sind. D.h. ich will, dass wenn sich der Inhalt der Klasse forum vergrößert, also weiter nach unten geht, dass dann die beiden anderen Klassen automatisch die selbe Höhe annehmen.
    Könnt ihr mir vllt weiterhelfen?
    Wäre wirklich nett.

    mfg
    Philipp
     
  2. 08.10.07 22:36 #2
    Maik Tutorials.de Gastzugang
    Hi,

    mit der Fauxcolumns-Technik ist das kein Problem.

    Hierfür werden die Hintergrundbilder der linken und rechten Spalte in einer Grafik (500*1px) vereint (hier "3cols.png" genannt) und diese als Hintergrundbild im DIV .content eingesetzt.

    Zusätzlich ist http://positioniseverything.net/easyclearing.html erforderlich, um die Floatumgebung zum Abschluss zu "clearen":

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    .content {
        width:500px;
        height:auto !important;
        background:url(wcf/images/ph1.0/3cols.png) repeat-y;
        }
 
.forumLeft, .forumRight {
        width:20px;
        }
 
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
 
.clearfix {display: inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
    Code :
    1
2
3
4
5
6
7

    <div class="content [b]clearfix[/b]">
  <ul>
   <li class="forumLeft">-</li>
   <li class="forum">Inhalt d. Forums</li>
   <li class="forumRight">-</li>
  </ul>
</div>
     
« CSS Menuproblem im IE6 & Safari (Superfish) | background bei <tr> »

Ähnliche Themen

  1. Webseite verlängern
    Von MechanU im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 21.04.09, 16:09
  2. Session verlängern
    Von just-click im Forum PHP
    Antworten: 2
    Letzter Beitrag: 24.12.08, 17:39
  3. Seite Verlängern
    Von Philipp- im Forum CSS
    Antworten: 3
    Letzter Beitrag: 03.06.08, 22:10
  4. Zeit verlängern
    Von Sharoshi im Forum Cinema 4D
    Antworten: 29
    Letzter Beitrag: 20.04.08, 12:05
  5. linie verlängern...
    Von Montz im Forum Flash Plattform
    Antworten: 2
    Letzter Beitrag: 28.08.01, 12:56