Oliver: divs mit CSS - Erste Versuche - Weiss nicht mehr weiter...

Hallo,
hab mal ganz grob angefangen mit CSS-divs...

folgendes: http://www.us-classics.us/neu/index99.php

warum werden die balken links und rechts davon nicht angezeigt? Siehe Quelltext... Bin echt am verzweifeln!!

Danke,
Oli..

  1. hallo Oliver,

    warum werden die balken links und rechts davon nicht angezeigt?

    Welche Balken?

    Siehe Quelltext

    Der ist in jeder Hinsicht leider unvollkommen. Das erste ist, daß du dir wirklich überlegen solltest, ob du
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    haben möchtest, und welche Konsequenzen das für den restlichen Code haben muß. Bei deinen <style>-Angaben solltest du bitte noch überlegen, weshalb die Maßeinheit "px" nicht besonders glücklich ist. Ja, und dann: wenn du schon CSS einsetzt, warum machst du dann sowas wie
      <div align="center">
      <div style="width:666px">

    Bin echt am verzweifeln!

    Och, das wird schon noch. Trotz Verzweiflung hast du immerhin das Forum gefunden, das dir weiterhelfen kann. Fürs erste könntest du ja auch das CSS-Kapitel in SELFHTML durcharbeiten.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. hi, danke für die antwort. bin da echt sehr neu...
      die balken links und rechts mein ich (rand-links und rand-rechts im quelltext)... die erscheinen erst garnicht... kann mir vielleicht einer den quellcode für nur diese seite nennen, so dass sie richtig angezeigt wird? will einfach nur

      balken-links - flash - balken-rechts

      nebeneinander, wobei flash 75px hoch sein soll und balken-links und balken-rechts 100% hoch sein sollen...

      welchen doctype soll ich denn nehmen?
      bitte nenn mir einer den verbesserten code für diese page, damit ich was zum lernen und damit nen anfang für den rest habe...

      Danke, Oliver!

      1. morgens,

        hi, danke für die antwort. bin da echt sehr neu...

        Nunja, daß du "sehr neu" bist, ist ziemlich deutlich zu sehen. Das ist allerdings kein Fehler, das waren wir alle irgendwann mal.

        die balken links und rechts mein ich

        Es hilft dir nichts: ich habe keine Ahnung, was du mit "balken" meinst.

        (rand-links und rand-rechts im quelltext)

        sowohl "rand-links" wie auch "rand-rechts" definieren in deinem Quellcode DIVs. Die haben absolut nichts mit irgendwelchen "Balken" zu tun.

        die erscheinen erst garnicht

        Doch, die erscheinen sehr wohl, und zwar genau in der Art und Weise, die du per CSS festgelegt hast. Was also möchtest du jetzt nun anders machen?

        nebeneinander, wobei flash 75px hoch sein soll und balken-links und balken-rechts 100% hoch sein sollen...

        Warum du unbedingt Flash einsetzen willst, solltest du vielleicht nochmal überprüfen. Und dann überlege dir: wenn nebeneinander "etwas" 100% hoch sein soll (was, nebenbei bemerkt, gar nicht möglich ist), dann ein andere "etwas" 75px hoch sein soll, ist doch mit deinen Maßstäben irgendwas nicht so ganz korrekt. Warum sollen diese Dinger unbedingt unterschiedlich hoch ausfallen?

        welchen doctype soll ich denn nehmen?

        Vorerst jedenfalls nicht unbedingt XHTML. Auch wenn das eigentlich "die Zukunft" repräsentiert.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. hallo, danke, dass du dich mit mir rumquälst :) :P

          Habe mein Ziel mal in einer Skizze verdeutlicht: http://img163.imageshack.us/my.php?image=skizze2vo.jpg

          ich möchte links und rechts DIVs haben, die 8 pixel breit sind und sich bis zum PAgeende erstrecken, und mit Bidlern gefüllt sind (8*1px), die sich dann auf 8px * 100% strecken. Dazwischen möchte ich ein 650*75px grosses Flashfenster haben (wird wohl später noch durch Banner ersetzt, aber tut ja nichts zur sache jetzt). Unten drunter wird später noch content folgen, möchte halt jetzt mal irgendwo anfangen, denn bevor ich das nicht hinbekomme, muss ich nicht weitermachen.. mit einem HTML-Code, der meine Skizze umsetzt, oder zumindestens mit einer Hilfe,  wäre mir echt sehr geholfen...

          Ist die Skizze so realierbar (Jetzt verstehste doch was ich mein oder :P)?

          Welchen Typ soll ich jetzt nehmen? Wo liegen die Unterschiede zwischen XHTML usw.? Wie muss meine erste Zeile dann lauten?

          Vielen Dank,
          Oli!

          1. Moin,

            Ist die Skizze so realierbar (Jetzt verstehste doch was ich mein oder :P)?

            Geh mal folgendes Tutorial durch. Vielleicht wird Dir das weiterhelfen.

            Welchen Typ soll ich jetzt nehmen?

            Das kommt darauf an, was Du willst. Goggle einfach mal ein wenig nach HTML und XHTML Oder lies suche direkt hier vor Ort. Danach kannst Du das selbst entscheiden.

            Wo liegen die Unterschiede zwischen XHTML usw.? Wie muss meine erste Zeile dann lauten?

            Die Antwort ist nur wenige Klicks von Dir entfernt... suche nach doctype.

            mfG
            Ulrich

            1. so, habs einigermassen hinbekommen.. Frage: Warum zieht er die Bilder im Firefox bis unten, so wies sein soll, und im IE bleiben die DInger nur ganz klein ganz oben? Was muss ich machen, um das auch IE-tauglich zu machen?

              Oli

              1. Hallo Oliver,

                so, habs einigermassen hinbekommen.. Frage: Warum zieht er die Bilder im Firefox bis unten, so wies sein soll, und im IE bleiben die DInger nur ganz klein ganz oben? Was muss ich machen, um das auch IE-tauglich zu machen?

                Du hast vergessen, den IE aus dem Quirksmodus herauszuholen und auch das HTML-Element mit CSS zu definieren.

                Wie gesagt, ich würde ggf. einen ganz anderen Ansatz verfolgen, da kannst du dir aber auch für deinen Ansatz noch was rausholen:

                  
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tansitional//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" />  
                <title>Flashfilm auf Stelzen</title>  
                <style type="text/css">  
                  
                [code lang=css]  
                html, body {  
                 height:100%;  
                 margin:0;  
                 padding:0;  
                 font-family: Verdana, Arial, Helvetica, sans-serif;  
                 font-size: 10px;  
                 background-color:#FFFFFF;  
                }  
                  
                #randLinks {  
                 width: 666px;  
                 height: 100%;  
                 margin: auto;  
                 background:url(http://www.us-classics.us/neu/img/l_shadow.jpg) repeat-y;  
                }  
                  
                #randRechts {  
                 height: 100%;  
                 background:url(http://www.us-classics.us/neu/img/r_shadow.jpg) repeat-y right;  
                 padding:0 8px;  
                }  
                
                

                </style>
                </head>
                <body>
                 <div id="randLinks">
                  <div id="randRechts">
                   <object type="application/x-shockwave-flash" data="http://www.us-classics.us/neu/usc.swf" width="650" height="75">
                    <param name="movie" value="http://www.us-classics.us/neu/usc.swf" />
                    <param name="quality" value="high" />
                    <div>
                     <p>Hier machst du ersatzweise eine kleine DHTML-Animation,
                     für den Fall, dass Flash deaktiviert ist. Das lässt sich
                     mit DHTML mindestens in gleicher Qualität machen, also könntest
                     du auf den Flashfilm eigentlich auch ganz verzichten.</p>

                <p>Statt dieses Textes schreibst du noch einen Hinweis an den
                     Besucher der Seite dass er weder das Flash-Plugin in der
                     erforderlichen Version installiert noch JavaScript aktiviert hat,
                     nebst eindringlichem Appell, dass er das Problem beheben sollte,
                     damit er die schöne Animation nicht verpasst.</p>

                <p>Vergiss aber nicht, den Text onload auszublenden, damit er der
                     JavaScript-Animation nicht im Wege steht.</p>
                    </div>
                   </object>
                  </div>
                 </div>
                </body>
                </html>
                [/code]

                Gruß Gernot

                1. Hey, VIELEN DANK!
                  werde mich nachher mal da dran setzen!

                  Oli

                  1. hi,
                    so bin wieder da :P

                    http://usclassics.us/neu/index98.php

                    was ich will:
                    das ding soll sich auch wenn kein text drin is auf 100% höhe ausdehnen... sonst ist alles ok soweit, nur die 8-pixel-divs rechts und links (#links und #rechts) werden nicht angezeigt... die sollen links und rechts bis ganz unten gehen...

                    was kann ich da machen, ohne zum x-ten mal neu anzufangen? würde gerne nur mit veränderungen auskommen...

                    bitte um hilfe,
                    oli!

                    1. Hallo.

                      das ding soll sich auch wenn kein text drin is auf 100% höhe ausdehnen...

                      Dann verwende die entsprechende CSS-Eigenschaft für das entsprechende Element sowie alle ihm übergeordneten Elemente.
                      MfG, at

                      1. hallo,
                        das habe ich doch getan... sowohl #links / #rechts als auch #container-aussen als auch body haben doch (min-)height=100%...

                        danke,
                        oli

                        1. Hallo.

                          das habe ich doch getan... sowohl #links / #rechts als auch #container-aussen als auch body haben doch (min-)height=100%...

                          Ist <body> das äußerste Element?
                          MfG, at

                          1. aso ja stimmt ^^

                            thx! :P

                    2. Hallo Oliver,

                      das ding soll sich auch wenn kein text drin is auf 100% höhe ausdehnen... sonst ist alles ok soweit, nur die 8-pixel-divs rechts und links (#links und #rechts) werden nicht angezeigt... die sollen links und rechts bis ganz unten gehen...

                      Das Problem ist eher, dass wenn mal mehr Text unterhalb deines Flashfilms ist, und du scrollen musst, die beiden Hintergrundgrafiken in den Containern "randRechts" und "randRechts" in dem Bereich, in den du heinnscrollst aufhören würden. Der einzige Ausweg in deinem Fall ist eine einzige Hintergrundgrafik von 666px mit den jeweils 8 Pixeln Verlauf neben den 650 weißen Pixeln in der Y-Achse wiederholt und zentriert dem Body-Elemenet zuzuweisen. Das hat auch den Vorteil, dass du letztlich nur noch einen Container von 650 Pixeln brauchst, den du mit margin:0 auto zentrierst und darin dein Flash-Objekt sowie den darunter liegenden Text.

                      Gruß Gernot

              2. Hallo Oli,

                es wäre übrigens übersichtlicher wenn du auf die Inlinestsyles
                verzichten würdest.
                Und <div align="center"> scheint mir auch inkonsequent.

                so, habs einigermassen hinbekommen..

                Also gerade zeigt der Firefox die Ränder nicht mehr an...

                Was muss ich machen, um das auch IE-tauglich zu machen?

                Passender Doctype, margin/padding bestimmen, oder doch ein anderes
                tableless layout? Es hängt mit der Vererbung der Höhe zusammen, die wohl
                durch float verändert bzw. "ausgesetzt" wird. Wenn du die umgebenden
                Divs floaten läßt, erhälst du zwar andere Höhen, aber optimal ist die
                Vorgehensweise vmtl. auch nicht.

                Grüsse

                Cyx23

  2. Hallo Oliver,

    folgendes: http://www.us-classics.us/neu/index99.php

    warum werden die balken links und rechts davon nicht angezeigt? Siehe Quelltext... Bin echt am verzweifeln!!

    Ich denke, du brauchst für dein Vorhaben keinerlei float, sondern kommst mit zwei DIV-Elementen hin, denen du vertikal wiederholte und richtig positionierte Hintergrundbilder verpasst sowie, wie ihren Vorfahrenslementen HTML und BODY jeweils passende Werte für Height, Margin und Padding.

    Gruß Gernot

    1. Hallo nochmal,

      Ich denke, du brauchst (...) keinerlei float, sondern kommst mit zwei DIV-Elementen hin, (...)

      Ich vergaß noch zu erwähnen: Die DIV-Elemente musst du dafür ineienander verschachteln; der Flash-Film kommt dann da noch hinein.

      Gruß Gernot