zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Tabelle mit CSS formatieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.06.2003, 16:40
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard mh

Hi ich hab das gleiche Prob irgendwie.... also nehm ich einfach mal den Beitrag

Also...

Ich definier's immer über 'ne externe css datei... da hab ich nun folgendes:

table {background-color:#000000;margin:0pt; padding:0pt;border-width:0pt;border-spacing:0pt;}

Ich will nämlich Bilder inna tabelle sozusagen zu einem zusammensetzen ohne ränder... über html kein prob mit padding spacing usw... aber so krieg ich's einfach nich hin....

Kann mir wer helfen? Und bitte keine Links sondern einfach erklären wenn's geht..hab echt scho einiges probiert....

Achja und sagt noch bitte was zu der Kompatiblität wenn's geht
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.06.2003, 23:38
Benutzer
neuer user
 
Registriert seit: 28.05.2003
Beiträge: 30
Jürgen befindet sich auf einem aufstrebenden Ast
Standard So ging's

Hallo Boba,

mit dem IE6.0 hatte ich auch Probleme bei einer ähnlichen Aufgabenstellung.
Nachdem ich alles zwischen den td-Tags <td> und </td> einschließlich der
Tags selbst mit dem Editor auf eine Zeile gestellt hatte, sah's vernünftig aus.
__________________
Kaum macht man\'s mal richtig, schon läuft\'s.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.06.2003, 12:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
table {background-color:#000000;margin:0pt; padding:0pt;border-width:0pt;border-spacing:0pt;}
Deine Angaben beziehen sich nur auf das Eltern-Element Table !!!

siehe hier:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">	<!--
	html,body	{
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 11px;
		background-color: #FFCC99;
		color: #000000;
	}
	
	p {margin-top: 40px; }
	
	b	{
		color: #FFFF00;
		background-color: #666666;
		font-weight: bold;
		padding-left: 3px;
		padding-right: 3px;		
	}
	
	table {
		border: 1px solid #333333;
		border-collapse: separate; /* default */
		background-color: #FF9966;
		}
	
	tr	{}
	
	td	{
		background-color: #FFEEDD;
	}
	

	-->
</style>

</head>
<body>



border-collapse:collapse;</p>
<table style="border-collapse: collapse;"> 
<tr>
	<td>| Zeile/Spalte  1 1 |</td>
	<td>| Zeile/Spalte  1 2 |</td>
	<td>| Zeile/Spalte  2 3 |</td>
</tr>
<tr>
	<td>| Zeile/Spalte  2 1 |</td>
	<td>| Zeile/Spalte  2 2 |</td>
	<td>| Zeile/Spalte  2 3 |</td>
</tr>
</table>

</body></html>
Wie Du sehen wirst gibt es keine Abstände und der Code ist Valide........
__________________
</ulle>
Mit Zitat antworten
  #4 (permalink)  
Alt 16.06.2003, 15:29
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

ja sorry ich blick da noch nich so ganz durch..kannste das mal genauer erklären ich will das schließlich verstehn...

eltern-element? sind die kinder dann tr, td? weil die hab ich auch scohh ma gleichzeitig bearbeitet....

Dat collapse hab ich trotz doku lesen noch net geblickt...

Wär nett wenn sich wer erbarmen würde mir zu helfen =)
Mit Zitat antworten
  #5 (permalink)  
Alt 16.06.2003, 16:14
Benutzer
neuer user
 
Registriert seit: 28.05.2003
Beiträge: 30
Jürgen befindet sich auf einem aufstrebenden Ast
Standard Das Beispiel von ulle klappt nicht

Leider funktioniert das Beispiel von ulle nicht, wenn man statt seiner Texte
Code:
   <td>| Zeile/Spalte  1 1 |</td> 
   <td>| Zeile/Spalte  1 2 |</td> 
   <td>| Zeile/Spalte  2 3 |</td> 
</tr> 
<tr>
   <td>| Zeile/Spalte  2 1 |</td> 
   <td>| Zeile/Spalte  2 2 |</td> 
   <td>| Zeile/Spalte  2 3 |</td>
<img>-Tags zwischen den <dt>-Tags einsetzt. Es ist immer ein kleiner Rand um die Teilimages.

So geht's (alles, was zu diesem Problem nicht gehört, weggelassen):
Code:
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<style type="text/css">
TABLE 
{
 BORDER-COLLAPSE:collapse;
}

TR 
{
}

TD 
{
 PADDING:0px;
}
</style> 

</head> 
<body> 
Bilder mit Tabelle zusammensetzen
<table>
 <tr>
  <td>[img]zeil1xspal1.jpg[/img]</td>
  <td>[img]zeil1xspal2.jpg[/img]</td>
 </tr>
 <tr>
  <td>[img]zeil2xspal1.jpg[/img]</td>
  <td>Text</td>
 </tr>
</table>
</body>
</html>
Wichtig ist border-collapse:collapse bei table und padding:0px bei td in den styles.

Der folgende Text funktioniert auch nicht, wie ich es schon in meinem vorherigen Beitrag beschrieben hatte:
Code:
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<style type="text/css">
TABLE 
{
 BORDER-COLLAPSE:collapse;
}

TR 
{
}

TD 
{
 PADDING:0px;
}
</style> 

</head> 
<body> 
Bilder mit Tabelle zusammensetzen
<table>
 <tr>
  <td>
   [img]zeil1xspal1.jpg[/img]
  </td>
  <td>
   [img]zeil1xspal2.jpg[/img]
  </td>
 </tr>
 <tr>
  <td>
   [img]zeil2xspal1.jpg[/img]
  </td>
  <td>
   Text
  </td>
 </tr>
</table>
</body>
</html>
__________________
Kaum macht man\'s mal richtig, schon läuft\'s.
Mit Zitat antworten
  #6 (permalink)  
Alt 16.06.2003, 20:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Stimmt leider.............

in jedem Browser gibt es wohl verschiedene Defaults für padding innerhalb von Tabellenzellen.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<style type="text/css">   <!-- 
   html,body   { 
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
      font-size: 11px; 
      background-color: #FFCC99; 
      color: #000000; 
   } 
    
   p { margin-top: 40px; } 
    
   b   { 
      color: #FFFF00; 
      background-color: #666666; 
      font-weight: bold; 
      padding-left: 3px; 
      padding-right: 3px;       
   } 
    
   table { 
      border: 1px solid #333333; 
      border-collapse: separate; /* default */ 
      background-color: #FF9966; 
      } 
    
   tr   {} 
    
   td   { 
      background-color: #FFEEDD; 
      padding: 0;
   } 
   
   img {
	   	background-color: #FF0000;
		width: 50px;
		height: 50px;
		border: none;
   }

   --> 
</style> 

</head> 
<body> 



border-collapse:collapse;</p> 
<table style="border-collapse: collapse;"> 
<tr> 
   <td>[img]x.gif[/img]</td> 
   <td>[img]x.gif[/img]</td> 
   <td>[img]x.gif[/img]</td> 
</tr> 
<tr> 
   <td>[img]x.gif[/img]</td> 
   <td>[img]x.gif[/img]</td> 
   <td>[img]x.gif[/img]</td> 
</tr> 
</table> 

</body></html>
Auch werden Zeilenumbrüche und BLANKs, sogenannte WHITE-Spaces, in verschiedenen Browsern unterschiedlich interpretiert.

Deshalb versuche diese WHITE-Spaces zumindest innerhalb von LINKs und Tabellenzellen zu vermeiden.

Ich lasse sogar den kompletten HTML-Code durch einen PHP-Filter laufen - der alle unnötigen WHITE-Spaces entfernt. Somit kann man nochmals bis zu 30% Traffic einsparen
__________________
</ulle>
Mit Zitat antworten
  #7 (permalink)  
Alt 18.06.2003, 17:10
Benutzer
neuer user
 
Registriert seit: 28.05.2003
Beiträge: 30
Jürgen befindet sich auf einem aufstrebenden Ast
Standard Fortsetzung des Problems mit divs

Nun wollte ich es einmal tabellenlos probieren. Es gelingt mir nicht im IE6.0 mehrere divs mit je einem img-Tag so zusammenzubasteln, daß die Bilder nahtlos aneinanderstoßen, wie es mit der hier erarbeiteten Tabellen-Methode möglich ist. Es bleibt immer ein Rand von 1px um die divs. Dabei sollen die divs nicht absolut positioniert werden. Die Lösung soll mit float funktionieren. Kurz etwa so:

Code:
<div style="width:50%;height:50%;float:left;"><img src=bild11.jpg></div>
<div style="width:100%;height:50%;"><img src=bild12.jpg></div>
<div style="width:50%;height:100%;float:left;"><img src=bild21.jpg></div>
<div style="width:100%;height:100%;"><img src=bild22.jpg></div>
Hierbei habe ich schon ?alles? mögliche probiert (border, padding, margin, %-Zahlen von width und height usw. auch in Kombinationen und auch die Bilder als backgrounds zu den divs).

Ich will dann

Bild11 Bild12
Bild21 Bild22

ohne Ränder um die Bilder sehen.
Alle 4 Bilder in einem div funktioniert wahrscheinlich. Es bringt mich aber nicht zur Lösung der Aufgabenstellung, die ich habe.
__________________
Kaum macht man\'s mal richtig, schon läuft\'s.
Mit Zitat antworten
  #8 (permalink)  
Alt 19.06.2003, 13:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<style type="text/css"><!-- 
	html,body	{
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
		font-size: 11px; 
		background-color: #FFCC99; 
		color: #000000;
		padding: 0;
		margin: 0;
		overflow: auto; 
	}
	div	{
		background-color: #0000FF; /* zur Kontrolle eine Farbe */
		width: 100%;
	}
	img, #img4	{
		float: left; 
		padding: 0;
		margin: 0;
	}
	img	{
		background-color: #FF0000; 
		width: 50%;
		height: 200px; 
		border: none; 
	}
	#img4	{
		background-color: #FFFF00; 
		width: 30%; 
		height: 100px; 
		border: none; 
	}
-->
</style> 

</head> 
<body> 
<div>
[img]x.gif[/img]
[img]x.gif[/img]
[img]x.gif[/img]  
[img]x.gif[/img]
</div>
</body></html>
This Page Is Valid XHTML 1.0 Strict!

Think about
__________________
</ulle>
Mit Zitat antworten
  #9 (permalink)  
Alt 19.06.2003, 17:00
Benutzer
neuer user
 
Registriert seit: 28.05.2003
Beiträge: 30
Jürgen befindet sich auf einem aufstrebenden Ast
Standard Das ist nicht das´, was ich brauche

Hallo ulle,

Deine Lösung verzerrt mir meine images leider vollkommen.
Ich muß wohl mit meiner Aufgabenstellung etwas konkreter werden:

Ein div-Container soll 4 kleine images in folgender Form enthalten

img1 img2
img3 img4

img4 ist eigenlich leer und soll den Untergrund voll durchscheinen lassen (Lösung durch .gif ?). Die images sollen nahtlos aneinander gefügt sein. Der div-Container soll am Ende des Seitenaufbaus der übrigen Seite frei auf dem Bildschirm plaziert werden. Dabei dürfen vorher aufgebaute Inhalte überdeckt werden (außer von img4). Die Plazierung soll aber %ual zum Fenster erfolgen. Auf dem div-Container soll eine 5. gif-Grafik in der Mitte über den 4 anderen Grafiken liegen, die mit dem div-Container mitwandert, wenn man die Positionierung des div ändert.

Also

img1 img2
img5
img3 umg4

Der div-Container in seinen Ausmaßen soll genau die ersten 4 Grafiken umfassen (Die 5. Grafik liegt eh drin), aber trotzdem variabel %ual abhängig von der Bildschirmgröße sein, dh. die Grafiken sollen sich dann bei Bedarf ohne Verzerrungen anpassen.

Ideal wäre eine Lösung in xhtml strict ohne Tabellen. Wer sich hier ernsthaft bemüht, dem schicke ich auch die images 1 bis 3 zum Testen.
__________________
Kaum macht man\'s mal richtig, schon läuft\'s.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.06.2003, 20:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Also Deine Lösung solltest Du schon selbst finden und auch verstehen!!!

Du wolltest Images ohne Rand mit Float - die hast Du nun.

Zitat:
Deine Lösung verzerrt mir meine images leider vollkommen
Logisch, da ein Bild nun mal eine Fix-Größe besitzt, d.h. x mal y Pixel. Wenn man nun den IMG-Tag mit prozentuale Größenangaben deklariert verzerrt es das Bild.

Zitat:
dh. die Grafiken sollen sich dann bei Bedarf ohne Verzerrungen anpassen.
Nun wenn die Grafiken nicht verzerren sollen müssen diese auch gleich groß bleiben, wie eben das orginal Bild (Pixelangabe). Du könntest höchstens die POSITION der einzelnen Grafiken der Bildschirmauflösung anpassen.

Eine Lösung für Deine Thema sehe ich nur in DIV-Container mit positionierten Hintergrundbildern. Die verschiedene DIVs kannst Du genauso mit Float positionieren. Die größen der DIVs mit Prozent.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tabelle mit CSS Formatieren? manolo CSS 1 28.05.2009 15:49
Tabelle durch div und css ersetzen (ohne div-suppe)? tomstu CSS 13 06.12.2007 20:07
CSS (seperate datei), NAV- & Hauptfenster, TABELLE hmmm² CSS 4 25.08.2005 11:35
Tabelle mit CSS zentrieren to.ni CSS 8 27.02.2004 11:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:18 Uhr.