Probleme mit css styling

  • Probleme mit css styling

    Hallo liebes Team,

    noch nachträglich ein frohes neues Jahr 2011.

    Zu meinem Problem, habe da unter germanserv.de eine Testseite eingerichtet. Es handelt sich dabei um in accordion eingebettete tabs realisiert mit jquery. Die tabs innerhalt der accordions laden auf Wunsch per ajax den Content in die tab-container. Jetzt die Sache die ich mir nicht erklären kann:

    Wenn der Content der da geladen wird aus Text besteht mit mit oder ohne p tag ist dabei egal, dann wird der Text schön mit dem container-Rahmen umschlossen. Wenn der Content aber aus div Elementen besteht, dann bricht/fährt der Rahmen zusammen und das sieht natürlich nicht gut aus.

    Hier mal die css Datei main.css:

    Quellcode

    1. BODY {
    2. margin: 0.75em;
    3. padding: 0.75em;
    4. font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
    5. font-size: 0.75em;
    6. color: #333333;
    7. }
    8. UL.mytabs {
    9. position: relative;
    10. z-index: 2;
    11. }
    12. UL.mytabs, UL.mytabs LI {
    13. margin: 0;
    14. padding: 0;
    15. list-style: none;
    16. float: left;
    17. }
    18. UL.mytabs LI { padding: 0 5px; }
    19. UL.mytabs LI A {
    20. float: left;
    21. padding: 7px;
    22. border: 1px solid #CCCCCC;
    23. border-bottom: 1px solid #E0E0E0;
    24. background: #F0F0F0;
    25. font-size: 0.8em;
    26. text-decoration: none;
    27. text-align: center;
    28. color: #333333;
    29. height: 22px;
    30. min-width: 100px;
    31. -webkit-border-top-left-radius: 10px;
    32. -webkit-border-top-right-radius: 10px;
    33. -khtml-border-top-left-radius: 10px;
    34. -khtml-border-top-right-radius: 10px;
    35. -moz-border-radius-topleft: 10px;
    36. -moz-border-radius-topright: 10px;
    37. border-top-left-radius: 10px;
    38. border-top-right-radius: 10px;
    39. }
    40. UL.mytabs LI A:HOVER, UL.mytabs LI.current A, UL.mytabs LI.current2 A {
    41. background: #FFFFFF;
    42. }
    43. UL.mytabs LI.current A, UL.mytabs LI.current2 A {
    44. font-weight: bold;
    45. font-size: 0.8em;
    46. border-bottom: 1px solid #FFFFFF;
    47. }
    48. .mytabs-container {
    49. position: relative;
    50. clear: both;
    51. width: 100%;
    52. height: 100%;
    53. border: 1px solid #E0E0E0;
    54. padding: 0.6em;
    55. top: -1px;
    56. -webkit-border-radius: 10px;
    57. -khtml-border-radius: 10px;
    58. -moz-border-radius: 10px;
    59. border-radius: 10px;
    60. }
    61. /*.accordion {
    62. padding: 0.5em;
    63. }*/
    64. .accordion h3 {
    65. padding-left: 1.5em;
    66. }
    67. .liste {
    68. position: relative;
    69. width: 100%;
    70. height: 100%;
    71. }
    72. .listitem {
    73. float: left;
    74. margin: 1em;
    75. width: 4em;
    76. height: 4em;
    77. background: #03C;
    78. }
    Alles anzeigen


    Kenn jemand das Phenomen? Weil man kann jetzt nicht sagen, der geladen Content wird nicht von der css Datei verarbeitet, ich habe den div Elementen eine Class zugewiesen und die werden richtig dargestellt. Aber wie gesagt, wenn jemand eine Lösung für dieses Phenomen kenn, ich bitte um Hilfe.

    Liebe Grüße

    kingluui
    Man muss nicht wissen wie es geht, man muss nur wissen wo es steht! Natürlich bei easy-coding 8o de

  • Oh ja gerne,

    hier mal die index.html:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <title>Test</title>
    5. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    6. <link rel="icon" href="favicon.ico" type="image/x-icon">
    7. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    8. <link rel="stylesheet" href="/main.css" type="text/css" media="all" />
    9. <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    10. <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    11. <script type="text/javascript">
    13. var containerId = '#tabs-container';
    14. var tabsId = '#sortable';
    16. $(document).ready(function() {
    17. // Preload tab on page load
    18. if($(tabsId + ' LI.current A').length > 0){
    19. loadTab($(tabsId + ' LI.current A'));
    20. }
    22. $(tabsId + ' A').click(function(){
    23. if($(this).parent().hasClass('current')){ return false; }
    25. $(tabsId + ' LI.current').removeClass('current');
    26. $(this).parent().addClass('current');
    28. loadTab($(this));
    29. return false;
    30. });
    32. $('#sortable').sortable({
    33. items: 'li'
    34. });
    36. $('.accordion').accordion({
    37. active: 3,
    38. autoHeight: false,
    39. clearStyle: true,
    40. collapsible: true,
    41. header: 'h3'
    42. });
    43. });
    45. function loadTab(tabObj){
    46. if(!tabObj || !tabObj.length){ return; }
    47. $(containerId).addClass('loading');
    48. $(containerId).fadeOut('fast');
    50. $(containerId).load(tabObj.attr('href'), function(){
    51. $(containerId).removeClass('loading');
    52. $(containerId).fadeIn('fast');
    53. });
    54. }
    56. </script>
    57. </head>
    59. <body>
    60. <div class='accordion'>
    62. <h3><a href='#'>Login</a></h3>
    63. <div>
    64. <p>Login...</p>
    65. </div>
    67. <h3><a href='#'>Werbung</a></h3>
    68. <div>
    69. <p>Werbung...</p>
    70. </div>
    72. <h3><a href='#'>Formulare</a></h3>
    73. <div>
    74. <p>Formulare...</p>
    75. </div>
    77. <h3><a href='#'>Favoriten</a></h3>
    78. <div id='tabs'>
    79. <ul class="mytabs" id='sortable'>
    80. <li class="current"><a href="./tabs/tab-1.html">Server</a></li>
    81. <li><a href="./tabs/tab-2.html">Standard</a></li>
    82. <li><a href="./tabs/tab-3.html">News</a></li>
    83. </ul>
    84. <div class="mytabs-container" id="tabs-container">
    85. Loading. Please Wait...
    86. </div>
    87. </div>
    88. </div>
    89. </body>
    90. </html>
    Alles anzeigen


    und hier eine per ajax geladene tab-1.html:

    Quellcode

    1. <div class="liste" id="liste">
    2. <div class="listitem"><a href="#">Test</a>
    3. </div>
    4. <div class="listitem"><a href="#">Test</a>
    5. </div>
    6. <div class="listitem"><a href="#">Test</a>
    7. </div>
    8. <div class="listitem"><a href="#">Test</a>
    9. </div>
    10. <div class="listitem"><a href="#">Test</a>
    11. </div>
    12. <div class="listitem"><a href="#">Test</a>
    13. </div>
    14. <div class="listitem"><a href="#">Test</a>
    15. </div>
    16. <div class="listitem"><a href="#">Test</a>
    17. </div>
    18. <div class="listitem"><a href="#">Test</a>
    19. </div>
    20. </div>
    Alles anzeigen


    mit folgendem Ergebnis: Bild01

    und eine andere per ajax geladene Datei tab-3.html:

    Quellcode

    1. <p>Ne nam eros accumsan qualisque, eum persius habemus propriae id. Cu mutat ludus disputando usu, vim te laudem iriure luptatum. Amet mucius ne sed, an magna explicari eum. </p>
    2. <p>Te fabellas pericula incorrupte cum, qui odio elit menandri ex, et sea sonet takimata. Idque atqui convenire quo et, vel justo civibus explicari no. No vim dicit melius conceptam, delenit corpora erroribus qui eu.</p>
    3. <p>In delenit lobortis cotidieque eum, usu ea tollit audiam. Amet mucius ne sed, an magna explicari eum. Quidam eligendi gloriatur ius ea. </p>
    4. <p>No vim dicit melius conceptam, delenit corpora erroribus qui eu. Ne minimum sensibus laboramus pri, cetero iudicabit prodesset in mei. In delenit lobortis cotidieque eum, usu ea tollit audiam.</p>
    5. <p>Ullum alienum accusata an nam, ea per stet altera scaevola, nostro appareat comprehensam eam ea. No pri malis ocurreret deseruisse, in usu eros homero euismod, vituperatoribus nonummy per ex. In delenit lobortis cotidieque eum, usu ea tollit audiam.</p>


    mit diesem Ergebnis: Bild02

    da stimmt der Rahmen.
    Man muss nicht wissen wie es geht, man muss nur wissen wo es steht! Natürlich bei easy-coding 8o de

  • Danke für Deine Hilfe, leider hatte ich das schon getestet und jetzt in verschieden Varianten nochmal.

    Ich habe die PW Sperre auf der Website weggenommen.

    Nun, ich weiss, man sollte meinen, ja klar die class mytabs-container weiss ja auch garnicht wie groß sie werden soll bevor der Content nicht geladen ist, aber mit dem Textinhalt klappts ja auch. Ich möchte den Entwicklern des jquery nix böses, aber es könnte auch ein Bug im Framework sein.

    Also wenn niemand spontan ne Lösung weiss, weil sie oder er das auch schonmal hatte, dann werde ich wohl ne andere Designlösung wählen, schade.

    Dann werde ich den Thread morgen als erledigt markieren müssen.
    Man muss nicht wissen wie es geht, man muss nur wissen wo es steht! Natürlich bei easy-coding 8o de

  • was mit <p><div><p></p><div><div><p></p><div><div><p></p><div></p> oder das ohne das äußerste p


    glaube es liegt daran, dass my-tabs eine positionierung hat, mach mal in die css für listeitem auch noch position relative rein,

    wenn das alles nicht funzt gib mir mal einen link zu der datei und ich spiele mit firebug bis das geht!

    check your inbox for ICQ number
    </nobrain>

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von n0x-f0x ()

  • Ok, das mache ich ja auch, mit firebug Httpfox und hasste nicht gesehn debuggen, aber manchmal sieht man auch vor lauter Bäume den Wald nicht mehr.

    Sehr nett von Dir, ich habe jetzt mal alle betroffenen Dateien in eine .rar gepackt und hier accoTabsCombi zum Download bereitgestellt.

    Opfere aber nicht zu viel Zeit damit. . .
    Man muss nicht wissen wie es geht, man muss nur wissen wo es steht! Natürlich bei easy-coding 8o de