Suche
Teilen
startseite » forum

HTML-Tabellen-Darstellung im Firefox [Gelöst]

  • cmoke cmoke
    Padawan
    0 x
    63 Beiträge
    0 Hilfreiche Beiträge
    25. 11. 2010, 23:42

    HAllo zusammen!

    ich habe ein, zumindest für mich ungewöhnliches Problem. Stehe noch ganz am Anfang der Websiteerstellung und schon hakt´s:
    Für eine website möchte ich einen flexiblen Hintergrund, der dazu noch runde Ecken haben soll. Ist vielleicht etwas prätenziös, aber Vorgabe halt.

    Hierfür habe ich ein Tabellenkonstruckt geschaffen, wie folgt:

    1. <table id="im_hintergrund" cellpadding="0" cellspacing="0">
    2.  
    4.         <tr class="oben">
    5.             <th class="links"> <img src="../Bilder/container_ecke_linksoben.png" alt="linksoben"  /> </th> 
    6.             <th class="obenmitte"> </th> 
    7.             <th class="rechts"><img src="../Bilder/container_ecke_rechtsoben.png" alt="rechtsoben" /> </th> 
    8.         </tr>
    9.         </thead>
    10.  
    12.         <tr class="unten">
    13.             <th class="links"><img src="../Bilder/container_ecke_linksunten.png" alt="linksunten" /> </th>  
    14.             <th class="untenmitte"> </th> 
    15.             <th class="rechts"><img src="../Bilder/container_ecke_rechtsunten.png" alt="rechtsunten" /> </th> 
    16.         </tr>
    17.         </tfoot>
    18.  
    20.         <tr class="mitte">
    21.             <td class="mittelinks"> </td> 
    22.             <td class="mittemitte"> </td> 
    23.             <td class="mitterechts"> </td>
    24.         </tr>
    25.         </tbody>
    26.  
    27.     </table>

    ... der dazugehörige stylesheet (Auszug)

    1. #im_hintergrund {
    2. 	width:100%; height:auto; 
    3. 	border:none; padding:0; margin:0;
    4. }
    5.  
    6. /* ........... Tabellenreihen ........... */
    7. .oben {width:100%; height:25px;}
    8. .mitte {width:auto; height:auto;}
    9. .unten {width:100%; height:25px;}
    10.  
    11. /* ........... Tabellenzellen ........... */	
    12. .links {width:25px; height:25px;
    13. 	background-color:#FC0; 
    14. 	background-position:left ; background-repeat:no-repeat;}
    15.  
    16. .rechts {width:25px; height:25px;
    17. 	background-color:#3FF; 
    18. 	background-position:right; background-repeat:no-repeat;}
    19.  
    20. .obenmitte {padding:0; margin:0;
    21. 	background-color:#CC3;;
    22. 	background-image:url(../Bilder/container_streifen_oben.png);
    23. 	background-repeat:repeat-x;}
    24.  
    25. .mittelinks {width:25px; height:auto; 
    26. 	background-color:#0F0;
    27. 	background-image:url(../Bilder/container_streifen_links.png);
    28. 	background-repeat:repeat-y;}
    29.  
    30. .mitterechts {width:25px; height:auto;
    31. 	background-color:#CC9; 
    32. 	background-image:url(../Bilder/container_streifen_rechts.png);
    33. 	background-position:left; background-repeat:repeat-y;}
    34.  
    35. .untenmitte {background-color:#96F;
    36. 	background-image:url(../Bilder/container_streifen_unten.png);
    37. 	background-repeat:repeat-x;
    38. 	padding: 0 10px;}
    39.  
    40. .mittemitte {width:100%; height:450px;		
    41. 	background-color:transparent;}

    Nun kommt das Komische. Im IE8 wird alles korekt dargestellt, nur im Firefox (3.6.12) gibt es diesmal Probleme; und zwar fehlen mir die implementierten Grafiken für die runden Ecken. Dieses kommt daher, weil die äußeren Tabellenzellen nicht dargestellt werden. Also alle, die mit den Klassen "links" oder "rechts" und "mittelinks" oder "mitterechts" versehen sind.

    Während ich auf Antworten gespannt warte, tüftle ich weiter an (m)einer Lösung....

  • 1
  • cmoke cmoke
    Padawan
    0 x
    63 Beiträge
    0 Hilfreiche Beiträge
    26. 11. 2010, 00:10

    Sorry! Ich merke gerade, dass in meinem Text oben nichts davon steht, dass das Ganze eigentlich das Gerüst in einem [color=red][b]Typo3 Projekt[/b][/color] ist. Die Platzierung des Beitrages unter diesem Thema auch nur daher, weil die Gestaltung der Seite rein mit HTML und CSS geklappt hat. Nur seitdem ich das alles über Typo3 eingefügt habe wird die Tabelle zerpflückt.
    Würde auch gerne ein Bild hochladen, aber weiß nicht wie. Mit "Datei anhängen" hat´s nicht geklappt ...

  • skydivematy skydivema...
    Jedi-Meister
    0 x
    276 Beiträge
    1 Hilfreiche Beiträge
    26. 11. 2010, 04:38

    Hallo cmoke,
    warum machst du das nicht mit <div></div>?
    Und es gibt sowas wie -moz-border-radius-topright: ; und border-radius:, -webkit-border-top-left-radius:.
    Leider kann IE damit nichts anfangen, noch nicht. ab IE9 schon.

    Versuchs mal damit für den IE.

    1. <div class="Roundbox">
    2. 			<span class="Roundbox1"></span>
    3. 			<span class="Roundbox2"></span>
    4. 			<span class="Roundbox3"></span>
    5. 			<span class="Roundbox4"></span>
    6. 			<div class="RoundboxContent">
    7. 				<h1>Headline</h1>
    8. 				<p>Diese Box hat runde Ecken.</p>
    9. 			</div>
    10. 			<span class="Roundbox4"></span>
    11. 			<span class="Roundbox3"></span>
    12. 			<span class="Roundbox2"></span>
    13. 			<span class="Roundbox1"></span>
    14. 		</div>

    css

    1. * html .RoundboxContent {height:1%}
    2. .RoundboxContent {overflow:hidden}
    3. .Roundbox{display:block; background:transparent; font-weight:normal; margin-bottom:1em;}
    4. .Roundbox p {margin:0 2px; padding:2px 0; line-height:1.2em;}
    5. .RoundboxContent {display:block; background:#C8DDF3; border-left:1px solid #AABCCE; border-right:1px solid #AABCCE; padding:0.5em 1em 0.5em 1em; height:1%; overflow:hidden;}
    6. .RoundboxContent h1, .RoundboxContent h2, .RoundboxContent h3, .RoundboxContent h4, .RoundboxContent h5 {margin-top:0;}
    7. .Roundbox1, .Roundbox2, .Roundbox3, .Roundbox4{display:block; overflow:hidden; font-size:1px;}
    8. .Roundbox1, .Roundbox2, .Roundbox3{height:1px;}
    9. .Roundbox2, .Roundbox3, .Roundbox4{background:#C8DDF3; border-left:1px solid #AABCCE; border-right:1px solid #AABCCE;}
    10. .Roundbox1{margin:0 5px; background:#AABCCE;}
    11. .Roundbox2{margin:0 3px; border-width:0 2px 0 2px;}
    12. .Roundbox3 {margin:0 2px;}
    13. .Roundbox4{height:2px; margin:0 1px 0 1px;}

    Das ganze als FCE mapen, dann kannst du es mit jeglichen Inhalt füllen. Die box wächst mit.

    Die Farben für content und border kannst Du nach deinen Wünschen ja anpassen...

    Achso, hatte auch nicht alles gelesen. Also wenn Deine page nur Runde Corner haben soll dann halt dein kompletes page html Gerüst zwischen den

    1. <div class="RoundboxContent"><div id="page"> deine seite</div></div>

    Also Zwischen den <body> </body>tags

    gruss
    maty

    Maty

  • cmoke cmoke
    Padawan
    0 x
    63 Beiträge
    0 Hilfreiche Beiträge
    26. 11. 2010, 10:54

    Danke skydivematy

    Es würde tatsächlich funktionieren. Auch wenn ich das Prinzip nicht verstehe. #angry#
    Kann man den Radius eigentlich selbst bestimmen?

    Gruß

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    26. 11. 2010, 14:29

    [quote="skydivematy"]warum machst du das nicht mit <div></div>?[/quote]
    Kann er machen, sollte er sogar. Aber bitte nicht indem er die Tabellenzellen mit leeren div (oder span) ersetzt. Aus semantischer Sicht wäre dann die echte Tabelle sogar der kleinere Übel.
    Lesestoff:
    http://www.alistapart.com/articles/customcorners/
    Vorlage und Anleitungen gibt es zudem genügend im Netz.

  • cmoke cmoke
    Padawan
    0 x
    63 Beiträge
    0 Hilfreiche Beiträge
    28. 11. 2010, 23:43

    [quote="etux"]
    [quote="skydivematy"]warum machst du das nicht mit <div></div>?[/quote]
    Kann er machen, sollte er sogar. Aber bitte nicht indem er die Tabellenzellen mit leeren div (oder span) ersetzt. Aus semantischer Sicht wäre dann die echte Tabelle sogar der kleinere Übel.
    Lesestoff:
    http://www.alistapart.com/articles/customcorners/
    Vorlage und Anleitungen gibt es zudem genügend im Netz.
    [/quote]

    Habe jetzt die gewünschte Darstellung mit den Tabellenzellen. Es lag an der Positionierung. Der Firefox brauchte da feste Vorgaben. Falls es doch jemanden interessieren sollte hier die Änderungnen im stylesheet:

    1. #im_hintergrund {width:100%; height:auto; border:none; padding:0; margin:0;}
    2.  
    3. /* ..... Tabellenreihen ..... */
    4. .oben {width:100%; height:25px;}
    5. .mitte {width:100%; height:auto;}
    6. .unten {width:100%; height:25px;}
    7.  
    8. /* ..... Tabellenzellen ..... */	
    9. .links {
    10. 	position:relative; left:0;
    11. 	width:25px; height:25px;
    12. 	background-color:transparent; 
    13. 	background-position:right top ; background-repeat:no-repeat;}
    14.  
    15. .rechts {position:relative; right:0;
    16. 	width:25px; height:25px;
    17. 	background-color:transparent; 
    18. 	background-position:right; background-repeat:no-repeat;	}
    19.  
    20. .mittelinks {position:relative; right:0; 
    21. 	width:25px; height:auto;
    22. 	background-color:transparent;
    23. 	background-image:url(../Bilder/container_streifen_links.png);
    24. 	background-repeat:repeat-y;}
    25.  
    26. .mitterechts {width:25px; height:auto;
    27. 	background-color:transparent; 
    28. 	background-image:url(../Bilder/container_streifen_rechts.png);
    29. 	background-position:left; background-repeat:repeat-y;}
    30.  
    31. .obenmitte {width:750px; height:25px;
    32. 	background-color:transparent;
    33. 	background-image:url(../Bilder/container_streifen_oben.png);
    34. 	background-repeat:repeat-x;}
    35.  
    36. .untenmitte {width:750px; height:25px;
    37. 	background-color:transparent;
    38. 	background-image:url(../Bilder/container_streifen_unten.png);
    39. 	background-repeat:repeat-x;
    40. 	padding: 0 10px;}
    41.  
    42. .mittemitte {width:750px; height:450px;	background-color:#FFF;}
    43.  
    44. /* ..... Tabellenecken ..... */	
    45. .oben .links {background-image:url(../Bilder/container_ecke_linksoben.png); background-repeat:no-repeat; background-position:left;}
    46. .oben .rechts {background-image:url(../Bilder/container_ecke_rechtsoben.png); background-repeat:no-repeat; background-position:right;}
    47. .unten .links {background-image:url(../Bilder/container_ecke_linksunten.png); background-repeat:no-repeat; background-position:left;}
    48. .unten .rechts {background-image:url(../Bilder/container_ecke_rechtsunten.png); background-repeat:no-repeat; background-position:right;}

    Auch wenn´s nicht die feine Art ist, lasse ich das erstmal so. Das mit den <span>s habe ich leider noch nicht ganz verstanden, daher möchte ich es auch nicht einsetzen. Danke Euch, werde dran arbeiten.

  • 1
Präsentiert von
Mittwald
Nützliche Links
TYPO3 Dokumentation
eStrategy
webworker Magazin