Siri: HTML5: Neue Elemente mit css formatieren?

Hallo,

ist folgende Vorgehensweise konform?

<nav id="testnav">  
  
</nav>

und im css:,

#testnav {  
	position: absolute;  
	top: 0;  
	left: 0;  
	width: 100%;  
	display: none;  
	visibility: hidden;  
}

Im IE9 funktionierts nicht... Bin aber jetzt unsicher, da ich mich mit HTML5 noch nicht gut auskenne.

Danke und Gruß
Siri

  1. Hallo,

    ist folgende Vorgehensweise konform?

    Ja.

    Im IE9 funktionierts nicht... Bin aber jetzt unsicher, da ich mich mit HTML5 noch nicht gut auskenne.

    Guck dir mal http://code.google.com/p/html5shiv/ (oder http://en.wikipedia.org/wiki/HTML5_Shiv) an, dem IE muss man mit JavaScript ein bisschen nachhelfen damit es die neuen Elemente erkennt.

    Jeena

  2. Hallo,

    Im IE9 funktionierts nicht... Bin aber jetzt unsicher, da ich mich mit HTML5 noch nicht gut auskenne.

    Oh hab überlesen dass es sich um IE9 handelt, der sollte damit eigentlich zurechtkommen. Wie äußert sich "funktionierts nicht"? Wird es dennoch angezeigt oder was?

    Jeena

    1. Hallo,

      Oh hab überlesen dass es sich um IE9 handelt, der sollte damit eigentlich zurechtkommen. Wie äußert sich "funktionierts nicht"? Wird es dennoch angezeigt oder was?

      Ja, genau, es wird dennoch angezeigt und auch nicht positioniert. IE scheint die CSS-Eigenschaft komplett zu ignorieren. Im FF und Safari (auch mobile) wird es korrekt angezeigt.

      Wichtig war mir aber, dass ich generell so vor gehen kann. Wär ja doof wenn ich einen nav-Bereich noch mit einem div ergänzen müsste um den gewünschten Effekt zu erreichen. Ich möchte ein Layout mit HTML5 für Smartphones erstellen, der Benutzer kann aber zum Bildschimlayout wechseln und umgekehrt. Benutzer mit dem IE haben dann halt Pech.

      Gruß,
      Siri

      1. @@Siri:

        nuqneH

        Ja, genau, es wird dennoch angezeigt und auch nicht positioniert.

        Nein, das Element wird im IE 9 sowohl nicht angezeigt als auch positioniert.*

        Du machst irgendwas falsch.

        Qapla'

        * Den Widerspruch aufzulösen überlasse ich dir. ;-)

        --
        Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
        1. Hallo,

          hast du vielleicht eine Idee, wo ich suchen könnte?

          <!DOCTYPE html>  
          <html>  
            <head>  
              <meta charset="utf-8"/>  
              <title>Start | iPhone</title>  
              <meta http-equiv="cache-control" content="no-cache"/>  
              <meta http-equiv="pragma" content="no-cache"/>  
               <meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport"/>  
              <link rel="stylesheet" href="css/smartbasictemp.css" type="text/css"/>  
             </head>  
            <body>  
               <nav id="mainnav">  
                <ul id="nav1">  
                  <li id="1" class="nav1">  
                    Start  
                  </li>  
                </ul>  
              </nav>  
              <nav id="popnav">  
          	Blubb  
              </nav>  
            </body>  
          </html>
          
          BODY  {  
          	position: relative;  
          	top: 0px;  
          	left: 0px;  
          	margin: 0;  
          	padding: 0;  
          	width: 100%;	  
          }  
          #mainnav  {  
          	position: relative;  
          	top: 0;  
          	left:0;	  
          	display: block;  
          	margin: 0;  
          	padding: 0;  
          }  
          #nav1  {  
          	width: 100%;  
          	position: relative;  
          	top: 0;  
          	left:0;  
          	margin: 0;  
          	padding: 0;		  
          }  
          #nav1  li.nav1 {  
          	height: 40px;  
          	line-height:40px;  
          	display: inline;  
          	float: left; 	  
          }  
          #popnav {  
          	position: absolute;  
          	top: 0;  
          	left: 0;  
          	width: 100%;  
          	display: none;  
          	visibility: hidden;  
          }  
          
          

          Da sollte man doch annehmen, das <nav id="popnav"> nicht angezeigt wird und wenn, dann an der Position 0,0?!

          Gruß
          Siri

          1. Hi,

            Da sollte man doch annehmen, das <nav id="popnav"> nicht angezeigt wird und wenn, dann an der Position 0,0?!

            Ja.
            In IE<9 aber nicht, weil die HTML5 Elemente nicht kennen (auf den HTML5-Shiv wurdest du bereits hingewiesen).

            ~dave

            1. Hallo,

              In IE<9 aber nicht, weil die HTML5 Elemente nicht kennen (auf den HTML5-Shiv wurdest du bereits hingewiesen).

              Ja, aber ich teste doch mit dem IE9! Und Gunnar meinte, das ich einen Fehler hab. Den seh ich aber im geposteten Code nicht.

              Gruß,
              Siri

          2. @@Siri:

            nuqneH

            Da sollte man doch annehmen, das <nav id="popnav"> nicht angezeigt wird und wenn, dann an der Position 0,0?!

            Sollte man. Und genau das tritt auch ein.

            Was ist dein Problem?

            <meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport"/>

            Nutzern das Skalieren zu verbieten, ist wohl keine gute Idee. Weg mit 'maximum-scale=1'.

            <link rel="stylesheet" href="css/smartbasictemp.css" type="text/css"/>

            @type ist überflüssig.

            <nav id="mainnav">
                  <ul id="nav1">
                    <li id="1" class="nav1">

            Die ID und die Klasse "nav1" sind überflüssig. In CSS kannst du diese Elemente als Nachfahren von '#mainnav' ansprechen.

            BODY  {

            Warum in Versalien?

            Qapla'

            --
            Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
            1. Hallo,

              Sollte man. Und genau das tritt auch ein.

              Was ist dein Problem?

              Mein Problem ist, dass ich ab und zu mal den Cache löschen sollte... Danke an alle! I'm sorry!

              Gruß
              Siri

  3. Hi,

    ist folgende Vorgehensweise konform?

    ja. Ist die Seite so gestaltet, dass sich der Browser auch konform verhält? Das Stichwort lautet "Quirks-Mode", und das Motto "vermeide es wie die Pest".

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hallo,

      ja. Ist die Seite so gestaltet, dass sich der Browser auch konform verhält? Das Stichwort lautet "Quirks-Mode", und das Motto "vermeide es wie die Pest".

      <!DOCTYPE html>  
      <html>  
        <head>  
          <meta charset="utf-8"/>  
          <title>Start | iPhone</title>  
            <meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport"/>  
          <link rel="stylesheet" href="http://127.0.0.1/shark/css/smartbasic.css" type="text/css"/>  
        </head>  
        <body>  
          <header pgtype="head" name="paragraph" class="paragraphhead">  
            <img src="img/head_s.jpg"/>  
          </header>  
          <nav id="mainnav">  
            <div class="navbackground"></div>  
            <ul id="nav1">  
              <li id="1" class="nav1selected">  
                <a href="http://127.0.0.1/shark/index.html">Start</a>  
              </li>  
              <li id="y25O2b_1322732116397" class="nav1">  
                <a href="http://127.0.0.1/shark/programm.html">Programm</a>  
              </li>  
             </ul>  
          </nav>  
          <nav id="popnav">  
            <ul id="diacontent1" class="popnavmain">  
              <li>  
                <a href="http://127.0.0.1/shark/geschichte.html">  
                  <span>Geschichte</span>  
                </a>  
              </li>  
              <li name="shlangchange" id="en">  
                <a href="http://127.0.0.1/shark/">  
                  <span>Englisch</span>  
                </a>  
              </li>  
              </ul>  
          </nav>  
         </body>  
      </html>
      

      Das müsste doch soweit passen, oder?

      Gruß
      Siri