Hilfe: Twenty Ten und Skygrabber (Banner) rechts

Paxi

Hilfe: Twenty Ten und Skyscraper (Banner) rechts

Hallo,

ich bin seit einiger Zeit dabei einen Skyscraper (Banner) auf der rechten Seite, außerhalb des Themes (Twenty Ten) zu positionieren. Das hat soweit funktioniert mit einem DIV-Container und den dazugehörigen CSS-Angaben.

Das Problem was jetzt bei Twenty Ten besteht ist, dass sich der Banner verschiebt wenn das Browserfenster kleiner wird. - Ich möchte es jedoch so hin bekommen das er immer an der gleichen Stelle bleibt.

Ich würde mich sehr über Eure Hilfe freuen! :-)

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

scotti

Kann man die Seite online sehen?
Wo hast du den DIV-Container genau positioniert?

Beispiel:
Der DIV-Container für den Banner wird nach dem wrapper aufgerufen

Code

<div id="wrapper">
<div id="banner">
...
</div>

Für den wrapper wird in der css position:relative eingefügt. und der Banner mit position:absolute; definiert.

Code

#wrapper {
position:relative;
...


#banner {
position:absolute;
top:250px;
left:1000px;
width:..px;
height:..px;
}

Alles anzeigen

Paxi

Cool, Danke! :-)

Das hat funktioniert, der springende Punkt war das, noch nicht vorhandene, "position:relative;" im "#wrapper"-Bereich.

Jetzt ist es so wie ich es wollte, jedoch tut sich dabei ein 2. Problem auf, ich habe für Weihnachten ein Schneeflockenscript verbaut, damit es innerhalb des Headerbildes schneit. - Durch die Änderung im Wrapper zu der Position relativ sind die Schneeflocken jetzt zu weit nach links und nach oben gerutsch, sodass sie in der linken oberen Ecke hängen.

Das ist der Headerbildcode:

PHP

<div id="winter"><img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /></div>

... und dass ist das Schneeflockenscript:

PHP

var snow_area_id = 'winter';


var snow_flake_count = 50;


var snow_colors = new Array('#AAAACC','#DDDDFF','#CCCCDD','#F3F3F3','#F0FFFF');


var snow_fonts  = new Array('Arial Black', 'Arial Narrow', 'Times', 'Comic Sans MS');


var snow_char = '*';
var snow_gravity = 0.8;
var snow_max_size = 22;
var snow_min_size = 10;


var snow_init_delay = 50;




var snow_init_time = 0;
var snowflakes = new Array();
var snow_area_el = null;


function createSnowflakes()
{
	var style = 'position:absolute; top:-' + snow_max_size + 'px; z-index:99;';
	for (var i = 0; i <= snow_flake_count; i++)
		document.write('<sp' + 'an id="snwflk' + i + '" style="' + style + '">' + snow_char + '</sp' + 'an>');
}


function randInt(range) { return Math.floor(Math.random() * range); }


function initSnow()
{	
	snow_area_el = document.getElementById(snow_area_id);
	
	if(!snow_area_el || snow_area_el.offsetWidth <= snow_max_size || snow_area_el.offsetHeight <= snow_max_size) {
		if(snow_init_time < 5000)
			window.setTimeout('initSnow()', 50);
			
		snow_init_time += 50;
		return;
	}
	
	snow_area_el.style.position = 'relative';	
			
	for (var i = 0; i <= snow_flake_count; i++)
	{	
		snowflakes[i] = document.getElementById('snwflk' + i);
		
		snowflakes[i].size = (randInt(snow_max_size - snow_min_size) + snow_min_size);		
		snowflakes[i].posx = -snowflakes[i].size;
		snowflakes[i].posy = -snowflakes[i].size;
		snowflakes[i].sink = (snow_gravity * snowflakes[i].size / snow_min_size);
		snowflakes[i].wobamp = (Math.random() * (snowflakes[i].size));
		snowflakes[i].wob = 0.0;
		snowflakes[i].wobspeed = (0.03 + Math.random() / 10.0);
		
		snowflakes[i].style.fontFamily = snow_fonts[randInt(snow_fonts.length)];
		snowflakes[i].style.fontSize = snowflakes[i].size + 'px';
		snowflakes[i].style.color = snow_colors[randInt(snow_colors.length)];
	}
	
	window.setInterval('updateSnow()', 50);
}


function updateSnow()
{
	var bl = snow_area_el.offsetLeft;
	var bt = snow_area_el.offsetTop;
	var bw = snow_area_el.offsetWidth;
	var bh = snow_area_el.offsetHeight;	
	var br = bl + bw;	
	var bb = bt + bh;	
		
	for (var i = 0; i <= snow_flake_count; i++)
	{
		snowflakes[i].wob += snowflakes[i].wobspeed;
		var x = snowflakes[i].posx + (snowflakes[i].wobamp * Math.sin(snowflakes[i].wob));		
		snowflakes[i].posy += snowflakes[i].sink;
		
		snowflakes[i].style.left = Math.round(x) + 'px';
		snowflakes[i].style.top = Math.round(snowflakes[i].posy) + 'px';
		
		var s = snowflakes[i].size;		
		if (snowflakes[i].posy > (bb - s) || x < bl || x  > (br - s))
		{
			snowflakes[i].posx = bl + s + randInt(bw - (3 * s));
			
			if(snowflakes[i].posy < 0)
				snowflakes[i].posy = bt + randInt(bh - 2 * s);
			else
				snowflakes[i].posy = bt;
		}
	}
}


createSnowflakes();
window.setTimeout('initSnow()', Math.max(50, snow_init_delay));

Alles anzeigen

Würde mich dessbezüglich nochmal sehr über Hilfe freuen, habe es bereits schon selbst probiert, aber das scheint wieder genau so ein ähnlicher Fall für mich zu sein wie das Problem gerade zuvor...

Die Seite ist derzeit leider noch offline, bastle sie über meinen Test-Server zusammen.

Paxi

@Moderatoren

Mir ist aufgefallen das sich der Thread-Titel bei der Thread-Übersicht nicht mit aktualisiert hat, ich habe mich bei dem Wort "Skyscraper" verschrieben gehabt. - Es wäre nett wenn ein Moderator dies bitte in der Thread-Übersicht korrigieren könnte, denn ich kann diesen leider nicht mehr editieren.

Ich denke, dass einige vielleicht auch diese Frage hier haben werden und da sollte es fehlerfrei über eine Suchmaschine zu finden sein. ;)

Paxi

Mmmm... weis keiner einen Rat auf mein Problem mit dem Script? :-(

Ich probiere schon die ganze Zeit herum und komme einfach nicht auf eine Lösung, mittlerweile probiere ich schon Dinge die total Sinnlos sind... :mrgreen:

Sollte jemand etwas wissen, auch wenn es nur ein Versuchen ist, dann bitte her damit! - Jeder Anhaltspunkt ist mir wichtig. ;-)

scotti

In der style.css hinzufügen:

Code

#winter {
postition:relative;
...

Paxi

Das habe ich auch schon versucht, jedoch ändert sich dabei leider nichts, das Ergebnis ist das gleiche wie vorher...

scotti

Ein DIV um das Headerbild:

PHP

[COLOR=#000000]<div id="winter-out">
[/COLOR][COLOR=#000000]<div id="winter"><img src="[COLOR=#0000bb]<?php header_image[/COLOR][COLOR=#007700](); [/COLOR][COLOR=#0000bb]?>[/COLOR]" width="[COLOR=#0000bb]<?php [/COLOR][COLOR=#007700]echo [/COLOR][COLOR=#0000bb]HEADER_IMAGE_WIDTH[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000bb]?>[/COLOR]" height="[COLOR=#0000bb]<?php [/COLOR][COLOR=#007700]echo [/COLOR][COLOR=#0000bb]HEADER_IMAGE_HEIGHT[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#0000bb]?>[/COLOR]" alt="" /></div>
[/COLOR][COLOR=#000000]</div>[/COLOR]

style.css

Code

#winter-out {
position:relative;
}

Paxi

Das habe ich jetzt mal versucht, leider bringt das auch nicht das erhoffte Ergebnis, der Unterschied bei diesem Versuch ist, dass der Schnee jetzt komplett oben links in der Ecke ist. - Vorher war er etwas weiter unten von ganz oben und etwas weiter rechts von ganz links... OMG! - Hoffe das versteht jemand. :D

Mir ist noch eingefallen das ich damals in der CSS etwas ändern musste damit der den Schnee überhaupt angezeigt wurde, so sieht jetzt das CSS vom Headerimage aus:

Code

/* This is the custom header image */
#branding img {
	border-top: 4px solid #000;
	border-bottom: 1px solid #000;
	clear: both;
	display: block;
}

Zum Vergleich, so sah der Code vorher, im Original, aus:

Code

/* This is the custom header image */
#branding img {
	border-top: 4px solid #000;
	border-bottom: 1px solid #000;
	display: block;
	float: left;
}

Diese Schwierigkeit macht mir wirklich sehr zu schaffen, mir lässt das aber auch keine Ruhe... *"totprobier"* :-(

scotti

Hast Du position:relative schon im #branding img in der CSS versucht?
Wenn es nicht zum gewünschten Erfolg führt, die Eintragungen in der CSS wieder entfernen nicht vergessen.

Ich weis ja nicht wie die PHP-Datei und die CSS aufgebaut ist.
Da kann man nur schätzen.

Paxi

Zitat von scotti

Hast Du position:relative schon im #branding img in der CSS versucht?

Das habe ich noch nicht versucht, habe es jedoch jetzt getestet und leider weiterhin kein Erfolg erzielt. - Das Ergebnis war hierbei absolut keine Veränderung, sowohl nur bei Änderung dieses einen Wertes bzw. hinzufügen, als auch in Kombination mit allen vorhergehenden Versuchen in diesem Thread.

Zitat von scotti

Wenn es nicht zum gewünschten Erfolg führt, die Eintragungen in der CSS wieder entfernen nicht vergessen.

Jap, habe ich gemacht. - Ich mache immer alles rückgängig wenn es keinen Erfolg erbracht hat, damit man später auch noch durchsieht... ;)

Zitat von scotti

Ich weis ja nicht wie die PHP-Datei und die CSS aufgebaut ist.
Da kann man nur schätzen.

Es basiert alles auf dem Theme "Twenty Ten" vom WordPress-Team. - Hier kann man das Theme downloaden bzw. den Code anschauen, verändert wurde eigentlich nur das was in diesem Thread erwähnt wurde im Bezug auf dieses Problem. Habe ansonsten (bis jetzt) keine weiteren, großen Strukturänderungen vorgenommen...

Paxi

[Abwesenheit]

Ich möchte hier nur kurz vermerken das ich die kommende Woche (vom 18.04.2011 bis 24.04.2011) nicht so oft online sein kann.

Es kann unter Umständen passieren das ich erst ab Freitag/ Samstag wieder hier hinein schauen kann.

Ich teile dies hier mit, weil ich noch an der Lösung dran bin und es noch nicht aufgegeben habe (und der Thread hier nicht ausversehen geclosed wird). - Sobald wieder Zeit ist werde ich weiter probieren und bei Erfolg die Lösung hier posten bzw. die Lösungen die bis dahin hier hinein geschrieben wurden abarbeiten und einen Bericht hinterlassen...

Von daher, bis später... ;)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hilfe: Twenty Ten und Skygrabber (Banner) rechts

Jetzt mitmachen!