• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Prepage -> Grafik Browser- und Fenstergrößenunabhängig zentrieren. Bitte Hilfe

M

mrib

Neues Mitglied
Hi Leute. Ich habe folgendes Problem:

Hab so ne art Prepage für eine Vereinssteite gebastelt. Die Seite besteht lediglich aus einem Hintergrundbild und 3 Schaltflächen die jeweils auf andere Seiten verlinken.
Jetzt besteht das Problem darin, das die 3 Schaltflächen Designmäßig zum hintergrundbild dazu gehören, sprich sie sich bei verschiedenen Browsern und auch bei Fenstergrößenänderung nicht unproportional zum Hintergrundbild verschieben sollen. Das ist nämlich leider der Fall :/ Ausserdem sind die Grafiken je nach Browser und Fenstergröße nicht immer in der Mitte zentriert.

Ich häng mal den Seitenquelltext an, vieleicht hat einer eine Idee.

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SG Anspach 1862 Abteilung Fussball</title>
<style type="text/css">
<!--
#apDiv1 {
	position:relative;
	width:900px;
	height:800px;
	margin-left: auto;
	margin-right: auto;
	z-index:1;
	
}
body {
	background-color: #00529e;
}
#apDiv2 {
	position: absolute;
	height: 100px;
	width: 705px;
	top: 50%;
                left: 50%;
	margin-left: -352.5px;
	z-index:2;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('b1_1.jpg','b2_1.jpg','b3_1.jpg')">
<div id="apDiv1"><img src="main.jpg" width="900" height="800"></div>
<div id="apDiv2"><a href="http://jfcneuanspach.de/" target="_new" onMouseOver="MM_swapImage('Bild2','','b1_1.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="b1_0.jpg" name="Bild2" width="235" height="100" border="0"></a><a href="http://sganspach-fussball.de/" target="_new" onMouseOver="MM_swapImage('Bild3','','b2_1.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="b2_0.jpg" name="Bild3" width="235" height="100" border="0"></a><a href="http://ip-apps.de/" target="_new" onMouseOver="MM_swapImage('Bild4','','b3_1.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="b3_0.jpg" name="Bild4" width="235" height="100" border="0"></a></div>
</body>
</html>
 
vielleicht lässt sich das grafisch ja eleganter lösen...dafür müsste ich das aber mal sehen, um evtl einen vorschlag machen zu können! ;)
 
jo. grafisch lässt sich das leider, durch den rollover nicht eleganter lösen.
du musst die menüleiste einfach horizontal zentrieren und mit margin-top den gewünschten abstand zum oberen rand geben.
da die hintergrundgrafik sich vertikal nicht bewegt, sollte das den gewünschten effekt geben.

ganz nebenbei:
wieso postest du den link nicht im forum?
hier sind noch weit versiertere köpfe angemeldet als ich ;)
die könnten vielleicht ebenfalls oder sogar besser helfen...
 
Space Vampire schrieb:
jo. grafisch lässt sich das leider, durch den rollover nicht eleganter lösen.
du musst die menüleiste einfach horizontal zentrieren und mit margin-top den gewünschten abstand zum oberen rand geben.
da die hintergrundgrafik sich vertikal nicht bewegt, sollte das den gewünschten effekt geben.

ganz nebenbei:
wieso postest du den link nicht im forum?
hier sind noch weit versiertere köpfe angemeldet als ich ;)
die könnten vielleicht ebenfalls oder sogar besser helfen...
Zum Vergrößern anklicken....

Ich habe leider von coden überhaupt kein Plan, bin da eher der Grafiker..
Wäre es ein großer Aufwand den Code oben so anzupassen das es passt?

Ich hatte den Link hier nicht direkt gepostet weil ich keine schleichwerbung machen wollte. Aber wenn es in ordnung ist poste ich natürlich gerne:

SG Anspach 1862 Abteilung Fussball

Vieleicht kann wer helfen.

Danke!
 
Diesen einfachen Effekt mit Javascript zu lösen ist völlig unnötig. Das geht viel einfacher und eleganter mit CSS.
Du erstellst ein sog. Sprite-Image mit allen Grafiken nebeneinander.
(Beispiel: http://s.ytimg.com/yt/img/master-vfl183692.png)
Das Bild weist du den Links als Hintergrundbild zu und verschiebst per :hover die Position.
Da du wahrscheinlich nicht verstehst, was ich meine, bastel ich mal eben was :)
Die drei Links würde ich in eine Liste packen und diese per marign: auto zentrieren.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SG Anspach 1862 Abteilung Fussball</title>
<style type="text/css">
#links {
width: 705px;
height: 100px;
margin: 0 auto;
padding: 0;
}

#links li {
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
}

#links li a {
background: url("http://img440.imageshack.us/img440/1122/spritel.jpg") 0 0 no-repeat;
padding: 0;
margin: 0;
width: 235px;
height: 100px;
text-indent: -999em;
display: block;
}

#links li a.eins {
background-position: 0 0;
}

#links li a.eins:hover {
background-position: 0 -100px;
}

#links li a.zwei {
background-position: -235px 0;
}

#links li a.zwei:hover {
background-position: -235px -100px;
}

#links li a.drei {
background-position: 0 0;
}

#links li a.drei:hover {
background-position: 0 -100px;
}

</style>

<ul id="links">
<li><a href="#" class="eins">Erster Text</a></li>
<li><a href="#" class="zwei">zweiter Text</a></li>
<li><a href="#" class="drei">dritter Text</a></li>
</ul>
</body>
</html>
 
Zuletzt bearbeitet:
kruschimappel schrieb:
Diesen einfachen Effekt mit Javascript zu lösen ist völlig unnötig. Das geht viel einfacher und eleganter mit CSS.
Du erstellst ein sog. Sprite-Image mit allen Grafiken nebeneinander.
(Beispiel: http://s.ytimg.com/yt/img/master-vfl183692.png)
Das Bild weist du den Links als Hintergrundbild zu und verschiebst per :hover die Position.
Da du wahrscheinlich nicht verstehst, was ich meine, bastel ich mal eben was :)
Die drei Links würde ich in eine Liste packen und diese per marign: auto zentrieren.
Zum Vergrößern anklicken....


Hey das wäre super! Im Moment habe ich kein rollover mehr drin. Da paast alles. Aber wäre schon schöner, wenn das effekt noch da wäre.
Brauchst du was an Grafiken um das zu basteln? Das ganze besteht aus einer Hintergrundgrafik und 6 weiteren Grafiken (3 Links mit rollovereffekt) Also insgesamt 7 Grafiken.
 
Habs oben mal eingefügt. Die passende Grafik bekommst du schon selbst gebastelt ;)
Um das Hintergrundbild da noch reinzubringen, packst du die Liste in einen Div-Container, gibst dem Div das Bild als Hintergrund und machst oben ein passendes Padding rein.

HTML: 
#bild {
width: 900px;
min-height: 650px;
margin: 0 auto;
padding: 438px 0 0 0;
background: url("BILD") 0 0no-repeat;
}

<div id="bild">
... Liste mit Links...
</div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben