|
|||
Problem mit Text neben Navigationsleiste
Hallo zusammen,
als Anfänger in HTML und CSS versuche ich gerade, eine ganz einfache Navigationsleiste am linken Homepagerand mit Text rechts daneben zu erstellen. Ich habe zu dem Thema auch schon einige Tutorials verwendet, mein aktueller Code stammt - an die Bedürfnisse angepasst - aus diesem Tutorial: Listamatic: Vertical Buttons Ich habe auch schon 2 Testseiten geschrieben um die Navigation zu testen. Schon beim 1. Aufruf der ersten Seite gibt es das Problem, dass die Nummer der Listenelemnte aus der <ol> links von der Navigation steht, der eigentliche Text aber rechts. Die Navigationsleiste selbst ist mit dem Attribut float:left versehen. Bei der 2.Seite klappt das doch auch problemlos (ohne ol) Was ist denn an Seite 1 falsch? Liegt das nur daran, dass ich <ol> verwende? Sobald man auf einen der Links in der Navigationsleiste klickt ergibt sich auch ein weiteres Problem: plötzlich rutsch der gesamte Seitentext unter die Navigationsleiste und diese nimmt die gesamte Seitenbreite ein, obwohl die Attribute width:30% und float:left doch extra gesetzt wurden?! Was habe ich denn falsch gemacht, dass auf einmal sämtliche Elemente verrutschen und auch die <ol> so ein komisches Format hat? hier mal mein bisheriger Code: Seite1: HTML-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" lang="de"> <head> <title>Seite1</title> </head> <body> <h1 style="font-family: Times New Roman; font-size=30;text-align:center;">Überschrift</h1> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="page1.html" id="current">Seite1</a></li> <li><a href="page2.html">Seite2</a></li> </ul> </div> <style type="text/css"> #navcontainer { background: #f0e7d7; width: 30%; height:100%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; float: left; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <p>Textabsatz...</p> <ol> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> <li>Element 5</li> <li>Element 6</li> <li>Element 7</li> <li>Element 8</li> <li>Element 9</li> <li>Element 10</li> </ol> </body> </html> HTML-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" lang="de"> <head> <title>Seite 2</title> </head> <body> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="page1.html" id="current">Seite 1</a></li> <li><a href="page2.html">Seite 2</a></li> </ul> </div> <style type="text/css"> #navcontainer { background: #f0e7d7; width: 30%; height:100%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; float: left; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <h1 style="font-family: Times New Roman; font-size=30;text-align:center;">Überschrift</h1> <p>Textabsatz</p> </body> </html> hier sind auch nochmal 2 Screens der Probleme: Problem 1: Problem 2: Was mache ich denn falsch? danke schhonmal für eure Antworten, andi01. |
Sponsored Links |
|
|||
Das Problem ist, dass du das Box-Modell von CSS noch nicht verstanden hast
Das Tut, was du da hast, ist vielleicht nicht ganz so gut für Einsteiger, weil es gleich einem die halbe Fülle an selektoren um die Ohren haut und du wahrscheinlich keinen Plan hast, was du mit deinem Style-Tag alles bewirkst. Ich würde erstmal ein bisschen was zum Thema lesen, ehe du eine Ideallösung bekommst, die du nicht verstehst. Schau mal hier: --> IV CSS-Positionierung Und schreib dir hinter die Ohren: <style type="text/css">...</style> gehört immer in den <head></head> bereich, das ist zum einem W3C-Konform und zum anderen Besser zu lesen --> SELFHTML: HTML/XHTML / Weiterfhrende HTML-Elemente / Stylesheet-Bereiche in HTML |
Sponsored Links |
|
|||
Hi,
schonmal danke für die Antwort Zitat:
Zitat:
Zitat:
Wenn ich das Tutorial mit Übung durch habe geht die Navigationsleiste bestimmt viel leichter Ansonsten wenn ihr in meinem Code (weitere) grobe Fehler findet korrigiert mich bitte... lg, andi01. |
|
|||
Hi,
also danke nochmal für das Tutorial, der Link hat wirklich viel geholfen ich habe das tut denke ich bis auf den letzten Punkt mit der Bildergalerie soweit verstanden, nur der ist noch etwas schwierig... wegen der Navigationsleiste habe ich jetzt einfach mal ohne das alte Tut nur das umgesetzt was ich auch verstanden hatte, und siehe da, es funktioniert fast perfekt Sieht zwar nicht so gut aus, aber funktioniert und ich weiß was ich tue Hier erstmal der Code für beide Seiten: Seite1: HTML-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" lang="de"> <head> <title>Seite 1</title> <style type="text/css"> #box { background-color:#ab7c3f; position:static; margin:15px; float:left; width:250px; } </style> </head> <body> <div id="box"> <p style="color:#cef32a;padding:5px;"><b>Navigation:</b></p> <ul> <li><a href="page1.html">Seite 1</a></li> <br /> <li><a href="paage2.html">Seite 2</a></li> </ul> </div> <h1>Überschrift</h1> <p>Textblock</p> </body> </html> Seite 2: HTML-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" lang="de"> <head> <title>Seite 2</title> <style type="text/css"> #box { background-color:#ab7c3f; position:static; margin:15px; float:left; width:250px; } </style> </head> <body> <div id="box"> <p style="color:#cef32a;padding:5px;"><b>Navigation:</b></p> <ul> <li><a href="page1.html">Seite 1</a></li> <li><a href="page2.html">Seite 2</a></li> </ul> </div> <h1 style="font-family: Times New Roman; font-size=30;text-align:center;">Überschrift</h1> <p style="color:#ff0000;">Ein Textabsatz...</p> <ol> <li>Element Nummer 1</li> <li>Element Nummer 2</li> <li>Element Nummer 3</li> <li>Element Nummer 4</li> <li>Element Nummer 5</li> <li>Element Nummer 6</li> <li>Element Nummer 7</li> <li>Element Nummer 8</li> <li>Element Nummer 9</li> <li>Element Nummer 10</li> </ol> </body> </html> Das aller meiste funktioniert richtig gut: Mit Seite 1 gibt es überhaupt keine Probleme. Auch Seite 2 würde perfekt funktionieren, sobald ich die Listenelemente nicht als solche kennzeichne sondern einfach als normalen Textblock. Das Problem ist leider immernoch, dass die Nummern aus der <ol> links neben die NAvigation rutschen, der TExt steht völlig korrekt rechts davon. Sobald ich die Listenelemente in <p> umschreibe geht alles perfekt Ich kann mir gerade nicht wirklich erklären, warum das so passiert... Mit dem float usw. muss ja alles richtig sein weil es ihne die <ol> ja super funktioniert... Darf ich dann gar keine <ol> verwenden?! Hier mal ein Scrennshot: Die rot eingekreisten Ziffern stehen unerklärlicherweise links der Navigationsliste... Was habe ich denn nun falsch gemacht? lg, andi01. edit: mir ist gerade aufgefallen, dass in Firefox alles perfekt funktioniert... Nur Internet Explorer 7 in Win7 32bit macht es falsch o.O gibt es irgend eine einfache MEthode das so hinzukriegen, dass es auch in InternetExplorer geht? Es wäre nicht schlecht, wenn die Seite auch in IE nicht völlig verrutscht... Geändert von andi01 (07.06.2011 um 22:46 Uhr) |
|
|||
Zitat:
deine Kenntnisse reichen noch nicht aus, Lesen und Beispiele anschauen wies funktioniert..... SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) Gruß, Roland |
|
|||
Hi,
danke für eure Antworten. Zitat:
naja, ich werde auf jeden Fall die Tutorials auch mal praktisch durchmachen... Zitat:
tatsächlich, bei Internet Explorer reicht es einfach das Attribut zu ändern: Code:
ol { list-style-position: inside; } sogar in beiden Browsern ich werde dann mal mit meinen Turorials weitermachen. Danke an Alle für eure Hilfe, andi01. edit: gibt es irgend einen Weg sowas von vorne herein zu vermeiden? ich kann das ja nicht mit allen Browsern durchtesten... |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Layoutcheck von einer Beispielseite | wave | Site- und Layoutcheck | 1 | 12.11.2008 22:48 |
Helft mir. Ich habe voll die Leseschwäche | nick | CSS | 12 | 15.01.2008 21:52 |
Grafik in einer Tabellenzelle rechts unten ausrichten ? | Worance | CSS | 1 | 19.11.2006 16:09 |
Webseite in IE/MAXTHON ok, in Firefox zerissen | Midnight | CSS | 50 | 21.02.2006 11:34 |
Probleme mit Abständen zwischen div´s.... | darvida | CSS | 4 | 09.07.2005 19:48 |