ComputerBase Menü
Aktuelles

HTML [TD] Spaltenbreite wird nicht fixiert! Warum?

T

Tribo0n

Lt. Commander
Registriert
Okt. 2007
Beiträge
1.214
Ich hoffe ihr könnt mir helfen... Warum werden die Spalten nicht auf 500Pixel fixiert?

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<style type="text/css">
table.face {
	border-width: 0px;
	border-spacing: 1px;
	border-style: none;
	border-color: gray;
	border-collapse: collapse;
	background-color: #eeeeee;
}
td.face {
	width: 500px;
	border-width: 1px;
	padding: 3px;
	border-bottom-style: none;
	border-left-style: inset;
	border-right-style: inset;
	border-top-style: inset;
	border-color: gray;
	background-color: #ffffff;
}
td.face2 {
	border-width: 1px;
	padding: 3px;
	border-bottom-style: none;
	border-left-style: inset;
	border-right-style: inset;
	border-top-style: inset;
	border-color: gray;
	background-color: #eeeeee;
	font-family: Arial;
	font-size: 12;
}
th.face {
	border-width: 1px;
	padding: 3px;
	border-bottom-style: inset;
	border-left-style: inset;
	border-right-style: inset;
	border-top-style: none;
	border-color: gray;
	background-color: #eeeeee;
	font-family: Arial;
	font-size: 10;
	text-align: left;
}
font.logobig {
	font-family: Impact;
	font-size: 54pt;
	color: #c0c0c0;
}
font.logosmall {
	line-height: 0.1em;
	font-family: Impact;
	font-size: 16pt;
	color: #c0c0c0;
}
font.headline {
	font-family: Arial;
	font-size: 18pt;
	color: #ff0000;
}
img.face {
	border-width: 0px;
	border-spacing: 1px;
	border-style: none;
	border-color: gray;
	border-collapse: collapse;
}
</style>
</HEAD>
<BODY bgColor=#f8f8f8>
<DIV align="right"><FONT class="logobig">XXXXX<BR></FONT>
<FONT class="logosmall">XXXXX</FONT></DIV>
<FONT face=Arial size=1><BR><BR></FONT>
<FONT face=Arial size=2>XXXXX
<FONT face=Arial size=1><BR><BR></FONT>
XXXXX</FONT>
<FONT face=Arial size=1><BR><BR></FONT>
<FONT class="headline">XXXXX</FONT>
<FONT face=Arial size=1><BR><BR></FONT>
<TABLE class="face">
  <tr>
    <td class="face"><center><A href="02820404.jpg"><IMG class="face" src="C:\Fotos\thumb_02820404.jpg"></center></A></td>
    <td class="face"><center><A href="02820405.jpg"><IMG class="face" src="C:\Fotos\thumb_02820405.jpg"></center></A></td>
    <td class="face"><center><A href="02820406.jpg"><IMG class="face" src="C:\Fotos\thumb_02820406.jpg"></center></A></td>
    <td class="face"><center><A href="02820407.jpg"><IMG class="face" src="C:\Fotos\thumb_02820407.jpg"></center></A></td>
    <td class="face"><center><A href="02820408.jpg"><IMG class="face" src="C:\Fotos\thumb_02820408.jpg"></center></A></td>
    <td class="face"><center><A href="02820409.jpg"><IMG class="face" src="C:\Fotos\thumb_02820409.jpg"></center></A></td>
    <td class="face"><center><A href="02820410.jpg"><IMG class="face" src="C:\Fotos\thumb_02820410.jpg"></center></A></td>
    <td class="face"><center><A href="02820411.jpg"><IMG class="face" src="C:\Fotos\thumb_02820411.jpg"></center></A></td>
    <td class="face"><center><A href="02820412.jpg"><IMG class="face" src="C:\Fotos\thumb_02820412.jpg"></center></A></td>
  </tr>
  <tr>
    <td class="face2">XXXXX</td>
    <td class="face2">XXXXX</td>
    <td class="face2">XXXXX</td>
    <td class="face2">XXXXX</td>
    <td class="face2">XXXXX</td>
    <td class="face2">XXXXX</td>
    <td class="face2">XXXXX</td>
    <td class="face2">XXXXX</td>
    <td class="face2">XXXXX</td>
  <tr>
    <th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820404</th>
    <th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820405</th>
    <th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820406</th>
    <th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820407</th>
    <th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820408</th>
    <th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820409</th>
    <th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820410</th>
    <th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820411</th>
    <th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820404</th>
  </tr>
</table>
<BR>
<FONT size=2 face=Arial>XXXXX<BR><BR></FONT>
<FONT size=2 face=Arial>XXXXX<BR><BR></FONT>
<FONT size=2 face=Arial>XXXXX <i>XXXXX</i> XXXXX<BR><BR></FONT>
<FONT style="FONT-SIZE: 8pt" size=1 color=#0000ff face=Arial>XXXXX<BR>XXXXX<BR>XXXXX<BR>
<A href="mailto:XXXXX">
<U>XXXXX</U></A><BR>
<A href="http://www.XXXXX.de"><U>www.XXXXX.de</U></A><BR>
XXXXX<BR>XXXXX<BR><BR>
XXXXX<BR><BR></FONT>
<FONT style="FONT-SIZE: 8pt" face=Arial size=1 color=#808080>XXXXX<BR><BR>
XXXXX<BR><BR></FONT>
<FONT color=#008000 size=4><SPAN lang=en-GB><SPAN 
style="FONT-FAMILY: Webdings; COLOR: green; FONT-SIZE: 14pt; mso-fareast-font-family: 'Times New Roman'; mso-fareast-theme-font: minor-fareast; mso-bidi-font-family: Arial; mso-ansi-language: EN-GB; mso-fareast-language: DE; mso-bidi-language: AR-SA; mso-no-proof: yes" 
lang=EN-GB>P</SPAN></FONT>
<FONT style="FONT-SIZE: 8pt" face=Arial color=#008000 size=1> Please consider the environment before printing this email.</FONT>
</TABLE>
</BODY>
</HTML>
 
seit wann ist <style> im <head>???
dachte in head kommen nur metadaten...

wie merkst du das das sie nicht 500 px breit ist?
 
Die Spalte passt sich der Fensterbreite an. Daran merke ich das...
Muss der <style> nach/im/vor dem <head> kommen?

So macht es selfhtml:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Verweise gestalten mit CSS</title>
<style type="text/css">
a:link { text-decoration:none; font-weight:bold; color:#e00000; }
a:visited { text-decoration:none; font-weight:bold; color:#800000; }
a:hover { text-decoration:none; font-weight:bold; background-color:#ff0; }
a:active { text-decoration:none; font-weight:bold; background-color:#cff; }
a:focus { text-decoration:none; font-weight:bold; background-color:#080; }
</style>
</head>
<body>

<h1>Eine kleine Verweissammlung</h1>

<p>
  <a href="http://www.tagesschau.de/">ARD Tagesschau</a> Nachrichten<br>
  <a href="http://www.heise.de/newsticker/">Heise Newsticker</a> Computer-Nachrichten<br>
  <a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten<br>
  <a href="http://www.oneworld.net/section/current">OneWorld News</a> Nachrichten (en)
</p>

<p>
  <a href="/" style="color:green">Wohin der wohl f&uuml;hren mag?</a><br>
  <a href="./" style="color:green">Und der hier?</a>
</p>

</body>
</html>
 
Zuletzt bearbeitet:
Ich bin mir jetzt nicht sicher aber ist das net so
das im css der . (Punkt) zuerst kommt?
bzw. das # für ne ID

also anstelle von

table.face

.tableface

und dann auch die class mit tableface aufrufen.
 
denke das muss in <body> rein...^^

also wenn du dein firefox oder was auch imer verkleinderst / vergrößerst wird die spalte auch größer / kleiner?
 
<style> kommt nach </head>

9 x 500px nebeneinander
Was hastn du fürn Monitor^^

Die breiten sind nicht als fix zu betrachten. Wenn du in eiern Spalte die auf 500 festgelegt ist, dann ein Bild machst was 600 breit ist, wird die Spalte automatisch breiter.

Nächste ist. mach mal das td und table unso davor weg, dass die Klassen dann wirklich nur face und face2 heisen. Deine td verwenden ja die Klassen face und die gibts ja gar nicht, weil du td.face geschrieben hast.
 
Zuletzt bearbeitet:
Weil jede Spalte mit der Klasse "face" auf 500px angeben wird, "face2" dagegen nicht. In summe ergibt sich eine Mindestbreite deiner Tabelle von 4500px, weil jedes der neun TDs 500 px breit ist. wenn die ganze tabelle nur 500px breit sein soll, mach das über die breite von "table".

übrigens solltest Du <font> nicht mehr benutzen. dein code sieht aus wie 1999. mit
Code: 
<ul>
<li><img /><p>Beschreibung</p></li>
</ul>
sähe das besser aus im quellcode und würde auch weniger Probleme bei der Darstellung machen.
 
de-ich schrieb:
<style> kommt nach </head>
Was hastn du fürn Monitor^^
Zum Vergrößern anklicken....
500Pixel war nur ein Beispiel. Nachher sollen es ~ 200Pixel sein! (Die Bilder sind ~190Pixel) Ich habe ein 2560x1600 Monitor ;)

TheReal666 schrieb:
...ist das net so
das im css der . (Punkt) zuerst kommt?
bzw. das # für ne ID

also anstelle von

table.face

.tableface

und dann auch die class mit tableface aufrufen.
Zum Vergrößern anklicken....
Ist das so? Weiß jemand Rat?

Amarok2 schrieb:
denke das muss in <body> rein...^^
Zum Vergrößern anklicken....
Ist das so? Weiß jemand Rat?

Amarok2 schrieb:
... also wenn du dein firefox oder was auch imer verkleinderst / vergrößerst wird die spalte auch größer / kleiner?
Zum Vergrößern anklicken....
Ja!!!
 
TheReal666 schrieb:
Ich bin mir jetzt nicht sicher aber ist das net so
das im css der . (Punkt) zuerst kommt?
bzw. das # für ne ID

also anstelle von

table.face

.tableface

und dann auch die class mit tableface aufrufen.
Zum Vergrößern anklicken....

Also kleine Selektoren-Lehrstunde:
table.face meint alle <table class="face">
.tableface trifft auf alle elemente der Klasse "tableface" zu

das gleiche geht auch mit ids, nur dass es dann eine raute ist, zB table#face trifft auf alle <table class="face"> zu.
 
hast du das problem auch, wenn du eindeutige class namen vergibst?
also das du beim bild z.b. faceIMG usw.
Ich könnt mir vorstellen, das es deswegen da probleme.
 
<style> kommt nach </head>
Zum Vergrößern anklicken....
Doppelt Falsch. Sowohl in HTML4 als auch HTML5 erlaubt style im head. Style gehört sogar in den Head bereich und NICHT in den Body-Bereich oder zwischen Head und Body.
 
@Enigma Danke! Das ist nun schonmal klar! Rest teste ich gerade... Melde mich dann. Bisher klappt es immernoch nicht.
Ergänzung ()

ripuli-6 schrieb:
... übrigens solltest Du <font> nicht mehr benutzen. dein code sieht aus wie 1999...
Zum Vergrößern anklicken....

Dann sind die Absätze zwischen den Zeilen aber viel größer... Kann man das umgehen?
 
Zuletzt bearbeitet:
Probiere es doch mal mit min-width.
 
Ich habe gerade mal deinen Body aufgeräumt. So sähe es sauber und vernünftig nach HTML5 aus:

PHP: 
<body> 
<header>
	<div class="logobig">XXXXX</div> 
	<div class="logosmall">XXXXX</div> 
</header>
<h1 class="headline">XXXXX</h1>
<ul>
	<li>
		<p class="face"><a><img src="bild_1.jpg" /></a></p>
		<p class="facecaption">Untertitel mit Datum und Bildnummer</p>
	</li>
	<li>
		<p class="face"><a><img src="bild_2.jpg" /></a></p>
		<p class="facecaption">Untertitel mit Datum und Bildnummer</p>
	</li>
	<li>...</li>
</ul>
<footer>
	<p class="email"><a href="mailto:xxx@xxx.com">Name</a></p>
	<p class="url"><a href="index.html">Home</a></p>
</footer> 
</body>

die einzelne elemente stylst du über css mit selektoren, zB
Code: 
footer {font-size:1em;font-face:arial, sans-serif;text-decoration:underline;}

die lösung mit der liste hat den vorteil, dass du die Breit der LIs exakt angeben kannst (mit css li noch float:left setzen) und sie am Rand des Browser umbrechen, d.h. du kannst das Browserfesnter vergrößeren und verkleinern und hast immer schon sauber die Bilder in einer Reihe und untereinander.
 
ripuli-6 schrieb:
Ich habe gerade mal deinen Body aufgeräumt. So sähe es sauber und vernünftig nach HTML5 aus:...
Zum Vergrößern anklicken....

Dank dir, werde das mal testen!!! Meld mich dann

<li> Sind doch Aufzählungen? Die brauche ich garnicht...
 
Tribo0n schrieb:
@Enigma Danke! Das ist nun schonmal klar! Rest teste ich gerade... Melde mich dann. Bisher klappt es immernoch nicht.
Ergänzung ()

Dann sind die Absätze zwischen den Zeilen aber viel größer... Kann man das umgehen?
Zum Vergrößern anklicken....

mit der css eigenschaft margin und eventuell padding. beides auf null beschert dir einen abstand des elements zum vorherigen und nachfolgenden von: 0px.
Ergänzung ()

Tribo0n schrieb:
Dank dir, werde das mal testen!!! Meld mich dann

<li> Sind doch Aufzählungen? Die brauche ich garnicht...
Zum Vergrößern anklicken....
Was sind denn mehrere Bilder hintereinander? Eine Aufzählung. Davon abgesehen sind Listenelemente sehr viel einfacher zu handhaben als Tabellen.
 
Wie kann ich hier
PHP: 
<td class="facetd" href="02820405.jpg"><IMG class="faceimg" src="C:\Fotos\thumb_02820405.jpg"></A></td>
die Bilder über CSS Mittig setzen?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

W
CSS: Formatierungsprobleme mit einer Tabelle
Antworten
9
Aufrufe
732
Nixdorf
Nixdorf
N
Bilder wird oben an der Suchleiste abgeschnitten (HTML/CSS)
Antworten
3
Aufrufe
951
Janush
Janush
N
Dark/light mode funktioniert nicht ganz
Antworten
3
Aufrufe
1.198
abcddcba
A
J
Shopware 5 Accordion funktioniert nicht
Antworten
4
Aufrufe
882
ColdGlow
ColdGlow
N
(HTML) Bild verschwindet hinter live Hintergrund
Antworten
2
Aufrufe
768
funkmasterflow
funkmasterflow
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz