Zerschossen?! Probleme mit Tabelle!!

wernerdeluxe

Ich hätte da gerne mal ein Problem!

Also:
Auf dem screenshot "richtig.gif" sind die Buttons nah zusammen und in der Zelle wo Mitte drinn steht, steht nicht mehr drinn als die Zelle groß ist.

Auf dem screenschot "falsch.gif" sind die Buttons auseinander und in der Zelle wo Mitte drinn steht, steht mehr drinn als sie groß ist.

Das Problem ist, wie ihr euch schon denken könnt, dass die die Zellen rechts und links nicht von der mittleren Zelle beeinflusst werden sollen.

HTML

<html>
<head>
<title>Crazy_Planet.gif</title>
<meta http-equiv="Content-Type" content="text/html;">


<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}


function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}


//-->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#343434" onLoad="MM_preloadImages('../Button_2.gif');">
<table border="0" cellpadding="0" cellspacing="0" width="1000">


  <tr>
   <td>[img]bilder/spacer.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>


  <tr>
   <td rowspan="24">[img]bilder/Crazy_Planet_r1_c1.gif[/img]</td>
   <td colspan="7">[img]bilder/Crazy_Planet_r1_c2.gif[/img]</td>
   <td colspan="3">[img]bilder/Crazy_Planet_r1_c9.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td rowspan="10">[img]bilder/Crazy_Planet_r2_c2.gif[/img]</td>
   <td colspan="5">[img]bilder/Crazy_Planet_r2_c3.gif[/img]</td>
   <td rowspan="23" colspan="2" valign="top" bgcolor="#343434">


Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte,  Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mitte, Mit</p></td>
   <td rowspan="23" valign="top" bgcolor="#343434">


Tabelle rechts</p></td>
   <td rowspan="23">[img]bilder/Crazy_Planet_r2_c11.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r3_c3.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="2">[img]bilder/Crazy_Planet_r4_c3.gif[/img]</td>
   <td colspan="3">[url='#'][img]bilder/Crazy_Planet_r4_c5.gif[/img][/url]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r5_c3.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="2">[img]bilder/Crazy_Planet_r6_c3.gif[/img]</td>
   <td colspan="3">[img]bilder/Crazy_Planet_r6_c5.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r7_c3.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="2">[img]bilder/Crazy_Planet_r8_c3.gif[/img]</td>
   <td colspan="3">[url='#'][img]bilder/Crazy_Planet_r8_c5.gif[/img][/url]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r9_c3.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="2">[img]bilder/Crazy_Planet_r10_c3.gif[/img]</td>
   <td colspan="3">[url='#'][img]bilder/Crazy_Planet_r10_c5.gif[/img][/url]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r11_c3.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r12_c2.gif[/img]</td>
   <td rowspan="2">[img]bilder/Crazy_Planet_r12_c7.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r13_c2.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td rowspan="11">[img]bilder/Crazy_Planet_r14_c2.gif[/img]</td>
   <td colspan="2">[img]bilder/Crazy_Planet_r14_c3.gif[/img]</td>
   <td colspan="3">[url='#'][img]bilder/Crazy_Planet_r14_c5.gif[/img][/url]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r15_c3.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="2">[img]bilder/Crazy_Planet_r16_c3.gif[/img]</td>
   <td colspan="3">[url='#'][img]bilder/Crazy_Planet_r16_c5.gif[/img][/url]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r17_c3.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="2">[img]bilder/Crazy_Planet_r18_c3.gif[/img]</td>
   <td colspan="3">[url='#'][img]bilder/Crazy_Planet_r18_c5.gif[/img][/url]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r19_c3.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="2">[img]bilder/Crazy_Planet_r20_c3.gif[/img]</td>
   <td colspan="3">[url='#'][img]bilder/Crazy_Planet_r20_c5.gif[/img][/url]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r21_c3.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td rowspan="2">[img]bilder/Crazy_Planet_r22_c3.gif[/img]</td>
   <td colspan="2">[img]bilder/Crazy_Planet_r22_c4.gif[/img]</td>
   <td rowspan="2" colspan="2">[img]bilder/Crazy_Planet_r22_c6.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="2">[img]bilder/Crazy_Planet_r23_c4.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
  <tr>
   <td colspan="5">[img]bilder/Crazy_Planet_r24_c3.gif[/img]</td>
   <td>[img]bilder/spacer.gif[/img]</td>
  </tr>
</table>
</body>
</html>

Alles anzeigen

Ronald

Moin!

Ich steige noch nicht ganz durch, was du da bezwecken willst mit den vielen Tabellenzellen. Ich würde das Problem so löse:
1 Tabellenzelle colspan 2 als Kopfzelle mit der Grafik, darunter eine schmale linke Zelle und ein breite rechte.
In die linke Zelle kommt eine neue Tabelle rein mit der Navigation, die rechte Tabellenzelle wird als Hauptausgabe verwendet.

Ach ja:
Ich würde dann auch auf das umständliche Javascript von Dreamweaver verzichten und den Hover-Effelkt ganz einfach durch CSS machen, das funktioniert nicht nur sicherer als ein Javascript, sondern ist auch noch schneller und einfacher (vor allem wenn später weitere Links hinzu kommen).

G.a.d.M.

Ronald

wernerdeluxe

kenn mich mit CSS garnet aus ... hab mir den javaScript von firefox machen lassen ... desshalb auch das tabelleb problem ---

ich = programieren 0

wüsst net warum es dann mit CSS schneller gehen sollte, bzw. was schneller gehen soll

danke für den Tipp mit der Tabelle

ng.
werner_der_Luchs

Ronald

Ich mach die mal ein Beispiel, etwas Geduld

Ronald

So, du kannst dir mal anschaun, was ich eben auf die schnelle gestrickt habe.
Die Überschrift wäre mir allerdings noch zu groß und das Hauptfenster würde ich als Iframe machen, vor allem wenn du noch eine Shoutbox auf die Seite haben willst.

http://web306.server3.webplus24.de/CrazyPlanet/

Wenn Fragen sind... biddeschön

G.a.d.M.

Ronald

wernerdeluxe

das mit frame geht net ... soweit ich weiß ...

zm. wird die Seite hinterher in PHP eingebettet

wernerdeluxe

Wie ist das da denn mit dem mouse over gemacht ???

Gibt es da nur eine Grafik für jeden Button und eine für jedes mouse_over?

Weil ich willt das auch machen, konnt auch den ersten Button als Hintergrund nehmen und dann text drauf, aber dan war auch nur der Text verlinkt. Und als ich dann noch das mouse_over dazu machen wollte stand ich vor dem Problam das ich für jedes mouse_over jeweils einen Butten mit dem jeweiligem Text machen musste.

Also ich fänds klasse von dir wenn du mal den Quelltext stück für Stück definieren würdest (steht ja zum glück net so viel drinn)

Code

<td>[img]navi.gif[/img]</td>
        </tr>


        <tr>
          <td>[url='seite1.html']Seite 1[/url]</td>
        </tr>
        <tr>
          <td>[url='seite2.html']Seite 2[/url]</td>
        </tr>
        <tr>
          <td>[url='seite3.html']Seite 3[/url]</td>


        </tr>
        <tr>
          <td>[url='seite4.html']Seite 4[/url]</td>
        </tr>
        <tr>
          <td>[img]tausch.gif[/img]</td>
        </tr>
        <tr>


          <td>[url='seite1.html']Seite 1[/url]</td>
        </tr>
        <tr>
          <td>[url='seite2.html']Seite 2[/url]</td>
        </tr>
        <tr>
          <td>[url='seite3.html']Seite 3[/url]</td>


        </tr>
        <tr>
          <td>[url='seite4.html']Seite 4[/url]</td>

Alles anzeigen

gelöschter User

hey roland,
haste super gemacht das design war nämlich eigendlich für mich gedacht kannst du mir das mal bitte packen und geben ?

Gruß crazywulf

Ronald

Moin!

Zitat von wernerdeluxe

Wie ist das da denn mit dem mouse over gemacht ???

Der Mouseover-Effekt wird durch Stylesheets erreicht.

Zitat von wernerdeluxe

Gibt es da nur eine Grafik für jeden Button und eine für jedes mouse_over?

Es werden insgesamt nur 2 Grafiken verwendet.

Zitat von wernerdeluxe

Weil ich willt das auch machen, konnt auch den ersten Button als Hintergrund nehmen und dann text drauf, aber dan war auch nur der Text verlinkt. Und als ich dann noch das mouse_over dazu machen wollte stand ich vor dem Problam das ich für jedes mouse_over jeweils einen Butten mit dem jeweiligem Text machen musste.

Das ist eben der Nachteil von JavaScript. Hier funktioniert der Mouseovereffekte übrigens auch noch, wenn JS abgeschaltet ist.

Zitat von wernerdeluxe

Also ich fänds klasse von dir wenn du mal den Quelltext stück für Stück definieren würdest (steht ja zum glück net so viel drinn)

Code

<td>[img]navi.gif[/img]</td>
        </tr>


        <tr>
          <td>[url='seite1.html']Seite 1[/url]</td>
        </tr>
        <tr>
          <td>[url='seite2.html']Seite 2[/url]</td>
        </tr>
        <tr>
          <td>[url='seite3.html']Seite 3[/url]</td>


        </tr>
        <tr>
          <td>[url='seite4.html']Seite 4[/url]</td>
        </tr>
        <tr>
          <td>[img]tausch.gif[/img]</td>
        </tr>
        <tr>


          <td>[url='seite1.html']Seite 1[/url]</td>
        </tr>
        <tr>
          <td>[url='seite2.html']Seite 2[/url]</td>
        </tr>
        <tr>
          <td>[url='seite3.html']Seite 3[/url]</td>


        </tr>
        <tr>
          <td>[url='seite4.html']Seite 4[/url]</td>

Alles anzeigen

Diesen Quelltext zu erklären nützt dir gar nichts, denn es ist eine ganz gewöhnliche Tabelle mit Links in Tabellenzellen und kleinen Grafiken für die Rubriküberschriften. Da ist nichts besonderes dran.

Das Geheimnis steckt vielmehr hier:

Code

<table border=0 id="nav" cellspacing=0 cellpadding=0 width=145 height=100%>

Die gesamte Tabelle hat die ID "nav" bekommen (der Name spielt aber keine Rolle, er muß nur mit den CSS identisch sein). Will man verschiedene Stylesheets für die einzelnen Tabellenzellen verwenden, dann kann man auch den jeweiligen Zellen eine ID zuweisen, der Effekt ist der gleiche.

Mit den Stylesheets (abgelegt in der Datei styles.css) wird den Zellen nur gesagt, wie sie sich verhalten sollen, also z.B. Schriftfarben und -größen, pp. Befindet sich in der Zelle jedoch ein Link ("<a href....") dann setzt automatisch eine andere Formatierung ein:

Code

a:hover {text-decoration:none;}
#nav a, #nav a:visited, #nav a:active, #nav a:focus  {color:#333333;font-weight:bold;font-size:11px;text-indent:10px; line-height:20px;display:block; width: 145; height:20px; background-image:url(bgb_n.gif); background-repeat:no-repeat;}
#nav a:hover {color:#00005F;background-image:url(bgb_h.gif); }

Was passiert da?

1. mit

Code

#nav a, #nav a:visited, #nav a:active, #nav a:focus  {color:#333333;font-weight:bold;font-size:11px;text-indent:10px; line-height:20px;display:block; width: 145; height:20px; background-image:url(bgb_n.gif); background-repeat:no-repeat;}

bestimmen wir das Verhalten der Tabellenzelle, wenn sich darin ein Link befindet. Die gleiche Formatierung gilt, wenn es sich um einen bereits besuchten Link handelt oder er focusiert oder aktiviert wird. Dann wird die Schriftfarbe festgelegt, Fettschrift eingeschaltet, die Schriftgröße auf 11 Pixel festgelegt, der Schrifttext um 10 Pixel nach rechts eingerückt. Mit 'line-height' wird die Zeilenhöhe auf 20 Pixel festgelegt, damit die Schrift horizontal mittig erscheint. So weit ist das alles nichts besonderes, aber nun kommt es:
Mit "display:block" wird der Zelle gesagt, daß sie komplett als Link wirken soll und nicht nur der Schriftteil in ihr. Dann wird die Zellengröße festgelegt (identisch zum Button) und die Hintergrundgrafik für die Zelle festgelegt (der Mouseout-Button). Die Angabe, daß die Hintergrundgrafik nicht wiederholt werden soll ist eigentlich überflüssig, da die Zelle genau so groß ist wie der Button. Wenn man allerdings in einen anderen Zelle eine größere Grafik verwendet kommt diese Option zum Tragen.

Damit haben wir unseren Link als grafischen Button fertig. Nun fehlt nur noch der Hover-Effekt

2. mit

Code

a:hover {text-decoration:none;}

schalten wir das unterstreichen der Links bei Hover ab, unser Text ist nun nicht mehr als Link zu erkennen.

3. mit

Code

#nav a:hover {color:#00005F;background-image:url(bgb_h.gif); }

verändern sich das Verhalten der Zelle, sobald sich der Mousezeiger darüber befindet. Es wird die Schriftfarbe geändert und eine andere Hintergrundgrafik (der Hover-Button) angezeigt.

Das ist alles.
Du kannst in jeder Tabelle auf jeder Seite die auf die CSS-Datei zugreift beliebig viele Zellen zum grafischen Link machen, wenn du der Tabelle oder der Zelle die ID 'nav' zuweist. D.h., man kann z.B. rechts neben dem Hauptfenster eine 2. Tabelle aufbauen mit weiteren Links, die dann automatisch identisch formatiert sind.

Alles klar ?

G.a.d.M.

Ronald

Ronald

Moin!

Das Wichtigste zuerst:

Zitat von cr@zywulf

hey roland,
haste super gemacht das design war nämlich eigendlich für mich gedacht kannst du mir das mal bitte packen und geben ?

Gruß crazywulf

Ich heiße Ronald!

Dass das Design für Dich gedacht war, weiß ich. Wenn du es dir nicht einfach runterladen willst, schick ich es dir natürlich rüber. Sollen die Grafiken alle so bleiben, oder änderst du sie ggf. selbst nach deinen Wünschen?

G.a.d.M.

Ronald

gelöschter User

sry.. tut mir echt leid Ronald

6_freddy

Hi Ronald,
ich bin mal wieder sehr beeindruckt. Ich hab' mich an einem ähnlichen Problem mit Erklärungen versucht.
Nicht so erfolgreich, allerdings.
Die ID-Methode ist mir dazu nämlich nicht eingefallen.
Wieder was gelernt, danke.
MfG
6_freddy

Bastian

Ich habe dazu noch zwei Fragen:

1.) Wenn ich "background-repeat:repeat" und "display:block;" ausgewählt habe, ist beim Internet Explorer nur der Text als Link anklickbar beim Firefox die ganze Tabelle.

Testseite ist hier:

http://www.wsv-verden-jugend.de/menu/test.html

Es geht um den Balken oben!

Der CSS Schnipsel sieht dafür folgendermaßen aus:

Code

#header a:link, #header a:visited, #header a:hover, #header a:active, #header a:focus  {
	display:block;
	text-decoration: none;
}

2.) Kann ich für den Tabellentext auch eine absolute Schriftgröße festlegen? Je nach Schriftgröße ist der Text manchmal größer als die Tabelle selbst (auch bei Deiner Testseite)

Tags