nicht angemeldet
Matthias Apsel
MudGuard
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Gunnar Bittersmann
Hallo Zusammen,
so langsam reißt mir der Geduldsfaden. Also ich habe eine Tabelle (ja, ich würde gern auch 2013 noch mit einer Tabelle arbeiten statt div-css-getrixe!) mit einer Überschrift (1. Zeile), einem Select-Block (2.Zeile) einem pre-Block mit sehr langem Code gefüllt (3.Zeile) und einer Link in der letzten (4.) Zeile.
Soweit so gut. Nun möchte ich, dass der pre-Block allen übrigen Platz zugewiesen bekommt der nötig ist um das aktuelle Fenster zu füllen. Dafür habe ich der Zeile in dem der pre-Block steht folgendes zugewiesen:
<td align="center" style="height:100%">
Dann via externer CSS-Datei meinem pre-block die nötigen Eigenschaften zugewiesen.
Der Martinpre#script{
height: 100%;
overflow: auto;
}
Jetzt wirds strange...
Wenn ich den Doctype meiner Page wie folgt formuliere:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD 4.01 Transitional//EN">
funktioniert es in Chrome (in Firefox nicht). Funktionieren heißt in meinem Fall: der pre-block nutzt so viel Platz wie möglich in der Spalte und alles darüber hinaus aktiviert die Scrollbar des pre-blocks.
Firefox hingegen denkt sich 100% sind 100% und zieht den pre-block einfach so groß bis der ganze Code zusehen ist. (da hilft dann auch keine scrollbar mehr, schließlich wird der code ja zu 100% angezeigt)
Wenn ich jetzt aber eine dtd mit im Doctype angebe kommt auch Chrome nicht mehr mit und zeigt blödsinn an. Was 100% sind weiß er dann gar nicht mehr und zeigt einen ~5px breiten streifen vom Code an der partout nicht vergrößert werden kann (außer man benutzt pixel Angaben).
Was ich will ist, dass die Tabelle ordentlich aufbaut, jede Zeile so viel Platz (Höhe) zugewiesen bekommt wie sie halt benötigen. Der restliche Freiraum soll dann der 3. Zeile (dem pre-block) zugute kommen damit mein Browserfenster zu 100% mit der Tabelle gefüllt ist (und zwar IMMER). Wenn mehr Code im Pre-Block stehen sollte als hinein passt wird halt eine Scrollbar gestellt (quasi im Stile von overflow: auto;).
Ich bekomms einfach nicht hin und hab schon die verrücktesten Ansätze gesehen. Einschließlich mit Javascript die momentane Seitenhöhe auszulesen und daraus die Pixelangabe für die Zeile zu setzen... Das kanns ja irgendwo nicht sein.
Ich hoffe ihr könnt mir helfen da ihr weitaus erfahrener seid als ich.
Sollte ich was vergessen haben oder sonstige Fehler oben auftauchen macht mich bitte nicht gleich fertig. Ich werd versuchen alle Infos zu geben die benötigt werden.
Mit freundlichen Grüßen
Highchiller
Om nah hoo pez nyeetz, Highchiller!
so langsam reißt mir der Geduldsfaden. Also ich habe eine Tabelle (ja, ich würde gern auch 2013 noch mit einer Tabelle arbeiten statt div-css-getrixe!)
Tabellen sind aber nicht dafür gedacht.
<td align="center" style="height:100%">
verwende keine inline-style-Angaben. Lagere alle CSS-Vereinbarungen in eine eigene Datei aus. Ebenso solltest du keine veralteten Attribute verwenden.
Wenn ich den Doctype meiner Page wie folgt formuliere:
Du kannst den Doctype nicht wie du willst formulieren. Vereinfacht gesprochen ist er eine Inhaltsangabe für das Dokument. Nur, weil du auf eine Wasserflasche "Rotwein" schreibst, ist da noch lange kein Rotwein drin. Du musst also den doctype verwenden, der zu deinem HTML gehört.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD 4.01 Transitional//EN">
Diese Doctype-Declaration ist fehlerhaft. Damit schickst du die Browser in einen Rate-Modus, einige raten schlechter, andere besser. Ohne doctype landest du übrigens genauso in diesem Quirksmodus.
Wenn ich jetzt aber eine dtd mit im Doctype angebe kommt auch Chrome nicht mehr mit und zeigt blödsinn an. Was 100% sind weiß er dann gar nicht mehr und zeigt einen ~5px breiten streifen vom Code an der partout nicht vergrößert werden kann (außer man benutzt pixel Angaben).
siehste. Ratemodus. Chrome rät nicht so, wie du es gerne hättest.
Ich hoffe ihr könnt mir helfen da ihr weitaus erfahrener seid als ich.
Entsage dem Tabellenlayout!
Ich werd versuchen alle Infos zu geben die benötigt werden.
Zeig die Seite und wir werden versuchen dir zu zeigen, wie du eine semantisch korrekte Seite daraus bauen kannst.
Matthias
Hi,
Nur, weil du auf eine Wasserflasche "Rotwein" schreibst, ist da noch lange kein Rotwein drin.
Damals, als ich noch als J.C. unterwegs war, hat das aber immer geklappt ;-)
cu,
Andreas
Hallo,
Nur, weil du auf eine Wasserflasche "Rotwein" schreibst, ist da noch lange kein Rotwein drin.
Damals, als ich noch als J.C. unterwegs war, hat das aber immer geklappt ;-)
ach, du warst das? Ja, zugegeben, war 'ne tolle Nummer.
Und gib's zu: Übers Wasser bist du auch bloß gelaufen, weil die Fährleute so überzogene Ticketpreise verlangt haben.
*scnr*
Martin
Om nah hoo pez nyeetz, Der Martin!
Und gib's zu: Übers Wasser bist du auch bloß gelaufen, weil die Fährleute so überzogene Ticketpreise verlangt haben.
Das Gewandhausorchester ist auf Israel-Tournee. An einem Ruhetag zwischen den Konzerten macht das Orchester einen Ausflug zum See Genezareth, wo sich die Musiker am Ufer sonnen. Nur ein Bratscher hat sich abgesondert und unterbreitet seinem Gott, wie wenig Anerkennung er bei seinen Kollegen findet und wie sehr er unter ihrem Spott leidet: "Herr, ich will nicht mit meinem Schicksal hadern, aber tue Du auch einmal ein Wunder an mir: Laß mich auch über das Wasser gehen." Er steht auf, geht zum Ufer und schreitet über das Wasser. Von weitem sehen ihn die Kollegen auf dem Wasser gehen, da tippt der Konzertmeister dem Dirigenten auf die Schulter und zeigt auf den See: "Schwimmen kann er auch nicht!"
Matthias
Tabellen sind aber nicht dafür gedacht.
Ich würde ungern umbauen aber wenn es nicht anders geht...
verwende keine inline-style-Angaben. Lagere alle CSS-Vereinbarungen in eine eigene Datei aus. Ebenso solltest du keine veralteten Attribute verwenden.
Laut dem Link ist align="center" für td/tr/th durchaus legitim. Das auslagern der CSS hab ich jetzt gemacht.
Zeig die Seite und wir werden versuchen dir zu zeigen, wie du eine semantisch korrekte Seite daraus bauen kannst.
In Ordnung dann zeig euch mal was ich habe:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>output</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="js/jsonHighlighting.js"></script>
<link rel="stylesheet" media="screen" href="css/jsonHighlightBrushes.css">
<link rel="stylesheet" media="screen" href="css/meteorFrontend.css">
</head>
<body>
<form action="/output" method="get" accept-charset="UTF-8">
<table>
<tr><th align="left"><h1>Output</h1></th></tr>
<tr><td align="left">
<select id="selectionidx" name="selectionidx" class="scriptSelection" size="1" onChange="this.form.submit()">
<option value="0">link1</option>
<option value="1" selected="selected">link2</option>
</select>
</td></tr>
<tr><td align="center" class="scriptTD">
<pre id="script"><span class="placeHolder">The output block for JSON script!</span></pre>
</td></tr>
<tr><td align="right"><a href="/runtime?viewMode=view" target="_blank">Job States</a></td></tr>
</table>
</form>
<script type="text/javascript">
var obj = [{"date":"1998-12-27","x1_volume":104626800,"x2_ratio":0},{"date":"1999-02-28","x1_volume":244379200,"x2_ratio":0}]; //hier steht eigentlich VIEL mehr!
var str = JSON.stringify(obj, null, 4);
output( syntaxHighlight(str) );
</script>
</body>
</html>
Jetzt ist der DOCTYPE doch nicht mehr Fehlerhaft oder? Trotzdem zeigt Firefox was anderes an als Chrome :(
Wie schon beschrieben. Ne Tabelle mit einer Spalte und 4 Zeilen.
Das Highlighting ist erst mal nicht weiter von Interesse.
Jetzt gibt es zum einen die MeteorFrontend.css in der es vor allem wie folgt aussieht:
@charset "ISO-8859-1";
html, body
{
height: 99%;
width: 99%;
position: auto;
overflow: auto;
}
table {
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 100%;
height: 100%;
border: thin solid;
}
.scriptTD{
height: 100%;
}
Tricks mit height: auto !important; führen zu interessanten Ergebnissen die Leider nicht helfen.
Nu gibt es natürlich noch eine Zweite CSS die sich vor allem um den Pre-Block kümmert und das Highlighting unterstützt. Die jsonHighlightBrushes.css enthält als relevanten Code:
@CHARSET "ISO-8859-1";
pre#script {
width: 99%;
height: 100%;
overflow: auto;
outline: 1px solid #ccc;
margin: 5px;
text-align: left;
}
Das führt jetzt in Chrome zu einem unleserlichen Ministreifen und in Firefox zu einem überdimensionalen Scriptblock (beachte das für diesen Beitrag die Codeausgabe extrem verkürtzt wurde).
Hach man ist das alles ärgerlich :/
PS: Ich hoffe ich hab nichts vergessen.
Ein Link auf die Seite währe super. Wer soll sich das alles zusammenkopieren? Oder glaubst du, hier gibt es menschliche HTML-Parser. Gut, bei trivialen Sachen würd ich mir es ein wenig zutrauen, das Aussehen vorherzusagen und _dem_ einen *g* oder anderen selbiges auch bei weniger trivialen Konstellationen, aber insgesamt ist ein online-Beispiel immer besser. Man kann selbst die Entwicklerwerkzeuge benutzen, ...
Matthias
Ein Link auf die Seite währe super. Wer soll sich das alles zusammenkopieren? Oder glaubst du, hier gibt es menschliche HTML-Parser. Gut, bei trivialen Sachen würd ich mir es ein wenig zutrauen, das Aussehen vorherzusagen und _dem_ einen *g* oder anderen selbiges auch bei weniger trivialen Konstellationen, aber insgesamt ist ein online-Beispiel immer besser. Man kann selbst die Entwicklerwerkzeuge benutzen, ...
Matthias
Tut mir Leid.
Hier könnt euch das Zip-Packet mit den nötigen Dateien runterladen (das kleine Download Feld direkt unter den Dateispezifikationen):
http://www.file-upload.net/download-7479054/OnlineBeispiel.zip.html
Hi,
Hier könnt euch das Zip-Packet mit den nötigen Dateien runterladen
Ach komm, jetzt ha(c)kt’s doch aber wohl.
MfG ChrisB
Hi,
Hier könnt euch das Zip-Packet mit den nötigen Dateien runterladen
Ach komm, jetzt ha(c)kt’s doch aber wohl.
MfG ChrisB
Entschuldige ich hatte nich an sowas gedacht... So bitte sehr:
MeinOnlineBeispiel
Und wie man sieht geht die Tabelle nicht über 100% der Seite
Ein Link auf die Seite währe super. Wer soll sich das alles zusammenkopieren? Oder glaubst du, hier gibt es menschliche HTML-Parser. Gut, bei trivialen Sachen würd ich mir es ein wenig zutrauen, das Aussehen vorherzusagen und _dem_ einen *g* oder anderen selbiges auch bei weniger trivialen Konstellationen, aber insgesamt ist ein online-Beispiel immer besser. Man kann selbst die Entwicklerwerkzeuge benutzen, ...
Matthias
Ja hier auch noch mal damits jeder sieht:
MeinOnlineBeispiel
Hi,
(beachte das für diesen Beitrag die Codeausgabe extrem verkürtzt wurde).
Und welche Aussagekraft soll der dann haben …?
In Ordnung dann zeig euch mal was ich habe:
Dass du das hier durch jenes dort selbst hättest ersetzen können, erwarte ich jetzt einfach mal ;-)
Hach man ist das alles ärgerlich :/
MfG ChrisB
Und welche Aussagekraft soll der dann haben …?
Ich wollte euch keine 44.000 Zeichen um die Ohren schlagen? Es soll ja auch mit einem kleinen Input funktionieren.
Dass du das hier
Hier zeigt sich mein Problem. Die Tabelle geht nicht über 100% der Seite und der Freiraum dafür wird nicht von dem pre-Block eingenommen. Stattdessen ist der Pre-Block so schmal dass man nicht mal den PlaceHolder lesen kann.
Hi,
Dass du das hier
Hier zeigt sich mein Problem. Die Tabelle geht nicht über 100% der Seite und der Freiraum dafür wird nicht von dem pre-Block eingenommen. Stattdessen ist der Pre-Block so schmal dass man nicht mal den PlaceHolder lesen kann.
Sorry, aber ich habe keine Ahnung, was du meinst.
MfG ChrisB
Hi,
Dass du das hier
Hier zeigt sich mein Problem. Die Tabelle geht nicht über 100% der Seite und der Freiraum dafür wird nicht von dem pre-Block eingenommen. Stattdessen ist der Pre-Block so schmal dass man nicht mal den PlaceHolder lesen kann.Sorry, aber ich habe keine Ahnung, was du meinst.
MfG ChrisB
Hier siehst du eine abgespackte Version: MeinBeispiel
Und da siehst du doch in der Vorschau, das noch unter der Tabelle (siehe schwarzer Rahmen) noch gut 1/3 frei ist. Ich will aber, dass die Tabelle die komplette Seite ausfüllt und der gewonnene Platz dem Pre-Block zugute kommt (also der 3. Zeile).
Weißt du was ich meine?
Obwohl ich dem html, body und der 3. Zeile 100% zugewiesen habe, halten Sie sich einfach nicht daran.
Hi,
Dass du das hier
Hier zeigt sich mein Problem. Die Tabelle geht nicht über 100% der Seite und der Freiraum dafür wird nicht von dem pre-Block eingenommen. Stattdessen ist der Pre-Block so schmal dass man nicht mal den PlaceHolder lesen kann.Sorry, aber ich habe keine Ahnung, was du meinst.
MfG ChrisB
Kann man hier sein Beitrag irgendwie editieren? -.-
Hier die abgespackte Version: AbgespackteVersion
Html, body, table, pre#script haben alle 100% height und trotzdem ist von dem pre-Block nur ein dünner Strich zu sehen.
WIESO!
Hi,
Kann man hier sein Beitrag irgendwie editieren? -.-
Nein. Und bitte zitiere nicht immer vollständig.
Hier die abgespackte Version: AbgespackteVersion
Html, body, table, pre#script haben alle 100% height und trotzdem ist von dem pre-Block nur ein dünner Strich zu sehen.
WIESO!
Scheint wohl am overflow:auto für das pre-Element zu liegen.
Entferne das mal, und mache aus der height- eine min-height-Angabe.
MfG ChrisB
Hi,
Kann man hier sein Beitrag irgendwie editieren? -.-
Nein. Und bitte zitiere nicht immer vollständig.
Hier die abgespackte Version: AbgespackteVersion
Html, body, table, pre#script haben alle 100% height und trotzdem ist von dem pre-Block nur ein dünner Strich zu sehen.
WIESO!Scheint wohl am
overflow:autofür daspre-Element zu liegen.Entferne das mal, und mache aus der
height- einemin-height-Angabe.MfG ChrisB
Wenn ich das im pre#script änder dann wird aber der Pre-Block über die ganze Seite gezogen und ich muss die Seiten scrollen. Ich will aber den Pre-Block scrollen und nicht die komplette Seite verstehst du?
PS: Entschuldigt die Startschwierigkeiten mit mir. Manchmal steh ich ordentlich auf dem Schlauch
Om nah hoo pez nyeetz, Highchiller!
PS: Entschuldigt die Startschwierigkeiten mit mir. Manchmal steh ich ordentlich auf dem Schlauch
Ok, aber was hast du an "Bitte zitiere nicht immer vollständig nicht verstanden"?
Matthias
Ich hatte es überlesen.
Wie wäre es wenn man jetzt mal wieder zum Thema kommt?
Ich hab das ganze auf Div-Blocks umgebaut und bekomme es dennoch nicht hin:
DivVersion
Jemand eine Idee?
Ich hab rausgefunden, dass der Form-Block das kaputt macht. Wenn ich den Form-Block auf das Select beschränke funktionierts.
Gibts dafür ne Erklärung?
Om nah hoo pez nyeetz, Highchiller!
Ich hab das ganze auf Div-Blocks umgebaut und bekomme es dennoch nicht hin:
DivVersion
Wenn ich dir helfen soll, dann lädst du bitte mal eine komplette Seite irgendwohin, wo ich sie mir anschauen kann. JS-Fiddle und Co. sind zwar recht schön, aber mir gefallen sie für diesen Fall eher weniger, eben weil ich nicht mit Firebug und Co. umherhantieren kann.
Matthias
Hi,
Wenn ich dir helfen soll, dann lädst du bitte mal eine komplette Seite irgendwohin, wo ich sie mir anschauen kann. JS-Fiddle und Co. sind zwar recht schön, aber mir gefallen sie für diesen Fall eher weniger, eben weil ich nicht mit Firebug und Co. umherhantieren kann.
~dave
Om nah hoo pez nyeetz, dave!
Ja stimmt, daran denk ich immer nicht. Ich seh bloß immer das aufgeteilte Fenster vor mir.
Matthias
Für alle, welche die Antwort noch interessiert. Das Problem liegt daran, dass meine Page in einem Form-Block (Forumal) liegt. Nun steht im CSS-File zwar, dass HTML und Body height:100% zugewiesen bekommen das Formular dagegen nicht. Nehmen wir form auch mit in diesen style auf klappts.
html, body, form
{
height: 99%;
width: 99%;
overflow: hidden;
}
Should fix the problem!
Om nah hoo pez nyeetz, Highchiller!
Für alle, welche die Antwort noch interessiert. Das Problem liegt daran, dass meine Page in einem Form-Block (Forumal) liegt. Nun steht im CSS-File zwar, dass HTML und Body height:100% zugewiesen bekommen das Formular dagegen nicht. Nehmen wir form auch mit in diesen style auf klappts.
Schrieb ich das nicht? Doch, aber es war ein anderer Thread.
Matthias
Schrieb ich das nicht? Doch, aber es war ein anderer Thread.
Trotzdem wusst ich nicht das selbst ein <form>-Block dazu zählt. Dass eben diese hierarchische Ordnung existiert wusste ich, ans Formular hab ich aber nicht gedacht. :/
Naja Problem gelöst.
@@Highchiller:
nuqneH
ja, ich würde gern auch 2013 noch mit einer Tabelle arbeiten statt div-css-getrixe!
CSS ist die saubere Art fürs Gestalten. Das Markup allerdings sollte semantischer sein als div-Suppe.
Tabellenlayout ist Getrixe. Und offensichtlich nicht einfacher zu handhaben als Layouten mit CSS.*
Aber wenn schon Layouttabelle, dann bitte mit zugehörigem WAI-ARIA-Attribut:
<table [link:http://www.w3.org/TR/wai-aria/roles#presentation@title=role="presentation"]>
Qapla'