Ergebnis 1 bis 14 von 14
  1. #1
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    Content mit festen Höhe trotzdem dynamisch

    Hallo CSS'ler,

    da in letzter Zeit öfters mal die Frage auf kam, wie man sein Content eine feste Höhe geben kann und dieser trotzdem sich dynamisch anpasst, wenn mehr text dazu kommt.

    Ich biete die Lösung des Höhen-Halters an.
    Dieser, bestehen aus einem <div>, ist dafür zuständig, dass die Höhe gehalten wird, wenn sich mal weniger als gewollte Text im Contentbereich befindet. Dieser ist unabhängig vom eigentlichem Contentbereich.

    Also einfach mal angucken.

    Grüße Robert

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
    <title>/</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    <style type="text/css">
    
    body {
    
    	font			: normal 0.8em Sans-Serif;
    }
    
    #content {
    
    	width			: 551px;
    
    	background-color	: #E8E8E8;
    }
    
    #heightholder {
    
    	line-height		: 0px;
    	font-size		: 1px;
    
    	width			: 1px;
    	height			: 400px;
    
    	float			: left;
    }
    
    #leftcell {
    
    	text-align		: justify;
    	line-height		: 20px;
    
    	width			: 180px;
    
    	padding			: 10px;
    
    	float			: left;
    }
    
    #rightcell {
    
    	text-align		: justify;
    	line-height		: 20px;
    
    	width			: 330px;
    
    	padding			: 10px;
    
    	float			: left;
    }
    
    .clear {
    
    	line-height		: 0px;
    	font-size		: 1px;
    
    	clear			: both;
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="content">
    
    	<div id="heightholder"></div>
    
    	<div id="leftcell">
    		<strong>Der Blindtext-Fall</strong>
    		<br />
    		Sie erinnern sich. Der Blindtext-Fall im vorigen Jahr. Nun will Karl noch nach Canossa. Und Claudia heiratet 
    		zur Busse Copperfield. Jeden Morgen entzünden sie eine Kerze. Jeden Nachmittag ist eine Runde Rosenkranz fällig. 
    		Zur Heiligen Marie. Weil Karl mit dem Zopf der Claudia mit dem Smile optisch nette Koran-Typo aufs Mieder hat 
    		sticken lassen. Heiliger Blindtext am Busen.
    	</div>
    
    	<div id="rightcell">
    		Da läßt der Mullah nicht mit sich scherzen. Blindtext killt Chanel, Islam erklärt Karl den Krieg, das 
    		Abendland zittert. Der Blindtext-Fall ist geboren. Die Geschichte des Blindtextes und seiner Texter wird 
    		aufgeblättert. Endlich. Was wissen Sie über Blindtext? Katholischen nimmt man für Kochbücher, 
    		evangelischen für Bauhausmöbelprospekte, hebräischer wird in Hollywood verfilmt, atheistischer ist für 
    		Procter & Gamble Waschmittel, arabischer ist nicht. Und weiter? Zu wem beten Karl und Claudia jeden Tag 
    		als Buße für ihre Blindtext-Sünde? Zu ihr. Zur Heiligen Marie Antoinette. Madame ging schön aufs Schafott.
    		Welch eine Haltung. Sie weiß, sie kriegt den Kopf ab. Aber vorher pudert sie ihn noch, beißt sich auf die 
    		Lippen von wegen Lippenrot, kneift sich in die Wangen von wegen Wangenrot. Und sie weiß, sie wird den Kopf 
    		verlieren. Oben ab. Und es stört die Marie nicht. Diese Haltung verehren die Blindtexter. Du weißt, du 
    		wirst gecuttet. Aber du gibst alles. Sainte Marie, steh uns bei. The english call it the holy 
    		attitude of SM.
    		Des Blindtexters Heiliges Tier ist das Schwein. Es atmet und furzt, frißt und säuft, um verwurstet zu 
    		werden. Wie ähnlich doch dem Blindtext, der nur entsteht, um zerlegt zu werden. Was sagt der Art Director 
    		zu Faust? ... denn alles, was entsteht, ist wert, daß es zugrunde geht ...
    		Lohnt es sich nun zu clustern, was beim Art Direktor hinten rauskommt?
    	</div>
    
    	<br class="clear" />
    </div>
    
    </body>
    </html>

  2. #2
    Avatar von ZeitGeist
    ZeitGeist ist offline Lounge-Member
    registriert
    26-04-2003
    Ort
    Outa Space
    Beiträge
    4.125

    AW: Content mit festen Höhe trotzdem dynamisch

    So jetzt endlich hab auch ich das hinbekommen. Das einzige Problem was ich noch habe ist, dass das im Opera nicht immer funktioniert. Der scheint ein Problem mit float:left zu haben wenn die folgenden elemente divs sind.
    Weiß wer Rat wie ich das hinbekommen könnte?

    der entsprechende html-code
    HTML-Code:
    <div class="content">
      <div class="heightholder">&nbsp;</div>
      <h1>News</h1>
      <div class="news">
        <div class="kopf">An der Zeit gedreht</div>
        <div class="inhalt">So lange hab ich nicht für den [..].</div>
        <div class="fuss">XXX XXXX, Webmaster&nbsp;&nbsp;||&nbsp;&nbsp;16.09.04 um 15:28</div>
      </div>
      <div class="news">
        <div class="kopf">Unter falschen Namen</div>
        <div class="inhalt">die ist eigentlich nicht von Jürgen [..]schnell....</div>
       <div class="fuss">yyy yyyy, Jugendbildungsreferent&nbsp;&nbsp;||&nbsp;&nbsp;16.09.4</div>
      </div>
      <div class="news">
        <div class="kopf">die allererste</div>
        <div class="inhalt">nur ein wenig text, die nächste beko[..].</div>
        <div class="fuss">xxx xxxx, Webmaster&nbsp;&nbsp;||&nbsp;&nbsp;16.09.04 um 15:06</div>
      </div>
    </div>
    die entsprechenden css-styles:
    HTML-Code:
    div.content
    {
      position:absolute; top:150px; left:220px; z-index:2;			
      padding-left:80px; padding-right:60px; padding-bottom:50px; 
      background-image:url(images/balken.jpg); background-repeat:repeat-y;
    }
    div.heightholder	{	width: 1px;	height:600px;	float:left;	}
    div.news
    {
      width:380px;
      padding:2px;
      border: solid 1px #FB9414;
      margin-bottom:40px;
    }
    zum angucken
    hier die css datei
    die anderen Styles stehen direkt in der index.

    edit: Kennt wer eine umfasserende Dokumentation der CSS-Styles in Bezug auf Funktionalität (auch die unterschiedliche Interpretation) in den Browsern (nicht nur Netscape und IE)? Sind Netscape und Mozilla eigentlich durchweg gleich, von der Interpretation hergesehen?
    Geändert von ZeitGeist (30-10-2008 um 03:19 Uhr)

  3. #3
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    AW: Content mit festen Höhe trotzdem dynamisch

    setze unter den letzen newsblock einfach ein:

    <br style="line-height:1px;font-size:1px;clear:both;" />

    am besten du definierst eine klasse.


    es gibt eine seite wo die unterschiedlichen bugs der jeweiligen browser aufgezeigt werden.
    wie sie heißt müsste dkdenz wissen.

    und ja ab der version 7 ist NS == mozilla, jedenfalls benutzt NS die selbe engine.

  4. #4
    Avatar von ZeitGeist
    ZeitGeist ist offline Lounge-Member
    registriert
    26-04-2003
    Ort
    Outa Space
    Beiträge
    4.125

    AW: Content mit festen Höhe trotzdem dynamisch

    danke erstemal
    aber:
    als allerletztes im content-div? hat leider nix gebracht.


    Ne Seite hab ich gefunden, glaub die hat dkdenz mal gepostet, allerdings stand da nix das opera mit float:left irgendwelche probleme haben könnte
    http://www.css4you.de/ wars

  5. #5
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    AW: Content mit festen Höhe trotzdem dynamisch

    ach jetzt sehe ich.

    setze doch die ganzen news samt h1 tag in eine extra div, diesem weist du auch float:left zu und dann beherzigst du meinen ersten vorschlag.

    also so:

    Code:
    <div class="content">
      <div class="heightholder">&nbsp;</div>
    <div style="float:left">
      <h1>News</h1>
      <div class="news">
        <div class="kopf">An der Zeit gedreht</div>
        <div class="inhalt">So lange hab ich nicht für den [..].</div>
        <div class="fuss">Carl Volhard, Webmaster&nbsp;&nbsp;||&nbsp;&nbsp;16.09.04 um 15:28</div>
      </div>
      <div class="news">
        <div class="kopf">Unter falschen Namen</div>
        <div class="inhalt">die ist eigentlich nicht von Jürgen [..]schnell....</div>
       <div class="fuss">Jürgen Steinecke, Jugendbildungsreferent&nbsp;&nbsp;||&nbsp;&nbsp;16.09.4</div>
      </div>
      <div class="news">
        <div class="kopf">die allererste</div>
        <div class="inhalt">nur ein wenig text, die nächste beko[..].</div>
        <div class="fuss">Carl Volhard, Webmaster&nbsp;&nbsp;||&nbsp;&nbsp;16.09.04 um 15:06</div>
      </div>
    </div>
    <br style="line-height:1px;font-size:1px;clear:both;" />
    </div>

  6. #6
    Avatar von ZeitGeist
    ZeitGeist ist offline Lounge-Member
    registriert
    26-04-2003
    Ort
    Outa Space
    Beiträge
    4.125

    AW: Content mit festen Höhe trotzdem dynamisch

    hast du es getestet? bei mir bringt das nämlich nur das jetzt nicht nur die news sondern auch die texte nach unten verschoben sind.

    Kann es daran liegen das ich kein xml verwende (HTML 4.01 Transitinal). Habs mal nur mit deinem header ausprobiert, da hat das keinen unterschied gemacht. Weiß aber nicht ob der Rest dann noch richtig ist, mit xml hab ich mich noch nicht beschäftigt.

    edit: hab mal den ganzen code rangehängt
    Angehängte Dateien Angehängte Dateien
    Geändert von ZeitGeist (30-09-2004 um 13:35 Uhr)

  7. #7
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    AW: Content mit festen Höhe trotzdem dynamisch

    wenn du mich so fragst, ja, fast jeden tag, wenn ich ein kundenlayout umsetzen muss.
    ich denke mal es liegt an der positionierung.


    edit:
    hier ist der link, bezüglich der bugs:
    http://www.fabrice-pascal.de/bugbase/
    Geändert von womstar (30-09-2004 um 21:57 Uhr)

  8. #8
    Avatar von ZeitGeist
    ZeitGeist ist offline Lounge-Member
    registriert
    26-04-2003
    Ort
    Outa Space
    Beiträge
    4.125

    AW: Content mit festen Höhe trotzdem dynamisch

    danke sehr.
    meinst du es liegt daran das es absolute positioniert ist?

  9. #9
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    AW: Content mit festen Höhe trotzdem dynamisch

    jup, meine ich. ich hatte es mal weggelassen und da schien es zu funktionieren.
    nur hing der content natürlich dann ganz oben links.

  10. #10
    Avatar von ZeitGeist
    ZeitGeist ist offline Lounge-Member
    registriert
    26-04-2003
    Ort
    Outa Space
    Beiträge
    4.125

    AW: Content mit festen Höhe trotzdem dynamisch

    hab jetzt die Navigation, den Balken, den Inhalt und den Heightholder in ein großes Div gepackt. Nur jetzt bricht er mich das Content-div nach unten ab wenn ich das nicht in der breite festlege (max-width geht auch da der IE das immer "richtig" plaziert).
    Nur eigentlich wollte ich das content-div dynamisch lassen, so das ich keine unterscheidung der Auflösung brauche und keine vertikalen scrolls bei kleinere Darstellung ensteht. Hättest du noch ne idee wie ich das möglichst flexibel umsetzten kann?

    mit max-widht gehts garnicht weil sobald ich die favoriten einblende bricht der mir um.
    Geändert von ZeitGeist (30-10-2008 um 03:20 Uhr)

  11. #11
    Avatar von ZeitGeist
    ZeitGeist ist offline Lounge-Member
    registriert
    26-04-2003
    Ort
    Outa Space
    Beiträge
    4.125

    AW: Content mit festen Höhe trotzdem dynamisch

    Hab das jetzt so gelöst das ich 2 Hintergrundgrafiken verwende, die überlagert werden.
    Das Content-Div ist absolut positioniert und enthält die eine Hintergrundgrafik. Dadurch ist der vertikale Balken immer solang wie das Content-Div.
    Das Navigations-Div ist normal postitioniert und befindet sich mit dem heightholder-div in einem gemeinsamen All-Div. Dieses Div enthält die andere Hintergrundgrafik. Die Höhe des Heightholder-div wird über JS gesetzt und sorgt dafür das der Balken mindestens bis zum ende der Seite geht. Falls die Navigation nicht auf eine Seite passt wird das All-Div vergrößert und somit ist ist der Balken mindestens solang wie die Navigation.

    Einziges Problem war, dass die Positionierung im IE um zwei Pixel nach links verschoben war. Hab nicht rausbekommen woran das lag. Muss das JS dann halt lösen.
    HTML-Code:
    <style type="text/css">
    #all	{background-image:url(images/balken2.jpg); background-repeat:repeat-y; padding-top:5px;	}
    #heightholder	{width:1px; float:left; line-height:0px; font-size:1px; }		
    #nav	{float:left; margin-top:140px; padding-bottom:50px;	}
    #content
    {
    	position:absolute; top:120px; left:230px; z-index:2;
    	background-image:url(images/balken.jpg); background-repeat:repeat-y;
    	padding-left:80px; padding-right:60px; padding-bottom:50px;			
    }		
    </style>
    <div id="all">
    	<div id="heightholder">&nbsp;</div>
    	<div id="nav">
    	 	 <!-- Navigation -->
    	</div>
    	<div id="content">
    	 	 <!-- Inhalt -->
     	</div>
    	<div style="line-height:1px;font-size:1px;clear:both;">&nbsp;</div>
    </div>	

  12. #12
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Content mit festen Höhe trotzdem dynamisch

    Das:
    background:url(bla.gif) repeat-y;
    spart Dir ein paar Zeichen...

  13. #13
    Avatar von ZeitGeist
    ZeitGeist ist offline Lounge-Member
    registriert
    26-04-2003
    Ort
    Outa Space
    Beiträge
    4.125

    AW: Content mit festen Höhe trotzdem dynamisch


    danke

  14. #14
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Content mit festen Höhe trotzdem dynamisch


    bitte

Ähnliche Themen

  1. PopUp-Alternative
    Von dkdenz im Forum Tutorials Javascript
    Antworten: 3
    Letzter Beitrag: 01-08-2008, 09:19
  2. Höhe von iFrame an Höhe von Quelldatei anpassen
    Von Amatron im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 12-11-2005, 15:19
  3. Buttons Dynamisch generieren
    Von felmken im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 24-08-2004, 20:26
  4. Antworten: 3
    Letzter Beitrag: 15-12-2003, 18:41
  5. Baumstrukturmenu dynamisch?
    Von ReCeD im Forum Allgemeines
    Antworten: 4
    Letzter Beitrag: 09-12-2003, 17:33

Lesezeichen

Berechtigungen

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