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

Neuer Versuch: Struktur meiner Webseite

  • Ersteller Ersteller einsiedlerX
  • Erstellt am Erstellt am
E

einsiedlerX

Guest
Hallo @ all,

ich habe meine vorhergehende Struktur aufgegeben und gestalte meine Seite mit vielen Unterseiten, das scheint mir leichter!
icon_surprised.gif
)

http://www.tassilo.sturm.serverma.de/test_index.html

so sieht es bisher aus, ich habe mir mal html5 angeschaut, aber sicherlich ist der code NICHT perfekt!

Eine Frage habe ich, und zwar möchte ich die drei Fotos waagerecht in eine Reihe bekommen, habe dazu diverse Versuche mit float und mit inline:block; ausprobiert aber nichts hat funktioniert.
Warscheinlich ist es so schwer weil viele div`s ineinander verschachtet sind, lieg ich da richtig!
Wie sieht die Lösung aus? (BITTE um HILFE!)



Code:
<!DOCTYPE html>
<html dir="ltr" lang="de-DE">

    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


<head>
    <meta charset="UTF-8" />
    <meta name="description" content="Waldfrieden -- Tassilo Sturm" />
    <title>Waldfrieden -- Tassilo Sturm</title>

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

    <link rel="icon" href="img.ico" />
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="css/TEST.css"/>
   

    <script>
        document.createElement('article');
        document.createElement('section');
        document.createElement('aside');
        document.createElement('hgroup');
        document.createElement('nav');
        document.createElement('header');
        document.createElement('footer');
        document.createElement('figure');
        document.createElement('figcaption');
    </script>
</head>


<body>

<div id="wrapper">  <!-- Anfang vom wrapper-Bereich -->

    <header class="page_header"> <h1 class="ueberschrift">Waldfrieden  --  Tassilo Sturm </h1></header>

        <div id="sidebar_menueblock_li">

            <aside id="block1">
                <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                </p>
            </aside>

            <nav class="block3">
                     <ul>
                       <li> <a href="#">Link 1</a></li>
                       <li> <a href="#">Link 2</a> </li>
                       <li> <a href="#">Link 3</a> </li>
                       <li> <a href="#">Link 4</a> </li>
                     </ul>
              </nav>

            <aside id="block2">
                <p><b>
                        Stet clita kasd gubergren, no sea takimata sanctus est Lorem
                        ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
                        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e
                </b></p>
            </aside>

        </div>

        <section id="main">

            <h5>&nbsp;</h5>

            <article class="sidebar_textblock">

                <h5>&nbsp;</h5>

                <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.    
                </p>

                <nav class="block3">
                         <ul>
                           <li> <a href="#">Bild 1</a></li>
                        <li> <a href="#">Bild 2</a></li>
                           <li> <a href="#">Bild 3</a> </li>
                           <li> <a href="#">Bild 4</a> </li>
                           <li> <a href="#">Bild 5</a> </li>

                    </ul>
                </nav>

            </article>

            <article class="sidebar_fotoblock">

                <h5>&nbsp;</h5>

                <span class="bild">
                    <img src="fotos/20150409_020705_web_klein.jpg" width="850" height="478" alt="">               
                </span>
                <span class="bild">
                    <img src="fotos/20150409_020705_web_klein.jpg" width="850" height="478" alt="">               
                </span>
                <span class="bild">
                    <img src="fotos/20150409_020705_web_klein.jpg" width="850" height="478" alt="">               
                </span>

            </article>

            <article class="sidebar_menueblock_re">

                <h5>&nbsp;</h5>

                <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
                        dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
                        et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>

            </article>

        </section>


    <footer role="contentinfo"> </footer>

</div>  <!-- ENDE vom wrapper-Bereich -->

</body>

</html>


Bitte helft mir mal ein wenig auf die Sprünge! Ich seh den Bildschirm voller Zahlen nicht!


Grüsse der einsiedelnde
 
Die Fotos sind doch viel zu groß um sie waagerecht zu machen. Willst du sie dann dementsprechend verkleinern oder was?
 
Also, das erste Foto soll in ganzer Größe dargestellt werden, dazu werde ich es entsprechend ein wenig verkleinern (das man es komplett sieht!), um alle weiteren Fotos zu sehen, dann soll man den waagerechten scrollbalken betätigen!
 
Zurück
Oben