Schnufflknuffl: CSS für alle Fenstergrößen gleich

Hallo zusammen!

Ich bin ein CSS Anfänger und habe heute den ganzen Tag an einer CSS Datei gebastelt und war überglücklich, als diese dann fertig war.
Leider kam auch gleich die Ernüchterung:
Sobald das Fenster verkleinert wird, ändert sich die komplette Anzeige, so auch im IE (ich arbeite mit Firefox).
Kann mir hier bitte jemand helfen?
Muss ich alle neu schreiben, oder handelt es sich nur um kleine Änderungen?
Vl. kann mir jemand bis morgen helfen, würde die Arbeite gerne wo vorzeigen.

Vielen Lieben Dank!!

Nachfolgend mein HTML und CSS Code:

Html

<html>
 <head>

<title> Aufgabe CSS </title>
  <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="box">
      <span class="a">THOMSON</span>
      <span class="b">32FU5253W 32" LED-TV weiß</span>
  </div>

<div id="rechts">
   <p id="beschreibung">
    Gerätetyp: LED-TV, Bildschirmdiagonale
    (cm): 81cm, Bildschirmdiagonale (Zoll):
    32 Zoll, Engergieeffizienzklasse: A,... <br>

<img src="bilder/pfeil.jpg">
    <span class="mehr">
     <a href="http://www.saturn.at/mcs/product/THOMSON-32FU5253W-32%22-LED-TV-wei%C3%9F,90452,381441,524482.html?langId=-15">
      Mehr
     </a>
    </span>
   </p>

<p>
    <img id="preis" src="bilder/preis.png">
    <img id="info1" src="bilder/info.jpg">

<span id="preistext">
     Saturn Preis
    </span>
   </p>

<p id="versand"> Versand: € 4,99
    <img id="info2" src="bilder/info.jpg">

<span id="lieferzeit">
     sofort lieferbar
    </span>
   </p>

<p id="abholung"> Sofortabholung prüfen
    <img id="info3" src="bilder/info.jpg">
   </p>

</div>

<div id="links"> <img id="bild" src="bilder/tv.jpg"> </div>

<div id="unten"> <img id="zoomen" src="bilder/zoomen.png"> </div>

<a href="https://www.saturn.at/webapp/wcs/stores/servlet/MultiChannelDisplayBasket?storeId=90452&langId=-15">
   <img id="warenkorb" src="bilder/warenkorb.png">
  </a>

<div id="leiste">

<div class="abschluss">
   <a href="https://www.saturn.at/webapp/wcs/stores/servlet/MultiChannelMAWishlist?storeId=90452&langId=-15" target="blank">
    <img src="bilder/merken.png">
   </a>

<a href="http://www.saturn.at/webapp/wcs/stores/servlet/MultiChannelCatalogEntryComparison?storeId=90452&langId=-15" target="blank">
    <img src="bilder/vergleichen.png">
   </a>

<a href="javascript:self.print()">
    <img src="bilder/drucken.png">
   </a>
  </div>

</body>
</html>

CSS

body {
background: #FFFFFF no-repeat fixed top center;
text-align: justify;
margin: 20px 708px 100px 350px;
border-width: 10px;
border-style: solid;
border-color: #0166ff;
}

#box {
padding: 10px 0px 2px 10px;
}

span.a {
font: bold 90% arial;
}

span.b {
font: 90% arial;
}

#bild {
padding: 0px 0px 20px 16px;
width: 79%;
}

#links  {
margin-left: 10px;
margin-top: 5px;
margin-bottom: 100px;
width: 250px;
border-width: 1px;
border-style: solid;
border-color: #e1e1e1;
}

#rechts {
float: right;
margin-right: 10px;
margin-top: 5px;
width: 250px;
border-width: 1px;
border-style: solid;
border-color: #e1e1e1;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
}

#unten {
position: absolute;
top: 247px;
left: 370px;
width: 250px;
border-width: 1px;
border-style: solid;
border-color: #e1e1e1;
box-shadow: 0px 6px 5px -5px #e1e1e1 inset;
}

#leiste {
position: bottom;
margin-top: 120px;
padding: 0px 0px 5px 0px;
border-width: 1px;
border-style: solid;
border-color: #f4f2f2;
background-color: #f4f2f2;
}

#beschreibung {
font: 80% arial;
padding: 0px 0px 0px 10px;
}

span.mehr {
font: bold 90% arial;
}

a {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

#preis {
padding: 0px 0px 0px 10px;
float: left;
}

#preistext {
font: 70% arial;
float: right;
}

#info1 {
float: right;
padding: 0px 0px 0px 3px;
}

#versand {
font: 70% arial;
padding: 47px 0px 0px 10px;
color: #747474;
}

#info2 {
float: right;
padding: 0px 146px 0px 3px;
}

#lieferzeit {
color: #268a26;
}

#abholung {
font: bold 75% arial;
padding: 0px 0px 0px 10px;
}

#info3 {
float: right;
padding: 0px 96px 0px 3px;
}

#zoomen {
padding: 5px 0px 5px 15px;
}

#warenkorb {
position: absolute;
top: 285px;
left: 620px;
float: right;
}

.abschluss {
padding: 5px 0px 0px 10px;
}

  1. @@Schnufflknuffl:

    nuqneH

    Leider kam auch gleich die Ernüchterung:
    Sobald das Fenster verkleinert wird, ändert sich die komplette Anzeige,

    Ja, natürlich passt sich der Inhalt dem Gefäß an. Das ist auch gut so.

    Warum ist das völlig Normale für dich eine Ernüchterung?

    Kann mir hier bitte jemand helfen?

    Wobei?

    [viel Code]

    Soll man sich daraus deine Seite nachbauen? Verlinke bitte deine Seite.

    Wenn du eine Frage dazu hast.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hallo zusammen!

      Hab es schon geschafft, danke!

      Liebe Grüße

  2. Kann mir hier bitte jemand helfen?

    Wobei? Was willst Du erreichen?

    Wenn alles immer gleich aussehen soll, egal wie groß der viewport ist (Fenstergröße ist irrelevant), dann mußt Du alles festnageln. Das ist aber nicht unbedingt eine gute Lösung. Wenn sich die Darstellung verändern darf, dann mußt Du dein gewünschtes Ziel erläutern.

    Was Du uns zeigst in nicht alles, vor <html> seht noch was, oder? Kann man sich das irgendwo online anschauen?

    Vl. kann mir jemand bis morgen helfen, würde die Arbeite gerne wo vorzeigen.

    Wie ist die Bezahlung?