Nach Veröffentlichung eines Artikels verschiebt sich die Seite!

**varix** · 05.05.2010, 19:55

Hallo Leute,

aus welchen Gründen auch immer, verschiebt sich meine Seite, bzw. wird sichtbar neu aufgebaut, wenn ich einen Menupunt und den damit verbunden Artikel (Partner) aufrufe. Bei allen anderen Menupunkten und damit verbunden Artikeln passiert das nicht. Wenn ich den Artikel deaktiviere und den Menupunkt aufrufe, wird zwar nichts angezeigt, aber die Seite verschiebt sich nicht. Es ist optisch alles so, wie es sein sollte.

Link zur Seite:http://www.christianleue.de/cnl

Der Artikel ist ein HTML-Code:

HTML-Code:

<h1>Partner</h1>
<div class="ce_text">
<p>
Ohne starke Partner steht man heute oft auf verlorenem Posten. Wir arbeiten mit folgenden Unternehmen zusammen:<br><br><br>

<object width="468" height="60" type="application/x-shockwave-flash" data="http://www.christianleue.de/sonstiges/banner2.swf">
<param name="allowscriptaccess" value="always"/> 
<param name="seamlesstabbing" value="true"/> 
<param name="allowfullscreen" value="true"/> 
<param name="wmode" value="opaque"/> 
<param name="bgcolor" value="#FFFFFF"/> 
<param name="menu" value="true"/> 
></object> 
<br>Professionelle und unabhängige Beratung zu den Themen: Versicherungen & Finanzdienstleistungen.<br><br><br>



<a href="http://www.zanox-affiliate.de/ppc/?11863777C228621532T"><img src="http://www.zanox-affiliate.de/ppv/?11863777C228621532" align="bottom" width="468" height="60" border="0" hspace="1" alt="Arcor"></a>
<br>Arcor bietet eine große Auswahl an verschiedenen DSL Tarifen und ....<br><br><br>

<a href="http://ad.zanox.com/ppc/?12642905C1090222724T"><img src="http://ad.zanox.com/ppv/?12642905C1090222724" align="bottom" width="468" height="60" border="0" hspace="1" alt="amazon.de"></a>
<br>Amazon.de: Günstige Preise bei Elektronik & Foto, DVD, Musik, Bücher ... <br><br><br>

<a href="http://ad.zanox.com/ppc/?12642900C449449676T"><img src="http://ad.zanox.com/ppv/?12642900C449449676" align="bottom" width="468" height="60" border="0" hspace="1" alt="Alice Fun 468x60"></a>
<br>Alice DSL Angebote - Alice steht für schnelles Surfen und ... <br><br><br>

<a href="http://ad.zanox.com/ppc/?12642917C1903511228T"><img src="http://ad.zanox.com/ppv/?12642917C1903511228" align="bottom" border="0" hspace="1" alt="E-Plus Online-Shop"></a>
<br>E-Plus macht mobile Kommunikation einfach und günstig<br><br><br>

<a href="http://ad.zanox.com/ppc/?12692249C1071512808T"><img src="http://ad.zanox.com/ppv/?12692249C1071512808" align="bottom" width="468" height="60" border="0" hspace="1" alt="www.cyberport.de"></a>
<br>Mehr als 20.000 Produkte in speziellen Themenbereichen wie Apple Mac & iPod, mobile Computer und ... <br><br><br>

<a href="http://ad.zanox.com/ppc/?12872474C875386068T"><img src="http://ad.zanox.com/ppv/?12872474C875386068" align="bottom" border="0" hspace="1" alt="www.kabeldeutschland.de"></a>
<br>Der Kabelnetzbetreiber informiert über sein Angebot an analogen, digitalen und Internet-Anschlüßen. <br><br><br>


Willkommen bei T-Mobile. Hier finden Sie Handys, Handytarife, aktuelle Angebote und weitere Informationen zu T-Mobile. <br>

<a href="http://ad.zanox.com/ppc/?13179752C403615164T"><img src="http://ad.zanox.com/ppv/?13179752C403615164" align="bottom" width="468" height="60" border="0" hspace="1" alt="Call & Surf Basic"></a>
<br>Privatkunden, Entertainment, Surfen, Telefonieren, Geräte & Zubehör, Mobilfunk und ... <br><br><br>

<a href="http://www.zanox-affiliate.de/ppc/?14444684C1351692221T"><img src="http://www.zanox-affiliate.de/ppv/?14444684C1351692221" align="bottom" width="468" height="60" border="0" hspace="1" alt="Tchibo Reisen"></a>
<br>Bei Tchibo.de gibt es jede Woche Dienstags eine neue Welt zu entdecken.
</p>
<br>
</div>

<img src="tl_files/bilder/text_bottom.png" width="800" height="38" alt="Bild">

Kann mir jemand sagen, wo das Problem ist?

Christian

**neueplaneten** · 05.05.2010, 20:10

Bitte mal eine expliziten Link zu dem Problem, damit ich das mal mi Firebug prüfen kann.

**varix** · 05.05.2010, 20:12

Link zur Seite:http://www.christianleue.de/cnl

**Juke** · 05.05.2010, 20:20

Der Unterschied zwischen z.B. der Startseite und der Partnerseite ist der, dass auf der Partrnerseite rechts der Scrollbalken angezeigt wird, auf der Startseite nicht, weil sie kürzer ist. Dadurch "hubscht" die Seite beim Hin- und Herschalten.

html, body {
min-height:101%;
}

verhindert das.

**neueplaneten** · 05.05.2010, 20:23

Das Problem liegt hier, der #main-Container steht auf width:auto und wird nur mit margin-left/right:Summe aus Breite #left/#right in die richtige Position gesetzt. Wenn #main noch nen "overflow:hidden"; bekommt, würde der Teil der übersteht, abgeschnitten werden.

Innerhalb von #left,#right und #main ist noch ein div mit der Klasse .inside, diese hat die Css Werte wie folgt.

Code:

#main .inside{width:800px;overflow:visible;float:left;display:block;margin-top:20px;}

Bei einer Gesamtbreit von 950px und einer Breit von #left (sidebar) von 200px kann #main .inside nur 750px breit sein, alos 50 pixel zu viel.

Code:

#main .inside{width:750px;overflow:visible;float:left;display:block;margin-top:20px;}

Gruß Tilo

**varix** · 05.05.2010, 20:24

Hallo,

bei mir wird aber kein Scrollbalken angezeigt, nicht im FF oder IE. Wo siehst du denn den Scrollbalken, oder wie kann man so etwas überprüfen?

**neueplaneten** · 05.05.2010, 20:26

Zitat von Juke

html, body {
min-height:101%;
}

Das hin und her Springen durch die Scrollbalken würde besser gehen mit der Lösung, ist aber nicht sein Problem in erster Instanz.

Code:

body{
overflow-y:scroll;
}

**varix** · 05.05.2010, 20:45

Hallo Tilo,

deine Erklärung macht Sinn. Jetzt habe ich folgende Frage. Beim Studieren vieler Beiträge habe ich von Nina gelesen, dass die Klasse .inside immer genutz werden soll. da ich mit zwei Setenlayouts arbeite, einmal nur Main-Bereich (kann also genauso breit sein, wie der Header 950px) und ein Seitenlayout mit main 750px und sidebar left 200px.

Wie setzte ich das dann um?

Die Startseite hat ja auch keine Problem (Springen)? da ist auch nur das Main-Seitenlayout.

**neueplaneten** · 05.05.2010, 20:49

Lass die Breitenangabe für die Klasse .inside weg, den Rest macht das Framework selbst, ein Blockelement dehnt sich ohne geneua Angabe von width auf die volle Breite innerhalb seine s Elternelements aus. Also #wrapper 950px.

**neueplaneten** · 05.05.2010, 20:52

Peter Müller (Dozent und Autor des erfolgreichen Buches „Little Boxes, Webseiten gestalten mit CSS“)

und natürlich www.think-https://contao.org als Litaratur.

**varix** · 05.05.2010, 20:55

Gelesen habe ich schon viel, aber das heisst ja leider nicht, das man das alles sofort kann

Frage:

Wenn du von weglassen sprichst, meinst du auf auto setzen oder nichts eintragen?
Gilt das dementsprechend für alle Bereiche: main,left?

**MacKP** · 05.05.2010, 20:56

Hallo varix,
dein Problem mit dem 'Springen' kommt von der Scrollleiste, die nur auf der Seite ist.
Das wurde hier im Forum schon ein paar mal besprochen.
Ansonsten kannst auch mal bei Yaml nach ner Lösung suchen, die ist da recht gut Dokumentiert und erläutert.

Viele Grüße
---
OMG da hatte ich vergessen neu zu laden.. seitdem hat sich hier ja einiges getan *g*
Tschuldigung für die Unterbrechung

**varix** · 05.05.2010, 20:57

Muss nchmal nerven: Ich sehe hier keinen Scrollbalken! Wo ist er?

**MacKP** · 05.05.2010, 21:00

Zitat von varix

Muss nchmal nerven: Ich sehe hier keinen Scrollbalken! Wo ist er?

Äh... das ist der Balken vom Browser?
Vllt hast du so eine Mega große auflösung, das du den nicht bekommst, da die Seite nicht länger ist als dein Browserfenster? Nur dürfte dann auch kein 'Springen' vorkommen...

Viele Grüße

----
Und jetzt wo der praktisch immer da ist, wird auch nic mehr 'gesprungen' angezeigt ^^

**neueplaneten** · 05.05.2010, 21:01

Ja lass weg, dann ist der Wert eh auto;. Left hast Du ja im BE als Wert angegeben. Du kannst ja mal CSS3 probieren und somit dich von Grafiken für Farbverläufe, Schlagschatten und Rahmenrundungen lösen. Somit bist Du in der Breite flexibler und sparst noch Quellcode und Request am Server für Grafiken.

http://www.css3.info/preview/rounded-border/

Der IE 9 wird spätestens damit dann nachziehen und CSS3 unterstützen, ansonsten bekommen die mit IE 6-8 dann halt keine Rundungen, Farbverläufe oder Shclagschatten angezeigt, sieht halt dann normal aus.

Ganz wichtiges Buch ist von Manuela Hofmann "Modernes Webdesign" anzumerken

**varix** · 05.05.2010, 21:01

Du wirst es nicht glauben, aber ich sehe wirklich keinen Balken, nicht im IE und nicht im FF und habe einen ganz normalen 24 Zoll Monitor.

Kann mir einer das Licht anmachen, damit ich auch sehe, wovon ihr sprecht!!!

**varix** · 05.05.2010, 21:09

Hallo Tilo,

mit css3 setze ich mich auseinander, wenn ich es ingesamt überhaupt erstmal alles verstanden habe.

Ein Scrollbalken finde ich auf der rechten Seite, logisch, da die Seite länger ist, als mein Bidlschirm anzeigt. Aber das icst doch nichts ungewöhnliches, oder? Die Breitenangabe .inside habe ich für beide Bereiche(main & left) imStylesheet weggelassen.

Trotzdem springt es noch. Was muss ich noch anpassen?

**MacKP** · 05.05.2010, 21:20

Zitat von varix

Hallo Tilo,

mit css3 setze ich mich auseinander, wenn ich es ingesamt überhaupt erstmal alles verstanden habe.

Ein Scrollbalken finde ich auf der rechten Seite, logisch, da die Seite länger ist, als mein Bidlschirm anzeigt. Aber das icst doch nichts ungewöhnliches, oder? Die Breitenangabe .inside habe ich für beide Bereiche(main & left) imStylesheet weggelassen.

Trotzdem springt es noch. Was muss ich noch anpassen?

Ich seh da nix mehr springen? Was meinst denn jetzt noch?

**varix** · 05.05.2010, 21:22

Also, habe jetzt Testweise einen zweiten Texartikel erstellt und den ersten, mit dem o.g. Code deaktiviert.. Und siehe da, es springt nichts mehr. Schalte ich den ersten Artikel wieder ein, springt es.

Also muss doch dort der Hund begraben sein???????????

**neueplaneten** · 05.05.2010, 21:26

Damit der rechte Balken nicht erst kommt wenn die Seite länger in der vertikalen wird, sollte man dem body den Css Wert geben

Code:

body{
overflow-y:scroll
}

Zu dem Probleme des Überlaufenden Textes. Grafik ansehen!!! Die Breite der Grafik ist 800px, sollte aber dann auch 950px sein. Setze mal folgenden CSS..., also Hintergrundfarbe weiß oder lass gleich die Grafik weg nur weiß.

Code:

.ce_text{background:#fffff url("tl_files/bilder/text_bg.png") left top repeat-y;font-size:13px;color:#000000;}

Jetzt mache ich das richtig...

Code:

.mod_article{
padding-bottom:20px;
background:#2f7bd8;
-border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-o-border-radius:15px;
-box-shadow: 0px 0px 30px 10px #000000;
-moz-box-shadow: 0px 0px 30px 10px #000000;
-webkit-box-shadow: 0px 0px 30px 10px #000000;
-khtml-box-shadow: 0px 0px 30px 10px #000000;
-o-box-shadow: 0px 0px 30px 10px #000000;
}

.ce_text{
background:#ffffff;
}

Lösche noch das Bild unterhalb des Textelements.

**varix** · 05.05.2010, 21:39

Hallo Tilo,

schon jetzt vielen Dank für deine Mühe und deinen Einsatz und bitte versteh mich nicht falsch,
aber die CSS3 Variante ist aktuell to much und dadurch sprechen wir meiner Meinung nach auch über 2 verschieden dinge. Das dass sicherlich die moderne Form ist und viele Vorteile hat, weiss ich und hab ich auch gelesen. wenn ich aber Schon heute im IE z. B. den Schatteneffekt haben möchte, geht es nicht anders.

Nächster Punkt: Es war ja zu erwarten, dass der Test auf der Startseite durch die Änderung .inside auf width:auto nun über die gesamte Breite läuft, da meine Grafiken ja nur 800px breit sind.

Trotzdem habe ich noch keine Antowrt auf mein aktuelles Problem und "body{
overflow-y:scroll} habe ich gesetzt und es hat leider nichts gebracht.

Wie gesagt, ein wenn ich einen eifachenText anstatt meinem Code einsetze läuft es problemlos, also ohne springen. Mit meinem Code nicht. Vielleicht sollte ich die einzelen Inhalte des HTML mal step bei step einsetzen und probieren, wann der Fehler auftaucht.

Ich hoffe Du kannst meine Vorgehensweise verstehen! Auch wenn ih noch keine Lösung hab.

**varix** · 05.05.2010, 21:51

Hallo Tilo & MacKP,

ihr werdet es kaum glauben, aber ich habe den Fehler gefunden: Folgenden Code habe ich entfernt:

HTML-Code:

<object width="468" height="60" type="application/x-shockwave-flash" data="http://www.christianleue.de/sonstiges/banner2.swf">
<param name="allowscriptaccess" value="always"/> 
<param name="seamlesstabbing" value="true"/> 
<param name="allowfullscreen" value="true"/> 
<param name="wmode" value="opaque"/> 
<param name="bgcolor" value="#FFFFFF"/> 
<param name="menu" value="true"/> 
></object>

Ich hatte diesen Code von einem anderen CMS zum Anzeigen von Flash-Elementen.

Jetzt läuft es sauber, natürlich auch dank eurer Hilfe (Einstellungen für die Klasse .inside) und
ich werde deinen Code demnächst mal ausprobiren.

Wünsche euch noch einen schönen Abend.

Gruß
Christian