Antworten auf deine Fragen:
Neues Thema erstellen

Hilfe bei HTML5

Betchy

Betchy

Nicht mehr ganz neu hier

Kreativ-Flatrate-User
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,
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>&copy; Thomas Becker 2012&nbsp;&nbsp;|&nbsp;&nbsp;<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;
}
 

J000S

J000S

Noch nicht viel geschrieben

AW: Hilfe bei HTML5

Tja da kommt der tolle IE *hust* wohl nicht mit dem Verlauf klar...
ich würde einfach als Hintergrundfarbe ein grau oder so Nehmen. dann wirds im IE zumindest schonmal farbig ;)
 
G

Gelöschtes Mitglied 133165

Guest

AW: Hilfe bei HTML5

HTML5 ist noch nicht wirklich verabschiedet und der IE war sowieso noch nie für das Einhalten von Standards bekannt. Wenn es unbedingt HTML 5 sein muss solltest Du hier:
http://html5css3box.com/multiple-columns/
einige Anregungen und Lösungen finden, auch mit IE-"Hacks".
Ansonsten kann ich zumindest auf den Screenshots nichts erkennen, das nicht auch mit HTML4 und CSS machbar wäre. Daher mein immer wieder gern gegebener Tipp:
http://little-boxes.de/
und wenn Du Dich damit beschäftigst wirst Du sicher auch kein schlechterer HTML5-Coder. Viel Erfolg wünsch ich !
 
mapegele

mapegele

Täglich anwesend

AW: Hilfe bei HTML5

Ja, ja, der gute alte IE. Da wirst Du um eine eigene CSS-Datei für den IE nicht drumrum kommen. Diese muß speziell für den IE angepasst sein und in der Index natürlich eingebunden sein. Dann sollte es auch mit dem IE klappen.

Verpixelte Grüße
 
hub

hub

nicht ganz neu hier

AW: Hilfe bei HTML5

Moin,
ich denke, mit ner eigenen CSS für den IE8 ist es nicht getan, er erkennt die Tags header und nav (...) nicht. Abhilfe schafft z.B. "modernizr.js". Das Script macht die für die alten IE's die Tags erkennbar.

Gruß Ulli
 
Betchy

Betchy

Nicht mehr ganz neu hier

Kreativ-Flatrate-User
AW: Hilfe bei HTML5

hub schrieb:
Moin,
ich denke, mit ner eigenen CSS für den IE8 ist es nicht getan, er erkennt die Tags header und nav (...) nicht. Abhilfe schafft z.B. "modernizr.js". Das Script macht die für die alten IE's die Tags erkennbar.

Gruß Ulli
Zum Vergrößern anklicken....
Danke für den Tipp.
Kannst du mir vieleicht mitteilen wo ich dieses Script finde und wie ich es einbauen muss? :rolleyes:
 
hub

hub

nicht ganz neu hier

AW: Hilfe bei HTML5

Ich noch mal :),
der Link, also Download + Bescheribung: http://modernizr.com/ .
Ich nutze dieses Script als einziges im Head, der Rest kommt dann am Ende der Seite (vor </body>). Dort gibts einen Configurator, so das du das Script auch klein halten kannst.
z.B. (Pfade anpassen ) :
PHP: 
<head>
...
 <link href="/css/default.css" media="screen" rel="stylesheet" type="text/css" >
 <script type="text/javascript" src="/js/libs/modernizr.js"></script>        
</head>

Gruß Ulli
Ps. war deutlich zu langsam :'(
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 243 (Mitglieder: 10, Gäste: 233)
Robots: 1.064

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben