Ergebnis 1 bis 7 von 7

Thema: Tabellenbreite

  1. #1
    Unregistriert
    Gast

    Standard Tabellenbreite

    Jetzt versuch ich das Problem schon seit einer geschlagenen Woche zu lösen und find einfach keine Lösung (verliere langsam auch die Geduld...). Deshalb trau ich mich mal an die Öffentlichkeit (bitte nicht beißen ).

    Folgendes Problem:
    Ich habe eine Tabelle für meinen Inhalt angelegt, da sich die Tabelle jedoch mit der Hintergrundgrafik decken muss, ist es wichtig, dass sie die Breite jeder Spalte genau einhält.
    Jedoch hängt der Inhalt - egal was ich mache - immer ein wenig zu sehr in meinem Rand. Ich hab schon alle Breitenangaben einmal verändert, aber irgendwie nützt alles nichts und ich bin mit meinem Latein am Ende.
    Ich geb euch mal den Link zu meiner Seite: http://www.bleachfan.de/bleachi/inde.../infos/lexikon
    (dort rechts am Rand ist die Tabelle irgendwie ein Stück zu breit...)

    Vielleicht bin ich auch blind und übersehe was gravierendes, ich bin auf jeden Fall über jeden Tipp dankbar!



    Code:
    		<table id="content" cellpadding="0" cellspacing="0">
    		 <tr>
    
    		<td width="6px">&nbsp;</td>
    
    
    
    
    
    
    
    		<!-- NAVI -->
    
    
    		  <td width="136px" class="navitab">
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;Story</a></li>
    			       <li><a href="hardware.html">&nbsp;Story Arcs I - III</a></li>
    			       <li><a href="bios.html">&nbsp;Autor: Kubo Taito</a></li>
    			       <li><a href="internet.html">&nbsp;Soul Society</a></li>
    			       <li><a href="pc-lexikon.html">&nbsp;Hueco Mundo</a></li>
    			       <li><a href="index.php?page=seiten/infos/lexikon">&nbsp;Begriffslexikon</a></li>
    			       <li><a href="pc-service.html">&nbsp;Kampftechniken</a></li>
    			       <li><a href="pc-service.html">&nbsp;Zanpakuto Guide</a></li>
    			       <li><a href="pc-service.html">&nbsp;Kido Guide</a></li>
    		        </ul>
    
    			<span class="menuheader">Charaktere</span>
    
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;Charakter Guide</a></li>
    			       <li><a href="index.php?page=seiten/charaktere/shinigamis">&nbsp;Shinigamis</a></li>
    			       <li><a href="bios.html">&nbsp;Arrancars</a></li>
    			       <li><a href="internet.html">&nbsp;Vizards</a></li>
    			       <li><a href="pc-lexikon.html">&nbsp;Quincy</a></li>
    			       <li><a href="pc-lexikon.html">&nbsp;Menschen</a></li>
    			       <li><a href="pc-service.html">&nbsp;Bountos</a></li>
    		        </ul>
    
    			<span class="menuheader">MangaAnime</span>
    
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;Anime Guide</a></li>
    			       <li><a href="hardware.html">&nbsp;Neuste Episode</a></li>
    			       <li><a href="bios.html">&nbsp;Manga Guide</a></li>
    			       <li><a href="internet.html">&nbsp;Neustes Kapitel</a></li>
    			       <li><a href="pc-lexikon.html">&nbsp;Synchronsprecher</a></li>
    			       <li><a href="pc-service.html">&nbsp;Bleach OVAs</a></li>
    			       <li><a href="pc-service.html">&nbsp;Bleach Movies</a></li>
    			       <li><a href="pc-service.html">&nbsp;Openings & Endings</a></li>
    			       <li><a href="pc-service.html">&nbsp;Songtexte</a></li>
    		        </ul>
    
    			<span class="menuheader">Sonstiges</span>
    
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;Schon aufgefallen?</a></li>
    			       <li><a href="hardware.html">&nbsp;Namensbedeutungen</a></li>
    			       <li><a href="bios.html">&nbsp;Zeichenstil</a></li>
    		        </ul>
    
    			<span class="menuheader">Media</span>
    
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;Avatars</a></li>
    			       <li><a href="hardware.html">&nbsp;Wallpaper</a></li>
    			       <li><a href="bios.html">&nbsp;Signaturen</a></li>
    			       <li><a href="internet.html">&nbsp;Layouts</a></li>
    		        </ul>
    
    			<span class="menuheader">BleachFan</span>
    
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;News & Updates</a></li>
    			       <li><a href="hardware.html">&nbsp;Forum</a></li>
    			       <li><a href="bios.html">&nbsp;Gästebuch</a></li>
    			       <li><a href="internet.html">&nbsp;Team</a></li>
    			       <li><a href="pc-lexikon.html">&nbsp;Partnerschaft</a></li>
    			       <li><a href="pc-service.html">&nbsp;Mitarbeiter gesucht!</a></li>
    			       <li><a href="pc-service.html">&nbsp;Links In/Out</a></li>
    			       <li><a href="pc-service.html">&nbsp;History</a></li>
    			       <li><a href="pc-service.html">&nbsp;Impressum</a></li>
    		        </ul>
    
    
    
    
    		  </td>
    
    		  <td width="26">&nbsp;</td>
    
    
    
    
    
    
    
    
    		<!-- CONTENT -->
    
    
    		  <td class="content">
    
    
    			<?php
    	   		$page = $_REQUEST['page'];
    	   		if (!isset($page)) { $page="seiten/main/news2"; }
    	   		if (file_exists($page.".php")) { include($page.".php"); } else { include("seiten/main/fehler.php"); }
    	   		?>
    			
    
    		  </td></tr>
    
    		  <td width="8px">&nbsp;</td>
    
    		 </tr>
    		</table>

    Hier der CSS Teil der Tabelle:

    Code:
    #content {
    padding: 10 0 0 0;
    text-align:justify;
    width:752px;
    border:0;
    background-image: url(bilder/layout/tableback.gif);
    vertical-align:top;
    overflow:hidden;
    table-layout: fixed;
    }
    
    .content {
    vertical-align: top;
    width:577px;
    padding: 0 -10 0 0;
    margin: 0 0 0 0;
    }
    
    .navitab { 
    vertical-align: top;
    overlfow:hidden;
    }
    
    .navi { 
    padding:0 0 0 0;
    margin: 0 0 0 0;
    width:128px;
    vertical-align: top;
    list-style-type:none;
    line-height:20px;
    overflow:hidden;
    }
    
    .navi a {
    text-decoration:none;
    display: block;
    color: #000000; 
    font-size: 13px; 
    text-align: left;
    padding: 0px;
    background-color: #ffffff;
    border-bottom: 1px dotted #000000;
    border-left: 4px solid #000000;
    font-weight: normal;
    }
    
    .navi a:hover {
    color: #000000;
    background: none;
    background-color: #ffffff; 
    text-decoration: none;
    border-bottom: 1px dotted #FF0B0A;
    border-left: 4px solid #FF0B0A;
    }
    Ich hoffe sehr, dass mir jemand helfen kann, vielen Dank im Voraus!
    Maike
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Azubi(ne)
    Registriert seit
    22.01.2007
    Beiträge
    74
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,
    bitte, bitte, bitte: niemals nie und sowieso überhaupt nicht Tabellen für das Seitenlayout verwenden. Versuch dich an div+css.

    mfg
    Geändert von chuqa (17.09.2008 um 10:44 Uhr)

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Dein Mix aus Tabellen und Div's ist wirklich nicht sinnvoll.
    Es wird dadurch auch sehr mühsam, die richtige Stellschraube für Formatänderungen zu finden.
    Normalerweise stellt man Innenabstände mit "padding" beim entsprechenden Div her.

    Das hast du teilweise gemacht, jedoch vergessen eine Einheit hinzuzufügen:

    .content {
    vertical-align: top;
    width:577px;
    padding: 0 -10px 0 0;
    margin: 0 0 0 0;
    }
    Die vier Werte sind in ihrer Reihenfolge die Abstände für oben, rechts, unten, links.

    Weshalb du einen negativen Wert verwendest, verstehe ich nicht.
    Versuch es mal so:
    Code:
     
    .content {
    vertical-align: top;
    width:557px;
    padding: 0 10px 0 10px;
    }
    Alternativ kannst du bei deinen CSS-Angaben auch noch das einfügen:
    Code:
     
    p {padding: 0 10px;}
    Das gilt dann allerdings nur für Textabsätze.

    Wie gesagt: Versuche alle Tabellen rauszuschmeißen und baue die ganze Seite nochmal ordentlich mit Div's und CSS-Formatierung auf.

  4. #4
    Unregistriert
    Gast

    Standard

    Vielen Dank erstmal für die Hilfe ich werds gleich mal ausprobieren.

    Ich hab auch schon mehrfach gelesen, dass es nicht sinnvoll ist, mit so vielen Tabellen zu arbeiten. Da ich aber noch nicht viel Erfahrung mit CSS habe, hab ich mich nicht ohne Tabellen an ein Layout getraut. Wenn ihr mich so energisch drauf hinweist, werd ich mich wohl mal einarbeiten müssen!

    Wie schaff ichs denn dann den Hintergrund durchgehend unter meinem Inhalt zu haben? Mit einem div und einer Höhe von 100%?

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Das kommt drauf an, was du unter "Hintergrund" verstehst.
    Wenn's nur eine Farbe oder eine Kachelgrafik ist, dann kannst du das als background für den body oder für einen allumfassenden "wrapper" definieren.
    Ansonsten haben Grafiken ja immer eine bestimmte Höhe und Breite. Dementsprechend kannst du z.B. einen Div formatieren.
    Soll sich nur der mittlere Teil einer Grafik kacheln, so machst du eben drei div's: einen für oben, Mitte und unten.

  6. #6
    Unregistriert
    Gast

    Standard

    Vielen, vielen Dank für den Tipp!! Ich habe alles umgeschrieben und es klappt super und fehlerfrei. Außerdem ist es tausenmal einfacher und übersichtlicher!!

    Einziges Problem ist, dass mein Menü im Firefox ohne Abstand angezeigt wird, aber im Explorer riesen Lücken ziwschen den Zeilen hat. Ich habs im CSS per line-heigth definiert, scheint aber im Explorer nicht zu wirken...

    Code:
    	<div id="navi">
    
    		<!-- NAVI -->
    
    
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;Story</a></li>
    			       <li><a href="hardware.html">&nbsp;Story Arcs I - III</a></li>
    			       <li><a href="bios.html">&nbsp;Autor: Kubo Taito</a></li>
    			       <li><a href="internet.html">&nbsp;Soul Society</a></li>
    			       <li><a href="pc-lexikon.html">&nbsp;Hueco Mundo</a></li>
    			       <li><a href="index.php?page=seiten/infos/lexikon">&nbsp;Begriffslexikon</a></li>
    			       <li><a href="pc-service.html">&nbsp;Kampftechniken</a></li>
    			       <li><a href="pc-service.html">&nbsp;Zanpakuto Guide</a></li>
    			       <li><a href="pc-service.html">&nbsp;Kido Guide</a></li>
    		        </ul>
    
    			<span class="menuheader">Charaktere</span>
    
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;Charakter Guide</a></li>
    			       <li><a href="index.php?page=seiten/charaktere/shinigamis">&nbsp;Shinigamis</a></li>
    			       <li><a href="bios.html">&nbsp;Arrancars</a></li>
    			       <li><a href="internet.html">&nbsp;Vizards</a></li>
    			       <li><a href="pc-lexikon.html">&nbsp;Quincy</a></li>
    			       <li><a href="pc-lexikon.html">&nbsp;Menschen</a></li>
    			       <li><a href="pc-service.html">&nbsp;Bountos</a></li>
    		        </ul>
    
    			<span class="menuheader">MangaAnime</span>
    
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;Anime Guide</a></li>
    			       <li><a href="hardware.html">&nbsp;Neuste Episode</a></li>
    			       <li><a href="bios.html">&nbsp;Manga Guide</a></li>
    			       <li><a href="internet.html">&nbsp;Neustes Kapitel</a></li>
    			       <li><a href="pc-lexikon.html">&nbsp;Synchronsprecher</a></li>
    			       <li><a href="pc-service.html">&nbsp;Bleach OVAs</a></li>
    			       <li><a href="pc-service.html">&nbsp;Bleach Movies</a></li>
    			       <li><a href="pc-service.html">&nbsp;Openings & Endings</a></li>
    			       <li><a href="pc-service.html">&nbsp;Songtexte</a></li>
    		        </ul>
    
    			<span class="menuheader">Sonstiges</span>
    
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;Schon aufgefallen?</a></li>
    			       <li><a href="hardware.html">&nbsp;Namensbedeutungen</a></li>
    			       <li><a href="bios.html">&nbsp;Zeichenstil</a></li>
    		        </ul>
    
    			<span class="menuheader">Media</span>
    
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;Avatars</a></li>
    			       <li><a href="hardware.html">&nbsp;Wallpaper</a></li>
    			       <li><a href="bios.html">&nbsp;Signaturen</a></li>
    			       <li><a href="internet.html">&nbsp;Layouts</a></li>
    		        </ul>
    
    			<span class="menuheader">BleachFan</span>
    
    			<ul class="navi">
    			       <li><a href="windows.html">&nbsp;News & Updates</a></li>
    			       <li><a href="hardware.html">&nbsp;Forum</a></li>
    			       <li><a href="bios.html">&nbsp;Gästebuch</a></li>
    			       <li><a href="internet.html">&nbsp;Team</a></li>
    			       <li><a href="pc-lexikon.html">&nbsp;Partnerschaft</a></li>
    			       <li><a href="pc-service.html">&nbsp;Mitarbeiter gesucht!</a></li>
    			       <li><a href="pc-service.html">&nbsp;Links In/Out</a></li>
    			       <li><a href="pc-service.html">&nbsp;History</a></li>
    			       <li><a href="pc-service.html">&nbsp;Impressum</a></li>
    		        </ul>
    
    	</div>
    Code:
    #navi {
    position:absolute; 
    background-image: url(bilder/layout/tableback.gif);
    background-repeat:repeat;
    left:120px; 
    top:495px; 
    width:163px; 
    height:auto;
    border:0;
    z-index:2;
    }
    
    .navi { 
    background-image: url(bilder/layout/tableback.gif);
    padding:0 0 0 10px;
    width:128px;
    vertical-align: top;
    list-style-type:none;
    line-height:20px;
    overflow:hidden;
    }
    
    .navi a {
    text-decoration:none;
    display: block;
    color: #000000; 
    font-size: 13px; 
    text-align: left;
    padding: 0px;
    background-color: #ffffff;
    border-bottom: 1px dotted #000000;
    border-left: 4px solid #000000;
    font-weight: normal;
    }
    
    .navi a:hover {
    color: #000000;
    background: none;
    background-color: #ffffff; 
    text-decoration: none;
    border-bottom: 1px dotted #FF0B0A;
    border-left: 4px solid #FF0B0A;
    }
    Hab ich doch einen Fehler gemacht? Allerdings dachte ich, wenn im Firefox alles richtig angezeigt wird, muss es im Explorer sowieso funktionieren, da dieser Fehlertoleranter ist?

  7. #7
    Thonixx
    Gast

    Standard

    muss es im Explorer sowieso funktionieren, da dieser Fehlertoleranter ist?
    Grins sry aba so was is völlig falsch. Es is meistens umgekehrt. Wenn in FF oder nem andren alternativem Browser alles korrekt ist, kanns im IE völlig falsch sein

    Siehe bei mir: www.new.white-tiger.ch.. Geh mal mit nem IE 6 oder sonst 7 rauf. Dann kommt n Warnhinweis..

Ähnliche Themen

  1. tabellenbreite
    Von driver im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 3
    Letzter Beitrag: 14.03.2007, 17:00
  2. maximale tabellenbreite einstellen
    Von Frosch im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 20.07.2005, 18:29
  3. Tabellenbreite abfragen
    Von Harald im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 18.07.2005, 13:58
  4. Tabellenbreite fixieren?
    Von odyssee im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 28.04.2005, 09:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •