tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
5
ZUGRIFFE
377
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 16.11.07 11:13 #1
    Avatar von daflowjoe
    daflowjoe daflowjoe ist offline Mitglied Silber
    Registriert seit
    Apr 2007
    Beiträge
    95
    Hi,

    ich habe eine Layoutvorgabe. Diese soll ich ohne Tabellen etc umsetzen.
    Das Layout soll im Prinzip aus einer Spalte(links) bestehen die eine feste Höhe hat.
    Daneben sollen dann im Prinzip 3 Zeilen stehen. In der ersten Zeile der Header. In der zweiten Zeile 2 Spalten, dabei soll sich die jeweils höhere Spalte, also die die mehr Text enthält , der Größe der jeweils benachbarten Spalten anpassen. Danach folgt ein Footer..

    Bedingung ist, dass es im IE als auch im Firefox funktioniert.

    Ich habe es hinbekommen, dass es der Firefox packt, allerdings streikt der IE.

    Wer bekommt es hin?

    Mfg Joe
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Wer knackt dieses Layout ;)-layout_fh.jpg  
     
  2. 16.11.07 11:39 #2
    Avatar von mAu
    mAu mAu ist offline
    Registriert seit
    Mar 2002
    Ort
    Stuttgart (Baden-Württemberg)
    Beiträge
    984
    Blog-Einträge
    7
    Läuft bei mir im IE7 und Firefox
    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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Spaltenlayout</title>
        <style type="text/css">
        <!--
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #fff;
        }
        
        #spalte-fest {
            background-color: #f0f0f0;
            width: 50px;
            height: 500px;
            position: absolute;
        }
        
        #spalte-oben, #spalte-mitte, #spalte-unten {
            left: 50px;
            position: relative;
            width: 450px;
        }
        
        #spalte-oben {
            background-color: #333;
            color: #fff;                        
        }
        
        #spalte-mitte {
            background-color: #eee;
        }
        
        #spalte-mitte-links {
            background-color: lime;
            width: 225px;
            height: 100%;
        }
        
        #spalte-mitte-rechts {
            background-color: orange;
            width: 225px;
            height: 100%;
            left: 225px;
            top: 0;
            position: absolute;
        }
        
        #spalte-unten {
            background-color: #333;
            color: #fff;
        }
        -->
        </style>
    </head>
 
    <body>
        <div id="spalte-fest">
            <p>
                fest
            </p>
        </div>
        <div id="spalte-oben">
            <h1>Header</h1>
        </div>
        <div id="spalte-mitte">
            <div id="spalte-mitte-links">
                <p>
                    Text Text Text Text
                </p>
                <p>
                    Text Text Text Text
                </p>
            </div>
            <div id="spalte-mitte-rechts">
                <p>
                    Text Text Text Text
                </p>
            </div>
        </div>
        <div id="spalte-unten">
            <p>
                Footer
            </p>
        </div>
    </body>
</html>
     
    Gruß mAu


    ──────────────────────────
    Ich auf flickr

    * Unformatierten Quellcode schaue ich mir _nicht_ an!
    * Sollte ich euch bei einer Frage weitergeholfen haben, würde ich mich über eine positive Bewertung freuen.
     * Bitte die Netiquette beachten.
     * Vergesst nicht, beantwortete Fragen als erledigt zu markieren!
  3. 16.11.07 12:30 #3
    Avatar von daflowjoe
    daflowjoe daflowjoe ist offline Mitglied Silber
    Registriert seit
    Apr 2007
    Beiträge
    95
    hi,

    funktioniert bei mir leider nur im Firefox. Im IE ist der rechte Container leider nicht so hoch wie der linke der Grüne. Das sollte allerdings genauso sein, wie im Firefox. =) Das is ja das Problem! *g

    Hat jemand noch eine andere Lösung?
    Geändert von daflowjoe (16.11.07 um 12:34 Uhr)
     
  4. 16.11.07 12:34 #4
    Maik Tutorials.de Gastzugang
    Hi,

    ich kann da derzeit keinen Höhenunterschied zwischen Firefox und dem IE (6 +7) feststellen.

    Falls du aber eine automatische Höhenangleichung der beiden Spalten erzielen willst, dürfte dir beispielsweise http://www.alistapart.com/articles/fauxcolumns/ oder http://www.cssplay.co.uk/layouts/3cols.html weiterhelfen.
     
  5. 16.11.07 12:57 #5
    Avatar von daflowjoe
    daflowjoe daflowjoe ist offline Mitglied Silber
    Registriert seit
    Apr 2007
    Beiträge
    95
    okok, das war ja garnicht mal so schwer

    wie siehts aus, wenn die linke Spalte keine feste Breite hat bzw nur in em Werten angegeben ist? Sinn der Sache soll sein, dass User ihre Schriftgröße erhöhen können und der Container sich dann anpasst.

    Ist das überhaupt technisch machbar?

    Mfg Joe
     
  6. 20.11.07 10:54 #6
    Avatar von daflowjoe
    daflowjoe daflowjoe ist offline Mitglied Silber
    Registriert seit
    Apr 2007
    Beiträge
    95
    Hallo Liebe Tutorialer,

    ich habe folgendes Problem. Ich möchte ein Layout entwerfen dessen Größen komplett liquid, also anpassbar, sind. Ich hab eine Navi, derren Breite demzufolge nicht fest sein darf. Daneben folgen 3 Zeilen, welche den Rest der Seite auffüllen. Die mittlere also die 2te Zeile soll hierbei in 2 Spalten unterteilt sein. Dabei soll die rechte Spalte immer genauso hoch sein wie die linke Spalte. Die Maximale Höhe der beiden Spalten ist also die Spalte mit dem meisten Inhalt.

    Ist das überhaupt möglich?


    P.S. Beispiel liegt im Anhang, allderings müsste nach oberer Logik, der schwarze Bereich unter dem grünen Bereich, da auch grün sein.

    Vielen Dank schonmal im Vorraus

    Mfg Joe
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Wer knackt dieses Layout ;)-layout_fh.jpg  
    Geändert von daflowjoe (20.11.07 um 11:55 Uhr)
     
« Div Positionierungsproblem nebeneinander | Link bzw. Text vertical Padding/Margin »

Ähnliche Themen

  1. Ist dieses Layout stabil
    Von jdgf im Forum CSS
    Antworten: 2
    Letzter Beitrag: 30.08.10, 17:38
  2. Ist dieses CSS-Layout ohne Fehler?
    Von jdgf im Forum CSS
    Antworten: 6
    Letzter Beitrag: 27.11.09, 09:17
  3. Wie setze ich dieses Layout um?
    Von Rayne im Forum CSS
    Antworten: 46
    Letzter Beitrag: 22.11.08, 22:08
  4. Wo finde ich dieses Layout? [76kb]
    Von Ludren im Forum Cinema 4D
    Antworten: 6
    Letzter Beitrag: 04.11.04, 00:21
  5. knackt mal diese nuss
    Von Stephan Zesiger im Forum Flash Plattform
    Antworten: 31
    Letzter Beitrag: 29.03.03, 12:32