Gegen Bilderklau - Das Original | Druckvorschau: Design zentrieren ohne Iframe

Geschrieben von -blue- am 13.03.2009 um 14:45:

Design zentrieren ohne Iframe

Hallo,
ich versuche jetzt schon länger, das Design meiner Homepage zu zentrieren, ohne das die frames verrutschen, aber bekomme es nicht hin. Wie es geht, mit Tabelle und Iframe oder so hab ich schon gesehen, aber das ist unpraktisch weil sich das iframe ja nicht automatisch verlängert, wenn das Design mal länger ist.
Aber es muss doch auch irgendwie ohne Iframe gehen, oder?
Lg Fallen_Angel

Geschrieben von -blue- am 13.03.2009 um 20:58:

hab ich mich mal wieder nicht verständlich ausgedrückt ^^
Also, ich will mein layout, design, wie auch immer, zentrieren, ohne dass die frames sich verschieben. weil wenn ich das mache, dann ist das design schon mittig, nur eben der text nicht, der ist da wo er vorher auch war

Geschrieben von -blue- am 14.03.2009 um 10:21:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:

<!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 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>espoir - Meine Fotoseite</title>
  <script type="text/javascript" src="js/prototype.js"></script>
  <script type="text/javascript"
 src="js/scriptaculous.js?load=effects,builder"></script>
  <script type="text/javascript" src="js/lightbox.js"></script>
  <link rel="stylesheet" href="css/lightbox.css"
 type="text/css" media="screen" />
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(http://espoir.es.funpic.de/back.jpg);"
 alink="#333333" link="#000000" vlink="#000000">
<br />
<br />
<img style="position: absolute; left: 0px; top: 0px;"
 src="http://espoir.es.funpic.de/design003__.jpg" border="0" />
<div
 style="position: absolute; left: 378px; top: 261px; width: 416px; font-family: Arial; font-style: italic;"><small>Welcome
=) <br />
testtesttesttesttest
<br />
<a href="http://espoir.es.funpic.de/aus1.jpg"
 rel="lightbox[start]">klick</a>
<a href="http://espoir.es.funpic.de/aus2.jpg"
 rel="lightbox[start]">hier</a>
</small></div>
</body>
</html>

Geschrieben von -blue- am 14.03.2009 um 21:17:

dankeschön *ganze keksschachtel rüberschieb*

edit: noch ne frage, wo kommt da jetzt das usemap="#name der imagemap" hin, wenn man ne imagemap haben will?

Geschrieben von -blue- am 17.03.2009 um 16:33:

*hochschubbs*

Geschrieben von victor am 17.03.2009 um 19:52:

Einfach als Attribut in den img-Tag des Bilder, das du mappen willst. ^^

Geschrieben von -blue- am 18.03.2009 um 13:30:

aber da ist ja jetzt keiner mehr, oder?

Geschrieben von -blue- am 22.03.2009 um 15:28:

Ich habs so:

code:

1:
2:
3:
4:

<div
 style="margin: auto; background: transparent url(http://espoir.es.funpic.de/espoir/Design-Home.jpg) no-repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; position: relative; width: 930px; height: 680px;"
 usemap="#imagemap">

Aber so klappts nicht unglücklich

Geschrieben von victor am 24.03.2009 um 00:30:

Ah, sorry, hab nicht aufgepasst - du hast das gar nicht via img-Tag eingebunden. Das klappt nicht. Imagemaps funktionieren nicht mit CSS-Background-Images. Ich finde aber das Bild aus deinem letzten Codeschnipsel aber auch nicht in deinem Listing. Deshalb weiß ich nicht genau, was du vor hast und kann dir nicht viel raten Augenzwinkern

Geschrieben von -blue- am 24.03.2009 um 17:43:

Zitat:

Original von victor
Ah, sorry, hab nicht aufgepasst - du hast das gar nicht via img-Tag eingebunden. Das klappt nicht. Imagemaps funktionieren nicht mit CSS-Background-Images. Ich finde aber das Bild aus deinem letzten Codeschnipsel aber auch nicht in deinem Listing. Deshalb weiß ich nicht genau, was du vor hast und kann dir nicht viel raten Augenzwinkern

mein Listing? kp was das ist ^^ aber egal .. gibts denn noch ne andere Möglichkeit, das Design zu zentrieren, ohne dass die Frames verrutschen und mit einer Imagemap?

Geschrieben von victor am 25.03.2009 um 23:32:

Listing ist einfach nur der komplette Code, so in der Übersicht. Also das, was du vorher gepostet hast. ^^ Schreib einfach mal deine aktuelle Version...

PS: wie du zentrierst, hängt ja vor allem von deiner Positionierungsart ab. Also bei absoluter Positionierung geht das ganz anders als bei statischer. Stichwort wäre text-align: center im CSS.

Geschrieben von -blue- am 26.03.2009 um 14:12:

Also erstmal, danke für eure Bemühungen, mir zu helfen.
Ich hab jetzt mal das eingefügt, was Mordred gesagt hat, aber so ist die Imagemap immer noch nicht da ...
also hier mal mein ganzer Code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:

<!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 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>espoir - Meine Fotoseite</title>
  <script type="text/javascript" src="js/prototype.js"></script>
  <script type="text/javascript"
 src="js/scriptaculous.js?load=effects,builder"></script>
  <script type="text/javascript" src="js/lightbox.js"></script>
  <link rel="stylesheet" href="css/lightbox.css"
 type="text/css" media="screen" />
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
 alink="#333333" link="#000000" vlink="#000000">
<div
 style="margin: auto; position: relative; width: 930px; height: 680px;">
<img src="http://espoir.es.funpic.de/espoir/Design-Home.jpg"
 usemape="#imagemap" />
<div
 style="font-family: Arial; font-style: italic; width: 448px; left: 321px; top: 178px; position: absolute;"><small>Welcome
=) <br />
testtesttesttesttest
<br />
<a href="http://espoir.es.funpic.de/espoir/aus1.jpg"
 rel="lightbox[start]">klick</a>
<a href="http://espoir.es.funpic.de/espoir/aus2.jpg"
 rel="lightbox[start]">hier</a>
</small></div>
</div>
<map name="imagemap">
<area shape="rect" coords="840,140,897,165"
 href="http://espoir.es.funpic.de" />
<area shape="rect" coords="832,189,897,212"
 href="http://espoir.es.funpic.de/espoir/galerie.html" />
</map>
</body>
</html>