✔ Weihnachten auf meiner Website

Status
Nicht offen für weitere Antworten.
G

gh123

Grünschnabel
Hi,

ich habe so einige Probleme auf meiner Webseite verschiedene Grafiken als div-Layer einzubinden. Es soll Weihnachtlich aussehen also habe ich mir gedacht einen Kranz und einige Vögel auf den Body zu positionieren. Leider ohne Erfolg. Ich habe den Body ohne Div-Tags erstellt. Naja, auf jeden Fall verwende ich CSS und möchte dass die Elemente auch dort bleiben wohin ich diese auch positioniere. Das ist hier nicht der Fall! Alleine durch das Maximieren und Minimieren der Fenster verschieben sich die Elemente.
Mit float,margin oder padding komme ich nicht weiter. Kann mir jemand mal aushelfen und sich dieses Chaos mal anschauen?

Bild wie es aussehen soll habe ich angefügt.

Hier der Link zur Webseite
Hier ist das CSS: Style.css

Ich danke für die Vorschlage und die Hilfe!

cya
gh123
 

Anhänge

  • 27337attachment.jpg
    27337attachment.jpg
    58,8 KB · Aufrufe: 18
Frohe Weihnachten! :)

Code: 
<!-- put IE into Quirksmode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Axel Schoss - Praxis für Physiotherapie</title>
<META name="Description" content="Axel Schoss - Praxis für Physiotherapie">
<META name="Keywords" content="Axel Schoss,Schoss,Praxis,Physiotherapie,Krankengymnastik,Massage,Kassel,Therapien,Praxisteam,Therapeut,Rückenschule,Dorn,Dorn-Methode,Hausbesuche,Lymphdrainage">
<META name ="Abstract" content="Axel Schoss Kassel">
<meta name="page-topic" content="">
<meta name="page-type"  content="">
<meta name="audience"   content="all">
<meta name="author"     content="Schoss">
<meta name="publisher"  content="Schoss">
<meta name="copyright"  content="Schoss">
<meta name="revisit-after" content="15">
<meta http-equiv="expires"    content="never">
<meta name="robots" content="index, follow">
<meta name="Content-Language" content="de">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="JavaScript">
<!-- Begin

function printPage()
{
Browser = parseInt(navigator.appVersion);
if (Browser >= 4) window.print();
}

//  End -->
</script>
<link rel="stylesheet" href="images/style.css" type="text/css">
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
}
.Stil4 {color: #000000}
.Stil6 {font-size: 9px}
-->
</style>
</head>
<body>
<script src="http://www.axelschoss.de/snow.js" type="text/javascript"></script>

      <table border="0" cellspacing="0" cellpadding="0" style="position:absolute;top:50%;height:430px;margin-top:-215px;left:50%;width:780px;margin-left:-390px;">
        <tr>
          <td>
              <div id="b_1" class="bird"><div></div></div>
              <div id="b_2" class="bird"><div></div></div>
              <div id="b_3" class="bird"><div></div></div>
              <div id="c_1" class="pine"><div></div></div>
            <table width="780" border="0" cellpadding="0" cellspacing="0" class="rand_haupt">
              <tr>
                <td height="70" valign="top">
                  <table width="780" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td colspan="4" height="11">
                                                <img src="http://www.axelschoss.de/images/trans.gif" width="5" height="5">                                                </td>
                    </tr>
                    <tr>
                      <td height="59" width="20">&nbsp;</td>
                      <td class="norepeat" valign="top" width="331">
                        <table width="300" border="0" cellspacing="0" cellpadding="0" height="59">
                          <tr>
                            <td class="logo_high" height="33">
                                                        <p align="left">
                                                        AXEL SCHOSS</td>
                          </tr>
                          <tr>
                            <td valign="top" class="logo_low">
                                                        <p align="left">Praxis für
                                                        Physiotherapie</td>
                          </tr>
                        </table>
                      </td>
                      <td width="353">&nbsp;</td>
                      <td valign="top" width="92">
                        <table width="92" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><br>
                                                        <img src="http://www.axelschoss.de/images/sendicon.gif" width="16" height="16" border="0">
                              <a href="mailto:webmaster@axelschoss.de" class="kontakt">Kontakt</a>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td height="250" valign="top">
                  <table width="779" border="0" cellspacing="0" cellpadding="0" height="250" background="http://www.axelschoss.de/images/Sportler.jpg">
                    <tr>
                      <td colspan="2" height="35"></td>
                    </tr>
                    <tr valign="top"><td height="65" width="19">&nbsp;</td>
                      <td width="227">

                                                <table width="98%" border="0" cellspacing="0" cellpadding="4">
                 <td height="214" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200" height="190">
                   <param name="movie" value="http://www.axelschoss.de/primanews.swf">
                   <param name="quality" value="high">
                   <embed src="http://www.axelschoss.de/primanews.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="190"></embed>
                 </object></td>
        </tr>
      </table>

                      </td>

                      <td width="533">
                        <p><b>
                                                Willkommen auf der neuen Internetpräsenz der Praxis Axel
                                                Schoss</b><br><br>
                        Die Physiotherapie zählt zu den anerkannten, natürlichen Heilmitteln und ist nach<br>
                         wie vor ein unverzichtbarer Bereich unseres Gesundheitswesen.<br>
                         <br>Sie verfolgt vorwiegend das Ziel, den Bewegungsumfang der Gelenke zu verbessern,<br> die Muskulatur zu kräftigen, die Koordinationsfähigkeit zu schulen und die allgemeine<br> körperliche Leistungsfähigkeit zu steigern.
                        <br>
                        <br>In Folge dieser Verbesserungen können oftmals muskuläre Dysbalancen als Auslöser<br> unklarer Schmerzzustände auf schonende und risikolose Art durch den Therapeuten,<br> sehr gut therapiert werden.

                        <br><br>
                          Wir freuen uns Ihnen mit unserer Erfahrung weiterhelfen zu können.</p></td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td height="20" bgcolor="#cecbce">
                  <table width="780" border="0" cellspacing="0" cellpadding="0" height="20">
                    <tr>
                      <td width="30">&nbsp;</td>
                      <td width="50">
                                                <a href="index.html" class="navi"><font color="#000000">Start</font></a></td>
                      <td width="80">
                                                <a href="therapien.html" class="navi">Therapien</a></td>
                      <td width="60">
                                                <a href="preise.html" class="navi">
                                                Preise</a></td>
                      <td width="100">
                                                <a href="bildergalerie.html" class="navi">Bildergalerie</a></td>
                      <td width="90">
                                                <a href="team.html" class="navi">
                                                Praxisteam</a></td>
                                                <td width="50">
                                                <a href="lage.html" class="navi">
                                                Lage</a></td>
                                                <td>
                                                <a href="impressum.html" class="navi">
                                                Impressum</a></td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td height="90" valign="top">
                  <table width="780" border="0" cellspacing="0" cellpadding="0" height="90">
                    <tr>
                      <td colspan="2">&nbsp;</td>
                      <td width="35" height="17">&nbsp;</td>
                    </tr>
                    <tr>
                      <td align="left" valign="top" class="">
                                          </td>
                      <td align="right" valign="top" class="anschrift">Axel
                                                  Schoss<br>
                                                  Krankengymnastik & Massage<br>
                          Stegerwaldstrasse 1A
                                                  <img src="http://www.axelschoss.de/images/punkt_mitte.jpg" width="7" height="8">
                          34123 Kassel<br>
                          Tel: +49.561.5102202
                                                  <img src="http://www.axelschoss.de/images/punkt_mitte.jpg" width="7" height="8">
                        Fax +49.561.5102231</td>
                      <td>&nbsp;</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

</body>
</html>
Code: 
/* EDIT 13.12.2006, 05:52h */

#b_1.bird div {
        position: absolute;
        background: none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://axelschoss.de/images/bird_1.png");
        width: 51px;
        height: 37px;
        margin-left: 45px;
        margin-top: -20px;
}

/* END EDIT */

#b_1[class="bird"] > div {
    background: url(http://axelschoss.de/images/bird_1.png) no-repeat left top;
}
#b_2.bird div {
        position: absolute;
        background: none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://axelschoss.de/images/bird_2.png");
        width: 34px;
        height: 43px;
        margin-left: 145px;
        margin-top: -20px;
}
#b_2[class="bird"] > div {
    background: url(http://axelschoss.de/images/bird_2.png) no-repeat left top;
}
#b_3.bird div {
        position: absolute;
        z-index: 3;
        background: none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://axelschoss.de/images/bird_3.png");
        width: 42px;
        height: 37px;
        margin-left: 525px;
        margin-top: -20px;
}
#b_3[class="bird"] > div {
    background: url(http://axelschoss.de/images/bird_3.png) no-repeat left top !important;
}
#b_3.bird.adhoc div {
    right: 17em;
}
#c_1.pine div {
        position: absolute;
        background: none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://axelschoss.de/images/xmas_top.png");
        width: 114px;
        height: 93px;
        margin-left: 575px;
        margin-top: -20px;
}
#c_1[class="pine"] > div {
    background: url(http://axelschoss.de/images/xmas_top.png) no-repeat left top;
}
 
@michaelsinterface

Hi,

vielen Dank erstmal. Das war Spitzenklasse! Wenn es nichts ausmacht könntest Du mir nur kurz erläutern worin/woran das Problem lag. Das wäre sehr nett.

In diesem Sinne wünsche ich auch frohe Weihnachten!

cya
 
Um die Objekte innerhalb der Tabelle positionieren zu können, muß die Tabelle selbst auch positioniert sein. Und das war wohl bei deinen Versuchen der Knackpunkt, daß sich die Objekte beim Verändern der Fenstergröße im Bezug zur Tabelle immer verschoben haben.

Der Rest war dann ein "Spielen" mit den margin-Werten, um die Objekte an der gewünschten Position auszurichten.

Wie ich gerade sehe, habe ich gestern in meinem Posting den Selektor #b_1.bird div vergessen, sorry! :-(

Code: 
#b_1.bird div {
        position: absolute;
        background: none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://axelschoss.de/images/bird_1.png");
        width: 51px;
        height: 37px;
        margin-left: 45px;
        margin-top: -20px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück