nicht angemeldet
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;
}
Gunnar Bittersmann