|
|||
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 |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
|||
Zitat:
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>
__________________
</ulle> |
|
|||
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 =) |
|
|||
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> 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> 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. |
|
|||
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> 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> |
|
|||
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> 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. |
|
|||
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> Think about
__________________
</ulle> |
|
|||
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. |
Sponsored Links |
|
|||
Also Deine Lösung solltest Du schon selbst finden und auch verstehen!!!
Du wolltest Images ohne Rand mit Float - die hast Du nun. Zitat:
Zitat:
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> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |