Tabellenformatierungen innerhalb eines DIVs auslagern

O

orschiro

Gast
Hallo Leute,

vorarb Entschuldigung wenn ich euch hier mit einer aus eurer Sicht vielleicht banaler Frage belästige, aber ich habe einfach keine passende Information gefunden. :confused_alt::

Und zwar würde ich gerne die Formatierungen einer Tabelle die innerhalb eines DIV-Containers liegt in meine externe Style.css auslagern. Ich dachte da an den folgenden Code:

Code:
Code der CSS

#gallery ( overflow: auto; margin: auto; width: 800px; height: 500px; )
.test ( margin: auto; padding-top: 2em; text-align: center; border: 0px; cellspacing="15" )

HTML-Code

<div id="gallery">
<table class="test">

Dennoch will es leider einfach nicht funktionieren.
Habt ihr vielleicht eine Idee?

Danke für eure Antworten. :)
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Schonmal {} statt () probiert? :)
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Hallo Gauder,

ich habe es gerade versucht, hilft leider auch nicht. :(
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Ist die Css Datei richtig eingebunden?
cellspacing="15" so setzt du keinen Wert in CSS, und cellspacing gibts nicht in CSS.
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Hallo krizzelfix,

ja die CSS-Datei ist richtig eingebunden, alle anderen Einstellungen funktionieren zumindest. :p

Cellspacing habe ich durch:

Code:
.marginless {
  border-collapse: collapse;
}

.marginless TD {
  padding: 0px;
}

ersetzt, was leider nicht dazu führt, dass es funktioniert.

Ich kann mir einfach nicht erklären, woran es denn noch liegen soll. Sobald ich jedoch die Formatierungen wieder zurück in den table-Tag schreibe, geht es einwandfrei. Jedoch muss es doch auch über css gehen.
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Funktioniert das, wenn du deine Inhalte in die Tabelle kopierst?
HTML:
<html>
<head>

  <style type="text/css">

  #gallery {
  	overflow: auto;
  	margin: auto;
  	width: 800px;
  	height: 500px;
  }
  
  .test {
  	margin: auto;
  	padding-top: 2em;
  	text-align: center;
  	border: 0px;
  }

  </style>

</head>

<body>

<div id="gallery">
  <table class="test">
    <tr>
      <td>   ...   </td>
    </tr>
  </table>
</div>

</body>
</html>
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Funktioniert das, wenn du deine Inhalte in die Tabelle kopierst?

Unglaublich, ja so funktioniert es seltsamerweise. Aber an der CSS selbst kann es einfach nicht liegen. Alle meine anderen Einstellungen werden anstandslos aus der CSS-Datei übernommen. :eek:
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Erst einmal sieht so eine CSS-Definition aus: http://www.thestyleworks.de/basics/rulesyntax.shtml

So bindet man externe Stylesheets in eine HTML-Datei ein: http://www.thestyleworks.de/basics/applycss.shtml#link

Und wenn es nur eine Tabelle innerhalb von #gallery gibt (oder mehrere, die die gleichen Eigentschaften bekommen sollen), reicht auch ein
Code:
div#gallery table.test { 
}
um die Tabelle anzusprechen, sprich du kannst dir die Klasse sparen.

PS: Das hier cellspacing="15" ist keine CSS-Eigentschaft!
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Darf man die Seite mal sehen? Vielleicht ist's nur ein kleiner Schreibfehler o.ä. der dir nicht auffält nach x-mal lesen.
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Ist das eventuell ein großes oder zusammenkopiertes Stylesheet?
Da kann es schnell mal passieren dass man etwas überschreibt.

@Black.Hawk: Der Fehler wurde bereits behoben. Siehe #5.
 
Zuletzt bearbeitet:
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Natürlich kann ich euch die Datei zeigen, vielleicht habe ich ja wirklich Tomaten auf den Augen. :p

Code:
*{ margin: 0; padding: 0; }* 
body { font: .8em Tahoma, "Trebuchet MS", Tahoma, sans-serif; line-height: 1.6em; background: #fff url(images/bg.gif) repeat-x; color: #8E8E91; }
a {	color: #EB0000;	background: inherit; text-decoration: none; }
a:hover { color: #808080; background: inherit; text-decoration: underline; }
p { margin: 0 0 15px 0; }
h1 { font: normal 2.8em Georgia, "Times New Roman", Arial; color: #444; }
h2 { font: normal 1.7em Georgia, "Times New Roman", Arial; margin: 0 0 10px; padding: 0 0 3px; color: #333; border-bottom: 1px solid #eee; }
img { border: 0; }
#content { width: 930px; margin: 25px auto; }
#logo { margin: 10px 0 20px 0; width: 340px; float: left; }
	#logo p { margin: 0; }
#menu { float: right; padding: 40px 0 0; margin: 0 0 38px; }
	#menu li { font-size: 1.1em; display: inline; }
	#menu li a { float: left; width: 87px; padding: 2px 0 7px; text-align: center; margin: 0 0 0 10px; color: #636365;  }
	#menu li a.current { background: #fff url(images/button.gif) no-repeat; color: #fff; }
	#menu li a:hover { text-decoration: none; color: #000; background: #fff url(images/button_grey.gif) no-repeat; }
.clear { clear: both; }
.caption { background: #fff url(images/title.gif) no-repeat; padding: 2px 0 0 18px; height: 35px; color: #fff;  }
	.caption p { margin: 0; }
#left { margin: 0 0 20px; clear: left; width: 270px; float: left; }
.box { background: #eee; }
#left img { padding: 6px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.smallthumb { width: 109px; }
#center { width: 240px; float: left; margin: 0 0 20px 15px; }
#right { float: right; width: 380px; }
	.date { font-size: .8em; border-top: 1px solid #eee; padding: 5px 0 0; }
.box { background: #eee; padding: 10px; }
.box li { list-style: none; border-bottom: 1px dotted #ccc; line-height: 26px; }
.box li a { padding: 0 5px; }
#footer { font-size: .84em; clear: both; padding: 15px; }
#footer a { color: #444; }

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url("Homepage") no-repeat; 

	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url("Homepage") left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url("Homepage") right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

#gallery { overflow: auto; margin: auto; width: 800px; height: 500px; }
.test { margin: auto; padding-top: 2em; text-align: center; border: 0px; }
.test td { margin:7px }

Ansonsten habe ich eben per:

Code:
<link rel="stylesheet" href="Homepage"/style.css" type="text/css" media="screen" />

auf die Style.css verwiesen und bei allen anderen Formatierungen funktioniert es auch. Nur eben da nicht.

Achso und wenn es hilft, das ist der entscheidende Teil in HTML:

Code:
<div id="gallery">
<table class="test">
<tr>
<td>
....
</td>
</tr>
</table>
</div>

Ich hoffe, ihr seht den Fehler. :)
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

An deinem Stylesheet ist alles in Ordnung.
So wie es aussieht kann man auf ein TD kein Margin anwenden.
Habe es grade mal mit Padding probiert, und damit klappt es wunderbar.

Grüße

krizzel
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

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

Was hat das Anführungszeichen hinter Homepage da zu suchen? Dein Verzeichnis auf dem Server heißt doch sicherlich nicht Homepage"
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Das habe ich wohl etwas unglücklich formuliert.

Also Homepage" steht natürlich für mein Verzeichnis, welches dann wiederrum "Mein Verzeichnis/style.css" lautet.

Sorry für die Verwirrung.
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Klappt es denn wenn du es mit einem padding versuchst?
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

btw: ist das 2. * in der ersten Zeile Absicht?
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Das ist das gleiche als wenn man schreibt:
Code:
* body{ background-color: #fff}
Ob es eine Auswirkung hat, kann ich nicht sagen.

Der CSS Validator hats auch nicht angemeckert. Wird also nicht falsch sein;)

Grüße

krizzel
 
AW: Tabellenformatierungen innerhalb eines DIV's auslagern

Hallo Leute,

ich muss mich wirklich für eure tatkräftige Unterstützung bedanken, besonders bei krizzelfix.

Es lag doch tatsächlich an dem margin. Kaum habe ich es durch padding ersetzt, funktioniert es einwandfrei.
Ich kann es mir zwar auch nicht ganz erklären, aber nun gut. :p

Vielen Dank nochmals. :)
 
Bitte Bitte, dafür sind wir hier ;)
Genau sagen warum es nicht geht kann ich auch nicht. Wird aber bestimmt eine Erklärung für geben.

Grüße

krizzel
 
Zurück
Oben