PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Ganze Browserfensterhöhe nutzen....

Gast_Morbit
2006-04-18, 15:50:52
Hallo,

ich habe ein kleines Problem und zwar möchte ich bei meinem Design generell, die ganze Browserfensterhöhe nutzen, wenn viel Inhalt da ist, geht es ja automatisch nach ganz unten...Scrollbalken ist natürlich auch erlaubt...mein Problem ist, dass ich es mit einer "testdatei" geschafft hab, nur finde ich nicht den fehler im original nicht...vllt könntet ihr mal drüber schauen und mir da weiterhelfen...aussehen soll das original design so wie die testdatei (von der fensterhöhennutzung...):

http://diemafia.piranho.de/design.html < testdatei

index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html>
<head>
<title>Morbit - v4</title>
<link rel="stylesheet" href="_styles.css" type="text/css" />
</head>
<body>
<center>
<table style='table-layout:fixed;' width='800' height='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td style='width:151px;height:75px;background:url("./images/header_left.jpg");'>&nbsp;</td>
<td style='width:304px;height:75px;background:url("./images/header_center.jpg");'>&nbsp;</td>
<td style='width:345px;height:75px;background:url("./images/header_right.jpg");'>&nbsp;</td>

</tr>

<tr>
<td style='width:151px;height:180px;background:url("./images/news_left.jpg");'>&nbsp;</td>
<td style='width:304px;height:180px;background:url("./images/news_center.jpg");'>&nbsp;</td>
<td valign='top' style='width:345px;height:180px;background:url("./images/news_box.jpg");'>
<div style='margin-left:8px;margin-top:8px;margin-right:60px;margin-bottom:8px;overflow:hidden;' align='left'>

<table border='0' width='200' cellspacing='0' cellpadding='3'>
<tr><td class='headline' align='left'>.latest news</td></tr><tr><th align='left' bgcolor='#ffffff'>testeintrag haha</th></tr>

<tr><td align='left' bgcolor='#ffffff' style='border-bottom:#71a500 1px dotted;'>das ist ein testeintrag,&nbsp;&nbsp;
<a href='index.php?go=news&newsID=12'>[more...]</a></td></tr><tr><th align='left' bgcolor='#e5e5e5'>NEWSTITLE #4</th></tr>
<tr><td align='left' bgcolor='#e5e5e5' style='border-bottom:#71a500 1px dotted;'>awef&nbsp;&nbsp;
<a href='index.php?go=news&newsID=4'>[more...]</a></td></tr><tr><th align='left' bgcolor='#ffffff'>NEWSTITLE #3</th></tr>
<tr><td align='left' bgcolor='#ffffff'>bla&nbsp;&nbsp;

<a href='index.php?go=news&newsID=3'>[more...]</a></td></tr></table>
</div>
</td>
</tr>

<tr>
<td valign='top' style='width:151px;background:url("./images/navi.jpg");'>
<div style='margin-left:60px;margin-top:8px;margin-right:8px;margin-bottom:8px;overflow:hidden;' align='left'>
<a href='index.php?go=news'>News</a><p />

<a href='index.php?go=users&amp;userID=1'>About</a><p />
<a href='index.php?go=stuff'>Stuff</a><p />
<a href='index.php?go=gallery'>Gallery</a><p />
<a href='index.php?go=profile'>Login</a><p />
<a href='index.php?go=links'>Links</a><p />
<a href='index.php?go=guestbook'>Guestbook</a><p />

<p>
<a href="http://validator.w3.org/check/referer"><img
style="border:0;" src="http://www.w3.org/Icons/valid-xhtml10";
alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p>
</div>
</td>
<td valign='top' style='width:649px;background:url("./images/content.jpg");' colspan='2'>
<div style='margin-left:8px;margin-top:8px;margin-right:60px;margin-bottom:8px;overflow:hidden;' align='left'>

</div>

</td>
</tr>

<tr>
<td style='width:151px;height:20px;background:url("./images/footer_left.jpg");'>&nbsp;</td>
<td style='width:304px;height:20px;background:url("./images/footer_center.jpg");'>&nbsp;</td>
<td style='width:345px;height:20px;background:url("./images/footer_right.jpg");'>&nbsp;</td>
</tr>
</table>
</center>
</body>
</html>

_styles.css
a#tooCool {
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 80px;
width: 80px;
background: url(./images/too_cool.png) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
}

body {
margin: 0px;
font-family: Verdana, sans-serif;
font-size: 8pt;
background:url("./images/background.jpg");
}

table {
font-family: Verdana, sans-serif;
font-size: 8pt;
overflow:hidden;
}

a:link {
font-family: Verdana, sans-serif;
font-size: 8pt;
color: #71A500;
text-decoration: none;
}

a:visited {
font-family: Verdana, sans-serif;
font-size: 8pt;
color: #71A500;
text-decoration: none;
}

a:hover {
font-family: Verdana, sans-serif;
font-size: 8pt;
color: #4A6C00;
text-decoration: underline;
}

a:active {
font-family: Verdana, sans-serif;
font-size: 8pt;
color: #4A6C00;
text-decoration: underline;
}

.headline {
font-family: Verdana, sans-serif;
font-size: 13pt;
color: #4A6C00;
}[/code]

Danke auf jeden Fall schon mal...
ravage
2006-04-18, 16:32:58
Hrm aus dem Gedächnis heraus hilft sowas in deiner CSS Datei immer:

html, body {
margin: 0;
padding: 0;
height: 100%;
}
Gast_Morbit
2006-04-18, 16:53:58
hmm ne bringt nix...
ich hab das ganze neu geschrieben (ohne die erste Zeile) und nun klappt es...es liegt an der allerersten Zeile:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

der hier....lass ich die weg, funktioniert es wie ich es will...mit der nicht...
Mark
2006-04-18, 18:13:20
kenn ich, ich krieg mein design wenn ich ein doctype angebe auch nicht vertikal zentriert
Gast
2006-04-18, 18:44:59
kenn ich, ich krieg mein design wenn ich ein doctype angebe auch nicht vertikal zentriert
margin: 0 auto;

und OMG, Doctype sollte man nie weg lassen. Wenns mit Doctype nicht hinhaut, hat man von CSS keine Ahnung...
Gast_Morbit
2006-04-18, 22:55:13
margin: 0 auto;

und OMG, Doctype sollte man nie weg lassen. Wenns mit Doctype nicht hinhaut, hat man von CSS keine Ahnung...

solche leute liebe ich ja wieder...
ich bin mit dem problem immer noch nicht weiter, sofern ich das Doctype drin lasse...
Mark
2006-04-19, 09:47:05
ich lass doctype einfach draußen. dann ist meine website eben nciht w3c-konform, aber in jedem getesteten browser funktionierts und das soll reichen
maprie
2006-04-19, 13:06:00
Ich nehme mal an, dass der Explorer Probleme damit macht (wie bei mir)? Dann kannst du bei xhtml ein standardgemäßes <?xml version="1.0" ?> vor doctype setzen. Der Explorer erwartet das doctype an erster stelle, wenn er was anderes findet, behandelt er die Seite als ob sie ohne doctype wäre (Stichwort Quirks-Modus). Aber aufpassen, er berechnet dann die Elementgrössen in Zusammenhang mit Padding falsch!
/dev/NULL
2006-04-19, 13:17:30
Ob man jetzt unbedingt in den Quirksmodus möchte ist die Frage...
maprie
2006-04-19, 16:19:25
Genau deshalb lieber nur für den Explorer in den Quirks-Modus setzen.
Einige Anmerkungen: position: fixed wird vom explorer nicht unterstützt. Und "height" ist kein offizielles Attribut für Tabellen. Die Größenangaben würde ich in das "style" mit hinein packen, steht schließlich schon da.
/dev/NULL
2006-04-19, 16:46:38
Aner wenn Du den IE in den Quirksmodus steckst hast Du das Fehlerhafte Boxmodell usw..

dann lieber gucken das man die Seite so hinbekommt, was eigentlich auch immer möglich ist.

Schau z.B. mal den Thread (http://www.xhtmlforum.de/viewtopic.php?t=8413) oder such nach Faux Columns, wenn Du nen Design mit einer Anzahl Spalten hast.
Gast
2006-04-19, 18:34:10
Genau deshalb lieber nur für den Explorer in den Quirks-Modus setzen.
Quatsch, dann verhält er sich völlig anders als Fx, Opera oder sonstwer. Das Boxmodell vom IE kannst dann komplett schmeißen.
Alle mit einem korrekten Doctype in den Standardsmode, dann hat man die geringsten Probleme!