Antworten auf deine Fragen:
Neues Thema erstellen

Mittig positionieren?

hOOpZZ

hOOpZZ

Break The Hype

Hallo Leute,

ich habe folgendes Problem:
Ich habe auf meiner Page im <body> ein Hintergrundbild hinterlegt.
Nun möchte ich im Vordergrund ein Bild mit Hovereffekt platzieren.
Dieses Bild habe ich auch mit Hovereffekt erzeugen können, allerdings klebt es oben links in der Ecke. Von oben habe ich es leicht wegbekommen (top:xxx) aber von links möchte ich es gerne erst einmal in die Mitte bekommen, um es dann von da nach links oder rechts zu verschieben. Ich dachte mir kein Problem, Left:50% sollte das regeln (damit funktionierte es sonst immer), aber dem war nicht so. Ich habe schon alles mögliche durchprobiert aber es klebt wie ein Magnet am linken Rand.

Hat jemand für mich eine Lösung wie ich dieses Bild von der Mitte aus positionieren kann?

schonmal vielen Dank
Stefan :)
 

SteffenHH

SteffenHH

Steve Salvador

AW: Mittig positionieren?

soweit ich weiß müsste das hier klappen:
Code: 
<div align="center"><img src="bild.gif" [COLOR=SeaGreen]width="123" height="123"[/COLOR]></div>
wobei ich glaube du kannst das grüne weg lassen, ist halt was stichfestes (manuelles)
ansonsten müsste das align="center" ausreichen :)

Muchos saludos
Steve
 
hOOpZZ

hOOpZZ

Break The Hype

AW: Mittig positionieren?

align:center blieb leider wirkungslos :(

das is der code:
Code: 
<div class="enter">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('enter','','prepagespeechbubblered.png',1)"><img src="prepagespeechbubbleyellow.png" alt="enter page" name="enter" width="138" height="108" border="0" id="enter" /></a>
</div>

und das der stylesheet:
Code: 
.enter {
	position:absolute;
	width:138px;
	height:108px;
	top:536px;
	left: 50%;
	z-index: 1;
}
 
hOOpZZ

hOOpZZ

Break The Hype

AW: Mittig positionieren?

ich frage mich sowieso warum Left:50% nicht funktioniert. das ist mein Hauptproblem. wenn das ginge wär ja alles gut.
 
F

Fritschie

Noch nicht viel geschrieben

AW: Mittig positionieren?

Da ist bestimmt eine Abhängigkeit drin, aber um das herauszufinden müsste man den kompletten code sehen nicht nur vom Bild was in die Mitte soll
 
hOOpZZ

hOOpZZ

Break The Hype

AW: Mittig positionieren?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
	background-image: url(prepage.jpg);
	background-color: #FFF;
	background-repeat: no-repeat;
	position: absolute;
	background-position: center top;
}
.enter {
	position:absolute;
	width:138px;
	height:108px;
	top:536px;
	left: 50%;
	z-index: 1;
}
</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>
<embed src="prepagemusic.mp3" loop=true autostart=true hidden=false>
</head>
<body onload="MM_preloadImages('prepagespeechbubblered.png')">
<div class="enter">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('enter','','prepagespeechbubblered.png',1)"><img src="prepagespeechbubbleyellow.png" alt="enter page" name="enter" width="138" height="108" border="0" id="enter" /></a>
</div>
</body>
</html>
 
S

Samuelll

Aktives Mitglied

AW: Mittig positionieren?

Klassischer Weg :


body {text-align : center;}

.zuZentrierendeDivBox {text-align: left; margin : 0 auto;}


Fertig !
 
hOOpZZ

hOOpZZ

Break The Hype

AW: Mittig positionieren?

erstmal danke samuell,

aber nachdem ich den code um deine angaben ergänzt habe, hat sich nichts geregt. ich steh aufm schlauch, muss ich da noch was editieren?
 
S

Samuelll

Aktives Mitglied

AW: Mittig positionieren?

Trag mal nur das ein und nimm erstmal alles andere weg.

Das wird für eine Mittenzentrierung sorgen.
Danach kannste schauen welche der alten Formatierungen du noch brauchst, bzw. willst !
 
hOOpZZ

hOOpZZ

Break The Hype

AW: Mittig positionieren?

So sieht der Code jetzt bei mir aus, meinst du das auch so?
Denn so Funktioniert es leider nicht. Klebt immernoch links :(

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
	background-image: url(prepage.jpg);
	background-color: #FFF;
	background-repeat: no-repeat;
	position: absolute;
	background-position: center top;
	text-align:center;
}
.enter {
	text-align: left;
	margin : 0 auto;
}
</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>
<embed src="prepagemusic.mp3" loop=true autostart=true hidden=false>
</head>
<body onload="MM_preloadImages('prepagespeechbubblered.png')">
<div class="enter">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('enter','','prepagespeechbubblered.png',1)"><img src="prepagespeechbubbleyellow.png" alt="enter page" name="enter" width="138" height="108" border="0" id="enter" /></a>
</div>
</body>
</html>
 
CayZ

CayZ

Pixel Slider

AW: Mittig positionieren?

Der hover effect per script ist doch etwas veraltet.
Mach es doch per css-sprites. Das lässt sich auch mega einfach postionieren.
Ich finde es die bessere Lösung per css.
Einfach den normalen Effekt und den Hover Effekt in eine Bilddatei. Und in der css Datei arbeitest du dann einfach mit den Bild Koordinaten und zack hast du ein einfachen Hover effekt der sich schnell laden lässt....
 
hOOpZZ

hOOpZZ

Break The Hype

AW: Mittig positionieren?

Meinst du so? Jetzt klebt alles an der linken Seite :(

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
	background-image: url(prepage.jpg);
	background-color: #FFF;
	background-repeat: no-repeat;
	text-align:center;
}
.enter {
	text-align: left;
	margin : 0 auto;
}
</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>
<embed src="prepagemusic.mp3" loop=true autostart=true hidden=false>
</head>
<body onload="MM_preloadImages('prepagespeechbubblered.png')">
<div class="enter">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('enter','','prepagespeechbubblered.png',1)"><img src="prepagespeechbubbleyellow.png" alt="enter page" name="enter" width="138" height="108" border="0" id="enter" /></a>
</div>
</body>
</html>
 
CayZ

CayZ

Pixel Slider

AW: Mittig positionieren?

Nur mal so nebenbei?!
Bin ich flasch informiert?! Aber css-sprites wären doch hier die bessere Lösung gewesen,oder?
 
Gegenstrom

Gegenstrom

Aktives Mitglied

AW: Mittig positionieren?

HTML: 
body {
background-image: url(circus.jpg); <-- dein bildname natürlich
background-color: #FFF;
background-repeat: no-repeat;
background-position: center top;
}
.enter {
position:relative;
width:138px; <--größe deines bildes
margin:auto;
eventuell sogar noch nen text-align:center; für das "press enter"
}
sollte soweit funzen, und die idee mit den css-sprites solltest du dir mal überlegen
hover effekt mit javascript kommt mir sehr nach dreamweavervorlage vor :p
 
hOOpZZ

hOOpZZ

Break The Hype

AW: Mittig positionieren?

so sorry jungs, aber ihr seit ja sogar zu schnell für mich haha :D
ich freu mich für die großartige hilfe.
ich hab mir das mit den css-sprites zu herzen genommen und die eingebaut.

CSS-Sprites:
Code: 
}
.enterpage {
	position: absolute;
	top: 275px;
	_top: 275px;
	width: 138px;
	height: 108px;
	margin-left: 210px;
	left:0%;
}

.enterpage a {
	background-color: transparent;
	background-position: bottom;
	background-repeat: no-repeat;
	display: inline;
	float: left;
	height: 108px;
}
.enterpage a:hover {
background-position: top;
}
.enterpage1 {
		background-image:url(prepagespeechbubble.png);
		width:138px;
		height:108px;

Der Hovereffekt funktioniert so auch wieder, und mit Left:50% bewirke ich nun auch was, aber wenn ich die Prozentzahl von 0%-100% verschiebe bewegt sich der Button nur von ca. 1/5 -2/5 des bildschirms. Also ist 50% auch nicht die Mitte sondern eher 2/5 (2,5/5 = Mitte).
Ich weiß, es könnte daran liegen das die Ebene darüber in diesem Bereich liegt, aber es liegt ja nur der Body drüber und der ist dort nicht, oder sowieso auf dem ganzen Bildschirm.
hm... :(
 
Gegenstrom

Gegenstrom

Aktives Mitglied

AW: Mittig positionieren?

mal so ne andere frage, du hast nen backgroundimage im body, du willst nen enter-page in der mitte positionieren was aus einem bild-hover besteht?
also backgroundimage mittig, und enter-page-bildwechsel ebenfalls mittig ausgerichtet?
 
S

Samuelll

Aktives Mitglied

AW: Mittig positionieren?

Die Kombination die ich Dir geschrieben habe mit Text-align und Margin : auto in Kombination mit einer Breite für .enter würd das lösen !
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 38 (Mitglieder: 1, Gäste: 37)
Robots: 850

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben