hallo
ich habe eine webseite erstellt jedoch habe ich ein paar fragen hier einmal der code
html code:
<!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ür die Menschen. Es gibt verschiedene Arten der Apokalypsen wie zb: eine Apokalypse durch einen Fallout, eine Naturkatastrophe,einen Elektrizitä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üstungsgegenständen eindecken.Hier werdet Ihr erfahren welche Hilfsmittel es gibt und wie man Sie benutzt oder herstellt und wie man in so einer Zeit überleben kann.Also macht euch bereit ...</p> </blockquote> </br> <p id="liste">Was darf ich nicht sein:</p> <ul style="disc" > <li class="punkte">ä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 Überleben</div> </div></body></html>
hier der css code:
#headerbild{
width: 1190px;
height: 105px;
border-radius:6px;
margin: 0 auto;
}
#back{
float: right;
width: 346px;
height: 1100px ;
}
#header{
background-image: url(image/bg_list.gif) ;
border-radius:5px;
height: 110px;
}
#links{
background-color: #000000;
color: #FFFFFF;
float: left;
width: 346px;
height: 1100px;
}
#background{
height: auto;
background-color: #4A4A4A;
}
#seitenformat{
width: 1200px;
margin: 0 auto;
}
#nav{
width: 170px;
float: left;
}
#nav ul{
list-style: none;
}
#nav li{
width: 150px;
text-align: left;
font-family: fantasy;
font-size: small;
font-style: italic;
background-image: url(image/bg_menu.gif);
padding-top: 10px;
padding-left: 10px;
margin-right: 10px;
margin-bottom: 5px;
padding-bottom: 8px;
margin-left: -40px;
border-left: 25px orange solid;
border-radius:8px;
}
/*Span-Elemente*/
#nav span {
border-color: transparent #aaa transparent transparent; /*Dreieckfarbe */
border-style:solid; /*Randstyle*/
border-width:7px; /*Dreiecksgrösse*/
width:0; /*Breite (muss 0 sein)*/
height:0; /* Höhe (muss 0 sein*/
display:inline-block; /* Anzeigeart */
float:right; /* rechtsbündig */
margin-right:7px; /* Rand rechts */
position:relative; /* Positionierung */
transition:all 0.5s; /* Transition */
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
/*Span im Hoverzustand */
#nav a:hover span {
border-color: transparent #fff transparent transparent ; /* Dreieckfarbe */
transform:rotate(180deg); /* Rotation 180° */
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
/* Links Submenu */
#nav ul ul li a {
color:#476EA8; /* Schriftfarbe */
font-size:15px; /* Schriftgrösse */
}
/* Links Submenu Hoverzustand */
#nav ul ul li a:hover {
color:#153363; /*Schriftfarbe */
letter-spacing: 1px; /*Buchstabenabstand*/
background: #F0F4FA; /*Hintergrundfarbe */
}
#nav ul ul li {
width:170px; /* Breite */
background:#DCE1E8; /*Hintergrundfarbe*/
border:1px solid #D5D7DB; /*Rand*/
border-top:0; /*Rand oben*/
}
/*Verhalten der Unterlisten bei Hover */
#nav ul li:hover ul {
display:block; /* Blockanzeige der Unterlisten */
}
/*Submenulisten*/
#nav ul ul {
margin-left:-20px;
position:absolute; /* Absolute Positionierung */
left:180px; /*Abstand Links (breite des Hauptmenüs) */
top:0; /*Abstand oben */
border-top:1px solid #e9e9e9; /* oberer Rand */
display:none; /* Keine Anzeige, wenn li nicht gehovert */
}
/* Links Hoverzustand */
#nav a:hover {
background: RGBA(255,255,255,0.05); /* Hintergrundfarbe */
color:#153363; /* Schrifrfarbe */
font-style: italic; /* Kursiv */
}
#nav a {
color:#476EA8; /* Schriftfarbe */
display:block; /* Block-Anzeige, jedes Element neue Zeile */
text-decoration:none; /*keine Unterstreichung*/
transition:1s; /* Fliessende Bewegung */
-moz-transition:1s;
-webkit-transition:1s;
-o-transition:1s;
font-family:Playfair Display; /* Schriftart */
font-weight: bold; /* Fett */
font-size:16px; /* Schriftgrösse */
padding-left:10px; /* Abstand links */
}
#nav ul li {
position:relative; /*relative Positionierung der
Listenpunkte, damit Unterpunkte
absolut positioniert werden können.*/
}
#inhaltmitte{
color: #FF0000;
margin-bottom: 20px;
text-align: center;
}
#h{
color: #FF0000;
}
#inhalt{
margin-top: 20px;
text-align: center;
width: 850px;
height: 100%;
margin-left: 200px;
padding-top: 0px;
color: #FFFFFF;
font-style: italic;
font-family: monospace;
background-color: #575757;
border-radius:8px;
border: 2px #0D97DC solid;
}
.span{
color: #FF0000;
}
#liste{
color: #CCCCCC;
font-size: large;
font-family: Verdana;
font-style: italic;
}
#punkte{
text-align: center;
margin: 0 auto;
}
#sign{
height: 100px;
width: 100px;
margin-top: -120px;
margin-right: 50px;
}
#fusszeile{
z-index: 1;
text-align: center;
color: #FF0000;
background-color: #000000;
border-radius:5px;
}
Alles anzeigen
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.