frage an erfahrene webdesigner

  • hallo


    ich habe eine webseite erstellt jedoch habe ich ein paar fragen hier einmal der code


    html code:

    HTML
    <!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="description" content="">    <meta name="keywords" content="">    <meta name="author" content="rudi" />    <meta name="publisher" content="lostchild" />    <meta name="copyright" content="lostchild" />    <meta http-equiv="content-language" content="de" />    <meta name="robots" content="INDEX, FOLLOW" />    <link href="styles/apokalypse.css" type="text/css" rel="stylesheet">    <link href="images/redes8.png" type="image/x-icon" rel="shortcut icon">         <title>Apokalypse</title>        <!--[if lt IE 9]>    <script src="bower_components/html5shiv/dist/html5shiv.js"></script><![endif]--></head><body>   <div id="links"></div>      <div id="background"> <img id="back" src="images/zombie.jpg" alt="Startseite"  title="Zombie"  />      <div id="seitenformat">       <div id="header" align="center"><img id="headerbild" src="images/header.jpg" alt="Startseite"  title="Apokalypse" /></div>      <div id="nav">      <ul>      <li><a href="index.html"><span></span>Startseite</a></li>      <li><a href="kontakt.html"><span></span>Kontakt</a></li>      <li><a href="information.html"><span></span>Informationen</a></li>       <li><a href="apokalypse.html"><span></span>Apokalypse</a>       <ul>      <li class="zombie"><a href="zombie.html">Zombieapokalypse</a></li>      <li class="strom"><a href="strom.html">Stromkatastrophe</a></li>      <li class="fallout"><a href="fallout.html">Atomkatastrophe</a></li>      <li class="alien"><a href="alien.html">Angriffskatastrophe</a></li>      </ul>    </li></ul></div>         <div id="inhaltmitte">    <div id="inhalt">  <h1 id="h">Apokalypse</h1>     <blockquote><p>Apokalypsen sind immer schrecklich und bedeuten schwere Zeiten f&uuml;r die Menschen.     Es gibt verschiedene Arten der Apokalypsen wie zb: eine Apokalypse durch einen Fallout,      eine Naturkatastrophe,einen Elektrizit&auml;tsausfall,einen Angriff durch Aliens     oder eine der beliebtesten Apokalypsenszenarios ist die <span class="span"> Zombie Apokalypse</span>.</p>     <img src="images/apokalypse.jpg" border="2" height="150" width="350" alt="apokalypse" />     <p>Bei jeder Art von Apokalypse muss man vorbereitet sein und sich mit bestimmten Gagdets und     Ausr&uuml;stungsgegenst&auml;nden eindecken.Hier werdet Ihr erfahren welche Hilfsmittel es gibt     und wie man Sie benutzt oder herstellt und wie man in so einer Zeit &uuml;berleben kann.Also macht euch bereit ...</p>   </blockquote>     </br>         <p id="liste">Was darf ich nicht sein:</p>         <ul style="disc" >         <li class="punkte">&auml;ngstlich</li>         <li class="punkte">langsam</li>         <li class="punkte">laut</li>         <li class="punkte">noch ein punkt</li>         <li class="punkte">und noch ein punkt</li>         </ul>             <img id="sign" src="images/redes4.png" align="right"  alt="vorsicht zombie" />      </div>    </div>   <div id="fusszeile">Wir helfen dir zu &Uuml;berleben</div>  </div></body></html>


    hier der css code:



    hier ein link zu meiner seite:
    http://www.rudi83.lima-city.de/


    wie ihr seht habe ich auf der liinken seite einen schwarzen balken bzw hintergrund....den ich mit der kennzeichnungs id : links erstellt habe
    und rechts davon habe ich ein bild mit den zombiehänden mit der kennzeichnungs id back

    das problem ist das ich bei beiden eine height erstellt habe ich es aber lieber mit height 100% benutzen würde.
    das leider aber nicht geht weil es keinen inhalt hat.

    das in der mitte mit dem blauen border hat die kennzeichnungs id inhalt und das ist auf height 100%
    und das dahinter ist mit kennzeichnungs id inhaltmitte


    ich weiß mein code ist ein bisschen unübersichtlich aber bitte trotzdem um hilfe das ist meine erste seite.

  • Für das was Du da vom Layout erreichen willst, reicht es wenn Du auf einige Elemente verzichtest und den Style per CSS löst.

    Also #links weg, ebenso dieses img-zombie-Bild. Danach setzt Du für body die Hintergrundfarbe schwarz ein und das Zombie-Bild als Hintergrundbild, welches Du rechts positionierst. Fertig.