Zur Navigation

Problem mit float bei Liste

1 jdgf (Gast)

Hallo,
mein Problem ist, dass zwischen Content (dreispaltige Liste) und Überschrift ein zu großer Abstand bei der Startseite (www.kolping-hohenfels.de/demo_gila/index.htm) bleibt, der beim Aufruf jeder anderen Seite verschwindet. Der Unterschied wird durch die rote Rahmenlinie sichtbar; IE stellt zwar ausnahmsweise -wohl wegen eines Bugs- richtig dar.
Beim Testen habe ich festgestellt, dass der Fehlerverursacher die Anweisung float:left ist. Entferne ich sie, fließt der Listentest, jedoch einspaltig innerhalb der roten Rahmenlinie.
Der Listenaufbau ist aber in Ordnung. Ich habe die Mustertabelle in dem Link http://www.communitymx.com/content/a...F87&print=true ausprobiert (die Tabelle ist auskommentiert) . Dabei zeigt sich derselbe Fehler.

.ultest1, .ultest2, .ultest3 {
/*float: left;
  width: 27em;
  margin: 0;
  padding: 0;
  list-style: none;
*/ 
width:17.3em;
list-style:none;
float:left;
}


.ultest2 {
padding-left:1.4em;
padding-right:1.4em;
}

.litest {
/*float: left;
  width: 9em;
  margin: 0;
  padding: 0;
*/
list-style:none;
padding-bottom:0.9em;
vertical-align:top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
text-align:justify;
}

Kann mir jemand helfen. Danke!
Gruß, Dietmar

06.10.2006 18:32

2 Jörg Kruse

Hallo Dietmar,

ein weiterer Auslöser dieses Abstandes scheint die erste Box in der rechten Sidebar zu sein. Wenn du diese testweise mal herausnimmst, siehst du, wie der Abstand verschwindet. Die eigentliche Ursache kann ich auch noch nicht genau erkennen - anscheinend vertragen sich die floats der rechten Box und der Liste nicht ganz. Bei floats auf verschiedenen Ebenen kann es leicht zu solchen Problemen kommen

06.10.2006 19:35

3 jdgf (Gast)

Hallo Jörg,

es ändert sich nichts wenn ich die linke Sidebar weglasse. Ich habe die Startseite so eingerichtet, dass sie wegfällt. --> http://www.kolping-hohenfels.de/demo_gila/index_ohnelinke.htm

Die Grobstruktur der Seite ist Kopfbereich, Mittelteil und Fußbereich. Die htm-Seite ruft den Mittelbereich auf, der diesen Aufbau hat:
{TEMPLATE FILE="header.tpl"}
<!-- phpCMS CONTENT START -->

    <!-- Main content (main.tpl) Start -->
		{TEMPLATE FILE="scripts.tpl"}
<h1>{TITEL EDITTYPE="TEXT" SIZE="25"}</h1>
       {CONTENT EDITTYPE="TEXTAREA" ROWS="20" COLS="70"}

<ul class="ultest1">
<li class="litest">{CONTENT1}</li><li class="litest">{CONTENT2}</li><li class="litest">{CONTENT3}</li>
</ul>
<ul class="ultest2">
<li class="litest">{CONTENT4}</li><li class="litest">{CONTENT5}</li><li class="litest">{CONTENT6}{SCRIPT_ZUNGENBRECHER}</li>
</ul>
<ul class="ultest3">
<li class="litest">{CONTENT7}</li><li class="litest">{CONTENT8}</li><li class="litest">{CONTENT9}{SCRIPT_WITZ}</li>
</ul>
<!-- Main content (main.tpl) End -->
{TEMPLATE FILE="footer.tpl"}

Von hier werden der Kopfbereich und der Fußbereich aufgerufen.

Kann das Problem damit zusammenhängen, das der Mittelbreich mit <div> defininiert ist. Denn der Kopfbereich (header.tpl) endet mit dem Code:

<body>
    <!-- For non-visual user agents only: -->
    <div id="top"><a href="#main-copy" class="doNotDisplay doNotPrint">Skip to main content.</a></div>
<div id="seite">
{TEMPLATE FILE="header_pix.tpl"}		
{TEMPLATE FILE="sidebar_left.tpl"}
{TEMPLATE FILE="sidebar_right.tpl"}    


   <div id="main-copy">
   <!-- phpCMS HEADER END -->
{EDITLINE FILE="start_edit.tpl"}

"main-copy" ist in CSS festgelegt mit:
#main-copy {
color: black;
text-align: justify;
line-height: 1.5em;
margin: 0 0 0 13.5em;
/*padding: 0.5ex 15em 1em 1em;*/
padding: 0.5em 13.5em 1em 1em;
border: 1px solid red;
}
Padding und margin legen die Abstände zu der rechten und linken Sidebar fest.

Gruß, Dietmar

07.10.2006 12:11

4 jdgf (Gast)

noch ein Nachtrag:
Wenn ich eine andere Vorlage mit Tabellenstruktur verwende, funktioniert es --> http://www.kolping-hohenfels.de/demo_gila/index_tab.htm
Diese Variante gefältt mir aber nicht, da dann je nach der größten Zelle die leeren Abstandsflächen zu den nachfolgenden Zellen sehr häßlich aussehen.

07.10.2006 12:17

5 Jörg Kruse

Hallo Dietmar,

es ändert sich nichts wenn ich die linke Sidebar weglasse.

von der linken Sidebar habe ich aber auch nicht geschrieben ;):

Zitat von Jörg
ein weiterer Auslöser dieses Abstandes scheint die erste Box in der rechten Sidebar zu sein.

Der Abstand ist auch genauso groß wie diese oberste rechte Box

Das Weglassen dieser Box wäre hier natürlich auch keine Lösung; man könnte die rechte Sidebar aber auch anders als über float:right positionieren: Man gibt dem Hauptteil einen rechten Innenabstand (padding-right) in der Breite der rechten Sidebar. Über diesen leeren Bereich positioniert man dann absolut die rechte Sidebar (mit position:absolute und den entsprechenden Werten für top und left).

07.10.2006 12:30 | geändert: 07.10.2006 12:32

6 jdgf (Gast)

Hallo Jörg,

der Fehler lag daran, dass ich nicht die Sidebar, sondern deren Inhalt (=Sidebarboxen) floatete. Danke für deine Hilfsbereitschaft.

LG Dietmar

09.10.2006 09:49

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]