|
|||
Bild unter dynamischer Navigationsleiste floatet nicht nach? - Lücke
Hallo, Hab auf meiner Webseite ne dynamische Navileiste eingebaut. Diese klappt natürlich auch auf. Direkt darunter befindet sich ein Bild ---> dieses schließ komischerweise genau mit der Aufklappboxen ab.Sollte aber eigentlich direkt unter der Leiste erscheinen...und die Aufklappboxen über dem Bild aufklappen.
Alle div sind float:left. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Homepage Michael Pauka</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default1.css" rel="stylesheet" type="text/css" /> </head> <body> <script type="text/javascript"> var DOM = document.getElementById; function menu(obj) { if (DOM) { if(obj.getElementsByTagName("div")[0].style.visibility=='visible') { obj.getElementsByTagName("div")[0].style.visibility='hidden'; } else { obj.getElementsByTagName("div")[0].style.visibility='visible'; } } } function attach_event() { if(document.getElementById("navi")) { var sub,i; sub = document.getElementById("navi").getElementsByTagName("div"); for(i=0;i<sub.length;i++) { sub[i].parentNode.onmouseover = function() {menu(this)}; sub[i].parentNode.onmouseout = function() {menu(this)}; sub[i].parentNode.onfocus = function() {menu(this)}; } } } if(DOM) { window.onload = function() { attach_event(); } }</script> <div id="header"> <h1>Michael Pauka</h1> <h2>official Homepage</h2> </div> <div id="go"> <table class="navigation" id="navi" cellpadding="0" cellspacing="0" border="0" summary="Navigationsleiste"> <tr valign="top"> <td><a class="navi" href="#" id="home">HOME</a></td> <td> <a class="navi" href="#">Über mich</a> <div> <a class="menu" href="#">Hyperlink 1</a> <a class="menu" href="#">Hyperlink 2</a> <a class="menu" href="#">Hyperlink 3</a> <a class="menu" href="#">Hyperlink 4</a> <a class="menu" href="#">Hyperlink 5</a> </div> </td> <td> <a class="navi" href="#">Bilder</a> <div> <a class="menu" href="#">Hyperlink 1</a> <a class="menu" href="#">Hyperlink 2</a> <a class="menu" href="#">Hyperlink 3</a> <a class="menu" href="#">Hyperlink 4</a> <a class="menu" href="#">Hyperlink 5</a></div> </td> <td> <a class="navi" href="#">Material</a> <div> <a class="menu" href="#">Hyperlink 1</a> <a class="menu" href="#">Hyperlink 2</a> <a class="menu" href="#">Hyperlink 3</a> <a class="menu" href="#">Hyperlink 4</a> <a class="menu" href="#">Hyperlink 5</a></div> </td> <td> <a class="navi" href="#" id="rand">Kontakt</a> <div> <a class="menu" href="#">Hyperlink 1</a> <a class="menu" href="#">Hyperlink 2</a> <a class="menu" href="#">Hyperlink 3</a> <a class="menu" href="#">Hyperlink 4</a> <a class="menu" href="#">Hyperlink 5</a></div> </td> </tr> </table> </div> </div> <div id="clear"></div> <div id="splash"><img src="huhu1.jpg" alt="" width="590" height="227" /></div> <div id="content"> <h2 class="title">Welcome to my homepage!</h2> <div class="story"> <p>Servus, schön das Du auf meiner Homepage gelandet bist. Nachdem der aufregende Zivildienst im St. Josefsheim Berlin im Mai 2008 zu Ende gegangen ist, wird nun diese Seite eröffnet erneuert, sodass man wieder auf dem aktuellen Stan der Dinge sein kann. </p> <p>Diese Website soll einen kurzen Überblick üblllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll lllllllllllllllllllll llllllllllllllllllllllllllllllllllllllllmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmer Ausbildungtätigkeiten, Projekte, Praktikas und andere Engagements geben, an denen ich in den letzten Jahren mitgewirkt habe. </p> <p>fffffffffffffffffffffffffffffffffffffffffflllllllllllllllllllllllllllllll lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllfffffffffffffffffffffffffff fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p> <p>dddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddd weddddddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddd</p> <p>Zudem werden auf dieser Seite in Zukunft aktuelle Bilder von verschiedenen Events und Reisen zu finden sein.</p> <p>Außerdem werden natürlich weiterhin nützliche Dokumente für Auszubildende der allgemeinen Krankenversicherung bereitgestellt, die sich in den Jahren ansammeln werden.</p> </div> </div> <div id="footer"> <p>Copyright by Michael Pauka webdesign 2008</p> </div> </body> </html> Code:
/* 1.1 Body-Bereich */ body { margin: 50px; padding: 0; background: #FFFFFF url(images/img1.gif); font: normal small Arial, Helvetica, sans-serif; color: black; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; text-transform: uppercase; color: black; } h1, h2, h3 { } h4, h5, h6 { } p, ul, ol, blockquote { margin-top: 0; } a { color: black; } a:hover { text-decoration: none; } img { border: none; } /*-----------------------------------------------------------------------------*/ /* 1.2 Header */ #header { width: 590px; height: 110px; margin: 0 auto; padding: 35px 0 0 0; background: #FFEE8F url(images/img2.gif) repeat-x; border: 5px solid #FFFFFF; border-bottom: none; float: left; } #header h1 { text-align: center; font-size: 3em; } #header h2 { text-align: center; font-size: 1.4em; } /*------------------------------------------------------------------------------*/ /* 1.3 Menu */ /* Navigation Links (TOP-Level)*/ a.navi { border:1px solid #666; border-left:0; } a.navi#home { border-left:1px solid #666; } a.navi:link, a.navi:visited { display:block; padding:3px; width:113px; text-align:center; color:#000; vertical-align: middle; background-color: #e5e5e5; } a.navi:active, a.navi:hover { text-decoration:none; color:#737994; background-color:#ffffff; } /* Menü Links (SUB-Level)*/ a.menu:link, a.menu:visited { color:#340065; text-decoration:none; } a.menu:active, a.menu:hover { text-decoration: none; background-color: Black; color: White; background-image: url(../../../../img/portfolio/musterseiten/dynamisch/bullet_aktiv.GIF); background-repeat: no-repeat; } a.menu { display:block; padding:1px 1px 1px 15px; background-image:url(../../../../img/portfolio/musterseiten/dynamisch/bullet_nicht_aktiv.GIF); background-repeat:no-repeat; } /*Aufklappbare Menüboxen, relative Positionierung, Sichtbarkeit: zuerst versteckt... */ #navi td div { position:relative; left:20px; top:-2px; visibility:hidden; width:100px; padding:2px 2px 5px 3px; display:block; background-color:#fff; border:1px solid #000; border-top-color:#fff; z-index:1; } /* ...nur für gute Browser - Submenüs sichtbar machen per CSS: */ #navi td:hover div { visibility:visible; } #go { float: left; } /*------------------------------------------------------------------------------*/ /* 1.4 Splash */ #splash { width: 590px; margin: 0 auto; background: #FFFFFF; border-left: 5px solid #FFFFFF; border-right: 5px solid #FFFFFF; float: left; } /*----------------------------------------------------------------------------*/ /* 1.5 Content */ #content { width: 590px; margin: 0 auto; background: #FFFFFF; border: 5px solid #FFFFFF; float: left; } /* Hoverbox integrieren */ .clearfix:after { display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height:1%;} .clearfix {display:block;} /* End hide from IE-mac */ #content .title { padding: 10px 20px; background: #FFEE8E url(images/img4.gif) repeat-x; font-size: 1em; } #content .story { padding: 20px; border: 2px solid #FFEE8E; } /*----------------------------------------------------------------------*/ /*1.6 Footer */ #footer { width: 550px; margin: 0 auto; padding: 10px 20px; background: #4E4E4E; border: 5px solid #FFFFFF; border-top: none; float: left; } #footer p { margin: 20px; padding: 0 0 0 250px; text-align: center; font-size: x-small; color: #CCCCCC; } Grüße Geändert von Schnatterinchen (06.07.2008 um 13:59 Uhr) |
Sponsored Links |
|
|||
Vielleicht, vielleicht auch nicht.
Ein Link wäre hilfreich- Dir soll doch geholfen werden? Mit dem Code und dem Teil-CSS läßt sich wirklich nichts anfangen - wenn man nicht einige Zeit mit einem Nachbau der Seite verbringen will um dein Problem erst einmal zu sehen. Stells online -irgendwo- in einem später nicht mehr existierenden Unterordner ( /test/ bietet sich an) und dann kann man mal sehen.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
Zitat:
Zu diesen Prinzipien gehört u. a. - auf den Einsatz von Tabellen zu Layoutzwecken zu verzichten - Semantik, d. h. der Einsatz von Elementen entsprechend ihrer Zweckbestimmung - Accessibility, d. h. die bestmögliche Zugänglichkeit für alle Nutzerkreise. Von der Erfüllung dieser Prinzipien ist deine Seite leider meilenweit entfernt. |
|
|||
Sehe ich ähnlich. Du baust mit einer Tabelle eine Navigation auf und verschachtelst in dieser Tabelle noch DIVs? Auch solltest du dir mal im Klaren sein, was du da verwendest, allein vom CSS her. Du benutzt visibility: Unsichtbare Elemente: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets vielleicht solltest du mal nachlesen, was visibility überhaupt macht und dann eventuell auf eine andere Lösung zurück greifen? Schau dir den Unterschied zwischen visibility und display an usw. Und dann schmeiß die Tabelle da raus und und und.
|
|
|||
Zitat:
Wie dem auch sei. Die Tabelle hau ich also ma raus. Was empfhelt ihr mir anstatt der Tabelle als dynamische Navigationsleiste? Zitat:
Ich dache die CSS und die Html reicht, die Seite ist ja noch nicht so groß und kompliziert. Zitat:
Geändert von Schnatterinchen (08.07.2008 um 14:15 Uhr) |
|
|||
Zitat:
A List Apart: Articles: Suckerfish Dropdowns |
|
||||
Zitat:
Also als Navigationselement nimmt man eine Liste, ich mache es immer mit einer undeordneten Liste. Heiko hat doch in der FAQ eine gute Anleitung geschrieben, lies dir diese mal durch. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bild durch Bild ersetzten! (a:hover) | Prof. Awesome | CSS | 11 | 16.03.2011 15:33 |
Bild über Bild | rafa | CSS | 2 | 24.01.2010 19:46 |
Bild in der Navigationsleiste zentrieren | sumica | CSS | 8 | 19.06.2009 12:53 |
Navigationsleiste + kleines Bild im IE verschoben | iVx | CSS | 7 | 09.09.2007 00:52 |
DIV Cont. und 1 Bild - Lücke unten - Bitte um Hilfe | Yukonman | CSS | 2 | 05.09.2005 01:49 |