Hallo,
ich hoffe ich bin an der richtigen Stelle, falls nicht bitte verschieben.
Nun zu meinem Problem.
Ich bin noch ein ziemlicher Frischling in HTML5 und habe mal versucht ein Layout zu erstellen.
In Chrom, oder FireFox sieht die Seite so aus:
Im IE 8 leider so:
Hier ist der dazugehörige Quellcode,
und die dazugehörige CSS
ich hoffe ich bin an der richtigen Stelle, falls nicht bitte verschieben.
Nun zu meinem Problem.
Ich bin noch ein ziemlicher Frischling in HTML5 und habe mal versucht ein Layout zu erstellen.
In Chrom, oder FireFox sieht die Seite so aus:
Im IE 8 leider so:
Hier ist der dazugehörige Quellcode,
HTML:
<head>
<title>HTML5 Tutorial</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="author" content="Reiner Wahnsinn">
<meta name="creator" content="Erna Error">
<meta name="publisher" content="ICH AG">
<meta name="description" content="">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<header id="main-header">
<nav id="main-navigation">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Bilder</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Kontakt</a></li>
</ul><!--menue-->
</nav><!--main-navigation-->
<div id="headerbild">
<h1>HTML5 ÜBUNG</h1>
</div><!--headerbild-->
</header><!--main-header-->
<div id="breadcrumb">
<a href="#" title="Breadcrumb Navigation">Startseite - Inhalt - weiter</a>
</div><!--breadcrumb-->
<div id="section-wrapper">
<section id="sidebar">
<header>
<h3>Untermenü</h3>
</header><!--sidebsr-header-->
<nav>
<ul class="menu">
<li><a href="#">Linkziel 1</a></li>
<li><a href="#">Linkziel 2</a></li>
<li><a href="#">Linkziel 3</a></li>
<li><a href="#">Linkziel 4</a></li>
<li><a href="#">Linkziel 5</a></li>
<li><a href="#">Linkziel 6</a></li>
</ul><!--menue-->
</nav>
</section><!--sidebar-->
<section id="content">
<header>
<h2>Artikelüberschrift</h2>
</header><!--content-header-->
<article id="artikeltext">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris purus, egestas eget aliquam eget, mollis in libero. In semper leo sit amet arcu convallis consequat at eget felis. Sed scelerisque malesuada ligula, vitae gravida arcu condimentum ut. Donec magna turpis, convallis nec luctus in, facilisis quis dui. Aenean dapibus purus at enim semper viverra.</p>
<p>Etiam feugiat, enim ultricies tristique malesuada, lacus nulla pulvinar leo, sed luctus velit elit vel magna. Morbi congue, odio sit amet tristique pellentesque, neque eros consequat est, porttitor blandit mauris tellus a erat. Sed odio sem, mattis in condimentum nec, facilisis sed odio. Aenean ultricies ipsum et sapien interdum ut commodo sapien interdum. Maecenas egestas tellus mollis erat luctus convallis. Vivamus euismod ipsum sit amet ligula dictum placerat. Mauris mattis, ligula non mollis congue, metus odio gravida risus, quis adipiscing nulla mauris eu lorem. Morbi posuere eros est, eget ultricies sem. Nulla facilisi. Proin vitae tellus quis magna dictum consequat. Cras sem felis, imperdiet vitae scelerisque at, ullamcorper ac ipsum. Cras non elit risus. Morbi feugiat augue sit amet quam faucibus feugiat. Nam eleifend metus a est feugiat gravida faucibus turpis posuere. Nulla facilisi. Suspendisse arcu ipsum, consequat non vulputate nec, vulputate sit amet orci. Pellentesque scelerisque, sapien in lacinia auctor, arcu nunc imperdiet lacus, id adipiscing urna elit a sapien. Fusce ullamcorper justo sem, sed suscipit libero.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris purus, egestas eget aliquam eget, mollis in libero. In semper leo sit amet arcu convallis consequat at eget felis. Sed scelerisque malesuada ligula, vitae gravida arcu condimentum ut. Donec magna turpis, convallis nec luctus in, facilisis quis dui. Aenean dapibus purus at enim semper viverra.Nunc lacus arcu, bibendum rutrum feugiat in, ornare eget nisl. Morbi nec libero nec nisi consequat mollis. Fusce condimentum nisi et est fermentum malesuada. </p>
</article><!--haupttext-->
<div id="content-bild1"><img src="images/psd-dvd1.jpg" width="125" height="125" alt="PSD-DVD"></div><!--content-bild1-->
<div id="content-bild2"><img src="images/psd-dvd2.jpg" width="125" height="125" alt="PSD-DVD 2"></div><!--content-bild2-->
<div id="content-bild3"><img src="images/html5-css3.jpg" width="125" height="125" alt="PSD-HTML5"></div><!--content-bild3-->
</section><!--content-->
</div><!--section-wrapper-->
<footer><p>© Thomas Becker 2012 | <a href="#" title="zum Impressum">Impressum</a></p></footer><!--footer-->
</div><!--wrapper-->
</body>
und die dazugehörige CSS
PHP:
/* CSS Document */
/* **********ALLGEMEINE FORMATIERUNGEN**********
************************************************/
*{
margin: 0;
padding: 0;
}
html, body {
background: #FFF;
}
/* ********************Typo*********************
************************************************/
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
}
p {
margin-top: 20px;
}
#artikeltext p:first-child {
margin-top: 0px;
}
h1 {
font-family: 'Oswald', Arial, sans-serif;
font-size: 40px;
text-align: center;
font-weight: 700;
color: #FFF;
text-shadow: 1px 1px 0px #000000;
margin-top: 175px;
}
h2 {
font-family: 'Oswald', Arial, sans-serif;
font-size: 24px;
font-weight: 700;
color: #FFF;
text-shadow: 1px 1px 0px #000000;
}
#sidebar h3 {
font-family: 'Oswald', Arial, sans-serif;
font-size: 20px;
font-weight: 700;
color: #FFF;
text-shadow: 1px 1px 0px #000000;
display: block;
background: #999;
width: 230px;
height: 30px;
line-height: 30px;
text-indent: 30px;
border-bottom: 1px #CCC;
margin-bottom: 5px;
}
#breadcrumb a {
font-family: 'Oswald', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #FFF;
text-decoration: none;
line-height: 43px;
margin-left: 30px
}
#breadcrumb a:hover {
text-decoration:underline;
}
footer p {
text-align: center;
font-size: 12px;
}
footer p a {
font-size: 12px;
text-decoration: none;
color: #FFF;
}
footer p a:hover {
text-decoration: underline;
}
/* *******************Layout********************
************************************************/
#wrapper {
width: 1050px;
margin: 0px auto;
}
#main-header {
width: 1050px;
height: 330px;
float:left;
}
#main-navigation {
width: 1050px;
height: 42px;
float: left;
background: rgb(102,102,102); /* Old browsers */
background: -moz-linear-gradient(top, rgba(102,102,102,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(102,102,102,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
border-bottom: 1px solid #CDCDCD;
}
#headerbild {
background:url(../images/bg_header.jpg);
background-repeat:no-repeat;
width: 1050px;
height: 287px;
float:left;
}
#breadcrumb {
width: 1050px;
height: 43px;
background: #363636;
border-top: 1px solid #CDCDCD;
float:left;
}
#section-wrapper {
width: 1050px;
float: left;
background: #7e7e7e; /* Old browsers */
background: -moz-linear-gradient(left, #7e7e7e 0px, #7e7e7e 230px, #666666 230px, #666666 1050px); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0px,#7e7e7e), color-stop(230px,#7e7e7e), color-stop(230px,#666666), color-stop(1050px,#666666)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #7e7e7e 0px,#7e7e7e 230px,#666666 230px,#666666 1050px); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #7e7e7e 0px,#7e7e7e 230px,#666666 230px,#666666 1050px); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #7e7e7e 0px,#7e7e7e 230px,#666666 230px,#666666 1050px); /* IE10+ */
background: linear-gradient(to right, #7e7e7e 0px,#7e7e7e 230px,#666666 230px,#666666 1050px); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e7e7e', endColorstr='#666666',GradientType=1 ); /* IE6-9 */
}
#sidebar {
width: 230px;
float: left;
margin-top: 15px;
}
#content {
width: 780px;
float: left;
padding: 10px 20px;
}
#content-bild1 {
float: left;
margin-right: 75px;
margin-left: 50px;
margin-top: 25px;
}
#content-bild2 {
float: left;
margin-right: 75px;
margin-left: 75px;
margin-top: 25px;
}
#content-bild3 {
float: left;
margin-left: 75px;
margin-top: 25px;
}
footer {
width: 1050px;
height: 43px;
background: #363636;
border-top: 1px solid #CDCDCD;
float:left;
}
/* ******************NAVIGATION*****************
************************************************/
#main-navigation .menu {
list-style-type: none;
width: 1050px;
}
#main-navigation .menu li a {
width: 173px;
height: 42px;
display: block;
float: left;
font-family: 'Oswald', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 42px;
text-align: center;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px 0px #000000;
border-right: 1px solid #CCC;
border-left: 1px solid #666;
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
-ms-transition: all 400ms ease-in;
-o-transition: all 400ms ease-in;
transition: all 400ms ease-in;
}
#main-navigation .menu li:first-child a {
border-left: none;
width: 174px;
}
#main-navigation .menu li:last-child a {
border-right: none;
width: 174px;
}
#main-navigation .menu li a:hover {
background-color: rgba(51, 51, 51, 0.3);
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
-ms-transition: all 400ms ease-in;
-o-transition: all 400ms ease-in;
transition: all 400ms ease-in;
}
/* ****************SUB-NAVIGATION***************
************************************************/
#sidebar .menu {
list-style-type: none;
width: 230px;
}
#sidebar .menu li a {
width: 230px;
height: 36px;
display: block;
float: left;
font-family: 'Oswald', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 36px;
text-indent: 30px;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px 0px #000000;
border-bottom: 1px dashed #CCC;
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
-ms-transition: all 400ms ease-in;
-o-transition: all 400ms ease-in;
transition: all 400ms ease-in;
}
#sidebar .menu li a:hover {
background: #CCC;
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
-ms-transition: all 400ms ease-in;
-o-transition: all 400ms ease-in;
transition: all 400ms ease-in;
}