CSS positionierung

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

  • CSS positionierung

    hallo.

    kann mir jemand bitte kurz behilflich sein? hätte gerne eine grundstruktur wie die folgende erstellt:
    Code:
    +-------------------------------------------------------------+
    |+---+                                                        |
    ||nav|  +--------------------------------------------------+  |
    ||   |  | header                                           |  |
    ||   |  +--------------------------------------------------+  |
    ||   |  +--------------------------------------------------+  |
    ||   |  | content                                          |  |
    ||   |  |                                                  |  |
    ||   |  |                                                  |  |
    ||   |  |                                                  |  |
    ||   |  |                                                  |  |
    ||   |  |                                                  |  |
    ||   |  |                                                  |  |
    |+---+  |                                                  |  |
    |       |                                                  |  |
    |       +--------------------------------------------------+  |
    |     +------------------------------------------------------+|
    |     | footer                                               ||
    |     +------------------------------------------------------+|
    +-------------------------------------------------------------+
    also links ein platzhalter für ein navigationsmenü, oben ein header, gefolgt vom content und darunter ein footer. das ganze wird eingerahmt von einem wrapper-div, das später eine hintergrundgrafik aufnehmen soll.

    wrapper soll sich an die größe des inhaltes anpassen, also nach unten "mitwachsen", je nachdem welches der "kinder" den meisten platz beansprucht (nav und content kämen hier in frage). nav, header und footer haben eine fixe höhe, content passt sich dem eigentlichen inhalt der webseite an.

    bis jetzt hab ich sowas:



    der quelltext:
    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>Framework</title>
    <
    style type="text/css">
    <!--
    body {
        
    padding0px;
        
    margin0px;
    }
    #wrapper {
        
    positionabsolute;
        
    borderthin solid;
        
    width760px;
    }
    #navigation {
        
    background-color#EBB213;
        
    width30px;
        
    height300px;
    }
    #header {
        
    positionabsolute;
        
    left60px;
        
    top15px;
        
    width675px;
        
    background-color#005837;
    }
    #content {
        
    positionabsolute;
        
    left60px;
        
    top50px;
        
    width675px;
        
    background-color#EEE1C5;    
    }
    #footer {
        
    positionrelative;
        
    left40px;
        
    bottom0px;
        
    width720px;
        
    background-color#BD3038;
    }
    -->
    </
    style>
    </
    head>

    <
    body>
    <
    div id="wrapper">
    <
    div id="navigation">nav</div>
    <
    div id="header">header</div>
    <
    div id="content">
    <
    p>snip</p>
    </
    div>
    <
    div id="footer">footer</div>
    </
    div>
    </
    body>
    </
    html
    wie kann man das am einfachsten korrigieren?

    besten dank schon mal im voraus!
    Angehängte Dateien
    Zuletzt geändert von wahsaga; 10.01.2006, 10:33.

  • #2
    es hat jetzt eine zeitlang gedauert, aber ich bin kurz vorm ziel. zwei dinge stören noch:

    1. der inhalt im container footer sollte vertikal mittig zentriert werden (die eigenschaft vertical-align greift nicht)
    2. der container header sollte 15 pixel vom oberen bildschirmrand positioniert werden (die eigenschaft margin-top greift nicht)

    hier der quelltext:
    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>Framework</title>
    <
    style type="text/css">
    body {
        
    margin0px;
        
    padding0px;
    }
    #wrapper, #sitemap {
        
    positionabsolute;
    }
    #wrapper {
        
    width760px;
        
    /*background: url(bg.gif) repeat-y;*/
        
    border1px solid;
    }
    #sitemap {
        
    width30px;
        
    height50px;
        
    /*background: url(menu.jpg) no-repeat;*/
        
    background-color#EBB213;
    }
    #header, #content, #footer {
        
    positionrelative;
        
    margin-top15px/* <-- greift im IE nicht, allerdings in FF */
        
    padding3px;
    }
    #header, #content {
        
    left48px;
        
    width671px;
    }
    #header {
        
    background-color#005837;
    }
    #content {
        
    background-color#EEE1C5;
    }
    #footer {
        
    left33px;
        
    width721px;
        
    height50px;    
        
    text-aligncenter;
        
    vertical-alignmiddle/* <-- greift nicht (weder IE noch FF) */
        
    background-color#BD3038;
    }
    </
    style>
    </
    head>

    <
    body>
    <
    div id="wrapper">
    <
    div id="sitemap">nav</div>
    <
    div id="header">header</div>
    <
    div id="content">content</div>
    <
    div id="footer">footer</div>
    </
    div>
    </
    body>
    </
    html
    kann mir bitte jemand erklären warum bzw. was man ändern muss um es richtig zu stellen?
    Zuletzt geändert von wahsaga; 10.01.2006, 10:33.

    Kommentar


    • #3
      Original geschrieben von php_rookie
      es hat jetzt eine zeitlang gedauert, aber ich bin kurz vorm ziel.
      Nee, das glaubst du m.E. nur ...

      Wenn du die Navigation absolut positionierst, dann wächst der Wrapper ganz bestimmt nicht mit dieser, falls sie länger sein sollte als der Inhaltsbereich.
      Und auch das "Verschieben" von Header und Content nach Links mittels relativer Positionierung ist ziemlich unsinnig.
      Die Navi zu floaten und Header und Content per margin-left auch unterhalb von dieser auf Abstand zu halten, wäre wesentlich sinnvoller.

      Ich würde dir empfehlen, dich bei css4you und selfhtml noch mal ein bisschen intensiver mit der Thematik CSS auseinanderzusetzen. Letztere Seite hat auch einige simple Beispiellayouts um Anfängern zu zeigen, wie es gehen könnte.

      1. der inhalt im container footer sollte vertikal mittig zentriert werden (die eigenschaft vertical-align greift nicht)
      Natürlich nicht.

      http://www.w3.org/TR/CSS21/visudet.h...vertical-align:
      'vertical-align'
      Applies to: inline-level and 'table-cell' elements
      Wenn dein Footer nur eine Zeile enthalten wird, könnte eine entsprechende line-height weiterhelfen.
      I don't believe in rebirth. Actually, I never did in my whole lives.

      Kommentar


      • #4
        mittig positionieren geht ganz leicht wenn du mit % arbeitest like
        margin-left:10%;margin-right:10%;


        Entwickler für theCOLLECTOR_0.3.0-dev gesucht.

        Kommentar


        • #5
          danke für eure antworten soweit.

          @ RelaxAlien: das design meiner website wurde seit 1999 nicht mehr verändert, d.h. es sind großteils layout-tabellen vorhanden und die sollen jetzt einem (x)html/css-layout weichen. prozentuelle angaben lässt das design jedoch nicht zu.

          @ wahsaga: die divs fließen zu lassen hätte ich mir auch schon überlegt. allerdings steh ich da vor dem problem wie mit dem footer umgegangen werden soll, wenn content kleiner als nav wird. dann fließt footer ebenfalls um nav und steht rechts über.

          das thema hier beschäftigt mich schon einige zeitlang und es ist auch mit ein grund, warum ich das tabellenlayout bislang nicht geändert habe. wenn jemand zeit hat wäre ich sehr dankbar, wenn man die notwendigen änderungen direkt anhand des quelltextes erklären könnte. wenn dieses grundgerüst erst mal steht ist der rest kein problem mehr.
          Zuletzt geändert von php_rookie; 10.01.2006, 13:57.

          Kommentar


          • #6
            Original geschrieben von php_rookie
            die divs fließen zu lassen hätte ich mir auch schon überlegt. allerdings steh ich da vor dem problem wie mit dem footer umgegangen werden soll, wenn content kleiner als nav wird. dann fließt footer ebenfalls um nav und steht rechts über.
            Was du dagegen tun kannst, erwähnte ich bereits im vorherigen Posting.
            I don't believe in rebirth. Actually, I never did in my whole lives.

            Kommentar


            • #7
              kannst du mir das bitte in den quelltext einbauen?

              Kommentar


              • #8
                ist es erlaubt das thema in den scriptgesuchen nochmals zu eröffnen und einen profi darauf loszulassen, sollte sich wer finden? für jemanden der sich auskennt sollte das nur ein paar minuten an zeit beanspruchen.

                EDIT:
                *verschieb* (allerdings zur Projekthilfe, da ist es dann besser aufgehoben)
                wahsaga

                Zuletzt geändert von wahsaga; 11.01.2006, 19:47.

                Kommentar


                • #9
                  *push*

                  Kommentar

                  Lädt...
                  X