Hallo ich bastel mir grade meine aller erste html webseite.Die Grundstruktur steht und mit dem bearbeiten meiner layout.css bin ich auch so weit fertig.
Mir bereitet der footer der zeit ein problem dieser verläuft versetzt nach links weg und lässt sich nicht so richtig an dem restlichen Style anpassen vieleicht habe ich ja beim aufbau der Grundstruktur oder in der layout.css eine fehler gemacht wäre nett wen da mal jemand drüber schauen könnte.
html Grundstruktur:
layout.css:
Mir bereitet der footer der zeit ein problem dieser verläuft versetzt nach links weg und lässt sich nicht so richtig an dem restlichen Style anpassen vieleicht habe ich ja beim aufbau der Grundstruktur oder in der layout.css eine fehler gemacht wäre nett wen da mal jemand drüber schauen könnte.
html Grundstruktur:
Code:
<!doctype html> <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Premiumbla bla bla..</title> <link href="css/layout.css" rel="stylesheet" type="text/css"> <link href="css/boilerplate.css" rel="stylesheet" type="text/css"> <link href="css/responsend.css" rel="stylesheet" type="text/css"> <!-- To learn more about the conditional comments around the html tags at the top of the file: paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ Do the following if you're using your customized build of modernizr (http://www.modernizr.com/): * insert the link to your js here * remove the link below to the html5shiv * add the "no-js" class to the html tags at the top * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build --> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="js/respond.min.js"></script> </head> <body class="bg_home"> <div class="clearfix" id="wrapper"> <header> <div class="header_inner"> <div class="header_logo"> <h1><a href="index.html" title="Premium bl bla bla ...."><span> premium btc blabla</span></a></h1> </div> <nav> <ul> <li class="active"><a href="index.html" title="Home">Home</a></li> <li><a href="bitcoin kaufen" title="btc kaufen">Bitcoin Kaufen</a></li> <li><a href="btcvk.html" title="btcvk">Bitcoin Verkaufen</a></li> <li><a href="FAQ.html" title="FAQ">FAQ</a></li> <li><a href="links.html" title="links">Links</a></li> </ul> </nav> </div> </header> <section> <article> <div class="block"> <h1>Bitcoin bla bla txt</h1> <img src="http://www.php.de/images/2.png" alt=""/> <p>Text inhalt </p> <a href="index.html" title="Home">mehr infos </a> <div class="clear"></div> </div> <div class="block"> <h1>Bitcoin bla bla txt</h1> <img src="http://www.php.de/images/4.png" alt="btc"/> <p>Text inhalt </p> <a href="index.html" title="Home">mehr infos </a> <div class="clear"></div> </div> <div class="block last"> <h1>Bitcoin bla bla txt</h1> <img src="http://www.php.de/images/2.png" alt="BTC"/> <p>Text inhalt </p> <a href="index.html" title="Home">mehr infos </a> <div class="clear"></div> </div> </article> </section> </div> <footer> <nav> <ul> <li>Link</li> <li>©NetVisIon 2014</li> <li><a href="mailto:info@test.cc"titel="info@test.cc">Email:info@test.cc</a></li> <li><a href="http://www.test.cc" title="www.test.cc">www.test.cc</a></li> </ul> </nav> </div> </footer> </body> </html>
Code:
footer { height: 45px; width: 950px; position: static; z-index: 999; bottom: 0px; background-image: url(../images/navbar_wrap_bg.png); } footer nav { margin: 0; width: 950px; height: 45px; } footer nav ul { width: 100%; display:inline-block; position:relative; list-style-type: none; padding: 12px 0 0 10px; margin: 0; } footer nav ul li { font-family: `Open Sans`, sans-serif; font-size: 16px; line-height: 120%; font-weight: normal; float: left; text-align: center; width: 235px; display: block; } footer nav ul li:first-child { width: 170px; } footer nav ul li a { color: #FF0000; } footer nav ul li a:hover { background-color: rgb(255,255,255); text-decoration:underline; }
Kommentar