Probleme mit <div>

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

  • 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

  • #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 { 
                
      positionrelativepadding0px
                
      border1px solid #silver;
                
      backgroundkhakiheight150pxwidth100px;
                
      left10pxtop5px
      }
      #fussleiste { 
                
      positionrelative;  padding0px
                
      backgroundsilverheight100pxwidth50px;
                
      left10pxtop:5px
      }
      #fussleiste2 { 
                
      positionrelative;  padding0px
                
      backgroundblueheight100pxwidth50px;
                
      left60pxtop:-95px
      }
      #fussleiste3 { 
                
      positionrelative;  padding0px
                
      border1px solid #silver;
                
      backgroundgreenheight50pxwidth100px;
                
      left10pxtop:-95px
      }
      #navigation { 
                
      positionrelativepadding0.px
                
      backgroundsalmonheight300pxwidth250px
                
      left110pxtop: -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-alignmiddle;
                      
                  background#c0c0c0;
                  }
                      
                      
                  #logo { 
                            
                  positionabsolutepadding0px
                            
                  height130pxwidth318px;
                            
                  left0pxtop0px
                            
                  text-align:left;
                            
                  }
                  #leiste { 
                            
                  positionabsolute;  padding0px
                            
                  height470pxwidth124px;
                            
                  left0pxtop:130px
                            
                  text-align:left;
                            
                  }
                  #menue { 
                            
                  positionabsolute;  padding0px
                            
                  height240pxwidth194px;
                            
                  left124pxtop:360px
                            
                  text-align:left;
                           
                  }
                  #bild { 
                            
                  positionabsolute;  padding0px
                            
                  height230pxwidth320px;
                            
                  left124pxtop:130px
                            
                  text-align:left;
                            
                  background:green;
                  }
                  #content { 
                            
                  positionabsolutepadding0.px
                            
                  height600pxwidth527px
                            
                  color:#fff;
                            
                  left318pxtop:0px
                            
                  text-align:left;
                         
                  }
                  #background{
                                      
                  positionrelativepadding0px
                            
                  background-image:url(background2.jpg); height600pxwidth845px
                            
                  leftautotopauto
                            
                  vertical-alignmiddle;
                           

                  }
                      
                  -->    
                  </
                  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

                        Lädt...
                        X