Probleme mit <div>

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Probleme mit <div>

    Hallo zusammen,

    ich wollte jetzt mal etwas mit div's anstelle von tabellen machen hab jedoch dabei ein problem bei der Positionierung der Div's.

    1. Die Seite soll im Browser zentriert sein.
    2. Benötige ich 5 verschiedene Divs
    - oben links für ein logo
    - rechts den inhalt
    - unter dem logo auf der Spaltenhälte links einen Streifen
    - am Ende des Streifens rechts einen Bereich fürs Menü
    (so breit wie der Streifen und halb so hoch wie der Streifen)
    - Einen Bereich über linken und rechten Bereich
    3. Hinter den ganzen Div's soll ein Hintergrundbild liegen.

    Kann mir da evtl jemand helfen ?
    Danke
    Angehängte Dateien
    Stichworte: -
  • #2
    Re: Probleme mit &lt;div&gt;

    Hast du einen Ansatz?

    Wenn nein - beschäftige dich erst mal selber mit den Grundlagen des Layoutens mittels CSS.


    Und gewöhne dir bitte ab, (wie so viele andere Ahnungslose leider auch) von "Divs statt Tabellen" zu reden. Das ist kompletter Unfug, und führt in den allermeisten Fällen nur dazu, dass die Leute statt Tabellen zu missbrauchen dann Div-Suppen kochen, was kaum besser ist.
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar

    • #3
      Hier mein Ansatz:

      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="de" lang="de">
      <      head>    
      <      meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <      title>DIV Positionierung</title>
      <      style type="text/css">
      #inhalt { 
                      position: relative; padding: 0px; 
                      border: 1px solid #silver;
                      background: khaki; height: 150px; width: 100px;
                      left: 10px; top: 5px; 
      }
      #fussleiste { 
                      position: relative;  padding: 0px; 
                      background: silver; height: 100px; width: 50px;
                      left: 10px; top:5px; 
      }
      #fussleiste2 { 
                      position: relative;  padding: 0px; 
                      background: blue; height: 100px; width: 50px;
                      left: 60px; top:-95px; 
      }
      #fussleiste3 { 
                      position: relative;  padding: 0px; 
                      border: 1px solid #silver;
                      background: green; height: 50px; width: 100px;
                      left: 10px; top:-95px; 
      }
      #navigation { 
                      position: relative; padding: 0.px; 
                      background: salmon; height: 300px; width: 250px; 
                      left: 110px; top: -395px; 
      }
          
      -->    
      </      style>    
      </      head>    
      <      body>    

      <      div id="inhalt"> Inhalt </div>
      <      div id="fussleiste"> Fusszeile </div>
      <      div id="fussleiste2"> Fusszeile2 </div>
      <      div id="fussleiste3"> Fusszeile3 </div>
      <      div id="navigation"> Navigation </div>

      </      body>
      </      html> 
      Ich hab jetzt noch folgendes Problem damit:
      1. Wie zentrier ich das ganze ?
      2. Wie bekomme ich dann zentriert ein Hintergrundbild dahinter ?

      Hat mir dazu jemand eine Hilfestellung ?

      Kommentar

      • #4
        Original geschrieben von mgoertz
        1. Wie zentrier ich das ganze ?
        Pack's in einen Container, und zentriere den.

        (Wundere dich dabei aber nicht darüber, dass dieser automatisch höher wird, als es die sichtbaren Positionen deiner Elemente vorzugeben scheinen - relative Positionierung behält nun mal den Platz, den das Element ohne sie eingenommen hätte, reserviert.)
        2. Wie bekomme ich dann zentriert ein Hintergrundbild dahinter ?
        Lies bei SELFHTML zum Thema Hintergrundbilder nach.
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar

        • #5
          ok das mit dem Hintergrundbild muss ich über background-amge machen, klar.
          wenn ich alles in den Container packe wird dieser automatisch höher, wie kann ich das vermeiden ?

          Kann mir da jemand helfen ?

          Kommentar

          • #6
            Original geschrieben von mgoertz
            wenn ich alles in den Container packe wird dieser automatisch höher,
            Sag ich doch.
            wie kann ich das vermeiden ?
            In dem du, wenn du die Auswirkungen relativer Positionierung nicht willst, keine relative Positionierung nimmst.

            float und margins bieten sich eher an.
            I don't believe in rebirth. Actually, I never did in my whole lives.

            Kommentar

            • #7
              Könnte weiterhelfen:
              www.yaml.de

              Kommentar

              • #8
                könnte mir evtl. jemand ein beispiel geben wie es aussehen würde wenn ich auf die relative positionierung verzichten würde ?
                Wäre euch sehr dankbar

                Kommentar

                • #9
                  ich hab es jetzt mit der absoluten possitionierung zumindest im ie hinbekommen leider nimmt der firefox das noch nicht an, kann mir jemand ne Hilfestellung geben, dass es auch im Firefox zentriert ist ?

                  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="de" lang="de">
                  <                  head>    
                  <                  meta http-equiv="content-type" content="text/html; charset=utf-8" />
                  <                  title>DIV Positionierung</title>
                  <                  style type="text/css">
                  body{
                                        text-align:center;
                                        vertical-align: middle;
                                        background: #c0c0c0;
                  }
                      
                      
                  #logo { 
                                              position: absolute; padding: 0px; 
                                              height: 130px; width: 318px;
                                              left: 0px; top: 0px; 
                                              text-align:left;
                            
                  }
                  #leiste { 
                                              position: absolute;  padding: 0px; 
                                              height: 470px; width: 124px;
                                              left: 0px; top:130px; 
                                              text-align:left;
                            
                  }
                  #menue { 
                                              position: absolute;  padding: 0px; 
                                              height: 240px; width: 194px;
                                              left: 124px; top:360px; 
                                              text-align:left;
                           
                  }
                  #bild { 
                                              position: absolute;  padding: 0px; 
                                              height: 230px; width: 320px;
                                              left: 124px; top:130px; 
                                              text-align:left;
                                              background:green;
                  }
                  #content { 
                                              position: absolute; padding: 0.px; 
                                              height: 600px; width: 527px; 
                                              color:#fff;
                                              left: 318px; top:0px; 
                                              text-align:left;
                         
                  }
                  #background{
                                                        position: relative; padding: 0px; 
                                              background-image:url(background2.jpg); height: 600px; width: 845px; 
                                              left: auto; top: auto; 
                                              vertical-align: middle;
                           

                  }
                      
                  -->    
                  </                  style>    
                  </                  head>    
                  <                  body>    
                  <                  div id="background">
                      <                  div id="leiste"> leiste </div>
                      <                  div id="menue"> menue </div>
                      <                  div id="content"> content </div>
                      <                  div id="logo"> logo </div>
                      <                  div id="bild"> bild </div>
                  </                  div>


                  </                  body>
                  </                  html> 
                  Danke euch im voraus

                  Kommentar

                  • #10
                    Für alles absolute Positionierung zu verwenden, ist kein guter Ansatz. Damit wirst du schnell Probleme bekommen, bei Schriftvergrößerung etc.
                    I don't believe in rebirth. Actually, I never did in my whole lives.

                    Kommentar

                    • #11
                      wie würdest du es dann machen ?
                      wie kann ich das ganze noch vertikal zentrieren ?

                      Kommentar

                      • #12
                        Ich würde mir noch mal aufmerksam die bsiherigen Antworten durchlesen.
                        I don't believe in rebirth. Actually, I never did in my whole lives.

                        Kommentar

                        Vorherige template Weiter
                        Lädt...
                        X