HTML & CSS Lernen - Designs for you-2

Designs for you-2


Css Code:	Text unter dem Design
<!--Präsentiert von www.anfaenger-html.de.tl --> <!--Diesen Code bitte nicht entfernen, sonst ist dieses script ungültig (function START) -->#extraDiv1 {display: none;} #extraDiv2 {display: none;} #extraDiv3 {display: none;} #extraDiv4 {display: none;} #extraDiv5 {display: none;} #extraDiv6 {display: none;} #pre_header {display: none;} #post_header {display: none;} #pre_content {display: none;} #nav_heading{display: none;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;} a{ color:#CD0000; text-decoration: none; font-size:13px;} a:hover { color: #FF0000; font-size: 13px; text-decoration: underline;} a:link { color: #CD0000; font-size: 13px; text-decoration: none;} a:active { color: #FFED00; font-size: 13px; text-decoration: none;} a:visited { color: #CD0000; font-size: 13px; text-decoration: none;} body { background-color:#FFB200;} *{ padding: 0; margin: 0; } #Mein_Bild { margin: 0 auto; width: 980px; height:500px; background-image:url(HIER DEINE BILD-URL);} #content { position: absolute; left: 50%; top: 140px; margin-left:-320px; width: 590px; height: auto; padding:10px; color: #000000; font-size:13px; background-color:#FF8B2D; background-image: none; border: 1px hidden #FFFFFF;} #sidebar_container{ position: absolute; left: 50%; top:140px; margin-left:-520px; width: 190px; height: auto; background-color:#FF8B2D; background-image:url; border:1px hidden #FFFFFF; color:#000000;} #nav_container{ position: absolute; left: 50%; margin-top:0px; margin-left:300px; width: 160px; height: auto; background-color:#FF8B2D; padding:auto;} ul#nav{ width: 130px; padding: 0px; margin: 0px; background-color:#FF8B2D;} li.nav_element{ list-style-type: none; position: relative; padding:5px; width: 115px;} li.nav_element a{ display: block; width: 115px; padding:4px; font-weight: bold; text-decoration: none; text-align: left; color:#FF0000; background-color:#343434; background-image:url(http://i37.tinypic.com/orufmg.jpg);} li.nav_element a:hover{ color: #C00000; background-color:#C9C9C9; background-image:url(http://i35.tinypic.com/14df2pz.jpg);} #counter { position: absolute; left: 50%; margin-top:425px; margin-left: 300px; width: 160px; height:53px; color:#000000; font-size:13px; font-family:arial; background-color:#FF8B2D; } #header{ background-image:url(http://i38.tinypic.com/2qdv85u.jpg); width: 810px; height:90px; text-decoration:center; margin-left:119px; font-family:terminator two; } #copyright { position: absolute; left: 50%; margin-top:320px; margin-left: -520px; width: 190px; height: auto; background-color:#FF8B2D; padding:auto; }<!--Diesen Code bitte nicht entfernen, sonst ist dieses script ungültig (function FINISH)-->	<!--Präsentiert von Anfaenger-HTML --> <!--Diesen Code bitte nicht entfernen, sonst ist dieses script ungültig (function START) --> <table><tr><td><div id="header" align="center" >Orange-Design [ Style 2 ]</div></td></tr><tr><td></td></tr></table> <div id="copyright" align="center">Copyright by Anfaenger-HTML<br/>Design by Anfaenger-Html</div> <!--Diesen Code bitte nicht entfernen, sonst ist dieses script ungültig (function FINISH)-->
Zurück zur Design Übersicht
Anmerkung: Da die Navigation bei mehreren Unterseiten über den Counter wächst, müssen sie im falle eine kleine Stelle im script.Dort müssen sie einfach eine Stelle ändern (markierten Code erhöhen): #counter { position: absolute; left: 50%; margin-top:425px; margin-left: 300px; width: 160px; height:53px; color:#000000; font-size:13px; font-family:arial; background-color:#FF8B2D; }