Hallo,
meine Webseite arbeitet mit Jommla und ich will vom Tabellen-Layout mit einem Override auf ein komplettes div-Layout umstellen. Mein Problem ist, dass beim Aufruf eines einzelnen Artikels der Artikel zwar oben im Contentbereich beginnt, dann aber die nachfolgenden divs eingefügt werden und der Text des Artikels am Ende folgt. Es könnte deshalb ein Fehler im CSS-Layout sein, das ich selbst konstruiert habe.

Kann bitte jemand überprüfen, ob dieses Layout an sich "stabil" ist. Ich habe vom Code nur das reine Gerüst ohne die joomla-spezifischen Teile dargestellt:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102

<div id="container"> <!-- ================================ B A N N E R =================================== -->   <div id="banner" >         <div style="width:30%; float:left; padding-top:5px"> <!-- Sucheingabe- Anfang -->         </div> <!-- Sucheingabe - Ende -->         <div style="width:60%;vertical-align:bottom; float:right"> <!-- Foto - Anfang -->             <div style="padding-top:15px">             </div>         </div> <!-- Foto - Ende -->         <br clear="all" />         <div id="logoheader">&nbsp;</div>         <div class="top1"> <!-- Zeile Breadcrumb -->             <div class="pw" style="width:90%; padding-top:10px"> <!-- Breadcrumb -->             </div> <!-- Breadcrumb -->             <div class="date" style="width:10%; padding-top:10px"> <!-- Datum -->             </div> <!-- Datum -->         </div>  <!-- Zeile Breadcrumb --> </div> <!-- ENDE BANNER --> <!-- ============================= A L P H A ================================== -->     <div id="alpha"> <!-- linke Spalte-->         <div>             <div style="vertical-align:top" class="lcol">                 <div class="leftrow">                 </div>             </div>             <div class="bgline" >             </div>         </div>     </div> <!-- linke Spalte --> <!-- =================================  D E L T A  ==================================== -->     <div id="delta"> <!-- Beginn D E L T A -->         <div id="eta"> <!-- Beginn E T A -->             <div style="width:100%; border-top: 5px solid #ffffff;vertical-align:top">                 <div>                 </div>             </div> <!-- ================================== B E T A ======================================= -->             <div id="beta"> <!-- rechte Spalte -->                     <div style="vertical-align:top" class="rcol">                           <div class="rightrow">                           </div>                     </div>             </div> <!-- rechte Spalte --> <!-- ==================================== G A M M A =================================== -->             <div id="gamma"> <!-- Beginn Gamma (Mittlerer Bereich) -->                 <!--##############  verborgene Nachrichtenzeile  ###################-->                 <div>                     <div>                         <h1>                         </h1>                     </div>                 </div>                 <!--##############  Contentbereich ###################-->                 <div id="main">                     <div class="main">                     </div>                 </div>                 <!--<br clear="all" /> -->                                    <div style="float:left; padding-left:2px; padding-right:2px; width:100%">                                       <div>                                       </div>                 </div>                 <div style="float:left; padding-left:3px; padding-right:3px">                                       <div>                                       </div>                 </div>             </div>  <!-- Ende Gamma -->         <br clear="all" />         </div>  <!-- Ende Eta -->     <br clear="all" />     </div> <!-- Ende Delta -->     <br clear="all" /> <!-- ================================ U N T E N ==================================== -->            <div id="footer" style="font-size:0.8em; text-align:center; vertical-align:bottom"> <!-- ##################################################################################### -->     <br clear="all" />     <!--############  Letzte Nachrichten und meistgelesene Nachrichten   #####################-->     <div style="text-align:center">     <div id="zeile2" style="width:100%; margin:auto;">                     <div style="width:24%; float:left; padding-left:3px; padding-right:3px">                             <div style="text-align:left">                             </div>                             <div style="text-align:left">                             <jdoc:include type="modules" name="pos12" style="xhtml"/>                             </div>                     </div>                     <!--############  Bildernews, Wetter und Umfrage  ##############-->                             <div style="width:24%; float:left; padding-left:3px; padding-right:3px">                             </div>                                                         <div style="width:24%; float:left; padding-left:5px; padding-right:3px">                             </div>                                                 <div style="width:24%; float:left; padding-left:3px; padding-right:3px">                             </div>     </div>     <br clear="all" />     </div>     <!--############ Ende Nachrichten ##############--> <!-- ##################################################################################### --> </div> </div><!-- ------------------------ ENDE CONTAINER ---------------------------- -->

Die Webseite sieht man unter kolping-hohenfels.de
Danke für die Hilfe und viele Grüße,
Dietmar

Hi,

ich bin jetzt den Code nicht zeilenweise durchgegangen, sondern hab mir die Seite einfach in den gängigen Browsern betrachtet, und konnte in ihnen soweit keine Unstimmigkeiten oder gegensätzliche Darstellungen entdecken.

mfg Maik

Hallo Maik,
danke erst mal für deine positive Überprüfung . Ich habe bislang auch nichts gefunden. Aber trotzdem stimmt etwas nicht und zwar dann, wenn man von der Newsseite einen einzelnen Bericht aufruft. Sobald ich auf die div-Variante umschalte, erhalte ich das nachfolgende Brwoseransicht, in der der Artikel zerfetzt wird, dass oben die Überschrift und nach den verschiedenen Modulen der Text folgt.

Eigentlich müßte der Artikel nur im Content-Bereich stehen, also unmittelbar nachd er Überschrift. In der Grafik sieht du ganz oben die Autorenangabe und ganz unten der Beginn des Berichtstextes.

Gruß, Dietmar

In welchem Browser entstand denn dieser Schnappschuß?

Der abgebildete News-Artikel http://kolping-hohenfels.de/news/329...l-wagrain.html wird bei mir browserübergreifend korrekt angezeigt (getestet in FF 3.5.5, IE 7 + 8, Opera 9.6, Safari 4.0.3).

mfg Maik

Hallo Maik,
ich arbiete immer mit FF, da er der beste ist. Aber ich habe das Problem gelöst . Um es dir besser demonstrieren zu können, habe ich eine Testseite eingerichtet, in der das div-Layout angewandt wird. Und ich war sehr überrascht, als plötzlich alles paßte. Ich habe dann die einzelnen Module dazugeschaltet und erst das Plugin, dass den Kalenderabriß bei jedem Artikel einfügt, verursacht das Problem.
Falls du es dir nochmals ansehen willst, findest du es hier: http://www.kolping-hohenfels.de/only...stbericht.html
Vielen Dank für deine Hilfe!
Gruß Dietmar

Sieht zumindest so aus, wie wenn dort an irgendeiner Stelle des HTML-Codes das Umfliessen (floaten) nicht ordentlich beendet wurde.

Es könnte aber auch einer der 104 Markup-Fehler (siehe hierzu http://validator.w3.org/check?uri=ht...idator%2F1.654) dafür verantwortlich sein, dass die Seite dermaßen zerschossen wird.

Also erstmal ordentlich validieren, um diese mögliche Fehlerquelle auszuschließen, und sich gezielt dem Stylesheet widmen zu können.

mfg Maik

Das Problem an der Einstellung im Plugin: Dort war statt CSS noch Table eingestellt. Nach der Änderung läuft es.
Nochmals Danke für die Hilfe.
Gruß, Dietmar