Beiträge von tebox

tebox

Zitat von Ronald

Nur eine Frage noch: Wo lernt man das mit diesen endlosen und sinnlosen DIV-Tags eigentlich?

Ich habe mir mal den Quelltext von http://www.csszengarden.com angeschaut und da wimmelt es von Div-Tags. Und es ist schwer zu bestreiten, dass die Seite gut designt ist.

Außerdem ein Zitat aus dem Quelltext:

Zitat von csszengarden

This xhtml document is marked up to provide the designer with the maximum possible flexibility. There are more classes and extraneous tags than needed, and in a real world situation, it's more likely that it would be much leaner. However, I think we can all agree that even given that, we're still better off than if this had been built with tables.

Ich habe das Design meiner aktuellen Seite nur mit Tabellen hinbekommen, obwohl ich es lange mit <div>-Tags und CSS versucht habe. Ich habe mich aufgrund der einfacheren Realisierbarkeit meiner Vorstellungen für ein Tabellen-Design entschieden, das in meinen Augen weniger schönen und schlanken Code darstellt. Aber was hilft mir ein schöner Code, wenn er nicht macht, was ich von ihm will. Trotzdem werde ich auch in Zukunft versuchen, Seiten erst einmal ohne Tabellen zu bauen.

tebox

tebox

Ich habs jetzt auch nochmal online gestellt unter
http://www.lamla.com/test/versuchsfeld2.html

Man bemerke (neben den Bruchstellen und dem unansehnlichen Schattenwurf):
1: Die Hintergrundgrafiken gehen bis zum Rand
2: Vor allem gehen sie bis zum unteren Rand, auch wenn der Inhalt daneben nicht die Seite ausfüllt. (Fügt man den W3C-Spruch ein, funktioniert das allerdings nicht mehr)
3: Wenn die Hintergrundgrafiken größer sind als der Bildschirm werden sie abgeschnitten, sie provozieren keine Scrollleisten.
4. Die linke Grafik wiederholt so oft es aufgrund des Inhalte rechts daneben nötig ist.

Ich schreibe das so ausführlich hier auf, weil es diese paar Kleinigkeiten waren, die mich etliche Stunden beschäftigt haben.

P.S.: Die Linien in den Grafiken habe ich übrigens mit PowerPoint gemalt
Ich benutze den GIMP als Grafikprogramm und da sind Rechtecke einfach ziemlich umständlich zu zeichnen (zumindest wenn es viele sein sollen).[/url]

tebox

Naja, ich hätte einfach gerne die Seite W3C-konform gehabt. Daran kann ich nichts schlechtes finden.

Die Diskussion, ob es wirklich erstrebenswert ist, eine valide Seite zu bauen kann wohl endlos geführt werden. Bezeichnend ist in meinen Augen aber, dass sowohl selfhtml als auch csszengarden valide sind, bei spiegel-online aber über 200 Meldungen kommen.

Für mich ist Validität auf jeden Fall ein "nice to have" und meine neuen Seite wollte ich ohne Frames (s.o.) und valide haben(Das war übrigens der Grund, weswegen ich es zuerst ohne Tabellen versucht habe). Es scheint aber so zu sein, dass es einfach nicht geht, wenn man seine Designideen nicht ständig über den Haufen werfen will.

Ich dachte, dass Stylesheets einem ermöglichen sollten, die Seite so zu gestalten wie man es sich vorstellt, ohne auf andere Strukturmittel wie Tabellen zurückgreifen zu müssen.

Wie dem auch sei. Ich habe bestimmt 12-15 Stunden versucht, das Design ohne Tabellen so hinzubekommen, ohne Erfolg zu haben. Mit Tabellen hat das nicht mal eine Stunde gedauert.

Ich poste mal den Code, der soweit das macht, was ich will:

HTML

<html>


<head>
<title>Versuchsfeld</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>


<body>


<table width="100%" height="100%" margin="0" cellpadding="0" cellspacing="0">
<colgroup>
 <col width="150px">
 <col width="auto">
</colgroup>


<tr>
<td colspan="2" height="138" background="banner-top.gif" background-repeat= "no repeat">
</td>
</tr>
<tr>
<td width="180px"  background="navigation-bg.gif" background-repeat= "repeat-y">
<div id="nav-menu">
<ul>
[*][url='#']Menüpunkt1[/url]
[*][url='#']Menüpunkt2[/url]
[*][url='#']Menüpunkt3[/url]
[*][url='#']Menüpunkt4[/url]
[*][url='#']Menüpunkt5[/url]
[*][url='#']Menüpunkt6[/url]
[*][url='#']Menüpunkt7[/url]
[*][url='#']Menüpunkt8[/url]
[/list]
</div>
</td>
<td width="auto">
Lorem ipsum ... gekürzt ...
</td>
</tr>
</table>


</body>
</html>

Alles anzeigen

Falls sich jemand den Code mit meinen Hintergrundbildern anschaut: Ich weiß, dass da noch Bruchstellen drin sind. Mir gings nur um den Code.

tebox

Heißt das, das man wenn man Tabellen mit Höhenangaben einsetzt, gar keine Chance mehr hat W3C-konform zu sein?

tebox

Ok, ich habs mit einer Tabelle verusucht, aber irgendwie...muss ich da einen (oder dutzende) Fehler eingebaut haben.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Versuchsfeld</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
</head>


<body>
<table>
<tr>
<td style="width=100%; height:138px; background-image: url(banner-top.gif); background-repeat: no repeat;">
<div id="nav-menu">
<ul>
[*][url='#']Menüpunkt1[/url]
[*][url='#']Menüpunkt2[/url]
[*][url='#']Menüpunkt3[/url]
[*][url='#']Menüpunkt4[/url]
[*][url='#']Menüpunkt5[/url]
[*][url='#']Menüpunkt6[/url]
[*][url='#']Menüpunkt7[/url]
[*][url='#']Menüpunkt8[/url]
[/list]
</div>
</td>
</tr>
<tr>
<td style="width=180px; height:100%; background-image: url(navigation-bg.gif); background-repeat: repeat-y;">
</td>
<td style="width=100%; height:100%;">
Lorem ipsum ...gekürzt...
</td>
</tr>
</table>
</body>
</html>

Alles anzeigen

Edit: Oh merde: habe schon den ersten riesen Fehler entdeckt...Ich poste wieder, wenn ich mir mehr Gedanken gemacht habe.

tebox

Danke für die Hilfe yeti66,

Der Navigationshintergrund wiederholt sich jetzt schön. Leider wird er nicht am unteren Seitenrand abgeschnitten.
Geht es vielleicht einfach doch nicht so, wie ich es mir gedacht habe?

Zur "DIVormie": Natürlich kann man hier wieder eine Grundsatzdiskussion vom Zaun brechen, aber eigentlich hatte ich eine Anfrage für ein konkretes Problem. (ohne jetzt unhöflich werden zu wollen). Naja ich antworte trozdem.

An Frames stört mich massiv, dass die Adresse der html-Dateien nicht angezeigt wird.

Tabellen wollte ich zur Darstellung von ... na eben von ... Tabellen nutzen und nicht zur Seitenstrukturierung. Die wollte ich ausschließlich mit CSS machen. Ich sehe auch nicht, was an Divs schlecht sein soll. Nur dass es halt nicht ganz so funktioniert, wie ich es mir erhoffte.

tebox

Ok, ich glaube ohne konkretes Beispiel kann ich das Problem nicht deutlich machen: Mein Code lautet

Code

<div style="
position:absolute;
top:0px;
left:0px;
z-index:0;
height:138px;
width:100%;
background: url(banner-top.gif);
background-repeat: no-repeat;">
</div>


<div style="
position:absolute;
top:138px;
left:3px;
z-index:1;
height:100%;
width:180px;
background-image:url(navigation-bg.gif);
background-repeat:repeat-y;">
</div>

Alles anzeigen

Das ganze kann man sich auch anschauen auf
http://<br>http://www.lamla.com/test/versuchsfeld.html</a><br>

vor allem der IE macht komische Sachen. Er interpretiert "width:100%" als "width:70%" oder so. (Zumindest bei mir) Das Problem konnte ich lösen, indem ich das Banner zum body-Hintergrund machte. Habe es jetzt aber mal so gelassen, damit man die Struktur besser versteht.

tebox

Servus,

ich habe eine schöne Design-Idee für meine linksseitige Navigationsleiste. Ich möchte ein Hintergrundbild für die Navigation benutzen, das sich vertikal wiederholt. Natürlich nur bis zum unteren Seitenende.
Es sollte dabei weder Scrolleisten produzieren, indem es über das untere Seitenende hinaus geht (vielleicht mit overflow:hidden). Es sollte aber auch nicht zu früh aufhören. Das heißt, es sollte sich so lange wiederholen, wie es die Länge des Inhalts der Seite erfordert.

Denkt ihr, dass das möglich ist?

tebox

Das geht natürlich, ich wollte mir diese Arbeit aber ersparen, weil es dann doch ziemlich viele Tabellen sind. Naja, wenn die Zellen zum Großteil die gleichen Formatierungen haben, dann kann man die Arbeit über die Suchen-Funktion beschleunigen.

Ich dachte nur, dass dieses Problem schon tausend mal bei anderen Leuten aufgetreten sein muss, so dass ich gehofft hatte, dass es dafür eine elegante Lösung gibt.

tebox

War mir gar nicht bewusst, dass man Excel-sheets auch als html absteichern kann. Ich habs jetzt mal ausprobiert, aber das Problem ist das gleiche wie bei der Übertragung der Tabellen in einen WYSIWYG-Editor (FP). Für jede Zelle werden Formatierungsangaben übernommen.

tebox

Hallo,

ich habe einige Tabellen im xls-Format und würde die gerne in html-Dateien online stellen.

Wenn ich das in einem WYSIWYG-Editor versuche, werden die ganzen Formate wie Zellengröße o.ä. mitgeschleppt. Diese möchte ich lieber in meinem Stylesheet stehen haben.

Deshalb die Frage: Wie überträgt man Tabellen sauber in html-Dateien?

tebox

http://www.nvu-composer.de/

Der einizige kostenlose WYSIWYG-HTML-Editor in der Liste von http://aktuell.de.selfhtml.org/links/html_editoren.htm

Habe ihn aber nicht probiert.

tebox

Kannst Du mal den Link zu Deiner Seite bzw. den Quellcode posten. Mit dem folgenden Code hat es einwandfrei funktioniert:

HTML

<html>
<head>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=5.0)">
<link href="style.css" rel="stylesheet" type="text/css"> 
</head>
<body>
Lorem Ipsum
</body>
</html>

Dir ist hoffentlich klar, dass der Überblendeffekt nur beim IE funktioniert.

tebox

Hoppla, wer lesen kann ist klar im Vorteil:
http://de.selfhtml.org/html/tabellen/…richtung_zellen

Der Fehlerkorrektur von Firefox ist schuld.

tebox

Zum Schützen von Bereichen auf Webseiten eignen sich .htaccess-Dateien.
http://de.selfhtml.org/servercgi/serv…rzeichnisschutz

tebox

Erstmal brauchst du ein Frameset. Das könnte in einer einfachen Fassung so aussehen:

Code

<frameset>
<frameset cols="150,*">
<frame name="navigation" src="navigation.htm">
<frame name="content" src="home.htm">
</frameset>

Dann brauchst du zwei Dateien "navigation.htm" und "home.htm" (oder wie auch immer du sie nennen magst)
In den Head deiner "navigation.htm"- Datei fügste du noch die Zeile

Code

<base target="content">

ein. Damit erreichst Du, dass nur der Inhalt des Frames "content" geändert wird.

tebox

Verweise in Frames können:
a) im gleichen Frame geöffnet werden
b) den Framerahmen sprengen und im gesamten Fenster angezeigt werden
c) in einem anderem Frame geöffnet werden
d) in einem neuen Fenster geöffnet werden

Es stehen also so ziemlich alle Möglichkeiten offen.
Vor allem Möglichkeit c) macht Frames für die Navigation reizvoll.

tebox

Ich glaube nicht, dass man mit dem <div>-tag etwas vertikal zentrieren kann.

Dafür wurde ich eher eine kleine Tabelle bauen:

Code

<table>
 <tr>
  <td align="center" valign="center" style="overflow:auto; width:250px;
    height:350px;background:">TEXT</td>
 </tr>
</table>

tebox

Ist meine Frage so schwierig oder bin ich einfach zu ungeduldig?

tebox

ok, ich poste lieber den kompletten code, weil meine Beschreibung evtl. nicht ganz klar ist. den rand habe ich auf augenfreundliche 5px gestellt, so dass mein problem hoffentlich besonders deutlich wird

HTML

<html>
<head>
<title></title>
<style type="text/css">
<!--


#tab1{
border-collapse:collapse;
}


#tab1 td{
border-top:solid 5px lightgrey;
border-bottom:solid 5px lightgrey;
border-left:solid 5px lightgrey;
border-right:solid 5px lightgrey;
}


#tab1 tr.headline td{
border-top:solid 5px black;
border-bottom:solid 5px black;
border-left:solid 5px black;
border-right:solid 5px black;
} 
-->
</style>
</head>
<body>
<table id="tab1" border="1" cellspacing="0" cellpadding="0" width="600">


<tr class="headline">
  <td>Überschrift 1</td>
  <td>Überschrift 2</td>
  <td>Überschrift 3</td>
 </tr>
 <tr>
  <td>Inhalt 1</td>
  <td>Inhalt 2</td>
  <td>Inhalt 3</td>
 </tr>
  <tr>
  <td>Inhalt 1</td>
  <td>Inhalt 2</td>
  <td>Inhalt 3</td>
</tr>
</table>
</body>
</html>

Alles anzeigen

Beiträge von tebox

<div>-tags vs. tables

Navigationsleiste ohne Frames

Navigationsleiste ohne Frames

Navigationsleiste ohne Frames

Navigationsleiste ohne Frames

Navigationsleiste ohne Frames

Navigationsleiste ohne Frames

Navigationsleiste ohne Frames

Tabellen aus xls in html übertragen

Tabellen aus xls in html übertragen

Tabellen aus xls in html übertragen

Editor Suche

Seiten überblendeffekt

zentriert schreiben bitte schnell um hilfe

Passwort gesichert...

SIDEBAR..... MENÜLEISTE.... oder so^^

FRAMES?

zentriert schreiben bitte schnell um hilfe

border-color und CSS

border-color und CSS