tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
434
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. #1
    slaughter89 slaughter89 ist offline Mitglied Bronze
    Registriert seit
    May 2007
    Beiträge
    48
    Hi,
    leider kenne ich mit CSS überhaupt nicht gut aus. Ich beschäftige mich eher mit PHP.

    Nun brauch ich aber CSS und hoffe daher auf euere Hilfe:


    Ich möchte eine Seite machen, die in zwei Spalten aufgeteilt ist:
    Eine links und eine rechts. Auf der linken sollen Links oder Werbung stehen und auf der rechten der Inhalt der Seite.
    Die Breite der linken Spalte soll z.B 100 Pixel breit sein. Die rechte Spalte soll den Rest der Seite ausfüllen.
    Nun soll die linke Spalte fixiert sein. Das heißt, wenn ich weiter runter scrolle, dann soll die linke Div nicht runter scrollen, sondern nur die rechte Spalte.

    Wäre nett, wenn mir da jemand das Grundgerüst dafür geben könnte.
    Geändert von slaughter89 (28.07.07 um 18:14 Uhr)
     

  2. #2
    Maik Tutorials.de Gastzugang
    Hi,

    hierfür gibt es die position-Eigenschaft mit dem Wert fixed.

    Stu Nicholls hat da ein Beispiel zur Hand, das selbst im IE6 funktioniert, da dieser diese Positionierungsart überhaupt nicht unterstützt -> emulating position fixed for Internet Explorer.
     

  3. #3
    slaughter89 slaughter89 ist offline Mitglied Bronze
    Registriert seit
    May 2007
    Beiträge
    48
    Erstmal vielen Dank für die Hile.

    Folgendes habe ich schon hinbekommen:
    http://basti2web.de/tools/

    Wie bekomme ich das hin, dass der Inhalt der rechten Div nicht von der linken Div überschrieben wird?

    Und kann mir das jemand so umbauen, dass der oben genannte Fix dabei ist?

    Danke und mfg
    Basti
     

  4. #4
    Maik Tutorials.de Gastzugang
    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
    94
    95
    96
    97
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>position</title>
     
    <style type="text/css">
    * { margin:0; padding:0; }
     
    body { height:100%; overflow-y:auto; }
     
    #fixed { position:fixed; width:160px; height:100%; background-color:#afa; border:1px solid #888; }
     
    #page { background-color:#ff0000; padding-left:162px; }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    html { overflow-x:auto; overflow-y:hidden; }
    #fixed { position:absolute; }
    </style>
    <![endif]-->
     
    </head>
    <body>
     
    <div id="fixed">
    fixed
    </div>
     
    <div id="page">
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
         <p>page inhalt blaaaaaaaaaaaaaaaa</p>
    </div>
     
    </body>
    </html>
     

  5. #5
    slaughter89 slaughter89 ist offline Mitglied Bronze
    Registriert seit
    May 2007
    Beiträge
    48
    Tausend Dank
     

Ähnliche Themen

  1. Cloth-Tag - Fixierte Punkt mit verschieben
    Von xyTic im Forum Cinema 4D
    Antworten: 1
    Letzter Beitrag: 04.08.08, 15:44
  2. Fixierte Spalten und Zeilen in Tabellen
    Von AlexD1979 im Forum CSS
    Antworten: 1
    Letzter Beitrag: 25.02.08, 09:22
  3. Antworten: 8
    Letzter Beitrag: 24.01.08, 13:25
  4. Fixierte divs?
    Von wachteldonk im Forum CSS
    Antworten: 3
    Letzter Beitrag: 02.10.07, 16:19
  5. Bei clothide fixierte Punkte in Animation bewegen
    Von DDDworker im Forum Cinema 4D
    Antworten: 2
    Letzter Beitrag: 13.02.05, 20:32