• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

bereich von anderem abhängig

Status
Für weitere Antworten geschlossen.
F

Franky55555

Neues Mitglied
Hi!

gehts irgendwie , dass ein bereich sich an einem anderem orientiert, so dass er bereich immer genausolang is wie ein anderer bereich?

lg
 
Natürlich geht das. Mit Tabellen-Zellen und solchen Elementen, die sich als solche verhalten sollen (display:table-cell). Nur leider gibts da einen gewissen Browser, der dazu zu doof ist, also lässt sich das nicht anwenden. Und Tabellen kommen ja bekanntlich nur bei tabellarischen Daten zur Anwendung.

Grüße,
-Efchen
 
hi


das isd der HTML code:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>DanielFrank-Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="http://danielfrank.bplaced.net/danielfrank.css">
</head>
<body>

<div id="container">

<div id="header"><h2><center><br>Daniel Frank</center></h2></div>

<div id="navi">
<br>
<br>
<a href="index.html" class="da"><b>Home</b></a><br>
<a href="uebermich.html" class="button"><b>&Uuml;ber Mich</b></a><br>
<a href="projekte.html" class="button"><b>Projekte</b></a><br>
<a href="bilder.html" class="button"><b>Bilder</b></a><br>
<a href="links.html" class="button"><b>Links</b></a><br>
<a href="impressum.html" class="button"><b>Impressum</b></a><br>
</div>

<div id="content">
Auf dieser Seite geht es um Elektronik, Hochspannung, Modellbau und Technik.
<br>
Die Seite Befindet sich noch im Aufbau.
<br>
<br>
<b>News:</b><br>
20.8.2008: Das Projekt "Roboter" ist online.<br>
28.7.2008: Die Seite ist online.
<br>
</div>

<div id="unten">

</div>

</div>
</body>
</html>
CSS:
Code: 
body {
background-color:#cccccc;
background-image:url(http://danielfrank.bplaced.net/design/bg.png);
font-family:arial;
}

#container {
   width:700px;
   margin:20px auto;
   border:0px solid #ff0000;
}

#header {
   width:100%;
   border:0px solid #000000;
   background-color:#ffffff;
   height:80px;
   margin-bottom:10px;
}

#navi {
   position: relative;
   float:left;
   padding:10px;
   width:150px;
   border:0px solid #000000;
   background-color:#ffffff;
   margin-right:10px;
   margin-bottom:10px;
   min-height:500px;
}

#content {
   float:left;
   width:500px;
   border:0px solid #000000;
   padding:10px;
   background-color:#ffffff;
   margin-bottom:10px;
   min-height:500px;
}

#unten {
   clear:both;
   width:100%;
   border:0px solid #000000;
   background-color:#ffffff;
   height:60px;
}

.button {
   color: #000000;
   text-decoration: none;
   margin-left:10px;
   background-color:#hhhhhh;
}

.button:hover {
   text-decoration: underline;
}

.da {
   color: #000000;
   text-decoration: underline;
   margin-left:10px;
   background-color:#hhhhhh;
}
wenn der bereich "content" größer wird (bei viel text), dann soll der bereich "navi" auch großer werden, so dass er immer 10px abstand zum bereich "unten" hat.
der Link zu meiner HP befindet sich in der Signatur.


MfG
 
Also, so wie ich das sehe, ist das ein typischer Fall für Faux Columns. Den Link habe ich Dir in meinem vorherigen Beispiel schon geschrieben.

Gruß thuemmy
 
Franky55555 schrieb:
geht das auch anders, z.B. mit javaskript, oder css?
Zum Vergrößern anklicken....
Es ist eine CSS-Lösung

Franky55555 schrieb:
bei den Faux Columns lässt sich doch nur die breite einstellen, oder?
Zum Vergrößern anklicken....
Nein, es lässt sich die Länge der Spalten einstellen. Bei dem Link den ich Dir gepostet habe, geht es zwar um ein dreispaltiges Layout, aber guck Dir hir mal das Beispiel an, und achte auf die mittlere Spalte: Faux Columns bei flüssigem Layout

Gruß thuemmy
 
Franky55555 schrieb:
Ich verstehe die Faux Columns irgendwie nicht. konnt ihr sie mir einfach erklären, oder mir sagen welchen code ich wo einfügen soll?
Zum Vergrößern anklicken....
In dem Link ist das recht einfach erklärt.
Du umspannst #navi und #content mit einem <div> (#boxen).
Ein weiteres Element, innerhalb von #boxen, cleart die floats von #navi und #content.
Damit ist #boxen immer so hoch wie die höhere, der beiden gefloateten Boxen.

#Boxen enthält eine Hintergrundgrafik welche die Aufteilung der "Spalten" simuliert.

Code: 
<div id="boxen">

<div id="navi">
....
....
</div>

<div id="content">
...
...
</div>


<div class="clearer"><!--clearer--></div>

</div>
css (nur Änderungen)
Code: 
#boxen {
background-image: url(images/bg-boxen.png);
background-repeat: repeat-y;
}

/*haslayout für IE6 */
* html #boxen {
height: 1%;
}

.clearer {
clear: both;

}


#navi {
   border:0px solid #000000;
   background-color:transparent;
}

#content {
   background-color:transparent;
}

#unten {
margin-top: 8px;
}
Dein Hintergrund ist fein gekachelt.
Deswegen währe, je nach Inhalt eventuell ein Übergang der Grafiken zu sehen.
Um das zu vermeiden, sollte die Carbon-Kachelung nicht in der Grafik enthalten sein, sondern anstelle dessen ein transparenter Bereich.

Die Grafik sollte 800px breit sein und als Trenner den transparenten bereich enthalten. (gif oder png 8bit).
Hier als png:
http://css-spalten.red-rod.net/test/beispiel/images/carbon.png
 
Zuletzt bearbeitet:
Bestimmt kannst du die Höhe eines Elementes mit Javascript auslesen.
Nur wozu, wenn es auch ohne geht.
Das Layout braucht doch so oder so background-images.
 
mich würde es einfach interessieren wie das gehen würde.
kann jemand den code posten?

Hat wer Namens/Domainvorschläge für die Seite?
Auf der Seite gehts um Elektronik, Modellbau und Technik.

weiß denn keiner wies geht? :cry:
 
Zuletzt bearbeitet von einem Moderator:
@ Franky

auch für dich gibts hier ne Editier-Funktion, die verwendet werden soll, anstatt auf die eigenen Beiträge zu antworten.
Pushen von Themen wird ebenfalls nicht gerne gesehen.
Bitte beachten.

Danke.
 
Franky55555 schrieb:
mich würde es einfach interessieren wie das gehen würde....
kann jemand den code posten?
Zum Vergrößern anklicken....
Mit offsetHeight
Trotzend der Gefahr ausgelacht zu werden:
Code: 
<div id="boxen">
<div id="box1">
<p>
Das ist id="box1"<br />
lorem ipsum<br />lorem ipsum<br />lorem ipsum<br />
</p>

</div>

<div id="box2">
<p>
Das ist id="box2"<br />
lorem<br />
ipsum
</p>
</div>
<hr />
</div>

<script type="text/javascript">
var box = document.getElementById("box1");
var boxheight1 = box.offsetHeight;
    document.write("<p>#box1 ist "+boxheight1+"px hoch.</p>");

var box = document.getElementById("box2");
var boxheight2 = box.offsetHeight;
    document.write("<p>#box2 ist "+boxheight2+"px hoch.</p>");

if(boxheight2 > boxheight1)
{
document.getElementById("box1").style.height = boxheight2+"px";
    document.write("<p>#box1 ist jetzt so hoch wie #box2 ("+boxheight2+"px)</p>");
}
else
{
document.getElementById("box2").style.height = boxheight1+"px";
    document.write("<p>#box2 ist jetzt so hoch wie #box1 ("+boxheight1+"px)</p>");
}
    </script>
So in der Art jedenfalls.

Die Boxen floaten. mit <hr /> clearen. document.write entfernen nach dem du es verstanden hast.
 
Zuletzt bearbeitet:
Also irgendwas scheint mit meinem Firebug nicht zu stimmen. Da wird mir in dem navi-div eine style-Angabe für die Höhe angezeigt (nun isse übrigens anders als vorher) aber im Quelltext ist da nichts davon zu finden. Sieht jetzt auch anders aus. Eben war die Navi noch zu kurz jetzt isse ein Stück zu lang.

Gruß thuemmy
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben