[xhtml] Tabelle über die ganze Seitenbreite

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

  • [xhtml] Tabelle über die ganze Seitenbreite

    Hi

    Ich hätte da mal eine Frage:
    Bei einem layout über Tabellen kann ich in HTML die ganze Seitenhöhe und seitebreite verwenden mit hight und width % und margin, padding 0

    Wenn man den Doctyp auf xhtml ändert, wird die Seitenbreite zwar verwendet aber nicht mehr die ganze Seitenhöhe.

    Gibt es das ganze in XHTML nicht mehr?

    Danke schonmal für eure Antworten.

    Edit: Sollte das nicht mehr gehen: Wenn man das Layout auf div ändern würde, kann man dort auch irgendwie die ganze seitenbreite und seitenhöhe verwenden?

    Gruss

    Olli
    Zuletzt geändert von Olli4; 29.01.2009, 15:00.

  • #2
    Bei einem layout über Tabellen
    macht man nicht mehr
    Gibt es das ganze in XHTML nicht mehr?
    doch wenn man den übergeordneten elementen html und body per css auch die höhe von 100% zuweist. sollte zumindest.

    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Hi

      Danke für dene Antwort.

      Das mit dem height: 100%; klappt. Jedoch wird so das ganze Layout toal verrissen.

      Kannst du mir sagen, wie ein divlayout aussehen würde über die ganze Breite und höhe? Dann versuch ichs mal umzuschreiben. Bin grad bei der CSS Referenz, aber finde nichts wegen der ganzen höhe und breite.

      gruss

      Olli

      Kommentar


      • #4
        schau dir das mal an
        PHP-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="de">
        <
        head>
          <
        title>Test</title>
          <
        meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <
        style type="text/css">
          * {
            
        margin0;
            
        padding0;
          }
          
        htmlbody {
            
        height100%;
            
        width100%;
          }
          
        div.rahmen {
            
        height100%;
            
        width100%;
            
        background-color#f00;
          
        }
          </
        style>
        </
        head>

        <
        body>
          <
        div class="rahmen">
            <
        p>
              
        bla blubb
            
        </p>
          </
        div>
        </
        body>
        </
        html
        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          Hi

          Super danke dir. Werde das mal durcharbeiten. Hab etwas mühe das mehrspaltige Menu umzuändern. Mit Tabellen ist es doch viel einfacher. Aber irgendwie wird das schon

          Gruss

          Olli

          Kommentar


          • #6
            Original geschrieben von Olli4
            Hab etwas mühe das mehrspaltige Menu umzuändern.
            lesen

            peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              Hi

              Super danke.

              Ich habe vorhin mal angefangen das Layout mit div Containern aufzubauen. Ist ja einfacher als ich dachte. Dank deiner Hilfe konnte ich nun auch herausfinden wie man die Seitenbreite und höhe nutzt.

              Nun habe ich aber noch eine Frage. Ich habe folgendes:
              Code:
              <div class="footer">
                .....
              </div>
              Den footer habe ich mittels position:absolute; bottom:0; unten am fensterrand fixiert.

              Jedoch bleibt der dort. Kann ich den Footer irgendwie so modifizieren, das der am unteren Fensterrand bleibt, ABER wenn der text länger ist, dass der Footer ebenfalls fixiert ist jedoch bei textende.

              Hoffe, ich konnte es annehmbar erklären.


              Gruss

              Olli
              Zuletzt geändert von Olli4; 29.01.2009, 16:23.

              Kommentar


              • #8
                http://www.alistapart.com/articles/footers
                I don't believe in rebirth. Actually, I never did in my whole lives.

                Kommentar


                • #9
                  Original geschrieben von wahsaga
                  http://www.alistapart.com/articles/footers
                  Hi

                  Danke. Aber die seite kenne ich schon. Vielleicht liegt es an meinem schlechten Englisch das ich nur die hälfte verstehe.

                  Ich habe nachher für den content dies verwendet:
                  position: relative;
                  min-height: 100%;

                  wenn ich das mache, funktioniert es wie es soll. Aber wenn der Text kleiner ist als das fenster dann ist der footer nicht mehr unten am seitenrand.

                  Geht beides auch irgendwie?

                  Danke schonmal für eure Hilfe und Tipps.

                  Gruss

                  Olli

                  Kommentar


                  • #10
                    min-height kann nur funktionieren, wenn fuer alle Vorfahrenelemente ebenfalls eine Hoehe angegeben ist.

                    Und min-height auf min-height Bezug nehmen zu lassen, funktioniert in der Praxis auch nicht.
                    Deshalb haben im Beispiel ja auch html und body height:100%, und direkt danach folgt der Container als Kindelement von body mit min-height:100%.
                    I don't believe in rebirth. Actually, I never did in my whole lives.

                    Kommentar


                    • #11
                      Hi

                      Ich sehe glaub langsam den Wald vor lauter bäumen nicht mehr. Ich finde einfach nicht die Fehler. Könnt ihr mir vielleicht nochmals auf die sprünge helfen wo die Fehler liegen?

                      Ich habe nun folgenden Code:
                      CSS:
                      Code:
                      body, html {
                      	margin: 0px;
                      	padding: 0px;
                        font-family: Tahoma, Arial, sans-serif;
                        font-size: 10pt;
                        height: 100%;
                        width: 100%;  
                      }
                      .content1 {
                      	width: 100%;
                      }
                      .navigation {
                      	float:left;
                      	width: 110px;
                      	background-color: #000000;
                      }
                      #content2 {
                      	margin-left: 110px;
                      }
                      .content3 {
                      	position: relative;
                        min-height: 100%;	
                        background-color: #FF0000;
                      }
                      .werbung {
                      	width: 100%;
                      	height: 80px;
                      }
                      .footer {
                      	width: 100%;
                      	background-image: url(bg.gif);
                      	background-repeat: repeat-x;
                      	height: 50px;
                      }
                      HTML:
                      Code:
                      <div class="content1">
                       <div class="navigation">navigation</div>
                       <div class="content2">
                        <div class="werbung">Werbung</div>		
                        <div class="content3">Inhalt</div>
                       </div>
                      </div>	
                      <div class="footer">footer</div>
                      Ich versuche, eine Seite über die komplette seitenbreite und Seitenhöhe zu legen.
                      Der aufbau erkläre ich kurz mit einer Tabelle, da dies einfacher sein dürfte als eine erklärung wie es aussehen soll:
                      Code:
                        <tr>
                          <td rowspan="2">Navigation</td>
                          <td>werbung</td>
                        </tr>
                        <tr>
                          <td>Inhalt</td>
                        </tr>
                      Nun habe ich jedoch einige Probleme wo ich einfach nicht sehe wo es liegt:
                      1. der Footer soll am untersten seitenrand stehen. dies funktioniert, wenn der Text lange ist. Ist er jedoch kürzer, ist der footer wieder mitten auf der Seite.
                      2. Sowohl die Navigation wie auch der content sollte bis zu unterst zum footer gehen. Also auch das die Hintergrundfarbe bis zum footer geht.

                      Ich wäre euch sehr dankbar, wenn ihr mir hier helfen könntet. Ich finde einfach die Fehler nicht egal wie ich auch google bemühe und dort tonnenweise Code finde.

                      Gruss

                      Olli

                      Kommentar


                      • #12
                        Du hast zwei Containerelemente vor deinem Element mit min-height in der Hierarchie, fuer die ueberhaupt keine Hoehenangabe gemacht wurde. Dass das nicht funktioniert, sagte ich dir bereits.


                        Der Umstieg von Tabellenlayout auf ein Layout mit strukturell sinnvollem, mit CSS formatiertem HTML ist natuerlich keine Sache, die in fuenf Minuten erledigt ist - das erfordert schon eine etwas laengere und intensivere Beschaeftigung mit dem ganzen.
                        I don't believe in rebirth. Actually, I never did in my whole lives.

                        Kommentar


                        • #13
                          möglicherweise sucht er ja nach faux frames

                          peter
                          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                          Meine Seite

                          Kommentar


                          • #14
                            Hi

                            Danke für eure Antworten. Muss da wirklich mal schauen. Irgendwie muss das ja gehen *g*.

                            Nein dieses Faux Frame such ich nicht. In Tabellen würde es so aussehen:

                            Code:
                              <tr>
                                <td rowspan="2">Navigation</td>
                                <td>werbung</td>
                              </tr>
                              <tr>
                                <td>Inhalt</td>
                              </tr>
                              <tr>
                                <td coolspan="2">footer</td>
                              </tr>
                            Also das der Footer immer unten an der Seite ist also bei grossem text zu unterst des text am seitenrand und bei kleine text unten am seitenrand.

                            Ist recht schwer zu erklären

                            Gruss

                            Olli

                            Kommentar


                            • #15
                              Original geschrieben von Kropff
                              PHP-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="de">
                              <
                              head>
                                <
                              title>Test</title>
                              ....
                              </
                              body>
                              </
                              html
                              OffTopic:
                              Benötigt eine XHTML Seite nicht auch immer die XML-Angabe (sorry, komme gerade nicht auf's Wort. Ich mein): <?xml version="1.0"?> ?
                              Oder geht es auch ohne?

                              Danke
                              No one can predict the future...
                              [Skwawl]

                              Kommentar

                              Lädt...
                              X