a jumping problem

[bicicletaire]

Hallo!

Ich bastelt seit ein paar Monate an meine Neue Seite und bin ich jetz so weit: http://www.pedalabras.com.

Ein Problem habe ich noch...

Wenn man von eine seite wo das "Footer" sichtbar ist (ohne scrollen zu mussen - Home, FAQ, Price, Contact us) zu eine Seite wo das "Footer" ganz unten ist (man muss scrollen um die zu sehen) wechsel, gibt es ein kleines Sprung die ein bischen ärgerlich ist.

Ich benutze 3 verschiedene frontend.css, aber es gibt Seiten die Springen die den gleichen Frontend benutzen und Seiten die nicht springen die vershiedene Frontends benutzen. So es kann nicht an verschieden "margins" oder so liegen...habe ich schon alles geschaut...
Ich nehme an, es hat etwas zu tun mit den "Footer", aber ich wüste nich was es sein kann.

Kann jemand mir helfen?

Ich freue mich auch auf ein paar Tips für diese NewBee Seite!

Das ist den CSS DIV pagelayout ich benutze:

Code: Select all

/* CSS for DIV pagelayout */

#container {
	width: 900px;
	\width: 920px;
	w\idth: 900px;
	border: 2px groove #151b4d;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
        padding: 0px;
        background-image:url(/picture/template/container_background.jpg);
       background-repeat: repeat-y;
}
#headerBlock {
	padding: 0px;
	margin-bottom: 0px;
	background:#fdf8de;
       border-bottom: 1px solid #fdf8de;
}
#mainBlock {
	padding: 10px;
	margin-left: 181px;
	margin-right: 167px;
        margin-top: 0px;	
        background-color:#e7cdaa;
        border-left: 1px solid #151b4d;
        border-right: 2px solid #ffffff;
        border-top: 1px solid #151b4d;
}
#leftBlock {
	float: left;
        width: 164px;
	\width: 174px;
	w\idth: 164px;
	margin: 0;
	margin-right: 0px;
        margin-left: 0px;
	padding-right: 10px;
	padding-left: 5px;
        padding-top: 10px;
	padding-bottom: 5px;
	background: #fdf8de;
         min-height: 386px;
}
#rightBlock {
        float: right;
	width: 157px;
	\width: 167px;
	w\idth: 157px;
	margin: 0;
	margin-left: 0px;
	padding: 5px;
        padding-top: 10px;
	background-color: #f4b225;
        border-top: 1px solid #151b4d; 
}
#footerBlock {
        clear: both;
	padding: 5px;
        background-image:url(/picture/template/mosaic_lang.jpg);
	text-align: right;
	color:#ffffff;	
	font-weight:bold;
	min-height: 30px;
	max-height: 30px;
}
/* End CSS for DIV pagelayout */

Vielen Dank!

Olga

[update]

Probier mal, die body- und html- Anweisungen nach oben zu stellen.
Dann in etwa so:

Code: Select all

body {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size: 14px;
height:100%;
margin:0;
padding:0;
}
html{
margin:0;
padding:0;
overflow-y:scroll;
}
#container {..................

Nun hast Du in jedem Fenster einen Scrollbalken senkrecht
Getestet im FF, sollte in allen modernen Browsern funktionieren

[Oliver Georgi]

Und noch eine Anmerkung bezüglich CSS Hacks. Bitte nicht mehr benutzen, um auf das boxed-border Problem des IE zu reagieren.

Code: Select all

width: 164px;
\width: 174px;
w\idth: 164px;

sollte so aussehen oder besser sogar Conditional comments für IE nutzen

Code: Select all

width: 164px !important; /* All modern Browser */
width: 174px; /* IE<7 Only */

[pepe]

Hi Oliver,

in der frontend.css ist immer noch folgende Sequenz vorhanden:

Code: Select all

/** 
 * Sample CSS for DIV pagelayout 
 */
#container {
	width: 760px;
	\width: 780px;
	w\idth: 760px;
	border: 1px solid gray;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}
#leftBlock {
	float: left;
	width: 200px;
	\width: 210px;
	w\idth: 200px;
	margin: 0;
	margin-right: 5px;
	padding: 5px;
	background-color: rgb(235, 235, 235);
}
#rightBlock {
	float: right;
	width: 200px;
	\width: 210px;
	w\idth: 200px;
	margin: 0;
	margin-left: 5px;
	padding: 5px;
	background-color: rgb(235, 235, 235);
}

Wäre toll, wenn du bei der nächsten Revision deinen Vorschlag gleich auch da einbinden könntest.
Viele (wenn nicht die meisten) NewBees verwenden die "vorhandenen" Dateien, um zu lernen; also wäre es doch sinnvoll und konsequent, gleich die Basis korrekt zu setzen.
Einige "Nachfragen" würden so in der Zukunft vermieden...

[pepe]

Ach noch was , Oliver...

Es wäre eine tolle Sache, wenn für die einfachere Einbindung von ConditionalElements in phpwcms ein passendes ReplacementTag vorhanden wäre:

So könnten etwa folgende RTs:

<div class="klasse{IE:lte:6:_anhang}">
<div class="klasse{IE:gt:6:_anhang}">
<div class="klasse{IE::6:_anhang}">

folgendermassen gerendert werden:

<div class="klasse<!--[if lte IE 6]>_anhang<![endif]-->">
<div class="klasse<!--[if gt IE 6]>_anhang<![endif]-->">
<div class="klasse<!--[if IE 6]>_anhang<![endif]-->">

Und sich dann aus der vorhandenen Standarklasse:

.klasse

für die entsprechende IE-Version die nachfolgende Klasse ergäbe:

.klasse_anhang


Vielleicht findest du ja - irgendwann mal - "eine frei Minute" für die Umsetzung dieser Idee?

[bicicletaire]

Danke Grump, der Sprung ist weg.

Das mit dem boxed-border Problem mit IE, habe ich schon bemerck. Ich habe irdgenwo gelesen dass man nicht viel machen kann, IE erkennt dass "ridge" und "groove" einfach nicht. Oder stimmt das nicht?
Ich wollte dann im IE einfach "solid" haben (sieht besser aus), und habe ich das probiert, aber hat nicht funktioniert. Stimmt etwas mit meinem logik nicht?

Code: Select all

border: 2px groove #151b4d !important; /* All modern Browser */
border: 1px solid #151b4d; /* IE<7 Only */

Danke!
Olga

[bicicletaire]

ooops, ich meinte Danke Gurm!...nicht grump!

[flip-flop]

.... also du meinst Claus

.. Im IE6 einfach solid haben ...., dafür ist das gedacht.

Der CSS-Box-Model-Bug (IE < 7 Only)

[pepe]

Nein... bicicletaire meint claus

Aber bei der Gelegenheit... BORDER müssen immer zusammen gesehen werden mit PADDING und WIDTH
also auch da anpassen für die verschiedenen Browser-Varianten!

[bicicletaire]

also, nochmal ein versuch....Danke Claus! es war niemals so schwiering Danke zu sagen!

Pepe, da hast du rechts, dass muss ich noch ändern...

aber alles dieses durch einandere mit IE, es ist nur bis version 6?

Ich habe version 8, und beim width ist das kein problem, aber das "border groove" erkennt er auch nicht.

Wenn ich das schreibe:
/* IE<8 Only */
es ist dann nur bis version 7,
wie schreibe ich dann version 8 inklusive? Mein versucht: /* IE<9 Only */ hat nicht funktioniert....

Also, nochmal danke!

Olga

[update]

http://reference.sitepoint.com/css/border-style
runterscrollen und staunen

[Jensensen]

ooops, ich meinte Danke Gurm!...nicht grump! ...

zu steil vorgelegt, als dass ich da noch die klappe halten könnte.

WHO DA FU.K IS GURM?
Three years ago GURM would have been a nice feature. It would be also today. But, today, GURM has been forgotten by the most users. It isn't worth opening a new thread or adding a new post to one of the many of the old threads that were written regarding GURM, in the past. GURM has been banished. I think, GURM (group and user role management) never will be available in phpwcms.

Aber, ganz gleich, ob grump, crumpled-grumbler, hump, frump, ganz sicher meintest du damit unseren Freund, Forrest claus.

[update]

[juergen]

He is the so called *** GURMI ***

<!--[if lte IE 6]>claus<![endif]-->">

Tschuldigung, aber ich habe gestern im Kundengespräch verlauten lassen, dass man alle Preise unm 20 % senken kann, wenn man dieses Stück Software aussen vorlässt. Wurde übrigens akzeptiert insbesondere als ich die Google Bemerkung dazu rezitierte. Ich habe jetzt nur noch IE8. Pasta !

Forrest claus, DER IST GUT ! ich leg einen drauf : GURMI Gump !

[update]