• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

tabelle wird nicht richtig zentriert

Status
Für weitere Antworten geschlossen.
P

plord

Neues Mitglied
hi!

habe meine seite so aufgebaut, dass ich einen oberen frame fürs menue habe und dann einen mittleren für den inhalt.

beide frameinhalte sollen zentriert angezeigt werden

jetzt habe ich aber das problem, dass die tabelle des hauptframes nicht 100% zentriert wird und so unter das menue passt. wodran kann das liegen?
http://rfccha.blu.livefilestore.com...2pjb6MBPnC87NOWtVo6VT1X_gfOT5MGuQ/tabelle.jpg

den code für beide tabellen:

oberes frame:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="author" content="ps">
<meta name="editor" content="html-editor phase 5">
<style type="text/css">
a:link { font-weight:bold; color:white; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:white; text-decoration:underline; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }

</style>
</head>
<basefont face="arial" size="2"><b>
<body text="#FFFFFF" bgcolor="#FFFFFF" link="#FFFFFF" alink="#FF0000" vlink="#FF0000">
<center>
<table width="900" border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
<tr>
<td background="gfx/header_1.jpg" height="80">&nbsp;</td>
</tr>
<tr>
<td background="gfx/header_menue.jpg" height="25"><p align="left"><a href="main.html">Start</a> || <a href="main.html">Aktuelles</a> || <a href="main.html">Wir über uns</a>
|| <a href="main.html">Unsere Einrichtung</a> || <a href="main.html">Lageplan</a> || <a href="main.html">Kontakt</a> || <a href="main.html">Impressum</a></td>
</tr>
</table>
</center>
</body>
</html>


main frame:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="author" content="ps">
<meta name="editor" content="html-editor phase 5">
</head>
<body>
<font face="ARIAL" size="-1">
<center>

<table width="900" height="100%" bgcolor="F5F5F5" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>WILLKOMMEN</td>
</tr>
</table>


</center></font>
</body>
</html>

danke schonmal!
 
Dein erster Fehler ist das Layout mit Tabellen, denn Tabellen sind für tabellarische Daten zuständigt, Layout wird mit CSS gemacht. Der zweite Fehler ist das ständige nutzen von "Frames". Frames benutzt man heutzutage nichtmehr.

Deine SEite ganz einfach aufgebaut:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<link href="page.css" media="screen" rel="stylesheet" type="text/css" />

<title></title>
<body>

<div id="over">
  <h1> Ich bin der Header </h1>
<ul>
 <li> Start </li>
 <li> Akutelles </li>
 <li> Wir über uns </li>
 <li> Unsere Einrichtung </li>
 <li> Lageplan </li>
 <li> Kontakt </li>
  <li> Impressum </li>
</ul>

<div id="main">
  <h2> Willkommen </h2>
   <p> ich bin der Text </p>
</div>
  <p id="footer"> footer </p>
</div>
page.css:
Code: 
a:link { font-weight:bold; color:white; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:white; text-decoration:underline; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }

body     { margin:0; padding:0; font-size:1em; line-height: 1.4em; font-family: .....;   }
body *     { margin:0; padding:0; }

ul { margin: 0; padding: 0; list-style:none }
li { display:block; float:left; background-image: url("gfx/header_menue.jpg"); }

#over { width: [B]xx[/B] px; height [B]xx[/B] px; margin: 0px auto; }
#main { width: [B]xx[/B] px; height [B]xx[/B] px; }
#footer { width: [B]xx [/B]px; height: [B]xx[/B] px; background-image: url("...."); }

h1 { width: [B]xx [/B]px; height: [B]xx[/B] px; background-image: url("gfx/header_1.jpg"); }

p { padding: 15px 10px; }
weitere angaben kannst du noch ergänzen.

Viel Erfolg.

Loon3y

P.S.: Natürlich ist das nur ein Grundgerüst oder eine Art kleine "Vorschau". Die Css müsste noch um einiges erweitert werden. Du müstest z.B. deine überschriften <h2> - <h6> definieren und vllt für die Navigation eine extra id anlegen, da ja sicherlich auch später noch einmal listen kommen werden...und und und...


P.S.: Text zentrierst du mit text-align:center; andere html-elemente (z.B. <div> oder <p>, ...) kannst du zentrieren indem du ihnen eine widht gibst und dann margin:0px auto; (margin = außenabstand | der erste wert gibt den abstand von oben und unten an, der zweite von links und rechts, in dem fall hier: 0px oben und unten abstand, und links und rechts automatisch ausgerichtet -> zentriert ( margin: Außenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets )) zuweißt.
 
Zuletzt bearbeitet:
danke schonmal für die schnelle antwort.

hab leider seit jahren nicht mehr mit html gearbeitet und bin daher was css angeht ziemlich ahnungslos ;) wollte die seite mit frames machen, damit, falls ich einen menuepunkt ändern möchte nicht bei jeder html datei es einzeln ändern muss, sondern es einfach bei der header.html seite nur ändern kann und fertig.

ansonsten hast du einen tipp wo ich mich näher über layout gestaltung mit css informieren kann?

oder wie ich mein tabellenproblem mit der zentrierung bei den frames einfach gelöst bekommen?
 
plord schrieb:
danke schonmal für die schnelle antwort.

hab leider seit jahren nicht mehr mit html gearbeitet und bin daher was css angeht ziemlich ahnungslos ;) wollte die seite mit frames machen, damit, falls ich einen menuepunkt ändern möchte nicht bei jeder html datei es einzeln ändern muss, sondern es einfach bei der header.html seite nur ändern kann und fertig.

ansonsten hast du einen tipp wo ich mich näher über layout gestaltung mit css informieren kann?

oder wie ich mein tabellenproblem mit der zentrierung bei den frames einfach gelöst bekommen?
Zum Vergrößern anklicken....


Dies kannst du dann mit einer serverseitigen sprache wie PHP ändern. Also das mit dem Menu. du kannst das komplette menu in eine extra datei auslagern und dann via

<?php include("menu.htm"); ?> in deine index.php und alle anderen dateien includen. Somit musst du es nur einmalig ändern. allerdings muss dein server php unterstützen und du musst allen dateien die endung .php geben.

wie das problem gelöst wird, hab ich dir oben aufgezeigt. bei seiten bzgl css & co kann ich:

CSS Tipps und Anleitungen
CSS 4 You - The Finest in Stylesheets

empfehlen.

Viel Erfolg weiterhin :)

Loon3y

P.S.: hier ein paar sachen die du dir durchlesen könntest:

"Tabellen-Designs durch DIV-Layer ersetzen" aus reieRMeisters Hinweisen zum Webauthoring
Best Viewed with / Optimiert für ... Webdesign und Usability
!!! Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten (dieser wird wohl für dich momentan am wichtigsten sein! genau durchlesen und immer schön die nächste seite unten anklicken :) )

Grüße.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben