|
|||
Navigations-Leiste wird nicht richtig angezeig.
Hallo!
Erstmal ein dickes Hallo in die Runde. Ich bin noch etwas frisch was CSS angeht, und möchte meinen Kenntnisstand (eventuell auch mit eurer Hilfe ) etwas auffrischen! Ich habe folgendes Problem: Ich kriege es nicht hin, dass mir meine Navigationsleiste angezeigt wird, so wie ich es will. Sie ist weder ein ordentlicher Balken, noch ist Sie an dem Fleck wo sie sein soll. HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tasty Testseite</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <img src="images/Logo.png" alt="logo" /> <br /> <ul id="social"> <li><a href="http://twitter.com" target="_blank"> <img src="images/Twitter.png"/> </a></li> <li><a href="http://facebook.com" target="_blank"> <img src="images/facebook.png"/> </a></li> </ul> <ul id="nav"> <li><a href="index.html" target="_blank">Home</a></li> <span> | </span> <li><a href="about.html" target="_blank"> About </a></li> <span> | </span> <li><a href="services.html" target="_blank"> Services </a></li> <span> | </span> <li><a href="portfolio.html" target="_blank"> Portfolio </a></li> <span> | </span> <li><a href="contact.html" target="_blank"> Contact </a></li> <span> | </span> </ul> </div><!--end header--> <div id="featured"> <img src="images/Banner.png" alt="banner" class="featuredImage"/> <img src="images/Dropshadow.png" alt="dropshadow" class="dropShadow"/> </div> <!--end featured--> <div id="main"> <div id="content"> <h1>Welcome</h1><hr> <h3> Welcome to my first CSS Website, designed with Photoshop! </h3> </div> <!-- content--> <div id="col1"> <h2> Who we are </h2> <h2> <p> Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. </p> </div> <!-- col1--> <div id="col2"> <h2> What we do </h2> <h2> <p> Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. </p> </div> <!-- col2--> <div id="col3"> <h2> Why Chose us </h2> <h2> <p> Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. </p> </div> <!-- col3--> </div> <!-- end main --> <div id="footer"> <span> <p> Copyright 2014 Roy </p> <br> <ul id="nav"> <li><a href="contact.html" target="_blank"> Contact </a></li> <span> | </span> <li><a href="advertice.html" target="_blank"> Advertose</a></li> <span> | </span> <li><a href="sitemap.html" target="_blank"> Sitemap</a></li> <span> | </span> <li><a href="privacy.html" target="_blank"> Privacy </a></li> <span> | </span> <li><a href="#top" target="_blank"> Top </a></li> <span> | </span> </ul> </div> <!--end footer--> </div><!--container--> </body> </html> Code:
@charset "utf-8"; /* CSS Document */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; color: black; } a.hover { text-decoration: underline; } h1,h2,h3,h4,h5 { font-family: Arial, Helvetica, sans-serif; font-weight:normal; text-transform: uppercase; line-height: 100%; margin-top: 0; } h1 { font-size: 20px; font-color: #000; } h2 { font-size: 16px; font-color: #000; } h3 { font-size: 12px; font-color: #000; } /*Main CSS*/ html { background-color: #1e3f64; } #container { width: 980px; border: 1px solid #696969; background: white; margin: 2em auto; } #header { overflow: hidden; height: 100%; } #header img { float: left; margin-right: 10px; margin-top: 20px; margin-left: 10px; } #header ul#social{ position: relative; margin-left: 50px; margin-top: 20px; } #nav { position: relative; background-color: #969696; height: 30px; width: 960px; margin-left: 0px; padding-top: 10px; padding-bottom: 5px; } #nav span { color: green; } #nav li a { color: black; } #nav li a:hover { text-decoration: none; } #featured { overflow: hidden; padding-right: 10px; margin-top: 10px; } #featured img.featuredImage { float: left; margin-left: 10px; border-top: 5px solid #969696; } #featured img.dropShadow { float: left; margin-left: 10px; } #main { position: relative; background-color: #ececec height: 600px; margin-top: 10px; margin-left: 10px; } #main #content { font-size: 18px; margin-top: 10px; margin-left: 10px; margin-right: 10px; height: 400px; } #main p { font-size: 12px; line-height: 22px; } #main h1 { padding-top: 10px; } #col1, #col2, #col3 { float: left; width: 275px; margin-right: 3em; } col1 { margin-left: 10px; } #col2 h2 { float:left; margin-left: 80px; } #col3 { margin-right: 0; margin-bottom: 20px; } #col3 h2 { float: left; margin-left: 125px; } #footer { margin-top: 10px; margin-left: 10px; margin-right: 20px; margin-bottom: 10px; clear: both; } #footer li { display: inline; margin-left: 10px; margin-right: 10px; } #footer span { font-size: 24px; margin-left: 0px; } footer span a { color: #542121; } #footer span a.hover { text-decoration: underline; } Ich hab jegliche div Container durch kontrolliert, aber so richtig schlauer werde ich nicht! Hier mal ein Bild vom Fehler, wenn ich die CSS Datei über das Firefox-Entwicklertool bearbeite: |
Sponsored Links |
|
|||
Hi das was du suchst findest du im Buch
Little Boxes Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller) von Peter Müller. Es gibt auch was für die Ohren, http://xhtmlforum.de/41679-little-boxes.html#post308810 Und es immer besser wenn du uns deine Webseite-Adresse mitteilst. Grüße |
Sponsored Links |
|
|||
Hallo.
Vielen Dank für die Antwort. Vielen Dank für die Lektüre. Werde ich mir sicherlich zu Gemühte führen! Es gibt noch keine Internetseite, die Seite ist nur auf meinem Rechner zu finden, deshalb ist ein Link schwer zu veröffentlichen! Eventuell gibt es ja trotzdem eine Möglichkeit meinen Fehler zu finden? Ob ein kompletter Teil falsch ist, oder nur eine Winzigkeit? |
|
|||
Zitat:
Danach fängst du noch mal von vorne an. Zitat:
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Hmmm. Prinzipiell nochmal danke, allerdings saß ich doch schon recht lange an dem Stylesheet und alles komplett neu machen wäre zwar eine Möglichkeit, aber eine Konkretisierung meines Fehlers erhalte ich dann ja auch höchstwahrscheinlich nicht.
Gesendet von meinem Nexus 4 mit Tapatalk |
|
|||
Leider bist du noch nicht so weit.
Benutze mal den The W3C Markup Validation Service, dort findest du allein im HTML 26 Fehler. Glaube mir es ist besser du fängst noch mal an und liest das, was gabischatz dir empfohlen hat.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navigations Mneü Inet Explorer wird nicht richtig Angezeigt. | shround | (X)HTML | 9 | 03.02.2012 12:07 |
Formular wird im IE 8 nicht richtig angezeigt | Basti82 | (X)HTML | 14 | 12.05.2011 16:55 |
Website Navigations Grafiken werden nicht richtig angezeigt | jantro | CSS | 6 | 07.02.2011 21:41 |
DIV immer ganze Breite - normal?!?!? | csski | CSS | 3 | 02.07.2008 13:20 |
IE zeigt falsch, FF richtig - change - FF zeigts falsch, IE richtig | nick | CSS | 6 | 19.08.2006 03:02 |