Probleme mit Tabelle

Status
Nicht offen für weitere Antworten.
mardusi

mardusi

Mitglied
Hallo,

bin gerade dabei eine Navigationleiste zu basteln die mit CSS Elementen gestückt wird. Sobald ich dieses aber mache wird die Tabelle untereinander angesagt statt nebeneinander.

Wenn ich dieses nur mit Text mache dann funktioniert es

bitte um rat weil ich nicht mehr weiter weiß

HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

<style>
.home, .home:visited {
	background-image:url(http://www.downtownraiderz.de/images/home.png);
	width:100px;
	height:20px;
	display:block;
	border-style: none;
}

.members, .members:visited {
	background-image:url(http://www.downtownraiderz.de/images/members.png);
	width:100px;
	height:20px;
	display:block;
	border-style: none;
}

.picture, .picture:visited {
	background-image:url(http://www.downtownraiderz.de/images/pictures.png);
	width:100px;
	height:20px;
	display:block;
	border-style: none;
}

.workshop, .workshop:visited {
	background-image:url(http://www.downtownraiderz.de/images/workshop.png);
	width:100px;
	height:20px;
	display:block;
	border-style: none;
}

.forum, .forum:visited {
	background-image:url(http://www.downtownraiderz.de/images/forum.png);
	width:100px;
	height:20px;
	display:block;
	border-style: none;
}

.termine, .termine:visited {
	background-image:url(http://www.downtownraiderz.de/images/termine.png);
	width:100px;
	height:20px;
	display:block;
	border-style: none;
}

.links, .links:visited {
	background-image:url(http://www.downtownraiderz.de/images/links.png);
	width:100px;
	height:20px;
	display:block;
	border-style: none;
}
.home:hover, .home:active, .home:focus  {
	background: url(http://www.downtownraiderz.de/images/hov_home.png);
}

.members:hover, .members:active, .members:focus  {
	background: url(http://www.downtownraiderz.de/images/hov_members.png);
}
.picture:hover, .picture:active, .picture:focus  {
	background: url(http://www.downtownraiderz.de/images/hov_pictures.png);
}
.workshop:hover, .workshop:active, .workshop:focus  {
	background: url(http://www.downtownraiderz.de/images/hov_workshop.png);
}
.forum:hover, .forum:active, .forum:focus  {
	background: url(http://www.downtownraiderz.de/images/hov_forum.png);
}
.termine:hover, .termine:active, .termine:focus  {
	background: url(http://www.downtownraiderz.de/images/hov_termine.png);
}
.links:hover, .links:active, .links:focus  {
	background: url(http://www.downtownraiderz.de/images/hov_links.png);
}
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="home">&nbsp;</td>
    <td class="home">&nbsp;</td>
    <td class="home">&nbsp;</td>
    <td class="home">&nbsp;</td>
    <td class="home">&nbsp;</td>
    <td class="home">&nbsp;</td>
    <td class="home">&nbsp;</td>
  </tr>
</table>
</body>
</html>
 
Hi,

dass die Tabellenzellen untereinander angezeigt werden, liegt an der deklarierten display:block-Eigenschaft für die Klasse .home, womit die Elemente einen Absatz im Textfluss erzeugen.

Zeichne die Navigation anstelle der Tabelle besser mit einem Listenelement aus, und formatiere sie anschliessend mit CSS (siehe hierzu die Beispiele auf http://css.maxdesign.com.au/listamatic/), denn hierfür sind Tabellen semantisch nicht vorgesehen.
 
Brauch dringend mal eure Hilfe ... hab eine Tabellarische Homepage wie füge ich den richtig ein bzw kann mir mal jemand den Code einwenig anpassen wäre sehr dankbar

steig bei dem ganzen div noch nicht durch ... bitte um hilfe ... wollte das heut eigentlich noch fertig bekommen
 
Zuletzt bearbeitet:
Ich weiß ja nicht, wie der übrige Quellcode deiner Seite lautet, aber ich hab jetzt, wie von mir vorhin empfohlen, die Tabelle durch eine Liste ausgetauscht:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<style type="text/css">
ul#nav {
margin:0;
padding:0;
list-style:none;
}

ul#nav li {
display:inline;
}

ul#nav li a {
float:left;
width:100px;
height:20px;
text-decoration:none;
border-style:none;
}

ul#nav li a span {
display:none;
}

a.home, a.home:visited {
background-image:url(http://www.downtownraiderz.de/images/home.png);
}

a.members, a.members:visited {
background-image:url(http://www.downtownraiderz.de/images/members.png);
}

a.picture, a.picture:visited {
background-image:url(http://www.downtownraiderz.de/images/pictures.png);
}

a.workshop, a.workshop:visited {
background-image:url(http://www.downtownraiderz.de/images/workshop.png);
}

a.forum, a.forum:visited {
background-image:url(http://www.downtownraiderz.de/images/forum.png);
}

a.termine, a.termine:visited {
background-image:url(http://www.downtownraiderz.de/images/termine.png);
}

a.links, a.links:visited {
background-image:url(http://www.downtownraiderz.de/images/links.png);
}

a.home:hover, a.home:active, a.home:focus  {
background: url(http://www.downtownraiderz.de/images/hov_home.png);
}

a.members:hover, a.members:active, a.members:focus  {
background: url(http://www.downtownraiderz.de/images/hov_members.png);
}
a.picture:hover, a.picture:active, a.picture:focus  {
background: url(http://www.downtownraiderz.de/images/hov_pictures.png);
}
a.workshop:hover, a.workshop:active, a.workshop:focus  {
background: url(http://www.downtownraiderz.de/images/hov_workshop.png);
}
a.forum:hover, a.forum:active, a.forum:focus  {
background: url(http://www.downtownraiderz.de/images/hov_forum.png);
}
a.termine:hover, a.termine:active, a.termine:focus  {
background: url(http://www.downtownraiderz.de/images/hov_termine.png);
}
a.links:hover, a.links:active, a.links:focus  {
background: url(http://www.downtownraiderz.de/images/hov_links.png);
}
</style>

</head>
<body>

<ul id="nav">
    <li><a href="#" class="home"><span>home</span></a></li>
    <li><a href="#" class="members"><span>members</span></a></li>
    <li><a href="#" class="picture"><span>picture</span></a></li>
    <li><a href="#" class="workshop"><span>workshop</span></a></li>
    <li><a href="#" class="forum"><span>forum</span></a></li>
    <li><a href="#" class="termine"><span>termine</span></a></li>
    <li><a href="#" class="links"><span>links</span></a></li>
</ul>

</body>
</html>
Vielleicht hilft dir das weiter.
 
Es wird in das Hauptdokument nur der Teil includet, der sich im Dokumentkörper <body> ... </body> befindet, und nicht ein komplettes HTML-Dokument reingeladen.

Zudem hast du an der Stelle, an der das Menü eingebunden wird, die umschliessende Tabellenzelle <td> ... </td> vergessen.
 
joa das navibar macht mich noch wahnsinnig .... wie kann ich den nur zentrieren

hab schon versucht
HTML: 
<td align="center">
aber das bringt leider nichts büdde erneut um eure hilfe
 
Versuch es mal mit diesen Regelerweiterungen:

Code: 
ul#nav {
        margin: 0px;
        list-style:none;
        width:700px;
        margin:0 auto;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück