✔ Overflow mit variabler Höhe

Status
Nicht offen für weitere Antworten.
Dieses Modell habe ich unter WinXP in den folgenden Browsern erfolgreich getestet:

  • FF 2 + 3
  • IE 6 + 7
  • Netscape 7.1
  • Opera 9.27 + 9.50
  • Safari 3.0.4
  • SeaMonkey 1.1.6
Code: 
<!-- put IE into Quirksmode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LABILSTABIL - Atelier Christof Mayer</title>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Roman Martin, Online Arts Webdesign" />
<meta name="keywords" content="LABILSTABIL, Labil-Stabil, Labil, Stabil, Atelier, Christof Mayer, Möbel, Moebel, Design" />
<link rel="shortcut icon" type="image/x-icon" href="Template/Icon.ico" />
<!-- <link rel="stylesheet" type="text/css" href="Template/Style.css" /> -->
<style type="text/css">
* {
padding:0;
margin:0;
border:0;
}

html, body {
width:100%;
height:100%;
}

body {
background-color: #EEE;
overflow: hidden;
}

.FullScreen {
width:100%;
height: 100%;
text-align:center;
vertical-align:middle;
}

p.Text {
font-family:Arial,Verdana,Geneva,Helvetica,sans-serif;
font-size:12pt;
color:#000;
font-weight:normal;
text-decoration:none;
}
a.Link {
font-weight:bold;
text-decoration:none;
color:#000;
}
div.Just {
text-align:justify;
}

.mitte {
position:absolute;
top:0;
left:200px;
bottom:96px;
right:0;
overflow:auto;
}

.tableholder {
position:relative;
display:table;
height: 100%;
width: 100%;
vertical-align: middle;
text-align: center;
}
.inner {
width:100%;
display:table-cell;
vertical-align:middle;
position:relative;
}
table#table1 {
margin:auto;
width:600px;
border:1px solid #000;
}

.links {
position: absolute;
top:0;
left:0;
bottom:96px;
width:200px;
padding:0;
background-color:#EEE;
overflow:auto;
text-align:center;
vertical-align:top;
z-index:2;
}


.unten2 {
position:absolute;
left:0;
bottom:80px;
right:0;
height:16px;
padding:0;
background-color:#EEE;
overflow:hidden;
background-image:url(Template/Linie2.png); background-repeat:repeat-x;
z-index: 3;
}


.unten {
position:absolute;
left:0;
bottom:0;
right:0;
height:80px;
padding:0;
background-color:#FFF;
overflow:hidden;
text-align:center;
vertical-align:middle;
z-index:4;
}
</style>

<!--[if lte IE 7]>
<style type="text/css">
.mitte {
width:100%;
height:100%;
top:0;
left:0;
border-top-width:0;
border-left-width:200px;
border-bottom-width:96px;
border-right-width:0;
border-style:solid;
}
.links {
top:0;
width:200px;
height:100%;
border-top-width:0;
border-left-width:0;
border-bottom-width:96px;
border-right-width:0;
border-style:solid;
}
.unten2 {
left:0;
width:100%;
height:16px;
border-top-width:0;
border-left-width:0;
border-bottom-width:0;
border-right-width:0;
border-style:solid;
}
.unten {
left:0;
width:100%;
height:80px;
border-top-width:0;
border-left-width:0;
border-bottom-width:0;
border-right-width:0;
border-style:solid;
}

.tableholder{overflow:hidden}
.tableholder,.inner{display:block}
.inner {top:50%;left:0;}
.inner table#table1{top:-50%;position:relative;}
</style>
<![endif]-->
</head>
<body>

<div class="mitte">
        <div class="tableholder">
                <div class="inner">
                     <table id="table1" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td><p class="Text"><div class="Just">
„Haltbarkeit“ nennt Christof Mayer als erste Tugend seiner Möbel.“Geeignete Materialien“ sind ihm wichtig. Doch auch „pfiffige Konstruktionen“ – der Möbeldesigner will die Benutzer zu „deutlicher Reaktion“ anregen, Bedenken fordert er förmlich heraus. Scheinbare Widersprüchlichkeit ist sein Konzept, nicht von ungefähr heißt das Atelier LABIL-STABIL.<br />
Wir erkennen: Festigkeit kann beweglich sein, amüsant und sehr <a href="" class="Link">ästhetisch</a>. So wirkt der Klavierhocker wie eine Skulptur, und ist dabei durch seine Flexibilität überraschend bequem. Seine Sitzfläche besteht aus gespannten Saiten, die nun auf andere als die gewohnte Weise dem Klavierspielen dienen.<br />
Labil, stabil, mobil. Möbel zum Mitnehmen haben für Christof Mayer einen besonderen Reiz, lustvoll und kenntnisreich schöpft er die Möglichkeiten aus: Ein Stuhl, der drei Spannelementen und sich kreuzenden Seilen seine Stabilität verdankt, wird flach, sobald man die Spannelemente entfernt. Einen Sessel macht ein einziger Handgriff transportabel. Eine Garderobe ist konstruiert wie eine Hängebrücke. Und ein klappbarer Hocker von 900 Gramm mit einer Sitzfläche aus Hanf erhielt 2001 den Designpreis „Gut in Form“.
<br /><br />
PROSTO-design 5/2005<br />
russische Designzeitschrift<br /></div></p>
                </td>
        </tr>
</table>
             </div>
        </div>
</div>

<div class="links"><br />
<a href="index.php?Site=Objekt&amp;ID=1" target="_self"><img src="Content/Images/ID1nav.jpg" border="0" alt="ID1" style="border:1px solid #000;" /></a></div>

<div class="unten2"></div>

<div class="unten"><a href="index.php" target="_self"><img src="Template/Adresse3.gif" border="0" alt="Adresse" /></a></div>

</body>
</html>
mfg Maik
 
Okay vielen Dank.
Ich werde später versuchen, hab grad (obwohls grad noch ging) UTF-8 Probleme^^.

Edit: Danke! Endlich ist es perfekt
PS: ne' paar kleine patzer hast du auch gemacht^^
.tableholder{overflow:auto;}
.tableholder,.inner{display:block;}
.inner {top:50%;left:0;}
.inner table#table1{top:-50%;position:relative;}
Zum Vergrößern anklicken....
-sonst würd ich beim IE nicht scrollen können^^
 
Zuletzt bearbeitet:
Eagle-PsyX- hat gesagt.:
PS: ne' paar kleine patzer hast du auch gemacht^^
.tableholder{overflow:auto;}
.tableholder,.inner{display:block;}
.inner {top:50%;left:0;}
.inner table#table1{top:-50%;position:relative;}
Zum Vergrößern anklicken....

-sonst würd ich beim IE nicht scrollen können^^
Zum Vergrößern anklicken....
Tatsächlich? :suspekt:

Ich hab hier lediglich den CSS-Code aus dem Beispiel http://www.pmob.co.uk/temp/vertical-align3.htm 1:1 übernommen :p

http://www.pmob.co.uk/temp/vertical-align3.htm hat gesagt.:
Code: 
<!--[if IE ]>
<style type="text/css">
.imageholder{overflow:hidden}
.imageholder,.inner{display:block}
.inner {top:50%;left:0;}
.inner img{top:-50%;	position:relative;}
</style>
<![endif]-->
Zum Vergrößern anklicken....
mfg Maik
 
Ich weiß, aber die Fehler mit.

Was mich wundert, ich hattes es ja auch 1:1 übernommen.
Nur anstatt .imageholder hatte ich immer .mitte .inhaltDiv - und so ging es da nicht.. :-)
PS: Mittlerweile ist das UTF-8 Problem auch gelöst^^
 
Code: 
/*.tableholder{overflow:hidden;}*/
.tableholder,.inner{display:block}
.inner {top:50%;left:0;}
.inner table#table1{top:-50%;position:relative;}
ist hier noch besser als der Wert auto, da ja die Box .mitte zum Scrollen vorgesehen ist, und sich so im IE kein unerwünschter großer Abstand zwischen dem scrollfähigen Seiteninhalt und dem unteren Fensterrand ergibt :-)

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück