Noch nicht viel geschrieben
Hi!
Ich habe eine kleine "Testseite" gemacht.
Im Explorer verrutschen nur leider ein paar Elemente, wieso?
Im Firefox ist es optimal...
index.htm:
=====================================================
<head>
<title>Canon - EOS 450D</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "style.css"; <!-- Datei "style.css" in die Seite eingebunden -->
</style>
</head>
<body>
<!-- Layout der Seite -->
<div id="layout">
<!-- Header -->
<h1><span></span>EOS 450D</h1>
<!-- Navigation -->
<div id="navigation">
<ul>
<li
class="blau"><a href="
">Startseite</a>
</li>
<li
class="grau"><a href="Kontakt.htm">Kontakt</a>
</li>
<li
class="gruen"><a href="">Gallerie</a>
</li>
<li
class="orange"><a href="">Impressum</a>
</li>
<p><img src="bilder/Innen.jpg" width="300" height="200" align="right" alt="Innenleben"></p> <!-- Bild -->
</ul>
</div>
<!-- Inhalt -->
<div
id="inhalt">
<h2>Startseite</h2>
<p>
Der 12,2 Megapixel Canon CMOS-Senor sorgt für beeindruckende Detailschärfe und ist
ideal für Prints im Posterformat und noch mehr Freiheit bei der Wahl des gewünschten
Bildausschnitts. Er arbeitet bemerkenswert energieeffizient und ermöglicht gestochen
scharfe Aufnahmen über den gesamten ISO-Bereich bei minimiertem Bildrauschen.
Reihenaufnahmen mit bis zu 3,5 Bildern pro Sekunde.
Die EOS 450D zeichnet bis zu 3,5 Bilder pro Sekunde auf und bietet einen
Pufferspeicher für bis zu 53 Large-JPEG-komprimierte Bilder (6 bei RAW-Dateien).
</p>
</div>
</div>
<!-- Footer -->
<div id="footer">
<p>
<span>Designed by JPS</span>
</p>
</div>
</body>
</html>
Style.css:
========================================
/* Formatierung von body bzw. html.
*/
html,body {
height:100%;
margin:0;
padding:0;
font-size:100.01%;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:center;
background:#ccc;
}
/* 100% Seitenhöhe für den IE 5,6 */
* html #layout {
height: 100%;
}
/* Formatierung des Layout (<div id="layout">.....</div>) */
#layout {
margin:0 auto;
width:780px;
text-align:left;
min-height:100%;
height:auto;
border-left:1px solid #000;
border-right:1px solid #000;
background:#fff url(bilder/inhalt_bg.png) repeat-y;
}
/* Formatierung des Headers */
h1 {
width: 100%;
height: 167px;
position: relative;
padding:0;
margin:0;
background:#fff;
}
h1 span {
background: url(bilder/header.png) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
/* Formatierung der Überschrift im Inhalt */
h2 {
font-size:120%;
font-weight:normal;
border-bottom:1px solid #999;
margin:0 2em 0 0;
}
/* Formatierung der Navigation
*/
#navigation{
display:block;
height:25px;
font-size:0.9em;
background-color:#F00;
border-bottom:2px solid #fff;
}
#navigation ul{
margin:0 auto;
padding:0;
list-style-type:none;
width:37em;
}
#navigation ul li{
display:block;
float:left;
margin:0;
}
#navigation ul li a{
display:block;
float:left;
color:#fff;
text-decoration:none;
padding:0 3.5em 0 1em;
line-height:25px;
}
#navigation ul li a:hover {
color:#000;
}
.blau {
repeat-x;
border-left:1px solid #fff;
}
.grau {
repeat-x;
border-left:1px solid #fff;
}
.gruen {
repeat-x;
border-left:1px solid #fff;
}
.orange {
repeat-x;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
/* Formatierung des Inhalt*/
#inhalt {
padding:4em 200px 8em 150px;
font-size:0.85em;
color:#666;
line-height:1.4em;
}
/* Formatierung des Footers
*/
#footer {
background:url(bilder/footer_bg.png) repeat-x left bottom;
width:780px;
height:196px;
margin:-196px auto;
text-align:center;
font-size:0.7em;
color:#666;
}
#footer p {
padding:0;
margin:0;
height:196px;
background:url(bilder/footer.png) no-repeat right bottom;
}
#footer span {
position:relative;
top:160px;
}
Bin für jeden Tip sehr dankbar!!!
Ich habe eine kleine "Testseite" gemacht.
Im Explorer verrutschen nur leider ein paar Elemente, wieso?
Im Firefox ist es optimal...
index.htm:
=====================================================
<head>
<title>Canon - EOS 450D</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "style.css"; <!-- Datei "style.css" in die Seite eingebunden -->
</style>
</head>
<body>
<!-- Layout der Seite -->
<div id="layout">
<!-- Header -->
<h1><span></span>EOS 450D</h1>
<!-- Navigation -->
<div id="navigation">
<ul>
<li
class="blau"><a href="
">Startseite</a>
</li>
<li
class="grau"><a href="Kontakt.htm">Kontakt</a>
</li>
<li
class="gruen"><a href="">Gallerie</a>
</li>
<li
class="orange"><a href="">Impressum</a>
</li>
<p><img src="bilder/Innen.jpg" width="300" height="200" align="right" alt="Innenleben"></p> <!-- Bild -->
</ul>
</div>
<!-- Inhalt -->
<div
id="inhalt">
<h2>Startseite</h2>
<p>
Der 12,2 Megapixel Canon CMOS-Senor sorgt für beeindruckende Detailschärfe und ist
ideal für Prints im Posterformat und noch mehr Freiheit bei der Wahl des gewünschten
Bildausschnitts. Er arbeitet bemerkenswert energieeffizient und ermöglicht gestochen
scharfe Aufnahmen über den gesamten ISO-Bereich bei minimiertem Bildrauschen.
Reihenaufnahmen mit bis zu 3,5 Bildern pro Sekunde.
Die EOS 450D zeichnet bis zu 3,5 Bilder pro Sekunde auf und bietet einen
Pufferspeicher für bis zu 53 Large-JPEG-komprimierte Bilder (6 bei RAW-Dateien).
</p>
</div>
</div>
<!-- Footer -->
<div id="footer">
<p>
<span>Designed by JPS</span>
</p>
</div>
</body>
</html>
Style.css:
========================================
/* Formatierung von body bzw. html.
*/
html,body {
height:100%;
margin:0;
padding:0;
font-size:100.01%;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:center;
background:#ccc;
}
/* 100% Seitenhöhe für den IE 5,6 */
* html #layout {
height: 100%;
}
/* Formatierung des Layout (<div id="layout">.....</div>) */
#layout {
margin:0 auto;
width:780px;
text-align:left;
min-height:100%;
height:auto;
border-left:1px solid #000;
border-right:1px solid #000;
background:#fff url(bilder/inhalt_bg.png) repeat-y;
}
/* Formatierung des Headers */
h1 {
width: 100%;
height: 167px;
position: relative;
padding:0;
margin:0;
background:#fff;
}
h1 span {
background: url(bilder/header.png) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
/* Formatierung der Überschrift im Inhalt */
h2 {
font-size:120%;
font-weight:normal;
border-bottom:1px solid #999;
margin:0 2em 0 0;
}
/* Formatierung der Navigation
*/
#navigation{
display:block;
height:25px;
font-size:0.9em;
background-color:#F00;
border-bottom:2px solid #fff;
}
#navigation ul{
margin:0 auto;
padding:0;
list-style-type:none;
width:37em;
}
#navigation ul li{
display:block;
float:left;
margin:0;
}
#navigation ul li a{
display:block;
float:left;
color:#fff;
text-decoration:none;
padding:0 3.5em 0 1em;
line-height:25px;
}
#navigation ul li a:hover {
color:#000;
}
.blau {
repeat-x;
border-left:1px solid #fff;
}
.grau {
repeat-x;
border-left:1px solid #fff;
}
.gruen {
repeat-x;
border-left:1px solid #fff;
}
.orange {
repeat-x;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
/* Formatierung des Inhalt*/
#inhalt {
padding:4em 200px 8em 150px;
font-size:0.85em;
color:#666;
line-height:1.4em;
}
/* Formatierung des Footers
*/
#footer {
background:url(bilder/footer_bg.png) repeat-x left bottom;
width:780px;
height:196px;
margin:-196px auto;
text-align:center;
font-size:0.7em;
color:#666;
}
#footer p {
padding:0;
margin:0;
height:196px;
background:url(bilder/footer.png) no-repeat right bottom;
}
#footer span {
position:relative;
top:160px;
}
Bin für jeden Tip sehr dankbar!!!
Zuletzt bearbeitet:
