Tabelle verschoben?!

lobo3000 · 22.04.2008, 20:40

Guten Abend...

Hab nach langer Abwesenheit wiedermal eine Frage...
Erstelle eine HP mit Hilfe von Tabellen .. haut aber leider nicht ganz so hin wie gewünscht; seht selbst....unter dem weißen Balken ist links eine Liste und daneben wird das hellblau extrem weit nach rechts gedrückt - warum?

Anbei der Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW8 -->
<head>
<title>Eine Welt voller Gef&uuml;hle...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="kn2.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
</script>
</head>

<body bgcolor="#C0DFFD">
<table width=100% border="0" cellspacing="0" cellpadding="0">
 
 <tr>
   <td width=20% bgcolor="#8cbdbd"> <img src="test5.jpg" /></td>
   <td width=80% id="logo" bgcolor="#8cbdbd">Eine Welt voller Gefühle...</td>
 </tr>
   <tr bgcolor="#8cbdbd">
    <td height="5" bgcolor="#ffffff" width=100% colspan="20" id="tagline" valign="top" align="left"></td>
 </tr>
 <tr>
    <td width="165" valign="top" bgcolor="#E6F3FF">
	<table border="0" cellspacing="0" cellpadding="0" width="165" id="navigation">
        <tr>
          <td width="165">
		  &nbsp;<br />
		  &nbsp;<br />
		  </td>
        </tr>
        <tr>
          <td width="165"><a href="javascript:;" class="navText">Aktuelles</a></td>
        </tr>
        <tr>
          <td width="165"><a href="javascript:;" class="navText">Gedichte</a></td>
        </tr>
        <tr>
          <td width="165"><a href="javascript:;" class="navText">Information</a></td>
        </tr>
        <tr>
          <td width="165"><a href="javascript:;" class="navText">DISCLAIMER</a></td>
        </tr>
        <tr>
          <td width="165"><a href="javascript:;" class="navText">Kontakt</a></td>
		</tr>
 	</table>
	&nbsp;<br />
  	&nbsp;<br />
  	&nbsp;<br /> 
	&nbsp;<br />
  	&nbsp;<br /> 
   </td>
 </tr>
</body>
</html>

Vielleicht findet jemand den Fehler?

LG
lobo3000

threadi · 22.04.2008, 23:24

Das Auffälligste was ich sehe ist eine nicht beendete Tabelle ganz unten. Da fehlt ein </table>.

Adromir · 23.04.2008, 03:26

Anmerkung:
Ich würde meine Attribute konsequent in Quotes setzen und solche Sachen wie href="javascript:;" sind überflüssiger Müll.
Erster Schritt sollte sein, den w3c- Validator mal drüber schauen zu lassen.

zulujaner · 23.04.2008, 12:20

hi,

ich hab mal deine Tabelle überflogen und mir ist da ne kleine Sache aufgefallen.

Die schon vorhandenen Antworten solltest du natürlich zuerst abarbeiten, schließendes table fehlt, Validieren.

Doch zu deiner Frage:

Deine Tabelle besteht ja aus 2 Tabellen.
wenn du in Tabelle 1 für die 1.Spalte eine Breite von 20% festlegst kannst du nicht erwarten da sich die 2.Tabelle mit den Links, sich dem wiedersetzt wenn du keine anderen Maßnahmen ergreifst. Die "sitzt" ja auch in der Spalte1 von Tabelle 1. und füllt immer die ganze Spalte aus.

Verkleinere mal den Wert von 20% dann siehst was ich meine. Da wird auch der hellblaue Bereich von Tabelle 2 kleiner.

Als Lösung:

1. Spalte 1 von Tabelle 1 verkleinern - dann Spalte2 wieder anpassen(10% / 90%)

oder

2. Bei Tabelle 2 mit 2 Spalten arbeiten. Eine für die Links und eine zum steuern der Breite mit ner anderen Hintergrundfarbe

oder

3. verwende einfach keine Tabelle sondern 2 div container nebeneinander das wird dann auch zeitgemäßer

hoffe ich konnte mich klar ausdrücken...

lobo3000 · 23.04.2008, 18:29

Hallo...

Danke für eure Antworten - hab von vorn nochmals angefangen; die Tabelle lass ich weg und den Rest bau ich mit div-Container auf, wobei wir jetzt wieder bei einem kleinen Problem wären *gg*

Mein div-Container schluckt komischerweise Links die ich dort reinschreiben will, wird immer nur der letzte Link angezeigt - vgl wie folgt im Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW8 -->
<head>
<title>Eine Welt voller Gef&uuml;hle...</title>
<link rel="stylesheet" href="kn2.css" type="text/css" />
</head>
<body bgcolor="#C0DFFD">

<!--<div style="width:800px;margin:0px auto;"> Zum verkleinern der Seite auf 800Pixel und zentriert!-->

<table width=100% borders="1" bgcolor="8cbdbd" cellpadding="0" cellspacing="0" cols="2">
	<colgroup>
    	<col width=20%>
    	<col width=80%>
	</colgroup>
  <tr>
    <td width=20% bgcolor="8cbdbd"><img src="test5.jpg" alt="Tränenauge" /></td>
   <td width=80% bgcolor="8cbdbd" id="logo" height="100">Eine Welt voller Gefühle...</td>
  </tr>
	<tr bgcolor="FFFFFF">
	<td height="5" bgcolor="#ffffff" width=100% colspan="20" ></td>
  </tr>
</table>

<div id="navigation" class="navText">
	<a href="">Test1</a>
	<a href="">Test2</a>
	<a href="">Test3</a>
	
</div>


<!--</div>'Zum Verkleinern der Seite auf 800 Pixel und zentriert!-->

</body>

</html>

Hier die id "navigation":

Code:

#navigation a {
	position:absolute;
	top: 120px;
	left:10px;
	width:165px;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	padding:8px 6px 10px 36px;
	border-bottom:1px solid #FFFFFF;
	border-top:1px solid #FFFFFF;
	background-color:#E6F3FF;
	}
	
#navigation a:hover {
	background: #ffffff url("listpoint.gif") 14px 45% no-repeat;
	color:#6600ff;
	font-weight:bold;
	border-bottom:2px solid #6600FF;
	border-top:2px solid #6600FF;	
	}

Vielleicht weiß wer weiter?

LG
lobo3000

zulujaner · 23.04.2008, 19:59

hi noch mal,

ich habe mal ein bisserl probiert mit deinem Code.

du versuchst zu viel mit einmal zu erledigen

bastle erst mal ein einen div: menu. der kriegt ne größe, position.
darin kann dann die navigation mit den links sein.

Code:

.menu {	 position:absolute; height:100px;
	top: 120px;
	left:10px;
	width:165px;}

#navigation a {
	
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	line-height:3em;
	letter-spacing:0.1em;
	text-decoration: none;
	padding:8px 6px 10px 36px;
	border-bottom:1px solid #FFFFFF;
	border-top:1px solid #FFFFFF;
	background-color:#E6F3FF;
	}

Code:

<div id="navigation" class="menu">
	<a href="">Test1</a><br>
	<a href="">Test2</a><br>
	<a href="">Test3</a>
	
</div>

geändert habe ich noch line-height:3px;
sonst liegen die links übereinander

probier auch mal das menue mit einer einfachen liste.

sprich ul - li usw... die kann man auch schön über css ansprechen.

na viel spaß beim basteln...

lobo3000 · 23.04.2008, 20:11

Hallo...

Danke dir für deine Hifle...ja ich will meistens zuviel auf einmal...warum einfach wenns kompliziert a geht *gg* - muss umdenken...warum kompliziert wenns einfacher geht...

Werd weiterhin rumspielen, vielleicht find ich wieder a Problem, das i net lösen kann!?

Danke nochmals!!

LG
lobo3000

zulujaner · 23.04.2008, 20:57

noch ein kleiner nachschlag

schau mal bei diesem thread..

da findest du auch was über menue und links..

http://www.traum-projekt.com/forum/3...nk-klasse.html

http://www.traum-projekt.com/forum/3...nk-klasse.html