HTML: Problem mit Tabellen

W

Wullschi

Hallo

Ich arbeite gerade an meiner Homepage, und bin auf ein Problemgestossen.
Ich habe untereinander 3 Tabellen angelegt. Die erste hat eine Zeile, und eine Zelle, die 2. hat eine Zeile und 6 Zellen, die dritte wieder eine Zeile und eine Zelle. In die Zellen habe ich den Banner und die Bilder der Buttons, welche zum Banner gehören, eingebaut.

Wenn ich aber einem Button einen Link zuweise wird der Banner auseinandergerissen. Es entstehen abstände zwischen der Mittleren und den anderen beiden Tabellen. Das geschieht jedoch nur in Firefox.
fehler.jpg


Hier mein html-code:


<!---Header+Navi--->
<table cellspacing="0" cellpadding="0" align="center" border="0">
<tr>
<td height="153" width="925" align="center">
<img height="153" width="925" src="Restbanner/oben.jpg" border="0">
</td>
</tr>
</table>


<table cellspacing="0" cellpadding="0" align="center" border="0">
<tr>
<td width="256" height="24">
<img height="24" width="256" src="Restbanner/mittelinks.jpg" border="0">
</td>

<td width="70" height="24">
<a href="bla.html">
<img height="24" width="70" src="Buttons/b1.jpg" border="0">
</a>
</td>

<td width="104" height="24">
<img height="24" width="104" src="Buttons/b2.jpg" border="0">
</td>

<td width="115" height="24">
<img height="24" width="115" src="Buttons/b3.jpg" border="0">
</td>

<td width="85" height="24">
<img height="24" width="85" src="Buttons/b4.jpg" border="0">
</td>


<td width="295" height="24">
<img height="24" width="295" src="Restbanner/mitterechts.jpg" border="0">
</td>
</tr>
</table>


<table cellspacing="0" cellpadding="0" align="center" border="0">
<tr>
<td height="58" width="925" align="center">
<img height="58" width="925" src="Restbanner/unten.jpg "border="0">
</td>
</tr>
</table>

<!---Ende Header+Navi--->



Weiss vieleicht jemand weiter?

mfg Wullschi
 
Wieso packst du das ganze nicht in eine dreizeilige Tabelle?!
 
Ja, das habe ich soeben auch versucht. Ich habe die Zeilen mit colspan verbunden. Gebracht hats aber nicht viel :(

<table cellspacing="0" cellpadding="0" align="center" border="0">
<tr>
<td height="153" width="925" align="center" colspan=6>
<img height="153" width="925" src="Restbanner/oben.jpg" border="0">
</td>
</tr>


<table cellspacing="0" cellpadding="0" align="center" border="0">
<tr valign=top>
<td width="256" height="20" bgcolor=red>
<img height="24" width="256" src="Restbanner/mittelinks.jpg" border="0" valign=bottom>
</td>

<td width="70" height="20">
<a href="bla.html">
<img height="24" width="70" src="Buttons/b1.jpg" border="0">
</a>
</td>

<td width="104" height="20">
<img height="24" width="104" src="Buttons/b2.jpg" border="0">
</td>

<td width="115" height="20">
<img height="24" width="115" src="Buttons/b3.jpg" border="0">
</td>

<td width="85" height="20">
<img height="24" width="85" src="Buttons/b4.jpg" border="0">
</td>


<td width="295" height="20">
<img height="24" width="295" src="Restbanner/mitterechts.jpg" border="0">
</td>
</tr>



<table cellspacing="0" cellpadding="0" align="center" border="0">
<tr valign=top>
<td height="58" width="925" align="center" colspan=6 valign=top>
<img height="58" width="925" src="Restbanner/unten.jpg" border="0">
</td>
</tr>
</table>
 
Zuletzt bearbeitet von einem Moderator:
wiso machst du das nicht mit CSS?
 
.. .dann solltest Du CSS lernen. Ist nicht schwer.

Tabellen sind für tabellarische Daten da, für's Layout gibt's CSS.

No.
 
Ich rate dir auch CSS zu lernen, weil es 1. total einfach ist und du dir damit 2. einen Menge Probleme im Zusammenhang mit oftmals sehr "eigenwilligen" Tabellen ersparst.
Zum Thema CSS findest du auf http://de.selfhtml.org alles was du zum Lernen benötigst.

Gruß und viel Spaß,
arne1900.
 
Ich hab da noch ein css-layout von einer anderen Page, welches mir ein Kollege erstellt hat. Ich verstehe es zwar nicht vollständig, aber ich habe es zumindest schonmal geschaft eine Grafik als hintergrund zu verwenden.

HTML-Code:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link5</a></li>
<li><a href="#">link6</a></li>
</ul>
</div>

CSS-Code:


#navcontainer ul {
padding-left: 0;
margin-left: 0;
color: #000000;
float: left;
width: 100%;
font-family: verdana, arial, sans-serif;
font-size: 9px;
font-weight: bold;
border-top: 1px solid #FBB1B0;
border-bottom: 1px solid #FBB1B0;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
padding: 5pt 10pt 5pt 10pt;
background: #ffffe0 url(buttons/b1.jpg);
color: #000000;
text-decoration: none;
float: left;
border-right: 1px dashed #FBB1B0;
}


#navcontainer ul li a:hover {
background-color: #FC4A46;
color: #000000;
}

Der Fette Teil ist meiner Meinung nach dafür verantwortlich, dass die Navigation horizontal ausgerichtet ist.
Nun möchte ich aber nicht immer das gleiche Bild als hintergrund, sondern bei jeder Zelle ein anderes. Hat jemand einen Vorschlag?
 
Zuletzt bearbeitet von einem Moderator:
Schreib das mal alles in eine Zeile. Hab's jetzt nicht ausprobiert, aber der IE z.B. macht bei solchen Konstrukten in der Regel jedenfalls Probleme. Evtl. schliesst sich der FF bei bestimmten Doctypes da an...

<td width="70" height="24"><a href="bla.html"><img height="24" width="70" src="Buttons/b1.jpg" border="0"></a></td>

Und ja, sowas macht man besser mit CSS. Speziell für Menüs verwendet man am besten Listen (<ul> und <li>).
Auf meiner Seite könntest Du Dir den Code anschauen/klauen.

Edit: Ah, genau so habe ich das gemeint. Für die horizontale Anordnung ist unter anderem das float:left, richtig. Das display:inline ist da aber auch sehr wichtig, da Listen-Elemente eigentlich Block-Elemente sind und somit einen Absatz erzeugen würden.
Wenn Du für jedes <li> ein anderes Hintergrundbild haben möchtest kannst Du das direkt im HTML-Code definieren:

<li style="background-image:url(dein_bild.gif);">...</li>
 
Zuletzt bearbeitet von einem Moderator:
Vielen Dank schonmal für diese Info. Deine Page ist auch noch recht aufschlussreich. Wenn ich den Hintergrund aber im HTML-Bereich definiere, ist es mir aber nicht möglich für jeden Button den richtigen Hoverbutton einzublenden. Oder lässt sich das auch gleich im HTML-Dokument lösen?

Edit: Wenn ich das Bild in das HTML-Dokument Packe, verschwindet die Zelle wenn ich keinen Text eingebe. Das sollte ja nicht der Fall sein, da das Bild den Text schon enthält.
 
Zuletzt bearbeitet von einem Moderator:
Stimmt. Wenn Du Hover-Buttons willst musst Du für Jedes <li> eine Klasse oder ID definieren.

<li id="button1">...</li>

CSS:

#button1 {
background-image:url(...);
}
#button1:hover {
background-image:url(...);
}

Edit: Wenn ich das Bild in das HTML-Dokument Packe, verschwindet die Zelle wenn ich keinen Text eingebe. Das sollte ja nicht der Fall sein, da das Bild den Text schon enthält.
Zum Vergrößern anklicken....
Verstehe ich ehrlich gesagt nicht. :) Welche Zelle verschwindet? Das <li>-Element?
Noch schöner wäre es wenn Du den Text direkt in das Dokument schreibst, denn er gehört ja zum Content. Bilder sind nur zum verschönern da. Wenn Du aus Designtechnischen Gründen aber unbedingt den Text direkt in den Bildern haben willst, dann verwende bitte alt- und title-Attribute. Von der Barrierefreiheit mal ganz abgesehen...Google würde sich darüber freuen. ;)
 
Vielen Dank! Das wäre geschaft.
Aber wenn ich zwischen Header und Fusszeile nun einen Inhaltsbereich einfüge, wird die Fusszeile nach rechts verschoben, und der Inhaltsteil wird unter dem Bild der Fusszeile teilweise "bergraben". Edit: gelöst, aber das problem mit der verschobenen Fusszeile bleibt…


Code: 
<div id="Seite">
<ul id="navcontainer">
<li id="oben"><a></a></li>
</ul>

			<ul id="navcontainer">
				<li id="mittelinks"><a></a></li>
				<li id="button1"><a href="#"></a></li>
				<li id="button2"><a href="#"></a></li>
				<li id="button3"><a href="#"></a></li>
				<li id="button4"><a href="#"></a></li>
				<li id="mitterechts"><a></a></li>
			</ul>
		

<ul id="navcontainer">
<li id="unten"><a></a></li>
</ul>

<!--Inhaltsteil--> :rolleyes: 
<div id="inhalt"> abcd <div>
<!--/Inhaltsteil-->


<!--Fusszeile-->
<ul id="navcontainer">
<li id="fusszeile"><a></a></li>
</ul>
<!--/Fusszeile-->

</div>

Code: 
 div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    padding: 0;
    width:1000px
  }

#inhalt {
	clear:both;
    font-size: 0.83em;
    margin: 0; padding: 0.1em;
    text-align: center;
	width:700px;
    background-color: #fed;
    border-top: 1px solid silver;
	margin: 0 0 100em 150px;
    padding: 0 0em;
  
  }

#navcontainer li { 
	display: inline; 
}

#navcontainer li a {
	float: left;
}





#oben a       {background-image:url(restbanner/oben.jpg);
             		width:925px; height:153px }

#mittelinks a      {background-image:url(restbanner/mittelinks.jpg);
             		width:256px; height:24px }


#button1 a       {background-image:url(buttons/b1.jpg);
             	 width:70px; height:24px }

#button1 a:hover { background-image:url(buttons/bh1.jpg); }

#button2 a       {background-image:url(buttons/b2.jpg);
             	 width:104px; height:24px }

#button2 a:hover { background-image:url(buttons/bh2.jpg); }

#button3 a       {background-image:url(buttons/b3.jpg);
             	 width:115px; height:24px }

#button3 a:hover { background-image:url(buttons/bh3.jpg); }

#button4 a       {background-image:url(buttons/b4.jpg);
             	 width:85px; height:24px }

#button4 a:hover { background-image:url(buttons/bh4.jpg); }

#mitterechts a      {background-image:url(restbanner/mitterechts.jpg);
             		width:295px; height:24px }


#unten a       {background-image:url(restbanner/unten.jpg);
             		width:925px; height:58px }

#fusszeile a       {background-image:url(restbanner/fusszeile.jpg);
             		width:925px; height:70px }
 
Zuletzt bearbeitet von einem Moderator:
Lad das ganze einfach mal kurz irgendwo hoch, damit wir den Fehler leichter finden können.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten