Ergebnis 1 bis 10 von 10

Thema: Div-Positionierung (zentriert)

  1. #1
    Meister(in)
    Registriert seit
    11.04.2007
    Ort
    Bern (CH)
    Beiträge
    341
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div-Positionierung (zentriert)

    Ich schaffs nicht!

    Habe jetzt alle Tutorials gelesen, die ich gefunden habe, und schaffe es trotzdem nicht die Div's so auszurichten wie ich will.

    Als Übungsgrundlage habe ich eine der Vorlagen von stichpunkt.de genommen. Jetzt will ich das ganze aber zentrieren. Das Ergebnis meiner kläglichen Versuche findet ihr hier.

    Die Ausrichtung der Layer Top und Links ging problemlos. Rechts habe ich auch in die richtige Position gebracht, allerdings mit einem Negativwert Wenn ihr etwas runter Scrollt findet ihr auch noch den Layer Inhalt. Dieser sollte sich da noch dazwischen quetschen, aber das bringe ich gar nicht mehr zu Stande

    Habe mir auch andere Seiten angesehen, die ein Ähnliches Design haben, aber blicke trotzdem nicht durch.

    Quelltext:

    Code:
    <html>
    <head>
    
    <style type="text/css">
    
    body &#123;
      padding&#58;0px;
      margin&#58;0px;
      background-color&#58;#0080c0;
      font-family&#58;Verdana,Arial,Helvetica,sans-serif;
      color&#58;#000000;
    &#125;
    
    #frame &#123;
      position&#58;relative;
      margin&#58;10px auto;
      width&#58;820px;
      text-align&#58;left;
      background-color&#58;#fff;
      border&#58;1px solid #000000;
    &#125;
    
    #logo &#123;
      position&#58;relative;
      left&#58;10px;
      top&#58;10px;
      height&#58;100px;
      width&#58;800px;
      background-color&#58;#ffcc00;
    &#125;
    
    #left &#123;  
      position&#58;relative;
      top&#58;20px;
      left&#58;10px;
      width&#58;160px;
      height&#58;300px;
      background-color&#58;#ffcc00;
    &#125;
    
    #right &#123;
      position&#58;relative;
      left&#58;650px;
      top&#58;-280px;
      width&#58;160px;
      height&#58;300px;
      background-color&#58;#ffcc00;
    &#125;
    
    #inhalt &#123;
      height&#58;220px;
      width&#58;460px;
      left&#58;180px;
      background-color&#58;#ffffc6;
    &#125;
    
    </style>
    
    </head>
    <body>
    <div id="frame">
    <div id="logo">Top</div>
    <div id="left">Links</div>
    <div id="right">Rechts</div>
    <div id="inhalt">Inhalt</div>
    
    </div>
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    We'll be right back after these commercials...


  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    mach mal zunächst einen horizontal zentrierten Div nach diesem Muster. Auf die Vertikale Zentrierung kannst du dabei zunächst mal verzichten.
    Dann packe darein deine div's. Lass bei denen überall die position, left und right-Angaben weg. Stattdessen kannst du ggf. mit margin-left arbeiten.
    Verpasse dem linken ein "float:left;" und dem rechten ein "float:right;"
    Orientiere dich am besten an diesem Code: http://www.stichpunkt.de/css/3-box2.html

  3. #3
    Prinz(essin) Avatar von Lizzard
    Registriert seit
    19.02.2006
    Ort
    München
    Beiträge
    788
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Endlich, kann ich dir auch mal was helfen

    Code:
    <style type="text/css">
    
    body &#123;
      padding&#58;0px;
      margin&#58;0px;
      background-color&#58;#0080c0;
      font-family&#58;Verdana,Arial,Helvetica,sans-serif;
      color&#58;#000000;
    &#125;
    
    #frame &#123;
      margin&#58;10px auto;
      padding&#58; 10px;
      width&#58;800px;
      text-align&#58;left;
      background-color&#58;#fff;
      border&#58;1px solid #000000;
    &#125;
    
    #logo &#123;
      height&#58;100px;
      width&#58;800px;
      background-color&#58;#ffcc00;
    &#125;
    
    #left &#123; 
      margin-top&#58; 10px;
      width&#58;160px;
      height&#58;300px;
      background-color&#58;#ffcc00;
      float&#58; left;
    &#125;
    
    #right &#123;
      margin-top&#58; 10px;
      width&#58;160px;
      height&#58;300px;
      float&#58; right;
      background-color&#58;#ffcc00;
    &#125;
    
    #inhalt &#123;
      height&#58;220px;
      width&#58;460px;
      margin-top&#58; 10px;
      margin-left&#58; 10px;
      float&#58; left;
      background-color&#58;#ffffc6;
    &#125;
    
    </style>
    Code:
    <div id="frame">
    <div id="logo">Top</div>
    <div id="left">Links</div>
    <div id="right">Rechts</div>
    <div id="inhalt">Inhalt</div>
    <br style="clear&#58; both;" />
    </div>
    Ich frag mich, was du mit der Positionierung versucht hast
    Um Blockelemente nebeneinander anordnen zu können, solltest du auf Float zurückgreifen. wichtig ist, nach dem alles gefloatet ist, immer wieder schön zu clearen, da sonst nachfolgende Inhalte weiter floaten wollen. Ohne clear am Ende, würde der Hintergrund vom frame sich nicht bis ans Ende ziehen.
    Falls du irgendwann mal willst, dass deine Spalten immer gleich lang sind, kannst du entweder den Quellcode von meiner Website studieren, oder mal nach "Faux Columns" googlen.

    Hoffe ich konnte dir helfen, ohne dir den Lerneffekt zu nehmen

    Grüße,
    LizZard

    PS.: Ich finde es gibt viel zu viele Tutorials dazu im Web. Wenn das nicht so wäre, hätte ich schon eins geschrieben
    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

  4. #4
    Großmeister(in)
    Registriert seit
    18.01.2007
    Ort
    Hamburg
    Alter
    26
    Beiträge
    710
    Danke
    2
    Bekam 2 mal "Danke" in 2 Postings

    Standard

    ich hätts jetzt so gemacht:

    Code:
    <html> 
    <head> 
    
    <style type="text/css"> 
    
    body &#123; 
      padding&#58;0px; 
      margin&#58;0px; 
      background-color&#58;#0080c0; 
      font-family&#58;Verdana,Arial,Helvetica,sans-serif; 
      color&#58;#000000; 
    &#125; 
    
    #frame &#123; 
      position&#58;relative; 
      margin&#58;10px auto; 
      width&#58;820px;
      height&#58;90%;
      min-height&#58;400px; 
      text-align&#58;left; 
      background-color&#58;#fff; 
      border&#58;1px solid #000000; 
    &#125; 
    
    #logo &#123; 
      position&#58;relative; 
      left&#58;10px; 
      top&#58;10px; 
      height&#58;100px; 
      width&#58;800px; 
      background-color&#58;#ffcc00; 
    &#125; 
    
    #left &#123;  
      position&#58;relative; 
      top&#58;20px; 
      left&#58;10px; 
      width&#58;160px; 
      height&#58;300px; 
      background-color&#58;#ffcc00; 
    &#125; 
    
    #right &#123; 
      position&#58;absolute; 
      left&#58;650px; 
      top&#58;120px; 
      width&#58;160px; 
      height&#58;300px; 
      background-color&#58;#ffcc00; 
    &#125; 
    
    #inhalt &#123; 
      position&#58;absolute;
      height&#58;300px; 
      width&#58;460px; 
      left&#58;180px;
      top&#58;120px; 
      background-color&#58;#ffffc6; 
    &#125; 
    
    </style> 
    
    </head> 
    <body>
     <center>
    <div id="frame"> 
    <div id="inhalt">Inhalt</div>
    <div id="logo">Top</div>
    <div id="right">Rechts</div>  
    <div id="left">Links</div> 
    </center>
    
    </div> 
    </body> 
    </html>

  5. #5
    Prinz(essin) Avatar von Lizzard
    Registriert seit
    19.02.2006
    Ort
    München
    Beiträge
    788
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Deine Lösung ist besser. bei mir hakt noch irgendwas im IE.
    Hab noch nie in nem Projekt mit absoluter Positionierung gearbeitet, aber das schaut echt brauchbar aus, und ist auch gut Browserkompatibel. Schöne Lösung!
    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

  6. #6
    Meister(in)
    Themenstarter

    Registriert seit
    11.04.2007
    Ort
    Bern (CH)
    Beiträge
    341
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ihr seid alle klasse!

    Ich frage mich auch, was ich damit versucht habe. Float habe ich jetzt auch schon mind. 10 mal durchgeackert und verstehe es einfach nicht Da ich bis anhin ein Tabellenfetishist war bin ich vielleicht etwas schwer von Begriff, was andere Lösungen betrifft Werde noch einmal weiterpauken.

    Danke an alle!
    We'll be right back after these commercials...


  7. #7
    Interessierte/r
    Registriert seit
    04.12.2005
    Beiträge
    133
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    moin ...

    ne variable Möglichkeit.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml" lang="de" 
    
    xml&#58;lang="de">
    <head>
    <title>zentriert und passt sich an</title>
    <meta http-equiv="Content-Type" content="text/html; 
    
    charset=utf-8" /> 
    
    <style type="text/css">
    
    body
    	&#123;
    	margin&#58; 0;
    	padding&#58; 15px;
    	&#125;
    
    div#box
    	&#123;
    	width&#58; 100%;
    	&#125;
    
    div#links
    	&#123;
    	background-color&#58; red;
    	width&#58; 20%;
    	height&#58; 300px;
    	float&#58; left;
    	&#125;
    
    div#rechts
    	&#123;
    	background-color&#58; yellow;
    	width&#58; 20%;
    	height&#58; 300px;
    	float&#58; right;
    	&#125;
    
    div#mitte
    	&#123;
    	background-color&#58; green;
    	height&#58; 100px;
    	&#125;
    
    div#unten
    	&#123;
    	background-color&#58; gray;
    	clear&#58; both;
    	&#125;
    
    </style>
    </head>
    <body>
    
    <div id="box">
    <div id="links">INHALT - LINKS</div>
    <div id="rechts">INHALT - RECHTS</div>
    <div id="mitte">INHALT - MITTE</div>
    <div id="unten">INHALT - UNTEN</div>
    </div>
    
    </body>
    </html>
    Ist "ausbaufähig"

    gruß

  8. #8
    Interessierte/r
    Registriert seit
    04.12.2005
    Beiträge
    133
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    moin ...
    habe die erste Antwort übersehen,
    ist ja im Groben der gleiche Vorschlag,
    gruß

  9. #9
    Meister(in)
    Themenstarter

    Registriert seit
    11.04.2007
    Ort
    Bern (CH)
    Beiträge
    341
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    OK, zwei Fragen habe ich noch

    Wie kann ich machen, dass sich das DIV "frame" mit den DIV's "left", "right" und "inhalt" vergrössert wenn diese grösser werden als frame selbst?

    Wie kann ich machen, dass das DIV "left" immer die gleiche Höhe hat wie das div "frame"? Mit height:100% passt es sich ja an die Seitenhöhe an.
    We'll be right back after these commercials...


  10. #10
    Prinz(essin) Avatar von Lizzard
    Registriert seit
    19.02.2006
    Ort
    München
    Beiträge
    788
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Wie kann ich machen, dass sich das DIV "frame" mit den DIV's "left", "right" und "inhalt" vergrössert wenn diese grösser werden als frame selbst?
    zumindest bei meiner Lösung ist es so, dass der frame immer so groß ist, wie der größte Container in seinem Inhalt.

    Wie kann ich machen, dass das DIV "left" immer die gleiche Höhe hat wie das div "frame"? Mit height:100% passt es sich ja an die Seitenhöhe an.
    das will ich sehen, wie du ein Div dazu bringst, nur per CSS die volle Bildschirmhöhe einzunehmen
    Vielmehr solltest du hier Faux-Columns benutzen, wie oben schonmal angesprochen.

    http://alistapart.byteshift.de/fauxcolumns/
    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

Ähnliche Themen

  1. Login Zentriert
    Von Anonymer im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 20.07.2007, 15:46
  2. Ganze Homepage zentriert?
    Von Martin123 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 10.04.2007, 19:02
  3. html ---> zentriert?!
    Von im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 25.10.2006, 09:06
  4. Bilder nicht zentriert
    Von marlow im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 7
    Letzter Beitrag: 28.11.2005, 12:54
  5. HP immer zentriert
    Von ehenk im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 20.10.2005, 19:05

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •