zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Text neben Navigationsleiste

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.06.2011, 21:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2011
Beiträge: 4
andi01 befindet sich auf einem aufstrebenden Ast
Standard 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>
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>

</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>
Übrigens: sobald ich im Browser F5 für Seite neu laden drücke ist das 2. Problem (text stand unter navigation) wieder behoben


hier sind auch nochmal 2 Screens der Probleme:

Problem 1:

Problem 2:

Was mache ich denn falsch?

danke schhonmal für eure Antworten,
andi01.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.06.2011, 00:24
ofHouse
XHTMLforum-Mitglied
 
Registriert seit: 20.04.2011
Beiträge: 128
Borsti befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
LG f

@ofhouse
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.06.2011, 16:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2011
Beiträge: 4
andi01 befindet sich auf einem aufstrebenden Ast
Standard

Hi,

schonmal danke für die Antwort

Zitat:
Zitat von Borsti
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.
Ja, damit hast du völlig Recht... es war eines der wenigen Tutorials die ich überhaupt zum Thema Text neben der Navigationsleiste finden konnte. Viele einfache Attribute verstehe ich zwar schon - sowas wie (background)color, width, height, font-... usw - aber bei den "schwierigen" fehlt mir noch etwas der Durchblick.

Zitat:
Zitat von Borsti
Ich würde erstmal ein bisschen was zum Thema lesen, ehe du eine Ideallösung bekommst, die du nicht verstehst.
Ja, das muss ich dringend mal machen. Ich werde mir dein Tutorial erstmal gründlich durchlesen und damit üben, bevor ich mit der Navigationsleiste weitermache. Sobald ich damit durch bin melde ich mich dann nochmal (dauert bestimmt einige Stunden das anständig durchzumachen...).

Zitat:
Zitat von Borsti
<style type="text/css">...</style>

gehört immer in den <head></head> bereich
gut zu wissen, davon stand in den Tutorials die ich bisher gelesen habe auch nichts

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.06.2011, 19:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2011
Beiträge: 4
andi01 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 07.06.2011, 23:21
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von andi01
Was habe ich denn nun falsch gemacht?
hi,

deine Kenntnisse reichen noch nicht aus, Lesen und Beispiele anschauen wies funktioniert.....

SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

Gruß, Roland
Mit Zitat antworten
  #6 (permalink)  
Alt 08.06.2011, 09:15
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

du solltest bedenken das beim FF die Default-Einstellung list-style-position: outside ist und beim IE list-style-position:inside.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 08.06.2011, 17:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2011
Beiträge: 4
andi01 befindet sich auf einem aufstrebenden Ast
Standard

Hi,

danke für eure Antworten.

Zitat:
Zitat von K.Roland
deine Kenntnisse reichen noch nicht aus, Lesen und Beispiele anschauen wies funktioniert.....
schon klar, ich bin ja noch ganz im Anfangsstadium meiner Kenntnisse... Natürlich reichen die noch nicht, um eine wirklich perfekte Navigationsleiste hinzukriegen... aber ich dachte eigentlich schon, dass ich es wenigstens schaffe, die <ol> rechts von der Navigationsleiste zu positionieren...

naja, ich werde auf jeden Fall die Tutorials auch mal praktisch durchmachen...

Zitat:
Zitat von hubspe
du solltest bedenken das beim FF die Default-Einstellung list-style-position: outside ist und beim IE list-style-position:inside.
danke für den Tipp da wäre ich wohl so schnell nicht drauf gekommen...

tatsächlich, bei Internet Explorer reicht es einfach das Attribut zu ändern:
Code:
ol
{
list-style-position: inside;
}
jetzt funktioniert alles

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...
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:31 Uhr.