Layout und div in passender Höhe @ tutorials.de: Tutorials, Forum & Hilfe

wachteldonk · 26.08.07 00:29

Hallo,

ich versuch jetzt seit einer Ewigkeit divs mit scrollbalken auf die richtige Höhe zu bringen aber es will nicht klappen. Auf dem beiliegenden Screenshot habe ich die Probleme markiert und hier der Code. Hat jemand eine Problemlösung?

Code :

<!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>teste 3.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
 
<style type="text/css">
<!--
body {
    margin: 0;
    font-family:Arial, Verdana;
    font-size: 13px;
    color:black;
    background-color: #FFFFFF;
}
 
 
.NavigationFrame {
    position:fixed;
    width:100%;
    height:30px;
    left:0;
    top: 0; 
    z-index:1000;
    background-color:#bbbbbb;
}
 
.ContentFrame {
    background-color:#cccccc;
    position:fixed;
    width:100%;
    height:100%;
    top: 30px; 
    right: 0px;
    left: 0px;
    bottom: 26px; 
}
 
.FooterFrame {
    position:fixed;
    width:100%;
    height:26px;
    bottom: 0px; 
    left: 0; 
    background-color:#cccccc;
    background-image:url(includes/templates/standard/images/background_footer.png);
    background-repeat:repeat-x;
 
}
 
.Footertext {
    width:100%;
    height:26px;
    background-image:url(includes/templates/standard/images/footertext.png);
    background-repeat:no-repeat;
    background-position:right;
    bottom:0px;
    left:0px;
}
 
 
/* Einzene Elemente */
.ListObject {
    width:30%;
    float:left;
    
 
 
    position:fixed;
    top: 30px; 
    right: 0px;
    left: 0px;
    bottom: 26px; 
}
.ListInnerObject {
    overflow:auto;
    background-color:white;
    height:100%;
    border: 2px solid black;
    border-style:inset;
    padding:2px 4px 2px 4px;
    margin: 2px 0px 2px 4px;
}
 
.ContentObject {
    width:70%;
    
 
    position:fixed;
    top:30px;
    left:30%;
    bottom:26px;
    
}
 
.ContentInnerObject {
    overflow:auto;
    background-color:white;
    border: 2px solid black;
    height:100%;
    border-style:inset;
    padding:2px 4px 2px 4px;
    margin: 2px 0px 2px 4px;
}
 
 
 
 
 
 
/* Navigation */
ul#Navigation .Logo {
    background-image:url(includes/templates/standard/images/logo.png);
    background-repeat:no-repeat;
    width:130px;
    height:30px;
}
 
ul#Navigation .Logo:hover {
    background-color:transparent;
}
 
ul#Navigation {
    text-align: center;
    z-index:1000;
    width: 100%;    
    margin: 0;
    padding: 0;
    min-height:30px;
    height:30px;
    color:white;
    background-color:#cccccc;
    background-image:url(includes/templates/standard/images/menubackground.png);
    background-repeat:repeat-x;
}
 
ul#Navigation li {
    z-index:1000;
    list-style: none;
    float: left;
    display:block;
    position:relative;
    margin:0px;
    padding: 5px 10px 5px 10px;
    overflow:visible;
    cursor:pointer;
    color:white;
    text-align:left;
 
}
 
ul#Navigation li ul {
    z-index:1000;
    margin: 0; 
    padding: 0;
    position: absolute;
    display: none;
    width:100%;
    top:26px;
    left:-1px;
    border:1px solid white;
}
 
ul#Navigation li ul li {
    z-index:1000;
    float: none;
    display: block;
    margin:0;
    padding: 3px 10px 3px 10px;
    background-color:#E40303;
    cursor:pointer;
    border-top: 1px solid white;
}
 
ul#Navigation li:hover {
    z-index:1000;
    background-color:white;
    color:black;
}
 
ul#Navigation li:hover ul {
    z-index:1000;
    display: block;
}
 
ul#Navigation a {
    z-index:1000;
    text-decoration: none;
    color: white;
    display:block;
}
 
 
 
 
 
 
 
 
 
 
 
 
/* Links */
a{
    color:black;
    text-decoration:none;
}
 
a:hover {
    text-decoration:underline;
}
 
-->
</style>
 
</head>
<body>
    <div class="NavigationFrame"  id="NavigationFrame">
        <ul id="Navigation">
            
            
            <li class="Logo">
            </li>
            
 
            <li onClick="document.location.href='http://www.test.de'">Hilfe
              <ul style="width:160px;">
                <li onClick="document.location.href='http://www.test.de'">Hilfreiche Links</li>
                <li onClick="document.location.href='http://www.test.de'">Zur  Homepage</li>
                <li onClick="document.location.href='http://www.test.de'">&Uuml;ber</li>
              </ul>
            </li>
            <li onClick="document.location.href='http://www.test.de'">Abmelden
              <ul style="width:140px;">
                <li onClick="document.location.href='http://www.test.de'">Abmelden / Logout</li>
              </ul>
            </li>
        </ul>
    </div>
    <div class="ContentFrame" id="ContentFrame">
        <div class="MainContent" ID="MainContent">
            <div class="ListObject" ID="ListFrame">
                <div class="ListInnerObject">
                    Liste<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile7<br />
                    Zeile8<br />
                    Zeile9<br />
                    Zeile10<br />
                    Zeile11<br />
                </div>
            </div>
            <div class="ContentObject" ID="ContentFrame">
                <div class="ContentInnerObject">
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                    Zeile1<br />
                    Zeile2<br>
                    Zeile3<br />
                    Zeile4<br />
                    Zeile5<br>
                    Zeile6<br />
                </div>
            </div>
        </div>
    </div>
<div class="FooterFrame"  id="FooterFrame">
    <div class="Footertext" id="Footertext"></div>
</div>
</body>
</html>

Maik · 26.08.07 00:38

Hi,

dass die unteren Pfeile der Scrollbalken im nichtsichtbaren Bereich des Browserfensters verschwinden, liegt an der Kombination der Positionierung der DIVs vom oberen Fensterrand (top:30px) und ihrer deklarierten 100%-Höhe.

Das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken wird dir da sicherlich weiterhelfen.

wachteldonk · 26.08.07 01:07

Hallo,

ich habe mal etwas rumgespieltaber es klappt irgendwie nicht. Ich habe den geänderten Code mal oben aktualisiert. Jetzt geht unter IE7 die Scrollingbars nicht mehr und die Borderstyles werden auch nicht richtig interpretiert siehe inset/outset

hast du noch eine Idee?

Maik · 26.08.07 01:31

Versuch es mal hiermit:

Code :

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<style type="text/css">
<!--
body {
margin: 0;
font-family:Arial, Verdana;
font-size: 13px;
color:black;
background-color: #FFFFFF;
overflow:hidden;
}
 
 
.NavigationFrame {
position:absolute;
width:100%;
height:30px;
left:0;
top:0;
z-index:1000;
background-color:#bbbbbb;
}
 
.ContentFrame {
background-color:#cccccc;
position:absolute;
width:100%;
top:30px;
right: 0px;
left: 0px;
bottom:26px;
}
 
* html .ContentFrame {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
 
.FooterFrame {
position:absolute;
width:100%;
height:26px;
bottom: 0px;
left: 0;
background-color:#cccccc;
background-image:url(includes/templates/standard/images/background_footer.png);
background-repeat:repeat-x;
}
 
.Footertext {
width:100%;
height:26px;
background-image:url(includes/templates/standard/images/footertext.png);
background-repeat:no-repeat;
background-position:right;
bottom:0px;
left:0px;
}
 
 
/* Einzene Elemente */
.ListObject {
width:30%;
overflow:auto;
background-color:white;
position:absolute;
top: 30px;
right: 0px;
left: 0px;
bottom: 26px;
}
 
* html .ListObject {
position:absolute;
top:0px;
right:0px;
height:100%;
border-top:26px solid #fff;
border-bottom:26px solid #fff;
}
 
.ContentObject {
width:70%;
overflow:auto;
position:absolute;
top:30px;
right:0;
bottom:26px;
}
 
* html .ContentObject {
position:absolute;
top:0;
right:0;
width:70%;
height:100%;
border-top:26px solid #fff;
border-bottom:26px solid #fff;
}
 
/* Navigation */
ul#Navigation .Logo {
background-image:url(includes/templates/standard/images/logo.png);
background-repeat:no-repeat;
width:130px;
height:30px;
}
 
ul#Navigation .Logo:hover {
background-color:transparent;
}
 
ul#Navigation {
text-align: center;
z-index:1000;
width: 100%;
margin: 0;
padding: 0;
min-height:30px;
height:30px;
color:white;
background-color:#cccccc;
background-image:url(includes/templates/standard/images/menubackground.png);
background-repeat:repeat-x;
}
 
ul#Navigation li {
z-index:1000;
list-style: none;
float: left;
display:block;
position:relative;
margin:0px;
padding: 5px 10px 5px 10px;
overflow:visible;
cursor:pointer;
color:white;
text-align:left;
 
}
 
ul#Navigation li ul {
z-index:1000;
margin: 0;
padding: 0;
position: absolute;
display: none;
width:100%;
top:26px;
left:-1px;
border:1px solid white;
}
 
ul#Navigation li ul li {
z-index:1000;
float: none;
display: block;
margin:0;
padding: 3px 10px 3px 10px;
background-color:#E40303;
cursorointer;
border-top: 1px solid white;
}
 
ul#Navigation li:hover {
z-index:1000;
background-color:white;
color:black;
}
 
ul#Navigation li:hover ul {
z-index:1000;
display: block;
}
 
ul#Navigation a {
z-index:1000;
text-decoration: none;
color: white;
display:block;
}
 
/* Links */
a{
color:black;
text-decoration:none;
}
 
a:hover {
text-decoration:underline;
}
 
-->
</style>
 
</head>
<body>
<div class="NavigationFrame" id="NavigationFrame">
<ul id="Navigation">
 
 
<li class="Logo">
</li>
 
 
<li onClick="document.location.href='http://www.test.de'">Abmelden
<ul style="width:140px;">
<li onClick="document.location.href='http://www.test.de'">Abmelden / Logout</li>
</ul>
</li>
</ul>
</div>
<div class="ContentFrame" id="ContentFrame">
<div class="MainContent" ID="MainContent">
<div class="ListObject" ID="ListFrame">
Liste<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile7<br />
Zeile8<br />
Zeile9<br />
Zeile10<br />
Zeile11<br />
 
</div>
<div class="ContentObject" ID="ContentFrame">
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
</div>
</div>
</div>
<div class="FooterFrame" id="FooterFrame">
<div class="Footertext" id="Footertext"></div>
</div>
</body>
</html>

wachteldonk · 26.08.07 01:35

Da wirft er einen PHP Fehler. Ist der Syntax der ersten Zeile wirklich so richtig?

Parse error: syntax error, unexpected T_STRING in /var/www/web1/html/testversion_make/_layout/index3.php on line 1

Was hast due eigentlich geändert?

Bei mir werden jetzt die Rahmen oben und unten riesig

Maik · 26.08.07 01:52

Anstelle der XML-Deklaration, die dazu dient, den IE (<7) in den Quirksmodus zu versetzen, damit der "Workaround" in ihm überhaupt funktioniert, kannst du auch einen HTML-Kommentar setzen:

Code :

1	<!-- put IE into Quirksmode -->

Ändere mal für die Klase .ContentFrame die obere und untere Positionsangabe auf null, damit der Rahmen nicht größer erscheint:

Code :

.ContentFrame {
background-color:#cccccc;
position:absolute;
width:100%;
top: 0;
right: 0px;
left: 0px;
bottom: 0;
}

Was ich geändert habe?

In Anlehnung an das empfohlene CSS-Tutorial habe ich den Positionierungswert fixed durch absolute ersetzt, aus den Klassen .ContentFrame, .ListObject, ContentObject die height:100%-Deklaration entfernt, sowie folgende * html-Selektoren für den IE hinzugefügt:

Code :

* html .ContentFrame {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
 
* html .ListObject {
position:absolute;
top:0px;
right:0px;
height:100%;
border-top:26px solid #fff;
border-bottom:26px solid #fff;
}
 
* html .ContentObject {
position:absolute;
top:0;
right:0;
width:70%;
height:100%;
border-top:26px solid #fff;
border-bottom:26px solid #fff;
}

wachteldonk · 26.08.07 02:14

Die Erweiterungen für den IE, sind aber nur für IE6 und kleiner? Mein IE7 zeigte die Seite eigentlich richtig an.
Jetzt gibts aber leider doch noch ein paar Probleme

Wenn ich im IE den rechten Browerscrollbalken mit

*{overflow:hidden;}

deaktiviere, verschwindet zwar die Scrollbar im IE (ganz rechts) aber jetzt werden meine Pulldownmenüs nicht mehr angezeigt. Ne Idee?

dann will ich die jetztigen Scrollboxen noch mit einem Rand versehen. Wenn ich das overflow:auto in den beiden Elementen entferne, eine weiteres Div einfüge und es dann we im obigen Code mit den inner Classen evrsehe geht auf einmal garnix mehr. Komishc ist auch as wenn ich für diese Elemente 100% als breite eingebe. der Scrollbalken ganz verschwindet. Obwohl er bei 90 % noch auftaucht und noch genug Platz da ist um 100% zu zeigen

Noch eine Frage:
Wenn ich das angebe

.ListObject {
width:30%;
overflow:auto;
background-color:white;
position:absolute;
top: 4px;
right: 6px;
left: 6px;
bottom: 4px;
border:10px;
}

krieg ichzwar oben und unten schöne Ränder aber er verschiebt sich auch nach rechts und der rechte frame bleibt da wo er ist

Nicht ganz so gut. Das alles nur im IE7 aber im Firefox tut sich garnix

Keine Ränder,.. nix

Die ganze Sache soll allerdings eh nur im Firefox ab 1.5 udn IE7 laufen.

Maik · 26.08.07 02:30

Zitat von wachteldonk

Wenn ich im IE den rechten Browerscrollbalken mit

*{overflow:hidden;}

deaktiviere, verschwindet zwar die Scrollbar im IE (ganz rechts) aber jetzt werden meine Pulldownmenüs nicht mehr angezeigt. Ne Idee?

Code :

.NavigationFrame {
position:absolute;
width:100%;
height:30px;
left:0;
top: 0;
z-index:1000;
background-color:#bbbbbb;
[b]overflow:visible;[/b]
}

wachteldonk · 26.08.07 03:00

ok, Danke.

Jetzt nur noch das Problem mit den Rändern. Im Firefox zeigt er garnix an Im IE zerschießt er alles bei Rändern auf der Horizontalen

Maik · 26.08.07 07:22

Gemäß dem CSS-Boxmodell wird u.a. die border-Eigenschaft zur width-Eigenschaft eines Elements hinzugezählt, was seine "tatsächliche" Boxenbreite ergibt.

Folglich müsstest du 20 Pixel (linker + rechter Rahmen) von den 30% abziehen, um auf die gewünschte 30%-Breite zu kommen - das funktioniert aber genauso gut (perfekt), wie die Äpfel von den Birnen zu subtrahieren.

Du kannst dir ja mal diesen "Annäherungsversuch" anschauen, bei dem von mir die bisherigen Positionsangaben um 10px "eingerückt", sowie die Breitenangaben verringert wurden, um an den Flanken einen Rand (Rahmen) zu erzeugen:

Code :

.ContentFrame {
[b]background:#ffff00;[/b] /* um Rand zu visualisieren */
position:absolute;
width:100%;
top:0;
left:0;
bottom:0;
}
 
.ListObject {
[b]width:28.5%;[/b]
overflow:auto;
background:#fff;
position:absolute;
[b]top:40px;
left:10px;
bottom:36px;[/b]
}
 
.ContentObject {
[b]width:68.5%;[/b]
overflow:auto;
background:#ccc;
position:absolute;
[b]top:40px;
right:10px;
bottom:36px;[/b]
}

Das Modell hab ich erfolgreich im FF (1.5.0.7, 2.0.0.6) und IE7 getestet.

wachteldonk · 26.08.07 10:56

Hallo,

es klappt jetzt unterm IE7 gut aber im Firefox werden keien Ränder angezeigt. die beien inneren Objekte werden aneinader gklatscht

. Kannst du nochmal drüber schauen woran das liegen kann?

Code :

<!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>Test 3.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<style type="text/css">
<!--
* {
    overflow:hidden;
    }
 
 
body 
    {
    margin: 0;
    font-family:Arial, Verdana;
    font-size: 13px;
    color:black;
    background-color: #FFFFFF;
    overflow:hidden;
    }
 
 
.NavigationFrame {
    position:absolute;
    width:100%; 
    height:30px;
    left:0;
    top:0;
    z-index:1000;
    background-color:#bbbbbb;
    overflow:visible;
    }
 
.ContentFrame {
    background-color:#cccccc;
    position:absolute;
    width:100%;
    top:30px;
    right: 0px;
    left: 0px;
    bottom:26px;
    }
 
.FooterFrame {
    position:absolute;
    width:100%;
    height:26px;
    bottom: 0px;
    left: 0;
    background-color:#cccccc;
    background-image:url(includes/templates/standard/images/background_footer.png);
    background-repeat:repeat-x;
    }
 
.Footertext {
    width:100%;
    height:26px;
    background-image:url(includes/templates/standard/images/footertext.png);
    background-repeat:no-repeat;
    background-position:right;
    bottom:0px;
    left:0px;
    }
 
/* IE */
* html .ContentFrame 
    {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    }
 
* html .ListObject {
    width:28.5%;
    position:absolute;
    top:0px;
    right:0px;
    height:100%;
    border-top:26px solid #fff;
    border-bottom:26px solid #fff;
    }
 
* html .ContentObject {
    position:absolute;
    top:0;
    right:0;
    width:68.5%;
    height:100%;
    border-top:26px solid #fff;
    border-bottom:26px solid #fff;
    }
 
 
/* Einzelne Elemente */
.ListObject {
    width:27.5%;
    overflow:auto;
    position:absolute;
    top: 10px;
    right: 0px;
    left: 12px;
    bottom: 10px;
    border: 2px inset;
    padding: 4px 6px 4px 6px;
    background-color:white;
}
 
.ContentObject {
    width:67.5%;
    overflow:auto;
    position:absolute;
    top:10px;
    right:12px;
    bottom:10px;
    border: 2px outset;
    padding: 4px 6px 4px 6px;
    }
 
 
 
/* Navigation */
ul#Navigation .Logo {
    background-image:url(includes/templates/standard/images/logo.png);
    background-repeat:no-repeat;
    width:130px;
    height:30px;
    }
 
ul#Navigation .Logo:hover {
    background-color:transparent;
    }
 
ul#Navigation {
    text-align: center;
    z-index:1000;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height:30px;
    height:30px;
    color:white;
    background-color:#cccccc;
    background-image:url(includes/templates/standard/images/menubackground.png);
    background-repeat:repeat-x;
    }
 
ul#Navigation li {
    z-index:1000;
    list-style: none;
    float: left;
    display:block;
    position:relative;
    margin:0px;
    padding: 5px 10px 5px 10px;
    overflow:visible;
    cursor:pointer;
    color:white;
    text-align:left;
    }
 
ul#Navigation li ul {
    z-index:1000;
    margin: 0;
    padding: 0;
    position: absolute;
    display: none;
    width:100%;
    top:26px;
    left:-1px;
    border:1px solid white;
    }
 
ul#Navigation li ul li {
    z-index:1000;
    float: none;
    display: block;
    margin:0;
    padding: 3px 10px 3px 10px;
    background-color:#E40303;
    cursorointer;
    border-top: 1px solid white;
    }
 
ul#Navigation li:hover {
    z-index:1000;
    background-color:white;
    color:black;
    }
 
ul#Navigation li:hover ul {
    z-index:1000;
    display: block;
    }
 
ul#Navigation a {
    z-index:1000;
    text-decoration: none;
    color: white;
    display:block;
    }
 
/* Links */
a{
    color:black;
    text-decoration:none;
    }
 
a:hover {
    text-decoration:underline;
    }
 
 
 
 
-->
</style>
 
</head>
<body>
<div class="NavigationFrame" id="NavigationFrame">
    <ul id="Navigation">
        <li class="Logo">
        </li>
        <li onClick="document.location.href='http://www.test.de'">Kasse & Berichte
          <ul style="width:140px;">
            <li onClick="document.location.href='http://www.test.de'">Startseite</li>
            <li onClick="document.location.href='http://www.test.de'">Kassenliste</li>
            <li onClick="document.location.href='http://www.test.de'">Tagesbericht</li>
            <li onClick="document.location.href='http://www.test.de'">Archiv Tagesbericht</li>
          </ul>
        </li>
        <li onClick="document.location.href='http://www.test.de'">Mitarbeiter
          <ul style="width:180px;">
            <li onClick="document.location.href='http://www.test.de'">Arbeitszeit eintragen</li>
            <li onClick="document.location.href='http://www.test.de'">Tages & Wochen&uuml;bersicht</li>
          </ul>
        </li>
        <li onClick="document.location.href='http://www.test.de'">Kunden
            <ul style="width:200px;">
                <li onClick="document.location.href='http://www.test.de'">Kundenverwaltung</li>
                <li onClick="document.location.href='http://www.test.de'">Kundennewsletter</li>
                <li onClick="document.location.href='http://www.test.de'">Terminverwaltung</li>
                <li onClick="document.location.href='http://www.test.de'">Kundensuche</li>
                <li onClick="document.location.href='http://www.test.de'">Verl&auml;ngerungsf&auml;hige Vertr&auml;ge</li>
                <li onClick="document.location.href='http://www.test.de'">Tarife</li>
                <li onClick="document.location.href='http://www.test.de'">Tarufoptionen</li>
            </ul>
        </li>
        <li onClick="document.location.href='http://www.test.de'">Produkte
          <ul style="width:140px;">
            <li onClick="document.location.href='http://www.test.de'">Produktverwaltung</li>
          </ul>
        </li>
        <li onClick="document.location.href='http://www.test.de'">Provision
          <ul style="width:180px;">
            <li onClick="document.location.href='http://www.test.de'">Provisions&uuml;bersicht</li>
            <li onClick="document.location.href='http://www.test.de'">Mengen&uuml;bersicht</li>
            <li onClick="document.location.href='http://www.test.de'">Mengen&uuml;bersicht Gruppen</li>
            <li onClick="document.location.href='http://www.test.de'">Provisionserfassung</li>
          </ul>
        </li>
 
        <li onClick="document.location.href='http://www.test.de'">Provisionseinstellungeen
          <ul style="width:180px;">
            <li onClick="document.location.href='http://www.test.de'">Provisionstarife</li>
            <li onClick="document.location.href='http://www.test.de'">Provisionsoptionen</li>
            <li onClick="document.location.href='http://www.test.de'">Provisionstarifgruppen</li>
          </ul>
        </li>
        <li onClick="document.location.href='http://www.test.de'">System
          <ul style="width:180px;">
            <li onClick="document.location.href='http://www.test.de'">Userverwaltung</li>
            <li onClick="document.location.href='http://www.test.de'">Zugrffsverwaltung</li>
            <li onClick="document.location.href='http://www.test.de'">Merkmale & Filter</li>
            <li onClick="document.location.href='http://www.test.de'">Grundkonfiguration</li>
            <li onClick="document.location.href='http://www.test.de'">Datenbankbackup</li>
            <li onClick="document.location.href='http://www.test.de'">Forum</li>
          </ul>
        </li>
        <li onClick="document.location.href='http://www.test.de'">Hilfe
          <ul style="width:160px;">
            <li onClick="document.location.href='http://www.test.de'">Hilfreiche Links</li>
            <li onClick="document.location.href='http://www.test.de'">Zur Test Homepage</li>
            <li onClick="document.location.href='http://www.test.de'">&Uuml;ber Test</li>
          </ul>
        </li>
        <li onClick="document.location.href='http://www.test.de'">Abmelden
          <ul style="width:140px;">
            <li onClick="document.location.href='http://www.test.de'">Abmelden / Logout</li>
          </ul>
        </li>
    </ul>
</div>
<div class="ContentFrame" id="ContentFrame">
    <div class="MainContent" ID="MainContent">
        <div class="ListObject" ID="ListFrame">
            Liste<br />
            Zeile1<br />
 
            Zeile10<br />
            Zeile11<br />
        </div>
        <div class="ContentObject" ID="ContentFrame">
            Zeile1<br />
            Zeile2<br>
 
            Zeile4<br />
            Zeile5<br>
            Zeile6<br />
        </div>
    </div>
</div>
<div class="FooterFrame" id="FooterFrame">
    <div class="Footertext" id="Footertext"></div>
</div>
</body>
</html>

Maik · 26.08.07 11:18

Bei mir werden die Ränder im FF korrekt angezeigt:

Layout und div in passender Höhe-demo_wachteldonk.jpg

Dass die inneren Objekte ab einer gewissen Browserfenstergröße "aneinanderklatschen" liegt an der relativen (prozentualen) Breitenangabe, zu der die absoluten Pixelwerte des Rahmens und Innenabstandes hinzugezählt werden, was eben zu Ungenauigkeiten führt.

wachteldonk · 26.08.07 11:31

Komisch, bei mir igoriert er dei Eingaben komplett

Welchen Firefox benutzt du ? Ich habe heir 2.0

Zu dem anderen Problem. Ich habe die left udn richt Werte auf Prozentwerte ungestellt aber das bringt auch nix. Was kann man da den sonst machen?

Maik · 26.08.07 11:36

Zitat von wachteldonk

Welchen Firefox benutzt du ? Ich habe heir 2.0

Wer lesen kann, ist klar im Vorteil:

Zitat von Maik

[...] Das Modell hab ich erfolgreich im FF (1.5.0.7, 2.0.0.6) und IE7 getestet.

wachteldonk · 26.08.07 11:51

ok, jetzt gehts hier auch. Anscheined hat der Cache hier etwas rumgesponnen. Ich werde die Überlagerung wohl mit eienr Mindestbreite für das Browserfenster lösen. mal schauen was ich dazu finde.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

CSS-Layout Höhe ist größer als 100%

Layout 100% höhe & 100% Breite mit Rahmen

Layout mit 100% Höhe

CSS Layout, Submenu 100% Höhe

Divs Höhe/Spalten Layout

E-Mail:

Abonnieren Abbestellen