div wird nicht immer angezeigt? [jQuery]

[ოყlἶlրωղყ]

nAbend.

Ich habe ein kleines Problem und kann mir aber nicht erklaeren, woran es liegen koennte.
Und zwar habe ich eine kleine Placeholderseite gebastelt.
Diese beinhaltet nur ein Bild und ein kleines Impressum.
Beides ist mit jQuery ein wenig aufgehuebscht.
Allerdings wird das Impressum nicht immer angezeigt.

Eventuell hat ja jemand 'ne Idee, woran es liegen koennte?

[]

HTML

<div id="placeholder"><img src="img/wip.png" /></div>
<div id="impressum">
	<p>Andreas CLTrec Grafen<br>
		Dölitzer Stra&szlig;e 45<br>
		04277 Leipzig<br>
		<br>
		+49 163 / 73 12 262<br>
		+49 4341 / 99 03 105<br>
		<br>
		info[at]cltrec.de
	</p>
</div>

CSS

body {
	background: url(img/noise.png) #e7e7e7;
}

p {
	margin: 0px;
	font-family: "mc";
	opacity: 0.1;
	font-size: 10px;
}

img {
	position: absolute;
	top: 40%;
	left: 50%;
	margin-top: -250px;
	margin-left: -350px;
}

#placeholder {
	width:700px;
	height:500px;
	display:none
	background-color:transparent;
}

#impressum {
	position: absolute;
	top:60%;
	left:50%;
	width: 200px;
	margin-left: -100px;
	text-align:center;
	background-color:transparent;
	display: none;
}

@font-face {
	font-family:"mc";
	src:url(font/minecraftia.eot?) format("eot"),
		url(font/minecraftia.woff) format("woff"),
		url(font/minecraftia.ttf) format("truetype"),
		url(font/minecraftia.svg#Minecraftia) format("svg");
		font-weight:normal;font-style:normal;
}

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
	    $("#placeholder").fadeIn(3000);
	});
	
	$(document).ready(function(){
		$("#impressum").slideDown(3000);
	});
	
</script>

~

[xEncounter]

width:700px;
height:500px;
display:none
background-color:transparent;

das SEMICOLON bei display ^^

guck mal obs klappt.

[ოყlἶlրωղყ]

hmm. Nope.
Steht auch eigentlich im Code mit drin - hatte ich wohl i.wie ausversehen geloescht. o:

Danke dennoch!

~

[MrPuschel]

$("#impressum").slideDown(3000); wird bei einem refresh nicht ausgeführt. Pack beide Aufrufe in denselben event handler (ready).

An sich ist es kein Problem mehrere ready handles an ein document zu hängen (in deinem Fall nur unnötig) aber im Zusammenhang mit deinem etwas chaotischem css scheint es Probleme bei gecachten Seiten zu geben.

Wenn du den Seitencache löschst werden beide Animationen ausgeführt.

[ოყlἶlրωղყ]

So chaotich finde ich mein CSS garnicht.. ;D
Normalrweise achte ich da auch mehr aufs sortieren, ist hier allerdings ein sehr kleine Dokument, da wars mir nicht so wichtig.

Ich werde auch mal versuchen, deinem Tipp nachzugehen, weiss allerdings nicht, ob das wirklich was hilft - vorher hatte ich auch shon alles in eine Function gepackt, allerdings mit dem selben Problem. o:

~

Edit: Erfahrung bestaetigt - das Problem tritt leider immernoch auf. :x

[MrPuschel]

Jeder Browser hat einen Element Inspector und einen Javascript debugger. Setz einen Breakpoint bei deinen beiden Funktionsaufrufen und schau dir nach dem Aufruf dein Impressum an, das steht noch auf display:none;

Und keine Ausreden, eine absolute positionierung mit prozentualen Abständen und margins ist schon ziemlich mies Versuchs mal mit einer margin:0 auto;

[ოყlἶlրωղყ]

Mit 'margin: 0px auto;' hab ich es dann ja aber nicht in der Mitte des Browsers.
So sind die Inhalte immer genau in der Mitte des Browsers. Von Links und von Oben - und da ist mir leider noch keine andere Moeglichkeit ueber den Weg gelaufen, das zu ralisieren. o:
Wenn dir da allerdings etwas bewusst ist, dann nehme ich das auch gerne an. n_n

Was genau mir Breakpoints jetzt bringen sollen, habe ich allerdings noch nicht so ganz verstanden. :x
Zumindest bringe ich Breakpoints nur mit responsive Designs in Verbindung - und das verwende ich hier ja garnicht.

[MrPuschel]

Bau die Seite am besten neu.

Der Container placeholder macht in dem Kontext keinen Sinn.
Elternelemente richten sich nicht an ihren Kindern aus. Zentrier den "placeholder". Du kannst ihn auch ganz weglassen und das Bild mit margin:0 auto; mittig ausrichten indem du dem img element ein display:inline-block; oder display:block; zuweist.

Inhalte zentrieren:

Zu Positierung von Elementen:

[ოყlἶlրωղყ]

Ja. Ein bisschen sehr kryptisch ist es schon.
Die Placeholderdiv ist einfach nur zum einfassen des img da. Finde ich persoenlich schoener, als das Bild einfach nur so da rein zu packen. (:

Aber ich denke, ich werde deinen Rat befolgen, und das Ganze morgen einfach nochmal neu schreiben.
Mal schauen ob es dann klappt. n_n

Ansonsten weiss ich auch, wie man Dinge richtig positioniert.
Diese umstaendliche Variante nutze ich halt nur, da ich das Bild und das Impressum wirklich mittig haben moechte - auch auf der xAchse. Und da ist mir keine andere Variante bewusst. o:

[MrPuschel]

Die Placeholderdiv ist einfach nur zum einfassen des img da. Finde ich persoenlich schoener, als das Bild einfach nur so da rein zu packen. (:

Ansonsten weiss ich auch, wie man Dinge richtig positioniert.

Weist du nicht. Sonst hättest du es nicht gemacht.
Ich meins nicht böse aber wenn du dir nicht selbst eingestehst das du noch sehr viel zu lernen hast wirst du a) nicht besser und b) nicht gerade thumbs up für deine Tutorial Reihe bekommen

Google mal "Box Model", "Inline und Block Elemente" und "Floating".

[ოყlἶlրωղყ]

Ich habe 3 Jahre fachliche Ausbildung in dem Bereich. Also denke ich schon, dass ich behaupten kann, dass ich es kann.
Ich behaupte ja nicht, dass ich der ganz grosse Pro bin - wuerde ich niemals - aber ich denke schon, dass ich Ahnung von dem habe, was ich tue. o:
Allerdings laesst sich der von mir gewuenschte Effekt nicht anders erreichen.
Deswegen - und aus keinem anderen Grund - diese sehr verschachtelte Positionierungsgeschichte. n_n

Ich danke dir auf jeden Fal fuer deine Hilfsbereitschaft.
Ich schau mal, ob sich das Problem durch eine Neuaufsetzung beheben laesst. :3

[kissein]

Bevor/nachdem das Img via jquery in sichtbereich gebracht werden soll /wird, einfach display:none aufheben und einblenden ?

btw: 3 jahre däumchen gedreht und energiewende unterstützt?

[ოყlἶlրωղყ]

Manchmal schon - aber das war eher die Ausnahme. :b

In wiefern mir dein Beitrag jetzt helfen soll, habe ich allerdings nicht verstanden. Dass die display:none;Definierung durch das Einblenden via jQuery aufgehoben wird ist mir bewusst.
Es scheint ja auch zu funktionieren - das Problem ist halt nur, dass es nicht immer funktioniert. Manchmal wird es eingeblendet und manchmal nicht, und das auch komplett ohne irgendein erkennbares System.

~

[kissein]

Was sagt in so einem Fehlerfall die Entwicklerconsole des jeweiligen Browsers ?

Btw wenn die seite öffentlich ist poste bitte mal einen link. damit könnte man etwaige vorgängerfehler sehen. kann auch sein das dies nur ein folgefehler ist

[ოყlἶlրωղყ]

Klar. Link gibts auch direkt im ersten Post. (: