• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Inhalt neben Menüleiste anordnen

T

Tobi0502

Neues Mitglied
Hallo,
ich muss für die Schule eine Html Seite erstellen. Das ist meine erste Html Seite und habe schon ein Problem:
Ich habe eine Menüleiste erstellt und ich möchte gerne neben der Menüleiste eine Tabelle haben, wo ich dann ein Video und ein Bild einfügen kann. Aber ich habe es schon so oft probiert, aber leider funktioniert das bei mir nicht. Die Tabelle ist entweder unter der Menüleiste oder die Menüleiste verschiebt sich.

HTML: 
<html>
<head>
<title>EURO 2016</title>
</head>
<body>
<pre><H1>
Die Offizielle Webseite zur Euro 2016</H1></pre>
</body>
</html>
<html>
<body background="Hintergrundbild.jpg">
<html>

<pre>

<style type="text/css">
<!--
ul#navigation {
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#navigation li {
padding: 0px;
margin: 5px;
width: 20%;
}

ul#navigation li a:link {
display: block;
border: 1px solid #000;
background-color: #ffffff;
padding: 10px;
color: #000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
}

ul#navigation li a:hover {
display: block;
border: 1px solid #54993f;
background-color: #727165;
color: #fff;
}
-->
</style>

</head>
<body>
<nav>
<ul id="navigation">
<li><a href="Tobi.html">Startseite</a></li>
<li><a href="Schiedsrichter.html">Schiedsrichter</a></li>
<li><a href="Stadien.html">Stadien</a></li>
<li><a href="Spielplan.html">Spielplan</a></li>
<li><a href="Quellen.html">Quellen</a></li>
</nav>
</ul>
</body>
</html>
<head>
<pre> <table style="margin-left:600px;" border="4" valign="top"> <tr>



<td> <video>
<source src="video.mp4" type="video/mp4" />
</video> </td>
<td> <img src="EM-Pokal.png" align="right"/> </p></td>
</tr>
</table
</pre>



Das ist meine Html Seite. Ich würde mich über einen Ratschlag sehr freuen.
Lg Tobi
 
Zuletzt bearbeitet von einem Moderator:
Hallo

Der HTML-Quelltext könnte so aussehen:

Code: 
   <main role="main">
      <h1>Die inoffiziellste Webseite zur Euro 2016</h1>
      <div>
         <nav role="navigation">
            <ul>
               <li><a href="#">Startseite</a></li>
               <li><a href="#">Schiedsrichter</a></li>
               <li><a href="#">Stadien</a></li>
               <li><a href="#">Spielplan</a></li>
               <li><a href="#">Quellen</a></li>
            </ul>
         </nav>
         <iframe width="640" height="360" src="https://www.youtube.com/embed/SJTyY2csya8?rel=0" allowfullscreen></iframe>
         <figure>
            <img src="http://lorempixel.com/400/250/sports/2" alt="Sportbild">
         </figure>
      </div>
   </main>

Um ein funktionierendes Video zu erhalten habe ich das iframe-Element verwendet. Du kannst statt dessen natürlich auch das video-Element verwenden.

Der Quelltext einer gesamten Seite mit dem CSS könnte folgendermaßen aussehen:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Clearfix*/
   @media all {
      main::before,
      main::after,
      .clearfix::before,
      .clearfix::after,
      .cf::before,
      .cf::after {
         content: " "; /*Leerstelle ist wichtig*/
         display: table;
      }
      main::after,
      .clearfix::after,
      .cf::after {
         clear: both;
      }
   }

   /*Grundeinstellungen*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         width: 96%;
         margin: 1rem auto;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0;
      }
      img {
         /*text-align: bottom;*/
         display: block;
         max-width: 100%;
         max-height: 100vh;
         border: 0;
      }
   }

   /*Spezielle Einstellungen*/
   @media all {
      main>div>* {
         float: left;
         border: 2px solid gray;
         margin-bottom: 10px;
      }
      main nav {
         margin: 0 10px 0 0;
      }
      main nav>ul {
         list-style-type: none;
         padding: 5px 10px;
         margin: 0;
      }
      main nav>ul li {
         padding: 0px;
         margin: 5px;
      }
      main nav>ul li a:link {
         background-color: #ffffff;
         color: #000;
         font-family: Arial, Helvetica, sans-serif;
         font-weight: bold;
         text-decoration: none;
         display: block;
         border: 1px solid #000;
         padding: 10px;
      }
      main nav>ul li a:hover {
         background-color: #727165;
         color: #fff;
         display: block;
         border: 1px solid #54993f;
      }
      main iframe {
         margin-right: 10px;
      }
   }

   /*Vorlage für das gesamte CSS*/
   @media all {
   }
   /*Vorlage zum Kopieren für Media Queries - Mobile first*/
   @media only screen and (min-width: 0px) {
   }
   /*Vorlage zum Kopieren für Media Queries - Desktop first*/
   @media only screen and (max-width: 0px) {
   }

   </style>
</head>
<body>
   <header role="banner">
   </header>
   <nav role="navigation">
   </nav>
   <main role="main">
      <h1>Die inoffiziellste Webseite zur Euro 2016</h1>
      <div>
         <nav role="navigation">
            <ul>
               <li><a href="#">Startseite</a></li>
               <li><a href="#">Schiedsrichter</a></li>
               <li><a href="#">Stadien</a></li>
               <li><a href="#">Spielplan</a></li>
               <li><a href="#">Quellen</a></li>
            </ul>
         </nav>
         <iframe width="640" height="360" src="https://www.youtube.com/embed/SJTyY2csya8?rel=0" allowfullscreen></iframe>
         <figure>
            <img src="http://lorempixel.com/400/250/sports/2" alt="Sportbild">
         </figure>
      </div>
   </main>
   <footer role="contentinfo">
   </footer>
</body>
</html>

Das CSS und einige Angaben kannst und solltest du natürlich deinen Wünschen anpassen. Zum Beispiel der Inhalt des title-Elements, das video- statt des iframe-Elements, Abstände, Rahmen und so weiter.

Und ein Link zum direkten Ausprobieren:

http://boratb.bplaced.net/index15.html

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hallo,
sorry das ist echt peinlich, den Button muss ich komplett übersehen haben. Ich hab den Code jetzt überarbeitet. Ist der jetzt besser:
HTML: 
<html>
<head>
<title>EURO 2016</title>
</head>
<body>
<pre><H1>          
            Die Offizielle Webseite zur Euro 2016</H1></pre>
</body>                     
<body background="Hintergrundbild.jpg">

    <pre>
  
    <style type="text/css">
    <!--
    ul#navigation {
        margin: 0px;
        padding: 0px;
        list-style-type: none;             
    }

    ul#navigation li {
        padding: 0px;
        margin: 5px;
        width: 20%;
    }

    ul#navigation li a:link {
        display: block;
        border: 1px solid #000;
        background-color: #ffffff;
        padding: 10px;
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        font-weight: bold;
    }

    ul#navigation li a:hover {
        display: block;
        border: 1px solid #54993f;
        background-color: #727165;
        color: #fff;
    }
    -->
    </style>
  
</head>
<body>
<nav>                                                                                          
   <ul id="navigation">                                                                   
        <li><a href="Tobi.html">Startseite</a></li>                         
    <li><a href="Schiedsrichter.html">Schiedsrichter</a></li>                                 
        <li><a href="Stadien.html">Stadien</a></li>           
        <li><a href="Spielplan.html">Spielplan</a></li>
        <li><a href="Quellen.html">Quellen</a></li>
</nav>
    </ul>
</body                                            
   <head>
<pre>                                   <table style="margin-left:600px;" border="4" valign="top"> <tr>



      <td> <video>
<source src="video.mp4" type="video/mp4" />
</video> </td>
      <td> <img src="EM-Pokal.png" align="right"/> </p></td>
   </tr>
</table 
</pre>

Besser?
Wenn ja, wie bekomme ich die Tabelle neben die Menüleiste?
Danke :)
LG Tobi
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben