1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

layout-frage

  • davidos_no.1
  • 7. November 2008 um 15:56
  • 1
  • 2
  • yeti66
    König(in)
    Beiträge
    1.152
    • 9. November 2008 um 22:16
    • #21

    Mit den gleichen Höhen wird es nie so einfach werden, wenn Du keine Faux Columns Technik anwenden möchtest. Hier mal eine Lösung mit
    overflow: hidden .

    HTML
    <!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=utf-8" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    <!--
    * {margin: 0;padding: 0;border: 0;}
    body {background-image:url(../images/bg.png);background-color:#111;text-align:center;min-width: 800px;}
    #wrapper {width:800px;margin: 0 auto;}
    #header, #menu, #col-left,#col-right, #footer {border:solid #ccc 1px;}
    #header {width:auto;height:100px;margin-bottom:22px;}
    #menu {width:auto;margin-bottom:22px;height:25px;}
    #wrap {width:auto;color:#999;text-align:justify;overflow: hidden;}
    #col-left {width: 580px;float:left;padding-bottom: 32768px;margin-bottom: -32768px;}
    p { margin:5px;}
    #col-right {width:200px;padding-bottom: 32768px;margin-bottom: -32768px;float: right;}
    #footer {clear:both;width:auto;height:25px; margin-top:22px;}
    h2 {font-family:Arial, Helvetica, sans-serif;font-size:medium;color:#999;border-bottom:1px solid #333333; margin:5px;}
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="header"></div>
      <div id="menu"></div>
      <div id="wrap">
        <div id="col-left">
    
          <h2># Lorem Ipsum Dolor</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat     volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo                 consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla         facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla         facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea    commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu             feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te    feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer    possim assum. </p>
        </div><div id="col-right"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat     volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo                 consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla         facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla         facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna    aliquam erat volutpat.</p></div>
      </div>
      <div id="footer"></div>
    </div>
    </body>
    </html>
    Alles anzeigen

    Das Manko: die fehlende untere Abschlußlinie, so man einen Rahmen setzt.

    Gruß yeti66 :wink:
    ___________________________________________
    :info:http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de/ Freiberuflicher Musiker für individuelle Musikdienstleistungen

  • koslowski
    Meister(in)
    Beiträge
    267
    • 10. November 2008 um 07:42
    • #22

    Moin,

    Zitat von yeti66

    Mit den gleichen Höhen wird es nie so einfach werden, wenn Du keine Faux Columns Technik anwenden möchtest. Hier mal eine Lösung mit
    overflow: hidden . Das Manko: die fehlende untere Abschlußlinie, so man einen Rahmen setzt.

    sorry, aber "Equal Height Columns" ist wohl kaum die richtige Methode um damit zu arbeiten.

    Die Kombination von overflow:hidden mit verlängerten Spalten führt zu inkonsistenten Verhalten bei Links zu Ankern, deren Ziel innerhalb des Overflow-Elements liegt.
    FF und IE7, IE6 bewegen die Inhalte innerhalb des overflow-Containers.
    Die Folge ist das alle Inhalte oberhalb des Ankerziels nach oben ins Nirwana verschwinden.

    Das ist nur eins der Probleme von "Equal height Columns".

    Wenn schon dann "Companion Columns Technik", die ist
    nebenwirkungsfrei. ;)

    Allerdings wäre das mit Kanonen auf Spatzen geschossen und für CSS-Anfänger vollkommen ungeeignet.

    Warum sollte man "Faux Columns" nicht anwenden wollen?
    Ist doch einfach und funktioniert problemlos. :)

    koslowski

    :arrow: Mein Blog

  • yeti66
    König(in)
    Beiträge
    1.152
    • 10. November 2008 um 09:51
    • #23

    Für mich persönlich wäre das auch nicht die Ideallösung. Hier ging es ja auch nur um eine Annäherung an den Screen des Layouts, mehr nicht. Hier würde ich eher einen Container relativ mit voller Breite (width:auto;) setzen (für den Content) und den Info-Container im Content verschachtelt setzen, inclusive einem linken Rand im Info-Bereich um den Content von der Info-Leiste optisch abzugrenzen (#info {position: absolute top right;..und border-left: solid #ccc 1px;}). Ich denke damit könnte man leben ohne Grafik einsetzen zu müssen und das ist ja sein Ziel.

    Gruß yeti66 :wink:
    ___________________________________________
    :info:http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de/ Freiberuflicher Musiker für individuelle Musikdienstleistungen

    • 1
    • 2

Tags

  • html
  • background
  • layout
  • problem
  • code
  • bild
  • bot
  • bottom
  • div
  • lösen
  • rest
  • height
  • info
  • px
  • width
  • header
  • left
  • html-code
  • float
  • margin-bottom
  • padding
  • margin
  • floats
  • wrapper
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern