tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
303
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 06.05.08 18:12 #1
    redbecks redbecks ist offline Grünschnabel
    Registriert seit
    Jul 2007
    Beiträge
    4
    Nabend!

    Ich habe versucht über Google und dieses Forum meine Probleme zu lösen, doch ich konnte keine passende Lösung für genau das Problem finden.

    Und zwar möchte ich sehr gerne dieses Layout komplet in CSS ohne Frames oder Tabellen umsetzen.

    Ich habe vor allem Probleme mit "Overflow" im Bereich #content. Doch auch im Opera-Browser habe ich das Problem, dass beim "Mausradscroll" das gesamte Layout runter rutscht...

    Ich würde mich riesig freuen, wenn mir geholfen werden kann. Und falls ich während meiner Suche etwas übersehen haben sollte und es schon einmal hier gepostet wurde, tut es mir leid.

    Gruß
    Simon

    So schaut es aus: LIVE DEMO

    style.css:
    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

    html {
        overflow: hidden;
        width: 100%;
        height: 100%;
}
 
body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0px;
}
 
.wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
}
 
.wrapper .header {
        width: 100%;
        height: 100px;
        background-color: #64abe6;
}
 
.wrapper .wrapper2 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        padding-top: 100px;
}
 
.wrapper .wrapper2 .left {
        position: absolute;
        width: 100px;
        height: 100%;
        background-color: #3d719e;
}
 
.wrapper .wrapper2 .submenu {
        position: absolute;
        width: 100%;
        height: 20px;
        margin-left: 100px;
        background-color: #082945;
}
 
.wrapper .wrapper2 .menu {
        position: absolute;
        width: 100px;
        height: 100%;
        margin-top: 20px;
        margin-left: 100px;
        background-color: #34526b;
}
 
.wrapper .wrapper2 .content {
        position: absolute;
        width: 100%;
        height: 100%;
        margin-top: 20px;
        margin-left: 200px;
        background-color: #3d719e;
        overflow: auto;
}
 
.wrapper .footer {
        position: absolute;
        bottom: 0px;
        right: 50px;
        width: 300px;
        height: 20px;
        background-color: #64abe6;
}

    und die index.html

    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" xml:lang="en" lang="en">
<head>
<title>LIVE DEMO</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="wrapper">
        <div class="header">#header</div>
        <div class="wrapper2">
                <div class="submenu">#submenu</div>
                <div class="left">#left</div>
                <div class="menu">#menu</div>
                <div class="content">
                        #content
                </div>
        </div>
        <div class="footer">#footer</div>
</div>

</body>
</html>
     
  2. 06.05.08 18:18 #2
    Maik Tutorials.de Gastzugang
    Hi,

    ich empfehle dir in diesem Fall das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken und passend zur zweiten vorgestellten Technik Stu Nicholls' Demos:
     
  3. 06.05.08 18:43 #3
    redbecks redbecks ist offline Grünschnabel
    Registriert seit
    Jul 2007
    Beiträge
    4
    Danke für die schnelle Antwort!

    ich werde es gleich mal probieren...
     
« Kleine Positionierungsfrage | Inhalt eines zwei Div skalieren »

Ähnliche Themen

  1. CSS-Layout Höhe ist größer als 100%
    Von Necro_nomicon im Forum CSS
    Antworten: 46
    Letzter Beitrag: 30.09.08, 16:53
  2. Layout 100% höhe & 100% Breite mit Rahmen
    Von staypunk im Forum CSS
    Antworten: 8
    Letzter Beitrag: 21.08.08, 16:25
  3. Layout und div in passender Höhe
    Von wachteldonk im Forum CSS
    Antworten: 14
    Letzter Beitrag: 26.08.07, 11:51
  4. CSS Layout, Submenu 100% Höhe
    Von Giggles91 im Forum CSS
    Antworten: 10
    Letzter Beitrag: 04.03.07, 20:38
  5. Divs Höhe/Spalten Layout
    Von thetrue im Forum CSS
    Antworten: 7
    Letzter Beitrag: 26.05.06, 16:34