Fighting Faith
19.10.2012, 00:49
Moin, ich habe folgendes Problem, welches ich auch nach 3 Stunden Google nicht lösen konnte. :/
Ich habe eine HP, die mittig ausgerichtet ist. Der Body ist 1000 Pixel breit. Links/rechts von diesem Body möchte ich 2 Dekografiken anbringen, die aber zeitgleich auf über dem Body liegen - funktioniert auch alles soweit, nun das Problem:
Ich habe die Grafiken zentriert und dafür musste ich nen width 100% angeben, wenn ich nun aber die Grafik sagen wir mal um 300px nach rechts verschiebe erweitert sich meine gesamte HP um 300px leeren Raum nach rechts, was ich natürlich nicht will.... Der Code is bei mir momentan folgender:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
body,html { margin:0; padding:0; border:0; width:100%; height:100%; font-family: 'serif'; font-size:12pt }
#deco-border_l { background-position: left; background-image:url("images/border_ha.png"); background-repeat: repeat-y; margin-left:-2px }
#deco-border_r { background-position: right; background-image:url("images/border_ha.png"); background-repeat: repeat-y; margin-right:-1px }
#deco-left { width:100%; text-align:center; position:absolute; right:570px; margin-top:235px }
#deco-right { width:100%; text-align:center; position:absolute; left:570px; margin-top:235px }
#deco-botleft { width:100%; text-align:center; position:absolute; right:470px; margin-top:-92px }
#deco-botright { width:100%; text-align:center; position:absolute; left:470px; margin-top:-92px }
#header { width:100%; height:245px; overflow:auto; overflow:hidden; text-align:center }
#nav { width:1000px; height:28px; margin:auto; text-align:center; background-repeat:no-repeat; background-position:center }
#main { width:1000px; min-height: 100%; height:auto !important; height:100%; overflow:hidden !important; margin:auto}
#intro { margin-left:20px; margin-right:20px; margin-top:20px }
#features { margin-left:65px; margin-right:40px; width:40%; float:left }
#system { margin-left:20px; margin-right:65px; width:40%; float:right }
#nomargin { margin-left:8px; padding-left:8px }
#nodots { list-style-type: none }
#img_cover { width:294px; height:417px; margin-top:20px; margin-left:20px; margin-right:20px; float:left }
#img_screen1 { width:275px; height:210px; margin:13px; margin-bottom:20px }
#img_screen2 { width:275px; height:210px; margin:13px; margin-bottom:20px }
#img_screen3 { width:275px; height:210px; margin:13px; margin-bottom:20px }
#buy { width:281px; height:88px; margin-top:15px; margin-bottom:30px; position:relative; z-index:1 }
a:link { text-decoration: none }
.link_sd { background-image:url("images/nav_sd.png"); display:inline-block; height: 19px; width: 135px; background-repeat:no-repeat; margin-top:5px; z-index:1; position:relative }
.link_sd:hover { background-image:url("images/nav_sd_o.png") }
.link_gt { background-image:url("images/nav_gt.png"); display:inline-block; height: 19px; width: 167px; background-repeat:no-repeat; margin-top:5px; margin-left:35px; z-index:1; position:relative }
.link_gt:hover { background-image:url("images/nav_gt_o.png") }
.link_gt2 { background-image:url("images/nav_gt2.png"); display:inline-block; height: 19px; width: 243px; background-repeat:no-repeat; margin-top:5px; margin-left:35px; z-index:1; position:relative }
.link_gt2:hover { background-image:url("images/nav_gt2_o.png") }
.link_ha { background-image:url("images/nav_ha.png"); display:inline-block; height: 19px; width: 199px; background-repeat:no-repeat; margin-top:5px; margin-left:35px; z-index:1; position:relative }
.link_ha:hover { background-image:url("images/nav_ha_o.png") }
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Holy Avatar vs Maidens of the Dead</title>
</head>
<body style="background-image:url(bg_motd_deco.jpg)">
<div id="deco-left"><img src="images/deco_ha_left.png" alt="Wunderbare Dekoration" width="209px" height="215px"></div>
<div id="deco-right"><img src="images/deco_ha_right.png" alt="Wunderbare Dekoration" width="209px" height="215px"></div>
<div id="header"><img src="header_motd.jpg" alt="header_modt"></div>
<div id="nav" style="background-image:url(images/navbar_ha.png)">
<a class="link_sd" href="sd.html"></a>
<a class="link_gt" href="gt.html"></a>
<a class="link_gt2" href="gt2.html"></a>
<a class="link_ha" href="havsmotd.html"></a>
</div>
<div id="main" style="background-image:url(bg_motd.jpg)">
<img id="img_cover" src="images/cover_ha.jpg" alt="Cover">
<div id="deco-border_l"><div>
<div id="deco-border_r"><div>
<div id="intro">
<img src="images/product.png" width="205px" height="22px" alt="Produktbeschreibung">
<p>In Holy Avatar vs. Maidens of the Dead, dem brandneuen Spin-Off des erfolgreichen Grotesque-Universums, erleben Sie eine spannende und ironische Rollenspiel-Parodie auf einer vermeintlich idyllischen Karibikinsel, die plötzlich von einer Armee untoter Jungfrauen heimgesucht wird. Als Halbgott Holy Avatar liegt es nun an Ihnen, die Quelle der Zombieseuche ausfindig zu machen und wieder für Ruhe und Ordnung zu sorgen. Eine morbide aber dennoch witzige Story mit zahlreichen Seitenhieben auf bekannte Filme und Videospiele erwartet Sie. Das strategische Kampfsystem mit epischen Bosskämpfen, gepaart mit einem komplett neu designten, einzigartigem Grafikstil im karibischen Setting werden Sie für viele Stunden in ihren Bann ziehen.</p>
<p>Halbgott Holy Avatar und seine Jungfrauengilde besuchen die von Holy Avatar gekaufte Urlaubsinsel „Holy Island“. Auf seiner Urlaubsinsel soll er sich nach zahlreichen Kämpfen endlich mal entspannen, auch wenn der Avatar das gar nicht gerne hört, da es ihn stets nach neuen Abenteuern dürstet. Nach einer etwas unsanften Ankunft am Strand machen sie gleich darauf jedoch eine grauenhafte Entdeckung: Zahlreiche tote Jungfrauen, auf das Übelste zugerichtet, säumen den Pfad ins Inselinnere. Die Jungfrauengilde befürchtet, dass im Jungfrauencamp auf der Insel etwas Schreckliches passiert ist. Holy Avatar, insgeheim erfreut über diese Wendung, macht sich daraufhin mit einem Teil seiner Gruppe auf den Weg ins Inselinnere, um der Sache auf den Grund zu gehen. Nichtahnend, welches Ausmaß die Katastrophe bereits angenommen hat und welche Gefahren in den dichten Wäldern und Höhlen auf ihn und seine Gefolgschaft lauern.</p>
<p>Unterwegs begegnen Sie noch weiteren Überlebenden, die sich Ihrer Gruppe anschließen. In Holy Avatar vs. Maidens of the Dead kontrollieren Sie mehrere Partymitglieder mit unterschiedlichen taktischen Ausrichtungen und Fertigkeiten gleichzeitig. Jedes Mitglied Ihrer Gruppe verfügt über einen eigenen Talentbaum, in dem Sie nach jedem Levelaufstieg die Fähigkeiten nach Ihren Vorlieben verbessern können. Übernehmen Sie spannende und amüsante Aufgaben, um Ihren Ruf zu steigern und bessere Ausrüstungsgegenstände zu erhalten. Nur so werden Sie auf Ihrer Reise ins Unbekannte gegen immer mächtigere Gegner bestehen können – angefangen von den niedlichen, aber tödlichen Schnuckis über Heerscharen blutrünstiger Zombies bis hin zu riesigen Skelettkriegern und noch weit gefährlicheren Gegnern. Doch dank der drei unterschiedlichen Schwierigkeitsgrade sorgt Holy Avatar vs. Maidens of the Dead dafür, dass auch Gelegenheitsspieler viel Freude an dem Spiel haben werden.</p>
</div>
<br style="clear:left"/>
<div id="features" style="display:block">
<img src="images/features.png" width="85px" height="22px" alt="Features">
<ul id="nomargin">
<li>Packende Rundenkämpfe mit abwechslungsreichen Quests</li>
<li>Ironische und spannende Story mit zahlreichen Seitenhieben auf bekannte Filme und Computerspiele</li>
<li>Für Anfänger und Profis gleichermaßen geeignet</li>
<li>Charakterentwicklung durch Talentbäume</li>
<li>Bunter, comicartiger Grafikstil und Soundtrack mit karibischem Flair</li>
<li>Zombies!</li>
</ul>
</div>
<div id="system" align="right">
<img src="images/system.png" width="216px" height="22px" alt="Systemanforderungen">
<ul id="nodots">
<li>Betriebssystem: Windows XP, Vista, 7 </li>
<li>Prozessor: 2,2 Ghz Dual-Core</li>
<li>Arbeitsspeicher: 2 GB RAM </li>
<li>Grafikkarte: nVidia GeForce 5 / FX </li>
<li>ATI Radeon 9500 Serie / ATI X700</li>
</ul>
</div>
<br style="clear:left"/>
<div align="center">
<a href="images/big_ha_1.jpg" target="_blank"><img id ="img_screen1" src="images/thumb_ha_1.png" alt="Screen1"></a>
<a href="images/big_ha_2.jpg" target="_blank"><img id ="img_screen2" src="images/thumb_ha_2.png" alt="Screen2"></a>
<a href="images/big_ha_3.jpg" target="_blank"><img id ="img_screen3" src="images/thumb_ha_3.png" alt="Screen3"></a>
<a href="http://www.amazon.de/Holy-Avatar-vs-Maidens-Dead/dp/B0088UPNTC" target="_blank"><img id="buy" src="images/buy_ha.png" alt="Buy"></a>
</div>
</div>
<div id="deco-botleft"><img src="images/deco_ha_botleft.png" alt="Wunderbare Dekoration" width="532px" height="91px"></div>
<div id="deco-botright"><img src="images/deco_ha_botright.png" alt="Wunderbare Dekoration" width="532px" height="91px"></div>
<body>
</html>
http://www.grotesque-game.de/SilentDreamsGames/havsmotd.html
/e: Probleme machen
#deco-right { width:100%; text-align:center; position:absolute; left:570px; margin-top:235px }
#deco-botright { width:100%; text-align:center; position:absolute; left:470px; margin-top:-92px }
Ich habe eine HP, die mittig ausgerichtet ist. Der Body ist 1000 Pixel breit. Links/rechts von diesem Body möchte ich 2 Dekografiken anbringen, die aber zeitgleich auf über dem Body liegen - funktioniert auch alles soweit, nun das Problem:
Ich habe die Grafiken zentriert und dafür musste ich nen width 100% angeben, wenn ich nun aber die Grafik sagen wir mal um 300px nach rechts verschiebe erweitert sich meine gesamte HP um 300px leeren Raum nach rechts, was ich natürlich nicht will.... Der Code is bei mir momentan folgender:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
body,html { margin:0; padding:0; border:0; width:100%; height:100%; font-family: 'serif'; font-size:12pt }
#deco-border_l { background-position: left; background-image:url("images/border_ha.png"); background-repeat: repeat-y; margin-left:-2px }
#deco-border_r { background-position: right; background-image:url("images/border_ha.png"); background-repeat: repeat-y; margin-right:-1px }
#deco-left { width:100%; text-align:center; position:absolute; right:570px; margin-top:235px }
#deco-right { width:100%; text-align:center; position:absolute; left:570px; margin-top:235px }
#deco-botleft { width:100%; text-align:center; position:absolute; right:470px; margin-top:-92px }
#deco-botright { width:100%; text-align:center; position:absolute; left:470px; margin-top:-92px }
#header { width:100%; height:245px; overflow:auto; overflow:hidden; text-align:center }
#nav { width:1000px; height:28px; margin:auto; text-align:center; background-repeat:no-repeat; background-position:center }
#main { width:1000px; min-height: 100%; height:auto !important; height:100%; overflow:hidden !important; margin:auto}
#intro { margin-left:20px; margin-right:20px; margin-top:20px }
#features { margin-left:65px; margin-right:40px; width:40%; float:left }
#system { margin-left:20px; margin-right:65px; width:40%; float:right }
#nomargin { margin-left:8px; padding-left:8px }
#nodots { list-style-type: none }
#img_cover { width:294px; height:417px; margin-top:20px; margin-left:20px; margin-right:20px; float:left }
#img_screen1 { width:275px; height:210px; margin:13px; margin-bottom:20px }
#img_screen2 { width:275px; height:210px; margin:13px; margin-bottom:20px }
#img_screen3 { width:275px; height:210px; margin:13px; margin-bottom:20px }
#buy { width:281px; height:88px; margin-top:15px; margin-bottom:30px; position:relative; z-index:1 }
a:link { text-decoration: none }
.link_sd { background-image:url("images/nav_sd.png"); display:inline-block; height: 19px; width: 135px; background-repeat:no-repeat; margin-top:5px; z-index:1; position:relative }
.link_sd:hover { background-image:url("images/nav_sd_o.png") }
.link_gt { background-image:url("images/nav_gt.png"); display:inline-block; height: 19px; width: 167px; background-repeat:no-repeat; margin-top:5px; margin-left:35px; z-index:1; position:relative }
.link_gt:hover { background-image:url("images/nav_gt_o.png") }
.link_gt2 { background-image:url("images/nav_gt2.png"); display:inline-block; height: 19px; width: 243px; background-repeat:no-repeat; margin-top:5px; margin-left:35px; z-index:1; position:relative }
.link_gt2:hover { background-image:url("images/nav_gt2_o.png") }
.link_ha { background-image:url("images/nav_ha.png"); display:inline-block; height: 19px; width: 199px; background-repeat:no-repeat; margin-top:5px; margin-left:35px; z-index:1; position:relative }
.link_ha:hover { background-image:url("images/nav_ha_o.png") }
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Holy Avatar vs Maidens of the Dead</title>
</head>
<body style="background-image:url(bg_motd_deco.jpg)">
<div id="deco-left"><img src="images/deco_ha_left.png" alt="Wunderbare Dekoration" width="209px" height="215px"></div>
<div id="deco-right"><img src="images/deco_ha_right.png" alt="Wunderbare Dekoration" width="209px" height="215px"></div>
<div id="header"><img src="header_motd.jpg" alt="header_modt"></div>
<div id="nav" style="background-image:url(images/navbar_ha.png)">
<a class="link_sd" href="sd.html"></a>
<a class="link_gt" href="gt.html"></a>
<a class="link_gt2" href="gt2.html"></a>
<a class="link_ha" href="havsmotd.html"></a>
</div>
<div id="main" style="background-image:url(bg_motd.jpg)">
<img id="img_cover" src="images/cover_ha.jpg" alt="Cover">
<div id="deco-border_l"><div>
<div id="deco-border_r"><div>
<div id="intro">
<img src="images/product.png" width="205px" height="22px" alt="Produktbeschreibung">
<p>In Holy Avatar vs. Maidens of the Dead, dem brandneuen Spin-Off des erfolgreichen Grotesque-Universums, erleben Sie eine spannende und ironische Rollenspiel-Parodie auf einer vermeintlich idyllischen Karibikinsel, die plötzlich von einer Armee untoter Jungfrauen heimgesucht wird. Als Halbgott Holy Avatar liegt es nun an Ihnen, die Quelle der Zombieseuche ausfindig zu machen und wieder für Ruhe und Ordnung zu sorgen. Eine morbide aber dennoch witzige Story mit zahlreichen Seitenhieben auf bekannte Filme und Videospiele erwartet Sie. Das strategische Kampfsystem mit epischen Bosskämpfen, gepaart mit einem komplett neu designten, einzigartigem Grafikstil im karibischen Setting werden Sie für viele Stunden in ihren Bann ziehen.</p>
<p>Halbgott Holy Avatar und seine Jungfrauengilde besuchen die von Holy Avatar gekaufte Urlaubsinsel „Holy Island“. Auf seiner Urlaubsinsel soll er sich nach zahlreichen Kämpfen endlich mal entspannen, auch wenn der Avatar das gar nicht gerne hört, da es ihn stets nach neuen Abenteuern dürstet. Nach einer etwas unsanften Ankunft am Strand machen sie gleich darauf jedoch eine grauenhafte Entdeckung: Zahlreiche tote Jungfrauen, auf das Übelste zugerichtet, säumen den Pfad ins Inselinnere. Die Jungfrauengilde befürchtet, dass im Jungfrauencamp auf der Insel etwas Schreckliches passiert ist. Holy Avatar, insgeheim erfreut über diese Wendung, macht sich daraufhin mit einem Teil seiner Gruppe auf den Weg ins Inselinnere, um der Sache auf den Grund zu gehen. Nichtahnend, welches Ausmaß die Katastrophe bereits angenommen hat und welche Gefahren in den dichten Wäldern und Höhlen auf ihn und seine Gefolgschaft lauern.</p>
<p>Unterwegs begegnen Sie noch weiteren Überlebenden, die sich Ihrer Gruppe anschließen. In Holy Avatar vs. Maidens of the Dead kontrollieren Sie mehrere Partymitglieder mit unterschiedlichen taktischen Ausrichtungen und Fertigkeiten gleichzeitig. Jedes Mitglied Ihrer Gruppe verfügt über einen eigenen Talentbaum, in dem Sie nach jedem Levelaufstieg die Fähigkeiten nach Ihren Vorlieben verbessern können. Übernehmen Sie spannende und amüsante Aufgaben, um Ihren Ruf zu steigern und bessere Ausrüstungsgegenstände zu erhalten. Nur so werden Sie auf Ihrer Reise ins Unbekannte gegen immer mächtigere Gegner bestehen können – angefangen von den niedlichen, aber tödlichen Schnuckis über Heerscharen blutrünstiger Zombies bis hin zu riesigen Skelettkriegern und noch weit gefährlicheren Gegnern. Doch dank der drei unterschiedlichen Schwierigkeitsgrade sorgt Holy Avatar vs. Maidens of the Dead dafür, dass auch Gelegenheitsspieler viel Freude an dem Spiel haben werden.</p>
</div>
<br style="clear:left"/>
<div id="features" style="display:block">
<img src="images/features.png" width="85px" height="22px" alt="Features">
<ul id="nomargin">
<li>Packende Rundenkämpfe mit abwechslungsreichen Quests</li>
<li>Ironische und spannende Story mit zahlreichen Seitenhieben auf bekannte Filme und Computerspiele</li>
<li>Für Anfänger und Profis gleichermaßen geeignet</li>
<li>Charakterentwicklung durch Talentbäume</li>
<li>Bunter, comicartiger Grafikstil und Soundtrack mit karibischem Flair</li>
<li>Zombies!</li>
</ul>
</div>
<div id="system" align="right">
<img src="images/system.png" width="216px" height="22px" alt="Systemanforderungen">
<ul id="nodots">
<li>Betriebssystem: Windows XP, Vista, 7 </li>
<li>Prozessor: 2,2 Ghz Dual-Core</li>
<li>Arbeitsspeicher: 2 GB RAM </li>
<li>Grafikkarte: nVidia GeForce 5 / FX </li>
<li>ATI Radeon 9500 Serie / ATI X700</li>
</ul>
</div>
<br style="clear:left"/>
<div align="center">
<a href="images/big_ha_1.jpg" target="_blank"><img id ="img_screen1" src="images/thumb_ha_1.png" alt="Screen1"></a>
<a href="images/big_ha_2.jpg" target="_blank"><img id ="img_screen2" src="images/thumb_ha_2.png" alt="Screen2"></a>
<a href="images/big_ha_3.jpg" target="_blank"><img id ="img_screen3" src="images/thumb_ha_3.png" alt="Screen3"></a>
<a href="http://www.amazon.de/Holy-Avatar-vs-Maidens-Dead/dp/B0088UPNTC" target="_blank"><img id="buy" src="images/buy_ha.png" alt="Buy"></a>
</div>
</div>
<div id="deco-botleft"><img src="images/deco_ha_botleft.png" alt="Wunderbare Dekoration" width="532px" height="91px"></div>
<div id="deco-botright"><img src="images/deco_ha_botright.png" alt="Wunderbare Dekoration" width="532px" height="91px"></div>
<body>
</html>
http://www.grotesque-game.de/SilentDreamsGames/havsmotd.html
/e: Probleme machen
#deco-right { width:100%; text-align:center; position:absolute; left:570px; margin-top:235px }
#deco-botright { width:100%; text-align:center; position:absolute; left:470px; margin-top:-92px }