Layouts mit CSS

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Layouts mit CSS

    So langsam glaube ich, dass es gar nicht möglich ist, mein Vorhaben umzusetzen. Ich möchte gerne ein Layout wie auf www.rockundpop.ch zu sehen ist. Der rechte hellblaue Bereich sollte jedoch eine variable Breite haben. Ausserdem wäre es toll, wenn man den Inhalt des linken hellblauen Bereichs irgendwie ohne Frames "fixieren" könnte, so dass er immer an derselben Stelle angezeigt wird. Dies ist aber nicht sooo wichtig.
    Weitere Informationen gibts hier: http://www.php-resource.de/forum/sho...0&pagenumber=1

    [Edit] Es hat geklappt! Jetzt muss ich nur noch wissen, wie ich es hinkriege, dass das Menu nicht mitscrollt (ohne Frames)...
    Zuletzt geändert von zagibu; 14.11.2003, 18:49.

  • #2
    such mal nach sticky

    Kommentar


    • #3
      Jaaa, ok, danke. Mit dem Layout habe ich nun aber doch wieder Probleme. Es kann doch nicht so schwer sein, ein Layout hinzukriegen, welches aus einem linken Navigationsbereich und einem rechten, variabel grossen, Inhaltsbereich besteht, in dem Dinge zentriert werden können? Mit meiner div-Lösung geht es jedenfalls nicht...

      Kommentar


      • #4
        doch, dass geht!!!

        musst mal das html-forum durchsuchen. da istn thread drin...

        Kommentar


        • #5
          was genau soll denn wie zentriert sein?
          INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


          Kommentar


          • #6
            schau dich mal bei http://glish.com/css/ um, da findest du einige lösungsansätze für verschiedene designs mit CSS erklärt.
            I don't believe in rebirth. Actually, I never did in my whole lives.

            Kommentar


            • #7
              Auf glish war ich auch schon, aber da haben sie auch nicht, was ich möchte. Wie gesagt, theoretisch möchte ich nur zwei divs nebeneinander, die zueinander und zum Fensterrand 30px Abstand haben. Das Problem ist aber, dass das zweite div eine Variable Breite haben soll. Und darin sollen Dinge horizontal zentriert angezeigt werden können. Im anderen auch, aber das ist auch kein Problem, weil dieses eine feste Grösse hat.
              Hier noch ein Ascii-Bild:
              Code:
              |  | nav  |  |   content    |  |
              |  | fest |  |   variabel   |  |
              |  |      |  |              |  |
              |  |      |  |              |  |
              |  |      |  |              |  |
              |  |      |  |              |  |
              [Edit] Ach ja, ich habe die ersten zehn Seiten des HTML Forums durchsucht und habe keinen Thread, mit der Lösung gefunden.

              Kommentar


              • #8
                Original geschrieben von zagibu
                Code:
                |  | nav  |  |   content    |  |
                |  | fest |  |   variabel   |  |
                |  |      |  |              |  |
                |  |      |  |              |  |
                |  |      |  |              |  |
                |  |      |  |              |  |
                probier's mal so:

                #nav { width:200px; float:left; margin-left:30px; }

                #content { margin-left:260px; margin-right:30px; }

                <div id="nav">blah</div>
                <div id="content">blubb</div>


                die 260 pixel abstand von links ergeben sich aus 30px linker rand plus 200px breite für nav plus 30px abstand zwischen nav und content.
                I don't believe in rebirth. Actually, I never did in my whole lives.

                Kommentar


                • #9
                  Original geschrieben von zagibu
                  Ach ja, ich habe die ersten zehn Seiten des HTML Forums durchsucht und habe keinen Thread, mit der Lösung gefunden.
                  dafür nimmst du besser die suchfunktion. die ist deutlich besser, also das einzelne absuchen nach threads...

                  ich mache mal einen test für dein css. das resultat kann ich ja posten.
                  INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


                  Kommentar


                  • #10
                    hier mal ein beispiel ..... ist aber verbesserungswürdig. aber mal ein ansatz....

                    Code:
                    <html>
                    <head>
                    <title>testseite</title>
                    </head>
                    
                    <style type="text/css">
                    
                        body
                        {
                            margin: 0px;
                            padding: 0px;
                        }
                    
                        #navi
                        {
                            margin: 20px 10px 0px 10px;
                            padding: 5px;
                            border: 1px solid #cccccc;
                            font: 12px verdana, sans-serif;
                            font-weight: bold;
                            height: 80%;
                            width: 20%;
                            float: left;
                        }
                    
                        #content
                        {
                            margin: 20px 10px 0px 10px;
                            padding: 5px;
                            border: 1px solid #cccccc;
                            font: 12px verdana, sans-serif;
                            font-weight: normal;
                            text-align: center;
                            height: 80%;
                            width: 70%;
                            float: right;
                        }
                    
                        #navi li
                        {
                            list-style: none;
                            padding-top: 10px;
                        }
                    
                    </style>
                    
                    <body>
                    
                    <div id="navi">
                        <li><a href="">link</a></li>
                        <li><a href="">link</a></li>
                        <li><a href="">link</a></li>
                        <li><a href="">link</a></li>
                        <li><a href="">link</a></li>
                        <li><a href="">link</a></li>
                    </div>
                    
                    <div id="content">
                    
                        hier kommt dann mal ganz viel content rein,<br />
                        der dann von mir aus auch noch auf center<br />
                        ist.
                    
                    </div>
                    
                    </body>
                    </html>
                    INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


                    Kommentar


                    • #11
                      Wau, danke schonmal. Wenn jetzt das linke div noch eine feste Grösse hätte, könnte ich das sogar brauchen.

                      Kommentar


                      • #12
                        Original geschrieben von zagibu
                        Wau, [...]
                        bist du ein hund? du meinstest bestimmt 'wow'

                        Original geschrieben von zagibu
                        Wenn jetzt das linke div noch eine feste Grösse hätte, [...]
                        was ich so auch nicht hinbekommen habe.

                        aber lasse dich inspirieren und teste selber mal ein wenig rum.

                        und wenn du glück hast, und der happy mal vorbei schaut, und dann auch noch lust hast, das dingens anzupacken .... wer weiss, vielleicht findet er ja noch ne lösung...

                        aber solange solltest du erst einmal selber damit 'spielen'.
                        INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


                        Kommentar


                        • #13
                          ich habe grad noch zufällig wahsaga's idee gesehen und mal testweise eingebunden.....

                          hier die neuen css-teile ....
                          Code:
                              #navi
                              {
                                  margin: 20px 10px 0px 10px;
                                  padding: 5px;
                                  border: 1px solid #cccccc;
                                  font: 12px verdana, sans-serif;
                                  font-weight: bold;
                                  height: 80%;
                                  width: 200px;
                                  float: left;
                              }
                          
                              #content
                              {
                                  margin: 20px 20px 230px 10px;
                                  padding: 5px;
                                  border: 1px solid #cccccc;
                                  font: 12px verdana, sans-serif;
                                  font-weight: normal;
                                  text-align: center;
                                  height: 80%;
                              }
                          so passt es dann auch.....
                          INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


                          Kommentar


                          • #14
                            Tja, dumm ist nur, dass ich bis Sonntag MINDESTENS das Layout fertig haben sollte . Aber egal, dann wird eben Morgen nochmal ein Tag verschenkt. Irgendwie dachte isch bloss, dass das ein verbreitetes Problem sein könnte, aber eben...

                            Kommentar


                            • #15
                              Original geschrieben von zagibu
                              Irgendwie dachte isch bloss, dass das ein verbreitetes Problem sein könnte, aber eben...
                              das ich die lösung (mit inspiration von wahsaga) jetzt doch noch gepostet habe, war dir aber schon klar. oder?
                              INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


                              Kommentar

                              Lädt...
                              X