1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS-Spezialisten gesucht!

Dieses Thema im Forum "Web-Design" wurde erstellt von Sam Lowry, 04.03.2005.

  1. Sam Lowry

    Sam Lowry Thread Starter MacUser Mitglied

    Mitglied seit:
    09.12.2004
    Beiträge:
    144
    Zustimmungen:
    0
    Wie kann ich es bloß erreichen das ein zweispaltiges Design (siehe Skizze) auf einem gemeinsamen (Bild-)Hintergrund (=1) nicht dann kaputt geht, wenn eine der beiden Textspalten (2 oder 3) deutlich länger als die andere wird?

    In der Praxis soll der einheitliche Hintergrund mit Kopf- und Fußzeile immer um den gleichen Betrag höher sein als die jeweils längste Spalte, damit nix »überhängt«.

    Ich hoffe, das war verständlich…?
     

    Anhänge:

    • cssproblem.jpg
      Dateigröße:
      17,1 KB
      Aufrufe:
      40
  2. Chuonrad

    Chuonrad MacUser Mitglied

    Mitglied seit:
    27.08.2004
    Beiträge:
    377
    Zustimmungen:
    171
    vielleicht hilft das dir schon weiter:

    CSS-Templates

    viel Erfolg!
     
  3. Sam Lowry

    Sam Lowry Thread Starter MacUser Mitglied

    Mitglied seit:
    09.12.2004
    Beiträge:
    144
    Zustimmungen:
    0
    Das ist ja interessant! Muss ich mal probieren.

    Thx!
     
  4. Sam Lowry

    Sam Lowry Thread Starter MacUser Mitglied

    Mitglied seit:
    09.12.2004
    Beiträge:
    144
    Zustimmungen:
    0
    Hm, da habe ich keine Lösung gefunden. Ich poste mal den Code einer Beispielseite. Ziel ist es, dass der graue Hintergrund immer mit der Länge der Spalten (recht o. links) nach unten wandert, die Spalten sollen immer von Hintergrund umgeben sein!

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    
    <head>
    
    <title>test</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     
    <style type="text/css"><!--
    
    
    #hintergrund {
    	position: relative;
    	margin-right: auto;
    	margin-left: auto;
    	width: 750px;
    	background: grey repeat-y;
    	padding: 10px;
    	height: auto;
    }
    
    #links {
    	width: 500px;
    	background: #ffe4de;
    	position: absolute;
    	height: 100px;
    }
    
    #rechts {
    	width: 250px;
    	height: 200px;
    	left: 500px;
    	position: absolute;
    	background: #d7ffa9;
    }
    
     -->
    </style>
    
    </head>
    
    <body>
    
    <div id="hintergrund">
    
    <div id="links">links</div>
    
    <div id="rechts">rechts</div>
    
    </div>
    
    </body>
    
    </html>
    Herrgott, wieso zieht der das jetzt so in die Breite?
     
  5. Joost

    Joost MacUser Mitglied

    Mitglied seit:
    09.10.2004
    Beiträge:
    438
    Zustimmungen:
    11
    Probier mal folgendes:

    #links { overflow:visible; }
    #rechts { overflow:visible; }

    damit sollte der Hintergrundbereich vergrößert werden, wenn das untergeordnete Element (#rechts oder#links) größer ist, als der Hintergrundbereich.

    Weitere Optionen wären: hidden (das Element wird auf größe des übergeordneten Elements beschnitten), scroll (erzeugt einen Scrollbalken, wenn des untergeordnete Element zu groß ist) und auto (überläßt dem Browser die Entscheidung).

    In deinem html Dokument müßte das dann ungefähr so aussehen:

    <div class=#hintergrund>
    <div class=#links></div>
    <div class=#rechts></div>
    </div>
     
  6. hebbes

    hebbes MacUser Mitglied

    Mitglied seit:
    13.05.2003
    Beiträge:
    6
    Zustimmungen:
    0
    Oder bastel dir ein 1px hohes, 750px breites gif. Färbe es entsprechend deinen Spalten und lasse es im #hintergrund mitlaufen.
     
  7. chillu

    chillu MacUser Mitglied

    Mitglied seit:
    20.04.2004
    Beiträge:
    10
    Zustimmungen:
    0
  8. Sam Lowry

    Sam Lowry Thread Starter MacUser Mitglied

    Mitglied seit:
    09.12.2004
    Beiträge:
    144
    Zustimmungen:
    0
    Danke für Eure Tipps! :)

    Muss leider jetzt weg, werde das aber morgen mal ausprobieren.
     
  9. lengsel

    lengsel MacUser Mitglied

    Mitglied seit:
    25.11.2003
    Beiträge:
    4.553
    Zustimmungen:
    53
  10. kelli

    kelli MacUser Mitglied

    Mitglied seit:
    27.01.2004
    Beiträge:
    301
    Zustimmungen:
    0
    Dein Code ist soweit schon in Ordnung. Ich würde folgendes verändern dann sollte es gehen:

    Code:
    body {
            background: grey;
            }
    
    #hintergrund {
            background: url(/img/hintergrund.gif); *einfügen zur gif erstellung s.u.)
            position: relative; *rausnehmen*
            margin-right: auto;
            margin-left: auto;
            width: 750px;
            \width: 770px; * f. IE*
            w\idth: 750px; *f. IE*
            background: grey repeat-y; *dies wandert in den Body*
            padding: 10px;
            height: auto; *rausnehmen*
    }
    
    #links {
            margin-right: 250px; *einfügen*
            width: 500px; *rausnehmen*
            background: #ffe4de; *rausnehmen*
            position: absolute; *rausnehmen*
            height: auto; *ändern*
            min-height: 100%; *einfügen*
            z-index: 5; *höchste ebene*
    }
    
    #rechts {
            float: right; *einfügen*
            width: 250px;
            \width: 270px; *f. IE*
            w\idth: 250px; *f. IE*
            height: 200px; *rausnehmen*
            left: 500px; *rausnehmen*
            position: absolute; *rausnehmen*
            background: #d7ffa9; *rausnehmen*
            z-index: 4; *2. höchste ebene*
    }
    
     --> </style> </head> <body> <div id="hintergrund"> <div id="links">links</div> <div id="rechts">rechts</div> </div> </body> </html>
    Danach noch ein .gif erstellen mit deinen Hintergrundfarben. Also: #d7ffa9 f. rechts 250px und #ffe4de f. links 500px. Dann sollte es funktionieren.

    *edit* Falls noch fragen sind -> AIM: zwocent. So macht es nun kein Problem aber du solltest dir bei Gelegenheit mal über websichere Farben Gedanken machen ;).