Brauche Hilfe - Hintergrundbild und Links anpassen...oder so

  • Hi zusammen,

    Ich habe da folgendes Problem beim Bau meiner Homepage:

    Ich würde gerne die Hp als Zimmer darstellen und das Zimmer als Hintergrund nehmen (800x600), drum herum einach nur eine Farbe als Hintergrund

    Das Bild sollte zentriert sein. Nun will ich aber Links auf die Musikanlage, den PC usw. legen und das mit Pixelausrichtung machen...aber irgendwie verrutscht das immer aufgrund des variablen farbigen hintergrund...wie kann ich das einstellen dass die Pixelabmessung sich am Zimmer halten soll ?

    hier mal der bisherige Stand meiner html-Datei:


    <html>
    <style type="text/css">
    div { solid #aaaaaa;}

    div#a
    {
    position:absolute;
    top:120px; left:507px;
    width:120px; height:80px;
    }
    div#b
    {
    position:absolute;
    top:124px; left:328px;
    width:120px; height:80px;
    }
    div#c
    {
    position:absolute;
    top:105px; left:160px;
    width:12px; height:80px;
    }
    div#d
    {
    position:absolute;
    top:248px; left:150px;
    width:12px; height:80px;
    }
    div#e
    {
    position:absolute;
    top:235px; left:278px;
    width:90px; height:80px;
    }
    div#f
    {
    position:absolute;
    top:310px; left:266px;
    width:90px; height:80px;
    }
    div#g
    {
    position:absolute;
    top:293px; left:395px;
    width:190px; height:80px;
    }
    div#h
    {
    position:absolute;
    top:349px; left:410px;
    width:190px; height:80px;
    }
    div#i
    {
    position:absolute;
    top:280px; left:50px;
    width:190px; height:80px;
    }
    div#j
    {
    position:absolute;
    top:515px; left:390px;
    width:190px; height:80px;
    </style>

    <style type="text/css">
    BODY {
    color: #000000;
    background: #fff
    url(http://www.bankofchina.de/gallery/pics/alleskleber/67183.jpg)
    no-repeat
    50% 50%
    padding: 0;
    margin: 0;
    overflow: hidden;
    }
    </style>

    <title>Irgendein Titel</title>
    </head><body>

    <div id="a">Missions / Urlaub</div>
    <div id="b">Kalender</div>
    <div id="c">Depp der Woche</div>
    <div id="d">Forum</div>
    <div id="e">TV / Kino</div>
    <div id="f">DVD / Video</div>
    <div id="g">Musik / Alben / Bands</div>
    <div id="h">Bücher</div>
    <div id="i">Internet</div>
    <div id="j">Gästebuch</div>

    </body>
    </html>


    Kann mir da einer helfen ?

  • also wenn du willst dass man zB. auf die stereoanlage klicken kann und dann auf musik.html kommt - mach das mit einem Imagemap. Wenn du Imageready hast, dann lies mal in der Hilfe nach, ist unkompliziert.

    Das wär wohl die Beste Variante..denk ich

    Oder dann halt mir Slices und Iframe..

  • <html>


    <body>

    <map name="Start" id="Start">
    <area shape="rect" coords="108,250,199,293" href="Link zum Forum" alt="Forum" title="Forum" />
    <area shape="rect" coords="135,124,192,174" href="Link zum Deppen der Woche" alt="Depp der Woche" title="Depp der Woche" />
    <area shape="rect" coords="315,119,358,172" href="Link zum Kalender" alt="Kalender" title="Kalender" />
    <area shape="rect" coords="458,114,630,173" href="Link zur Karte" alt="Missons / Urlaub" title="Missons / Urlaub" />
    <area shape="rect" coords="252,236,323,286" href="Link zum TV" alt="TV / Kino" title="TV / Kino" />
    <area shape="rect" coords="248,322,331,342" href="Link zu DVD" alt="DVD / Video" title="DVD / Video" />
    <area shape="rect" coords="365,301,512,330" href="Link zur Musik" alt="Musik / Alben / Bands" title="Musik / Alben / Bands" />
    <area shape="rect" coords="579,255,651,315" href="Link zum PC" alt="Internet" title="Internet" />
    <area shape="rect" coords="368,362,446,383" href="Link zu Bücher" alt="Bücher" title="Bücher" />
    <area shape="rect" coords="276,480,314,504" href="Link zum Gästebuch" alt="Gästebuch" title="Gästebuch" />
    <area shape="rect" coords="359,517,446,544" href="Link zu News" alt="News" title="News" />
    <area shape="rect" coords="130,443,173,477" href="Link Steffen" alt="Steffen" title="Steffen" />
    <area shape="rect" coords="185,402,219,426" href="Link Tim" alt="Tim" title="Tim" />
    <area shape="rect" coords="233,379,278,401" href="Link Mirko" alt="Mirko" title="Mirko" />
    <area shape="rect" coords="468,364,511,384" href="Link Malte" alt="Malte" title="Malte" />
    <area shape="rect" coords="507,396,544,425" href="Link Jannick" alt="Jannick" title="Jannick" />
    <area shape="rect" coords="552,441,590,465" href="Link Torben" alt="Torben" title="Torben" />
    </map>
    [Blockierte Grafik: http://www.bankofchina.de/gallery/pics/alleskleber/67183.jpg]

    </body>
    </html>


    so schauts nu aus...aber wie kriege ich die schrift da schwarz und wie zentriere ich das wie in der ersten datei ???

  • zentrieren ist nicht so schwer ...

    das <div align="center"></div> bewirkt logischerweise die zentrierung ...

    deine Frage mit dem "Text schwarz" versteh ich nicht ganz ... willst du statt des mit title=""eingefügten Textes einen anderen, einfach schwarzen ohne den beigen Hintergrund, oder was möchtest du genau?