Benutzerdefinierte Suche

CSS-Spezialisten gesucht!

  1. Sam Lowry

    Sam Lowry Thread StarterMacUser 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
    Sam Lowry, 04.03.2005
  2. Chuonrad

    ChuonradMacUser Mitglied

    Mitglied seit:
    27.08.2004
    Beiträge:
    371
    Zustimmungen:
    151
    vielleicht hilft das dir schon weiter:

    CSS-Templates

    viel Erfolg!
     
    Chuonrad, 04.03.2005
  3. Sam Lowry

    Sam Lowry Thread StarterMacUser Mitglied

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

    Thx!
     
    Sam Lowry, 04.03.2005
  4. Sam Lowry

    Sam Lowry Thread StarterMacUser 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?
     
    Sam Lowry, 04.03.2005
  5. Joost

    JoostMacUser 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>
     
    Joost, 04.03.2005
  6. hebbes

    hebbesMacUser 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.
     
    hebbes, 04.03.2005
  7. chillu

    chilluMacUser Mitglied

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

    Sam Lowry Thread StarterMacUser 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.
     
    Sam Lowry, 04.03.2005
  9. lengsel

    lengselMacUser Mitglied

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

    kelliMacUser 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 ;).
     
    kelli, 05.03.2005
Die Seite wird geladen...
Ähnliche Themen - CSS Spezialisten gesucht
  1. bat2111
    Antworten:
    9
    Aufrufe:
    236
    bat2111
    22.05.2017
  2. dennz2017
    Antworten:
    2
    Aufrufe:
    317
  3. hello
    Antworten:
    1
    Aufrufe:
    239
  4. Hoooray
    Antworten:
    2
    Aufrufe:
    337
    Hoooray
    21.07.2015
  5. Kemna
    Antworten:
    6
    Aufrufe:
    570