CSS-Spezialisten gesucht!

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

  1. Sam Lowry

    Sam Lowry Thread Starter MacUser Mitglied

    Beiträge:
    144
    Zustimmungen:
    0
    Registriert seit:
    09.12.2004
    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:

  2. Chuonrad

    Chuonrad MacUser Mitglied

    Beiträge:
    606
    Zustimmungen:
    53
    Registriert seit:
    27.08.2004
    vielleicht hilft das dir schon weiter:

    CSS-Templates

    viel Erfolg!
     
    Zuletzt von einem Moderator bearbeitet: 25.10.2015
  3. Sam Lowry

    Sam Lowry Thread Starter MacUser Mitglied

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

    Thx!
     
    Zuletzt von einem Moderator bearbeitet: 25.10.2015
  4. Sam Lowry

    Sam Lowry Thread Starter MacUser Mitglied

    Beiträge:
    144
    Zustimmungen:
    0
    Registriert seit:
    09.12.2004
    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

    Beiträge:
    438
    Zustimmungen:
    11
    Registriert seit:
    09.10.2004
    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>
     
    Zuletzt bearbeitet: 04.03.2005
  6. hebbes

    hebbes MacUser Mitglied

    Beiträge:
    6
    Zustimmungen:
    0
    Registriert seit:
    13.05.2003
    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

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

    Sam Lowry Thread Starter MacUser Mitglied

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

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

    lengsel MacUser Mitglied

    Beiträge:
    4.627
    Zustimmungen:
    53
    Registriert seit:
    25.11.2003
  10. kelli

    kelli MacUser Mitglied

    Beiträge:
    301
    Zustimmungen:
    0
    Registriert seit:
    27.01.2004
    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 ;).
     
    Zuletzt bearbeitet: 05.03.2005
Die Seite wird geladen...

Diese Seite empfehlen