Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Rand vermeiden !?!
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Rand vermeiden !?!

Pages: [1]
geschrieben von wok am 26.09.2007 - 21:33
Ihr habt mich zurecht darauf hingewiesen, daß meine Seiten nicht HTML konform geschrieben sind.
Seit dem bemühe ich mich 1. die Fehler zu finden und 2. dann auch die richtige Form zu finden.
Dabei habe ich nun schon eine ganze Weile Probleme mit einem Rand um einen Frame.
Früher habe ich geschrieben:
<BODY leftMargin="0" topMargin="0">
Das ist wie Ihr mir geschrieben habt zwar falsch, aber es hat eigentlich funktioniert (OK, ich weiß, die hohe Fehlertoleranz)
Ihr habt mich darauf verwiesen, daß man so etwas besser mit styles macht und genau damit komme ich nun nicht klar.
In selfhtml habe ich gelernt, daß man auch direkt formatieren kann, also habe ich geschrieben:
<BODY style="margin-left:0px; margin-top:0px;”>
Das Ergebnis ist allerdings ein schmaler Rand oben und links.
Lasse ich das abschließende Abführungszeichen weg, funktioniert es richtig.
In selfhtml steht nun, man könne bei der letzten Formatdefinition das Semikolon weglassen.
Schreibe ich also:
<BODY style="margin-left:0px; margin-top:0px>
dann wird die letzte Definition allerdings ignoriert und es entsteht ein breiter Rand oben.
Hat jemand eine Erklärung für mich?

geschrieben von Danny am 26.09.2007 - 22:44
Hast du die Seite irgendwo online oder kannst den gesamten Quelltext posten?
Das letzte Semikolon ist nicht notwenig, trotzdem sollte es auch mit funktionieren. Da muss irgendein anderer Fehler dahinter stecken.

Bye Danny

geschrieben von wok am 27.09.2007 - 23:20
Hi Danny,
es sind sicher noch viel mehr Fehler vorhanden. Im Moment geht es mir aber um den einen, der den unschönen Rand verursacht.
In dieser Version ( ... margin-left:0px;> ) funktioniert es ja.
Die Seite mit der falschen Randdefinition (die ja auch funktioniert) ist im internet zu sehen.
http://www.filmclub-fn.de und "Clubleben".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME="Generator" CONTENT="1st page 2000">
<META NAME="author" CONTENT="wek-film, wolfgang kuhn">
<META NAME="description" CONTENT="Filmclub Friedrichshafen">
<META NAME="keywords" CONTENT="Filmclub, Videoclub, BDFA">
<TITLE>Videofilmen am Bodensee</TITLE>
<link rel="stylesheet" type="text/css" href="formate.css">

</HEAD>
<BODY style="margin-top:0px; margin-left:0px;>
<table border="0">
<!-- Textteil -->
<td width="770" class="textfeld" valign="top" >
<table width="770" border="0" background="grafiken/Logo5-WZ-41a.jpg">
<tr>
<td width="40" height="22"></td>
<td width="200"></td>
<td width="250"></td>
<td width="200"></td>
<td width="80"></td>
</tr>
<tr>
<td></td>
<td height="30" valign="bottom" colspan="3" class="std-font16cg-bl">
<font face="century gothic" size="5" color="#3b5d9a">
Clubabende
</font> finden statt:
</td>
</tr>
<tr>
<td></td>
<td height="60" colspan="2" valign="top" class="std-font16cg-bl">
<ul>
<li>jeden 1. Dienstag im Monat ab 19:00 Uhr</li>
<li>im Spektrum Friedrichshafen <br>(gelbes Haus), Ehlersstrasse<br>
(gegen&uuml;ber dem Hallenbad - gleiche Strassenseite), 1. Obergescho&szlig;</li>
</ul>
</td>
<td height="80" valign="top">
<a HREF="fc_clubleben_bild01.html" target="Infoteil">
<img src="grafiken/stadtplan02a.jpg" width="180" Align="right" VALIGN="TOP"
style=" border-color:#d3d3d3 #a3a3a3 #838383; border-width:5px; border-style:solid;"></a>
</td>
</tr>
<tr>
<td></td>
<td height="30" valign="top" colspan="2" class="std-font16cg-bl">
Es gibt neue und &uuml;berarbeitete Filme unserer Mitglieder zu sehen, aber auch Filme aus dem Umlaufprogramm des BDFA.
Dar&uuml;ber hinaus besprechen wir aktuelle Clubthemen und widmen uns technischen Neuheiten. Und was ganz wichtig ist:
die Geselligkeit darf nicht zu kurz kommen.<br><br>
Auch Filmfreunde anderer Clubs, Interessenten und G&auml;ste sind herzlich willkommen.
</td>
<td>
<a HREF="fc_clubleben_bild02.html" target="Infoteil">
<img src="grafiken/clubabend28a.jpg" width="180" Align="right" VALIGN="TOP"
style=" border-color:#d3d3d3 #a3a3a3 #838383; border-width:5px; border-style:solid;"></a>
<br><br><br><br><br><br><br>
<a HREF="fc_clubleben_bild03.html" target="Infoteil">
<img src="grafiken/clubabend21a.jpg" width="180" Align="right" VALIGN="TOP"
style=" border-color:#d3d3d3 #a3a3a3 #838383; border-width:5px; border-style:solid;"></a>
</td>
</tr>
</table>
<table width="770" height="100%" cellpadding="0" border="0" background="grafiken/Logo5-WZ-41a.jpg">
<tr>
<td width="40" height="12"></td>
<td width="200"></td>
<td width="250"></td>
<td width="200"></td>
<td width="80"></td>
</tr>
<tr>
<td width="40"></td>
<td width="200">
<a HREF="fc_clubleben_bild04.html" target="Infoteil">
<img src="grafiken/stammtisch40a.jpg" width="180" Align="left" VALIGN="TOP"
style=" border-color:#d3d3d3 #a3a3a3 #838383; border-width:5px; border-style:solid;"></a>
<br><br><br><br><br><br><br>
<a HREF="fc_clubleben_bild05.html" target="Infoteil">
<img src="grafiken/egon36aa.jpg" width="180" Align="left" VALIGN="TOP"
style=" border-color:#d3d3d3 #a3a3a3 #838383; border-width:5px; border-style:solid;"></a>
</td>
<td valign="top" colspan="2" class="std-font16cg-bl">Zum
<font face="century gothic" size="5" color="#3b5d9a">
Stammtisch</font>
treffen sich die Hartgesottenen an den Dienstagen zwischen
den Clubabenden<br><br>
<ul>
<li>um 19:00 Uhr</li>
<li>w&auml;hrend der Sommerzeit im "Lammgarten" (zwischen Hbf FN und Seglerhafen)</li>
<li>w&auml;hrend der Winterzeit im "Hotel Goldener Hirsch" <br>
(Charlottenstr. 1 - gegen&uuml;ber der Sparkasse Bodensee).</li>
</ul>
</td>
<td></td>
</tr>

<tr>
<td></td>
<td height="70" valign="bottom" colspan="3" class="std-font16cg-bl">
Der Unterschied zwischen Clubabend und Stammtisch: Beim Clubabend redet meist nur einer, beim Stammtisch alle auf einmal.
</td>
</tr>
<tr>
<td height="612" ></td>
</tr>
</table>
</td>
</TABLE>
</BODY>
</HTML>

geschrieben von Danny am 03.10.2007 - 18:40
Hallo Wolfgang,
wie versprochen hab ich mich nun deinem Problem heute angenommen.

Das Problem lag darin, dass deine erste Tabelle automatisch einen Rand zwischen ihren Inhalt gesetzt hat. Mit dem cellpadding und cellspacing Attribut kann man dies aber ausschalten.

Du hast allerdings wie schon selbst vemutet einige andere Fehler drin, z.B. das du fast immer nur 4 der einst angegebenen 5 Spalten der Tabelle definierst. Ich geb dir den Rat deinen Code immer einzurücken, sodass Unterelemente immer einen Tab weiter rechts stehen. Das erhöht nicht nur die lesbarkeit sondern man findet auch einfacher Fehler.

Wenn du CSS nutzt, was ja auch richtig so ist, dann solltest du so oft wie möglich auf HTML-Formatierungs-Attribute verzichten und stattdessen das style Attribut nutzen.

Ich habe den Code nun komplett überarbeitet und "hoffe" sogut wie alle Fehler beseitigt. Da du mir ja sehr lernwillig scheinst, kopier ihn nicht nur sondern vergleiche mit deiner Variante. So lernt man am meisten dazu.

P.S. Man sollte eigentlich auf die Nutzung von Tabellen für Designzwecke, also der Ausrichtung in Spalten, verzichten. Tabellen sind da um Inforrmationen tabellarisch darzustellen und nicht um Bilder rechts neben Text anzuordnen. Auf die Änderung hab ich aber nun bewusst verzichtet, weil es wohl mehr verwirrt als hilft.

Schöne Grüße Danny

P.P.S. Der Beitrag ist mit dem Code zu lang, deshalb werden es nun 2 Posts

geschrieben von Danny am 03.10.2007 - 18:53

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 
95: 
96: 
97: 
98: 
99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108: 
109: 
110: 
111: 
112: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
  <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
  <meta NAME="Generator" CONTENT="1st page 2000">
  <meta NAME="author" CONTENT="wek-film, wolfgang kuhn">
  <meta NAME="description" CONTENT="Filmclub Friedrichshafen">
  <meta NAME="keywords" CONTENT="Filmclub, Videoclub, BDFA">
  <title>Videofilmen am Bodensee</title>
  <link rel="stylesheet" type="text/css" href="formate.css">
</head>
<body style="margin-top:0px; margin-left:0px;">
  <table style="border: 0px; margin:0" cellpadding="0" cellspacing="0">
    <tr>
      <td style="width:770px; vertical-align: top;" class="textfeld">   
        <table style="width: 770px; border: 0px; background: url('grafiken/Logo5-WZ-41a.jpg');">
          <tr>
            <td style="width: 40px; height: 22px;"></td>
            <td style="width: 200px;"></td>
            <td style="width: 250px;"></td>
            <td style="width: 200px;"></td>
            <td style="width: 80px;"></td>
          </tr>
          <tr>
            <td></td>
            <td style="height: 30px; vertical-align: bottom;" colspan="4" class="std-font16cg-bl">
              <span style="font-face:century gothic; font-size: 14px;color: #3b5d9a">Clubabende</span> finden statt:
            </td>
          </tr>
          <tr>
            <td></td>
            <td style="height:60px; vertical-align: top" colspan="2" class="std-font16cg-bl">
              <ul>
                <li>jeden 1. Dienstag im Monat ab 19:00 Uhr</li>
                <li>im Spektrum Friedrichshafen <br>(gelbes Haus), Ehlersstrasse<br>
                    (gegen&uuml;ber dem Hallenbad - gleiche Strassenseite), 1. Obergescho&szlig;
                </li>
              </ul>
            </td>
            <td style="height:80px; vertical-align: top">
              <a href="fc_clubleben_bild01.html" target="Infoteil">
                <img src="grafiken/stadtplan02a.jpg" alt="" style="width:180px; vertical-align: top; border-color:#d3d3d3 #a3a3a3 #838383; border-width:5px; border-style:solid;" align="right">
              </a> 
            </td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td style="height: 30px; vertical-align: top" colspan="2" class="std-font16cg-bl">
              Es gibt neue und &uuml;berarbeitete Filme unserer Mitglieder zu sehen, aber auch Filme aus dem Umlaufprogramm des BDFA. 
              Dar&uuml;ber hinaus besprechen wir aktuelle Clubthemen und widmen uns technischen Neuheiten. Und was ganz wichtig ist:
              die Geselligkeit darf nicht zu kurz kommen.<br><br>
              Auch Filmfreunde anderer Clubs, Interessenten und G&auml;ste sind herzlich willkommen.
            </td>
            <td>
              <a href="fc_clubleben_bild02.html" target="Infoteil">
              <img src="grafiken/clubabend28a.jpg" alt="" style="width:180px; vertical-align: top; border-color:#d3d3d3 #a3a3a3 #838383; border-width:5px; border-style:solid;" align="right"></a>
              <br><br><br><br><br><br><br>
              <a href="fc_clubleben_bild03.html" target="Infoteil">
              <img src="grafiken/clubabend21a.jpg" alt="" style="width:180px; vertical-align: top; border-color:#d3d3d3 #a3a3a3 #838383; border-width:5px; border-style:solid;" align="right"></a> 
            </td>
            <td></td>
          </tr> 
        </table>
        
        <table style="width: 770px; height: 100%; background: url('grafiken/Logo5-WZ-41a.jpg'); border: 0px" cellpadding="0">
          <tr>
            <td style="width: 40px; height: 12px;"></td>
            <td style="width: 200px;"></td>
            <td style="width: 250px;"></td>
            <td style="width: 200px;"></td>
            <td style="width: 80px;"></td>
          </tr>
          <tr>
            <td style="width: 40px"></td>
            <td style="width: 200px">
              <a href="fc_clubleben_bild04.html" target="Infoteil">
              <img src="grafiken/stammtisch40a.jpg" alt="" style="width:180px; vertical-align: top; border-color:#d3d3d3 #a3a3a3 #838383; border-width:5px; border-style:solid;" align="right"></a>
              <br><br><br><br><br><br><br>
              <a href="fc_clubleben_bild05.html" target="Infoteil">
              <img src="grafiken/egon36aa.jpg" alt="" style="width:180px; vertical-align: top; border-color:#d3d3d3 #a3a3a3 #838383; border-width:5px; border-style:solid;" align="right"></a>
            </td>
            <td style="vertical-align: top" colspan="2" class="std-font16cg-bl">Zum 
              <span style="font-face:century gothic; font-size: 14px;color: #3b5d9a">Stammtisch</span>
              treffen sich die Hartgesottenen an den Dienstagen zwischen
              den Clubabenden<br><br>
              <ul>
                <li>um 19:00 Uhr</li>
                <li>w&auml;hrend der Sommerzeit im "Lammgarten" (zwischen Hbf FN und Seglerhafen)</li>
                <li>w&auml;hrend der Winterzeit im "Hotel Goldener Hirsch" <br>
                  (Charlottenstr. 1 - gegen&uuml;ber der Sparkasse Bodensee).
                </li>
              </ul>
            </td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td style="height :70px; vertical-align: bottom" colspan="3" class="std-font16cg-bl">
              Der Unterschied zwischen Clubabend und Stammtisch: Beim Clubabend redet meist nur einer, beim Stammtisch alle auf einmal.
            </td>
            <td>
          </tr>
          <tr>
            <td style="height: 612px" colspan="5"></td>
          </tr>
        </table>
      </td> 
    </tr>
  </table>
</body>
</html>

geschrieben von wok am 04.10.2007 - 00:43
Hi Danny,
für heute reicht es nur noch zu einem herzlichen Dankeschön.
Nach einem geselligen Abend mit Freunden und mehreren Flaschen Montepulciano reicht es allerdins nicht mehr zu einer inhaltlichen Antwort. Aber danken wollte ich Dir schon noch und die fachliche Auseinandersetzung folgt morgen.
Grüße vom Bodensee
wolfgang

geschrieben von wok am 05.01.2008 - 19:56
Hallo,
hat eine ganze Zeit gedauert - in der ich mich um mein Hauptthema "Video" kümmern mußte, aber jetzt bin ich fast durch mit der Fehlerbereinigung.
Noch mal vielen Dank an Danny für die Unterstützung.
Natürlich sind neue Fragen aufgetaucht und ich beginne mal mit folgendem und es geht wieder um einen Rand bzw. Rahmen:
Auf der Seite Filmclub-Vita "fc_vita.html" unserer website (filmclub-fn.de) gibt es einen längeren Text. Nach dem ersten Absatz kommt der Text einer Anzeige. Die möchte ich nun "einrahmen" und zwar so, daß die 3 Zeilen erhalten bleiben und an allen Seiten ein Rad von ca. 5 Pixel (Innenabstand) bleibt.
Ich kann mir vorstellen, daß dies mit einer Tabellenstruktur schon geht, aber gibt es auch eine andere Möglichkeit?
Gruß vom Bodensee
Wolfgang

geschrieben von Danny am 06.01.2008 - 11:20
Hallo Wolfgang,
ich hoffe ich hab dein Anliegen richtig verstanden. Du möchtest einen Rahmen (der nicht 5px sondern nur 1px breit ist) um diese 3zeilige Anzeige. Der Innenabstand zwischen Rahmen und Text soll 5px betragen und dieser gesamte Block soll dann auch noch die 53px nach rechts eingerückt sein. Richtig?

Dann schau mal ob das so für dich richtig gelöst ist
(ich hab noch ein bisschen Code drüber und drunter mit gepostet damit du weist was ich entfernt/hinzugefügt hab.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 


Unser Gr&uuml;ndungsmitglied und 2. Vorsitzender Werner Heine erinnert sich, wie es begann:<br>
		  "Es war an einem hei&szlig;en Junitag im Jahr 1959. In der Schw&auml;bischen Zeitung stand eine Anzeige: <br><br>


		  <div style="border: 1px #3b5d9a solid; font-face:century gothic; margin-left:53px; color:#3b5d9a; padding: 5px; position: absolute;">
	  		Filmabend im Kolping-Saal<br>
	  		Der &Uuml;berlinger Filmclub zeigt 8 mm-Filme<br>
	  		Unkostenbeitrag DM 2,00
		  </div>
		  <br><br><br><br><br>


		  So ungef&auml;hr 30 Zuschauer waren gekommen, sahen nette Schmalfilme und erfuhren, dass der &Uuml;berlinger Club 
	      beabsichtigte, in Friedrichshafen eine Art Zweigstelle zu errichten. Alle Zuschauer erhielten Informationsmaterial 
	      und nat&uuml;rlich auch ein Aufnahmeformular. <br>


Ich sag mal so, ich finde diese Lösung nicht optimal, aber sie funktioniert und ist auch valid. Ich hab diese Box absolut positioniert, also unabhängig vom Text, sodass sie "über" dem Text liegt. Dass hab ich wiederum mit den ganzen Zeilenumbrüchen ausgeglichen. Finde ich zwar wie gesagt etwas unschön, allerding wäre der Rahmen sonst immer so breit wie die gesamte Tabelle gewesen, weil er sich an das Elternelement anpasst.

Ich hoffe du hast dir das so vorgestellt

Schöne Grüße
Danny

geschrieben von wok am 06.01.2008 - 15:11
Hallo Danny,
Jou, Jubbel, genau so habe ich mir das vorgestellt.
Hab's gerade getestet und werde die Seite gleich ins Netz stellen.
Vielen Dank !!!
Mit dem Rahmen über die gesamte Tabellenbreite, das hatte ich auch schon hingekriegt, aber das wollte ich ja nicht.
Jetzt werden ich erst 'mal den Code Stück für Stück analysieren und mich dann dem nächsten Problem zuwenden.

geschrieben von wok am 11.01.2008 - 13:11
Grundsätzlich sieht die Seite nun genau so aus, wie ich sie mir vorgestellt habe.
Außerdem habe ich mittlerweile gelesen (gelernt), daß die Struktur meiner Seiten auf der Basis von Tabellen wohl nicht so das gelbe vom Ei ist. Ich versuche deshalb gerade mich mit dem Tag "div" vertraut zu machen.
Dabei habe ich natürlich verschiedenes ausprobiert, allerdings nicht alles verstanden.
Meine Frage zunächst: Was bewirkt das Attribut "position:absolut;" in Deiner Lösung. Absolut von welchem Punkt aus und in welchem Abstand? Es wird ja nichts angegeben.
Außerdem habe ich nicht verstanden, warum der Rahmen mit dieser Angabe rechts genau hinter dem Text folgt und ohne die Angabe bis zum Ende der Tabellenzelle geht?

geschrieben von okley am 12.01.2008 - 16:16
hey wok,
Find ich ein guten Schritt, sich mit div Layouts zu beschäftigen ;)

position: absolute positioniert das Element in seinem explizit relativ positionierten Elternelement oder dem Body. Mit einer Abstandangabe wie z.B. margin oder left,right,top kannst du deinem Element die Position in dem Container angeben. Folgender Code positioniert die Überschrift oben Links mit Abstand nach links.
HTML-Quelltext
1: 

<body><div style="position:absolute; left:10px;top:0;"><h1>Oben Links mit 10px Abstand</h1></div></body>


Weitere Resourcen:
http://www.css4you.de/wslayout1/index.html

geschrieben von wok am 12.01.2008 - 16:43
Hallo okley,
vielen Dank für Deine Antwort und vor allem für den Link. Ich werde weiter am Thema arbeiten.
Ich glaube zunächst muß ich mir das Thema "Eltern- und Kindelement" genauer anschauen. Ohne dieses Verständnis ist Dein erster Satz für mich noch nicht nachvollziehbar. Aber das wird schon

Zur Zeit versuche ich die Seite Leitbild "fc_leitbild.html" unserer website (filmclub-fn.de) auf div umzustellen.
Dabei ist mir aufgefallen, daß Internet-Explorer und Firefox die Zeilenabstände in eine ul unterschiedlich darstellen.
Dadurch gerät natürlich die ganze Seite durcheinander. Wie kann ich eine gleiche Darstellung in der verschiedenen browsern erreichen
btw. Das ist natürlich wieder ein ganz anderes als im Titel dargestelltes Thema. Wie haltet Ihr es hier? Besser ein neues Thema aufmachen?

geschrieben von wok am 12.01.2008 - 18:17
Sorry Leute,
ich gestehe: Anfängerproblem. Bin eben immer noch ein ganz schönes greenhorn.
Ich habe heraus gefunden.
Der Unterschied liegt wohl darin, daß IE den ersten <br> nicht ausführt und als den bei Listen notwendigen Zeilensprung interpretiert. FF hingegen führt jeden angegebenen <br> als zusätzlichen Zeilensprung aus.
Wird kein <br> angegeben, ist die Darstellung identisch, wird ein oder mehrere <br> angegeben differiert die Darstellung um einen <br>.
Die Lösung die ich gefunden habe: mit style Zeilenabstand arbeiten.
Aber vielleich kann ja jemand bestätigen, daß ich auf dem richtigen Weg bin (oder mich wieder 'mal im Wald der Möglichkeiten verlaufen habe).

@okley
die Eltern-Kind-Geschichte ist mir, denke ich, jetzt auch klar.


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.