Antworten zum Thema „[Hilfe gesucht] Von PSD zur Website“

Jakky187 · 27.07.2014

Ich habe mit Photoshop ein Wendesign erstellt und möchte das nun mit CSS und HTML umsetzen....

Mein Problem ist das ich die Bilder nicht immer zentriert kriege .... weil zum Beispiel ist das so wie es jetzt ist perfekt in der mitte aber auf meinem kleinerem laptop bildschirm sieht es halt so wie oben aus..... Ich muss dazu sagen das ist Mein erstes Photoshop Design was ich versuche umzusetzen....

In den folgenden Spoilern Findet ihr den Code....

HTML:

<body>
    <?php
        echo '<link rel="stylesheet" type="text/css" href="/Do_ProjectZeta/inc/css/index.css">';
    ?>
<div id="Content">
    <div id="Logo">
    </div>
    <div id="Schiffauswahl">
        <div class="Schiffauswahl_1"></div>
        <div class="Schiffauswahl_2"></div>
        <div class="Schiffauswahl_3"></div>
        <div class="Schiffauswahl_4"></div>
        <div class="Schiffauswahl_5"></div>
        <div class="Schiffauswahl_6"></div>
        <div class="Schiffauswahl_7"></div>
        <div class="Schiffauswahl_8"></div>
        <div class="Schiffauswahl_9"></div>
        <div class="Schiffauswahl_10"></div>
    </div>
    <div id="Spacer_oben">
    </div>
    <div id="MainContent">
        <div class="Equipment"></div>
        <div class="Ranking"></div>
        <div class="Start"></div>
        <div class="Settings"></div>
        <div class="Donation"></div>
    </div>
    <div id="Spacer_unten">
    </div>
    <div id="Footer">
    </div>
</div>
</body>

Code:

body{
    margin-top: 0px;
    background-image: url('http://www.hdwallpaperpc.com/preview/blue_nebula_light_Clouds_galaxies_and_dark_space_clouds_stars_119395/resolution_2560x1600');
    background-size: cover;
}
#Content{
    background-image:url('/Do_ProjectZeta/images/default/Content_bg.png');
    margin: 0px auto;
    height: 1220px;
    width: 1200px;
}
#logo{
  background-image: url("/Do_ProjectZeta/images/default/logo.png");
  margin: auto;
  left: 756px;
  top: 0px;
  width: 327px;
  height: 323px;
  z-index: 32;
}
#Schiffauswahl {

}
.Schiffauswahl_1 {
  background-image: url("/Do_ProjectZeta/images/default/Schiffauswahl_bg.png");
  position: absolute;
  left: 1325px;
  top: 217px;
  width: 126px;
  height: 110px;
  z-index: 15;
  margin: auto;
}
.Schiffauswahl_2 {
  background-image: url("/Do_ProjectZeta/images/default/Schiffauswahl_bg.png");
  position: absolute;
  left: 1215px;
  top: 217px;
  width: 123px;
  height: 109px;
  z-index: 14;
  margin: auto;
}
.Schiffauswahl_3 {
  background-image: url("/Do_ProjectZeta/images/default/Schiffauswahl_bg.png");
  position: absolute;
  left: 1106px;
  top: 217px;
  width: 123px;
  height: 109px;
  z-index: 13;
  margin: auto;
}
.Schiffauswahl_4 {
  background-image: url("/Do_ProjectZeta/images/default/Schiffauswahl_bg.png");
  position: absolute;
  left: 946px;
  top: 322px;
  width: 123px;
  height: 109px;
  z-index: 12;
  margin: auto;
}
.Schiffauswahl_5 {
  background-image: url("/Do_ProjectZeta/images/default/Schiffauswahl_bg.png");
  position: absolute;
  left: 839px;
  top: 322px;
  width: 123px;
  height: 109px;
  z-index: 11;
  margin: auto;
}
.Schiffauswahl_6 {
  background-image: url("/Do_ProjectZeta/images/default/Schiffauswahl_bg.png");
  position: absolute;
  left: 732px;
  top: 322px;
  width: 123px;
  height: 109px;
  z-index: 10;
  margin: auto;
}
.Schiffauswahl_7 {
  background-image: url("/Do_ProjectZeta/images/default/Schiffauswahl_bg.png");
  position: absolute;
  left: 1053px;
  top: 322px;
  width: 123px;
  height: 109px;
  z-index: 9;
  margin: auto;
}
.Schiffauswahl_8 {
  background-image: url("/Do_ProjectZeta/images/default/Schiffauswahl_bg.png");
  position: absolute;
  left: 464px;
  top: 217px;
  width: 123px;
  height: 109px;
  z-index: 8;
  margin: auto;
}
.Schiffauswahl_9{
  background-image: url("/Do_ProjectZeta/images/default/Schiffauswahl_bg.png");
  position: absolute;
  left: 678px;
  top: 217px;
  width: 123px;
  height: 109px;
  z-index: 5;
  margin: auto;
}
.Schiffauswahl_10 {
  background-image: url("/Do_ProjectZeta/images/default/Schiffauswahl_bg.png");
  position: absolute;
  left: 571px;
  top: 217px;
  width: 123px;
  height: 109px;
  z-index: 4;
  margin: auto;
}
#Spacer_oben {
  background-image: url("/Do_ProjectZeta/images/default/Balken_oben.png");
  position: absolute;
  left: 458px;
  top: 431px;
  width: 1003px;
  height: 24px;
  z-index: 5;
}
#Spacer_unten {
  background-image: url("/Do_ProjectZeta/images/default/Balken_unten.png");
  position: absolute;
  left: 458px;
  top: 1061px;
  width: 1003px;
  height: 24px;
  z-index: 4;
}
#MainContent {

}
#Footer {
  background-image: url("/Do_ProjectZeta/images/default/.png");
  position: absolute;
  left: 470px;
  top: 1088px;
  width: 689px;
  height: 27px;
  z-index: 33;
}
.Ranking {
  background-image: url("/Do_ProjectZeta/images/default/menu_bg.png");
  position: absolute;
  left: 1026px;
  top: 471px;
  width: 363px;
  height: 297px;
  z-index: 24;
}
.Equipment {
    background-image: url("/Do_ProjectZeta/images/default/menu_bg.png");
    position: absolute;
    left: 533px;
    top: 471px;
    width: 363px;
    height: 297px;
    z-index: 23;
}
.Settings {
  background-image: url("/Do_ProjectZeta/images/default/menu_bg.png");
  position: absolute;
  left: 531px;
  top: 732px;
  width: 363px;
  height: 297px;
  z-index: 22;
}
.Donation {
  background-image: url("/Do_ProjectZeta/images/default/menu_bg.png");
  position: absolute;
  left: 1027px;
  top: 732px;
  width: 363px;
  height: 297px;
  z-index: 21;
}
.Start {
  background-image: url("/Do_ProjectZeta/images/default/menu_bg.png");
  position: absolute;
  left: 779px;
  top: 603px;
  width: 363px;
  height: 297px;
  z-index: 20;
}

Würde mich über Hilfe sehr freuen weil an diesem Problem sitze ich jetzt schon ne ganze weile.....
Ich bin auch über Skype erreichbar: adrian22898

MfG Adrian

Jormungand · 27.07.2014

Du verwendest absolute Container. Um absolute Container innerhalb anderer Container verwenden zu können, musst du den übergeordneten ein position:relative; (oder wahlweise position:absolute

mitgeben.

In deinem Fall wäre das der Content-Container.