navi mit content abschließen lassen?¿

IceThunder

Kaiser

Dabei seit: 05.08.2003

Beiträge: 1 073

1

Sonntag, 28. August 2005, 09:59

hi,

hier soll die navi genauso groß (lang) sein wie der content und mit dem footer abschließen. d.h., wenn sich der content aufgrund übergroßen inhalts nach unten dehnt, soll das auch mit der navi passieren.
wie realisier ich das?

schaut euch die seite am besten mit dem firefox an... für den ie hab ich das noch nit "optimiert" --> sieht noch kraut und rüben aus xD

Quellcode

<!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" xml:lang="de">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
      <style type="text/css">
      <!--
      * {
      margin: 0px;
      padding: 0px;
      border: 0px;
      }

      body {
      width: 800px;
      height: 100%;
      font: 12px Verdana;
      margin-left: auto;
      margin-right: auto;
      }
      
      a:link {
      text-decoration: none;
      color: #000000;
      }
      
      a:visited  {
      text-decoration: none;
      color: #000000;
      }
      
      a:active {
      text-decoration: none;
      color: #000000;
      }
      
      a:hover {
      text-decoration: none;
      color: #ff9900;
      }

      #header {
      width: 798px;
      height: 100px;
      border: 1px solid #000000;
      border-collapse: collapse;
      top: 0px;
      }

      #navi, #subnavi {
      width: 150px;
      border: 1px solid #000000;
      border-collapse: collapse;
      }

      #navi {
      float: left;
      }

      #subnavi {
      float: right;
      }
      
      #navi dt, #subnavi dt {
      text-decoration: underline;
      }

      #navi li, #subnavi li {
      list-style-type: none;
      }

      #content {
      width: 496px;
      border: 1px solid #000000;
      border-collapse: collapse;
      margin-left: 151px;
      }

      #footer {
      width: 800px;
      height: 50px;
      border: 1px solid #000000;
      border-collapse: collapse;
      }
      
      /* fixes für ie */
      
      * html #navi {
      margin-top: -20px;
      }
      
      * html #subnavi {
      margin-top: -20px;
      }
      
      * html #content {
      margin-top: -402px;
      }
      -->
      </style>
   </head>
   <body>
      <!-- <header> -->
      <h1 id="header">Überschrift</h1>
      <!-- </header> -->
      <!-- <navi> -->
      <dl id="navi">
         <dt>Menü #1</dt>
            <dd id="menu1">
               <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
               </ul>
            </dd>
         <dt>Menü #2</dt>
            <dd id="menu2">
               <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
               </ul>
            </dd>
         <dt>Menü #3</dt>
            <dd id="menu3">
               <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
               </ul>
            </dd>
         </dt>
      </dl>
      <!-- </navi> -->
      <!-- <subnavi> -->
      <dl id="subnavi">
         <dt>Menü #1</dt>
            <dd id="submenu1">
               <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
               </ul>
            </dd>
         <dt>Menü #2</dt>
            <dd id="submenu2">
               <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
               </ul>
            </dd>
         <dt>Menü #3</dt>
            <dd id="submenu3">
               <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
               </ul>
            </dd>
         </dt>
      </dl>
      <!-- </subnavi> -->
      <!-- <content> -->
      <div id="content">
     text
      </div>
      <!-- </content> -->
      <!-- <footer> -->
      <p id="footer">Copyright</p>
      <!-- </footer> -->
   </body>
</html>

mfg,
icethunder

Ung00d

König

Dabei seit: 10.03.2003

Beiträge: 948

2

Sonntag, 28. August 2005, 16:38

schonmal probiert der navi height:100% zu geben? Damit KÖNNTE es funktionieren

Frauen ein Kompliment zu machen ist wie Topfschlagen im Minenfeld!

Fab

Lebende Foren Legende

Dabei seit: 30.03.2003

Beiträge: 1 635

3

Sonntag, 28. August 2005, 18:09

Hi ice

Ich muss dich leider enttäuschen. Bisher gibt es meines Wissens keine Lösung.

Wir hatten schon einmal so einen Thread, ohne Lösung

http://www.webmasterwork.com/forum/threa…did=36253/sid=/

Allerdings könntest du einen kleinen Trick ausprobieren:

1. Du machst ein (main-)<div> um deine zwei Navigationen und den Content. Also einen umfassenden Container.
2. Füllst diesen mit der gleichen Hintergrundfarbe, wie die beiden Navigationen.
3. Dem Content-<div> gibst du links und rechts einen Border
4. Dem grossen (main-)<div> gibst einen rundum Border.

Verlängert sich nun das Content div, sieht man nicht, dass die Navigationen oben aufhören und man hat das Gefühl, dass sie sich mitstrecken (da der Border ja mitgeht

)

Ich hoffe, dass dir das hilft und du weisst, wie ich es meine

Mfg Fab

PS: Wenn du das für den IE anpasst, solltest du dir noch folgenden Link ansehen:

http://www.spotleid.de/forum/voll-hreftig/16136.html

Er behebt einen Fehler beim (sowieso blöden) Box-Modell des IE.

-->Vokaline - schneller und effizienter Wörter lernen<-- (kostenlos!)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Fab« (28. August 2005, 18:12)

gaby*

Routinier

Dabei seit: 28.07.2003

Beiträge: 259

4

Mittwoch, 31. August 2005, 22:23

Zitat

Original von Fab
Ich muss dich leider enttäuschen. Bisher gibt es meines Wissens keine Lösung.

Ja, leider. :-(
Es gibt viele Ansätze für dieses Problem, aber keine ist 100%ig.

Zitat

Original von Fab
Allerdings könntest du einen kleinen Trick ausprobieren:

1. Du machst ein (main-)<div> um deine zwei Navigationen und den Content. Also einen umfassenden Container.
2. Füllst diesen mit der gleichen Hintergrundfarbe, wie die beiden Navigationen.
3. Dem Content-<div> gibst du links und rechts einen Border
4. Dem grossen (main-)<div> gibst einen rundum Border.

Verlängert sich nun das Content div, sieht man nicht, dass die Navigationen oben aufhören und man hat das Gefühl, dass sie sich mitstrecken (da der Border ja mitgeht )

Ich hoffe, dass dir das hilft und du weisst, wie ich es meine

Oje, dann bin ich ja jetzt die Einzige, die nicht weiß, wie du es gemeint hast:

meintest du unter Punkt 3.
a.) dem Content eine Border geben in der Breite der Navis, und die Links (mit negativen margins *g*) in diese Border schreiben
oder
b.) dem Content ein margin-left + margin-right in der Breite der Navis geben und die Navi-Boxen mit float-left + float-right an die Ränder kleben?

Grüße
gaby

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »gaby*« (1. September 2005, 08:19)

Ung00d

König

Dabei seit: 10.03.2003

Beiträge: 948

5

Donnerstag, 1. September 2005, 02:25

Wenn ich das richtig verstanden habe meinte er

	Quellcode
1 2	border-left:1px solid; border-right:1px solid

zumindeste denkte ich dass er das meint

Frauen ein Kompliment zu machen ist wie Topfschlagen im Minenfeld!

IceThunder

Kaiser

Dabei seit: 05.08.2003

Beiträge: 1 073

6

Donnerstag, 1. September 2005, 09:15

Zitat
Original von Ung00d
Wenn ich das richtig verstanden habe meinte er
Quellcode
1
2
border-left:1px solid;
border-right:1px solid
zumindeste denkte ich dass er das meint

so hab ich das auch verstanden

wahrscheinlich ist meine denkweise aber zu "eingeschränkt"

naja... leider funktionierts auch nicht so wie ich mir das vorstelle..

gaby*

Routinier

Dabei seit: 28.07.2003

Beiträge: 259

7

Donnerstag, 1. September 2005, 11:21

Ja, das dachte ich auch zuerst, daß das so gemeint sein könnte.
Aber da diese border ja nun nix in der Positionierung bewirkt, nahm ich an, daß Fab etwas anderes gemeint haben könnte (schließlich gehört er ja auch schon zu den Fortgeschritteneren)

zb diesen bsp-code hier:

zu a.) http://www.selfhtml.de/forum/zeigebeitrag_1_83533__.php3

Und nein, hierzu mache ich jetzt keine Demo. Wen es interessiert, der muß sich den Code schon selbst in seinen Editor kopieren.

Das Prinzip hierbei ist:
Es gibt eine umfassende Box, welche links + rechts ganz breite Rahmen hat

	Quellcode
1 2	( border-left: 9em solid green; border-right: 8em solid blue;

Nun kann man ja normalerweise in die Rahmen nix hineinschreiben, sondern nur in die Box selbst.
Man kann aber Text (in diesem Fall die Links) mit negativen margins soweit "aus der Box herauspositionieren", bis die Links genau in dem breiten Rahmen der Box liegen.

Optisch sieht es aus, wie 3 gleich hohe Boxen nebeneinander, obwohl es nur eine ist.

zu b.) http://www.selfhtml.de/forum/zeigebeitra…77&thread=86669

@ Ice Thunder

wenn du nur eine Korrektur deines Quellcodes möchtest:

es fehlt ein 'clear: both' vor dem footer-div.

Grüße
gaby

Fab

Lebende Foren Legende

Dabei seit: 30.03.2003

Beiträge: 1 635

8

Donnerstag, 1. September 2005, 12:45

Hi

@gaby

Zitat

(schließlich gehört er ja auch schon zu den Fortgeschritteneren) Freude

Danke

)

Ich muss sagen die beiden Beispiele von dir sind echt gut gemacht

Auch wenn dazu der Border missbraucht wird

Ich habe es so gemeint, dass man wie ung00d gesagt hat einen Border macht und die Naviboxen einfach so wie das main-div färbt, damit es nicht auffällt, dass die Box in Wirklichkeit zu kurz ist.
Das was man sieht ist der Border, der schön mit dem Content-Div mitzieht.

Ich werde dazu mal einen Beispielcode machen, aber das geht erst heute Abend. Jetzt muss ich erstmal etwas essen

Mfg Fab

EDIT: So hier erstmal der Code:

Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<style type="text/css">
	<!--
		.main {
			background-color: lime;
		}
		.navi_left {
			float: left;
			min-height: 200px;
			width: 15%;
			background-color: lime;
		}
		* html .navi_left {
			height: 200px;
		}
		.navi_right {
			float: right;
			min-height: 200px;
			width: 15%;
			background-color: lime;
		}
		* html .navi_right {
			height: 200px;
		}
		.content {
			margin-left: 15.2%;
			margin-right: 15.2%;
			min-height: 200px;
			border-left: 2px #FF0000 solid;
			border-right: 2px #FF0000 solid;
			background-color: navy;
		}
		* html .content {
			height: 200px;
		}
	-->
	</style>
  </head>
  <body>
   <div class="main">
    <div class="navi_left"></div>
	<div class="navi_right"></div>
	<div class="content"> Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit. Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit. Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit. Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit. Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit. Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit. Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit. Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit. Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit. </div>
    <div style="clear: both"></div>
   </div>
  </body>
</html>

Ich habe gesehen, dass diese Lösung ähnlich wie die Lösung b von Gaby ist. Bei meiner Version ist einfach die Standarthöhe nicht auf 100%.

Mfg Fab

-->Vokaline - schneller und effizienter Wörter lernen<-- (kostenlos!)

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Fab« (1. September 2005, 18:50)