Kopfzerbrecher: Zentrierungen der Navigation-Bar probleme

Hallo!

Ich bin ein Amateur in der HTML Programmierung und versuche zur Zeit eine "eigene" Seite zu erstellen.
Wie Sie aussieht habe Ich bereits auf Papier vermerkt, doch als es an die Programmierung ging, traten sofort die ersten Probleme bei der Erstellung der Navigation´s Bar.

Das Problem liegt bei der Verlagerung der Balken. Zu erst wollte Ich erreichen das Bild zu Zentrieren, doch es wurde nie richtig zentriert.
Und Ich verstehe immer noch nicht genau wie man sowas zentrieren kann.

Ich hoffe Ihr könnt einen Amateur bei solch einem, wahrscheinlich für euch simplen, Problem helfen. :(

Hier einmal der Quelltext der HTML und CSS-Datei:

<body bgcolor="#EFEFEF">  
	<div class="navigation-wrapper">  
		<ul class="navi-bar" type="none">  
			<li class="bar-format">  
					  
					Logo/Name  
					  
			</li>  
			<li class="bar-format">  
					  
					Wichtiges  
					  
			</li>  
			<li class="bar-format">  
					  
					Information  
					  
			</li>  
			<li class="bar-format">  
					  
					Über uns  
					  
			</li>  
		</ul>  
		</div>
  
.navigation-wrapper	{  
			background:	url(Design/Test-Balken.png);  
			position:	absolute;  
			top:	0;  
		}  
.navi-bar	{  
		margin-left:	0;  
		margin-right:	0;  
		padding-left:	15px;			  
	}  
li.bar-format	{  
			padding-left:	15px;  
			padding-right:	0px;  
			display:	inline;  
			color:		white;  
			font-family:	Myriad Web Pro;  
		}  

MfG Kopfzerbrecher x.x

  1. @@Kopfzerbrecher:

    nuqneH

    Navigation´s Bar.

    Dreifachaua: Deppenleerzeichen, Deppenapostroph und gar kein Apostroph, sondern Akzentzeichen.

    Das Problem liegt bei der Verlagerung der Balken.

    Welcher Balken?

    Hier einmal der Quelltext der HTML und CSS-Datei:

    Online-Beispiel, bitte!

    <body bgcolor="#EFEFEF">

    Gibt sämtliche Styles mit CSS an, nicht mit missbilligten HTML-Attributen!

    <div class="navigation-wrapper">

    Der Container ist überflüssig.

      <ul class="navi-bar" type="none">  
    

    Gibt sämtliche Styles mit CSS an, nicht mit missbilligten HTML-Attributen!

      	<li class="bar-format">  
      			  
      			Logo/Name  
      			  
      	</li>  
      	<li class="bar-format">  
      			  
      			Wichtiges  
      			  
      	</li>  
      	<li class="bar-format">  
      			  
      			Information  
      			  
      	</li>  
      	<li class="bar-format">  
      			  
      			Über uns  
      			  
      	</li>  
    

    Wenn alle Geschwisterelemente derselben Klasse (hier "bar-format") angehören, ist die Klasse überflüssig. In CSS kannst du per Kindselektor selektieren: .navi-bar > li

      	font-family:	Myriad Web Pro;  
    

    Bezeichner mit Leerzeichen gehören in Anführungszeichen.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. "Dreifachaua: Deppenleerzeichen, Deppenapostroph und gar kein Apostroph, sondern Akzentzeichen."

      Wow! Ich danke für diese nicht hilfreiche Lösung meines Problemes!
      Ich finde es super das du unbedingt sowas unnötiges bei einem Problem eines anderen reinschreiben musst.

      Entschuldigung, aber Ich dachte hier gebe es nettere Leute und Hilfe von einem verdammten Besserwisser wie dir.. Ne. Sowas tue Ich mir nicht an.
      Einfach nur unnötig.

      Ich danke dir für die "Hilfe" bei meinem "Deppenleerzeichen" und "Deppenapostroph"!

      Kopfzerbrecher

      1. Hallo,

        Ich finde es super das du unbedingt sowas unnötiges bei einem Problem eines anderen reinschreiben musst.

        Uns gibt es eben nur mit Meinung und ungebetener Beratung - aber weitergelesen hast du schon, oder? Da waren nämlich durchaus noch Hinweise/Rückfragen zum Problem dabei und auch die restlichen Hinweise solltest du beachten. Ich würde übrigens darauf tippen dass du background-position suchst, ohne genauere Beschreibung bzw. Online-Beispiel lässt sich da aber nur raten …

        Gruß,
        Tobias

        1. Hallo Tobias!

          Ich danke dir für den Hinweis. Ich werde es mir mal genauer ansehen und ausprobieren.

          Sorry Tobias, aber Ich werde auf diese Rückfragen von dem netten Herren nicht eingehen. Oder dessen Hinweise. Auch wenn es dumm klingt, aber Ich tue mir sowas einfach nicht an. :-)

          Ich muss mich für das schlechte Beispiel von mir entschuldigen.

          MfG
          Kopfzerbrecher

          1. @@Kopfzerbrecher:

            nuqneH

            Ich werde auf diese Rückfragen von dem netten Herren nicht eingehen. Oder dessen Hinweise. Auch wenn es dumm klingt, aber Ich tue mir sowas einfach nicht an. :-)

            Ja, das klingt dumm. „Du hättest "Ich will keine Hilfe" auch wesentlich kürzer schreiben können.“ (Kai345)

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. Ja, das klingt dumm. „Du hättest "Ich will keine Hilfe" auch wesentlich kürzer schreiben können.“ (Kai345)

              Vielleicht solltest du in Zukunft das "my" in der URL weg lassen, so dass es auch User lesen können die nicht angemeldet sind :)

              Hier der Link ohne Login

              1. Hallo Herr Bittersmann!
                Aber leider benötige Ich Hilfe, nur nicht von solchen Personen wie dir! :)
                Also halte dich doch einfach von diesem Beitrag fern, da Ich keine Hilfe/Berichtigungen (oder was auch immer) von dir benötige.
                Auch wenn Ich dich nicht davon abhalten kann. ;)

                MfG
                Kopfzerbrecher

                1. @@Kopfzerbrecher:

                  nuqneH

                  Hallo Herr Bittersmann!

                  Hallo Kopfloser! Wenn du mir etwas zu sagen hast, warum antwortest du dann nicht mir, sondern Jnnbo?

                  Baumstrultur des Forums nicht durchschaut?

                  Aber leider benötige Ich Hilfe, nur nicht von solchen Personen wie dir! :)

                  Nicht von solchen Personen wie mir, die
                  1. Ahnung haben und
                  2. bereit sind zu helfen?

                  Na dann halt nicht. Frag mir nur, von welchen Personen du dann Hilfe erwartest.

                  Also halte dich doch einfach von diesem Beitrag fern, da Ich keine Hilfe/Berichtigungen (oder was auch immer) von dir benötige.

                  Du willst mir nicht ernsthaft den Mund verbieten, oder?

                  Qapla'

                  --
                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                  1. Erneutes hallo Herr Bittersmann!

                    Hallo Kopfloser! Wenn du mir etwas zu sagen hast, warum antwortest du dann nicht mir, sondern
                    Jnnbo?

                    Hallo Herr Bittersmann!

                    Entschuldige das Ich Sie nicht direkt anspreche, aber da Ich mir sicher bin, dass Sie lesen können, werde Ich diese, unnötige, Frage nicht beantworten.

                    Normalerweise akzeptiere Ich jede Hilfe die mir zugesandt wird, aber in diesem falle nicht.
                    Sie haben perfekt begonnen:

                    Dreifachaua: Deppenleerzeichen, Deppenapostroph und gar kein Apostroph, sondern Akzentzeichen.

                    Beim Lesen dieses Satzes, hatte Ich schon keine Lust mehr Ihre Hilfe zu akzeptieren.

                    Ich bin mir sicher das Sie ein schlauer Mensch sind, aber nach diesem Teil erwarte Ich lieber Hilfe von Menschen die nicht so beginnen, in diesem Falle der nette Herr Jnnbo und tk.

                    Du willst mir nicht ernsthaft den Mund verbieten, oder?

                    Oh nicht doch. Ich kann Sie nicht davon abhalten und außerdem habe Ich mir nur von Ihnen gewünscht, dass Sie sich nur mit dem Problem das Ich habe zu helfen. Wenn Sie sich auf Fehler innerhalb meines Textes befassen, anstatt mit dem Problem das Ich habe, dann habe Ich schon keine Lust mehr mich mit Ihnen zu befassen.
                    Schreiben Sie ruhig weiter, mir egal was es ist, aber Ich werde in diesem Beitrag auf Ihre Hilfe verzichten.

                    MfG
                    Kopfzerbrecher

                    1. @@Kopfzerbrecher:

                      nuqneH

                      Sie haben perfekt begonnen:

                      Dreifachaua: Deppenleerzeichen, Deppenapostroph und gar kein Apostroph, sondern Akzentzeichen.
                      Beim Lesen dieses Satzes, hatte Ich schon keine Lust mehr Ihre Hilfe zu akzeptieren.

                      Dein Problem. Ich beantworte Postings nun mal von oben nach unten.

                      Mit deiner Unverschämtheit, mich zu siezen, machst du deinen Stand hier im Forum und deine Chance auf Hilfe (die du nicht willst) nicht unbedungt besser.

                      Qapla'

                      --
                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                      1. Hallo erneut Bittersmann!

                        Dein Problem.

                        Es ist nicht direkt mein Problem, sondern eher Ihres. Sie meinen ja alles zu verbessern.

                        Ich beantworte Postings nun mal von oben nach unten.

                        "beantworte"? Nein. Es gab nur eine indirekte Frage und zwar ob Ihr eine Lösung kennt.
                        Nicht eine Lösung für meine Text Fehler.

                        Ich versuche in einem Forum, das wahrscheinlich von älteren Menschen durchlaufen wird, nett zu sein, nicht um abzuschrecken oder ähnliches.

                        Mit deiner Unverschämtheit,[...]

                        Ich wollte nur nett sein, nicht unverschämt. Da Ich zuvor mit "Du" und ähnliches begonnen habe, will Ich mich entschuldigen.

                        MfG
                        Kopfzerbrecher

                        1. Dein Problem.
                          Es ist nicht direkt mein Problem, sondern eher Ihres. Sie meinen ja alles zu verbessern.

                          Das ist mir auch schon aufgefallen dass Gunnar doch fast immer etwas zu verbessern hat, aber wenn man sich seine Postings genauer ansieht, dann erkennt man sehr schnelle dass er Ahnung hat von dem was er schreibt. Auch wenn du mal nach seinem Namen bei Google schaust er macht sehr viel zum Thema HTML und CSS. Wenn er also auf etwas hinweist dann hat dieses in der Regel doch Hand und Fuß.

                          Man muss nicht immer seiner Meinung sein aber man kann es sich ja zumindest anhören. Ich bin auch für jede Kritik und für jeden Verbesserungsvorschlag dankbar, ob man dieses letztendlich umsetzt ist jedem selber überlassen.

                          Ach ja du kannst hier ruhig alle mit DU ansprechen, dieses ist hier üblich :)

                          1. Hallo Jnnbo!

                            Ich habe ja nie bezweifelt das er keine Ahnung habe, aber es ärgert mich das man auf solch kleine Fehler aufmerksam machen muss. Und es dann mit "Deppen"-Links vollzuhauen.

                            Gut. Ich lasse das mit "Sie" oder ähnlichem, auch wenn Ich mich dann komisch fühle. :s

                            Gunnar Ich will mich nochmal entschuldigen, aber Ich würde dich bitten dich nur mit meinem Problem zu befassen und nicht mit den Fehlern die innerhalb meines Textes sind. :)

                            MfG
                            Kopfzerbrecher

                  2. Hallo,

                    Baumstrultur des Forums

                    ja, ab und zu strullt man vielleicht mal an einen Baum.
                    Das war hier aber sicher nicht gemeint. ;-)

                    Ciao,
                     Martin

                    --
                    Die neue E-Mailadresse des Papstes: mailto:urbi@orbi
                    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
              2. @@Jnnbo:

                nuqneH

                Vielleicht solltest du in Zukunft das "my" in der URL weg lassen, so dass es auch User lesen können die nicht angemeldet sind :)

                Hach, mal wieder?

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Hallo,

    um dein Problem besser zu verstehen, wäre es möglich dass du deine Zeichnung hier zeigst? Denn so ist es schwer dir zu helfen.

    Wenn ich dich richtig verstehe, willst du hinter deiner Navigation einen Background haben und der Text soll Zentriert auf dem Balken von oben nach unten und von links nach rechts stehen?

    1. Hallo Herr Jinnbo!

      Leider geht es nicht, da diese Zeichnung nicht wirklich viel aussagt und Ihnen bestimmt nicht helfen kann.

      Nochmal das Problem:
      Ich möchte eine Navigationsbar erstellten. Diese hat einen Hintergrund, mit eingefügtem HTML-Text.
      Ich will das diese Navigationsbar, bzw der Hintergrund sowie der Text, zentriert ist und oben am Fenster ist, ohne das dazwischen ein Abstand ist.
      Ich hoffe es ist verständlich. :s

      Ein Problem ist bereits gelöst, in dem Ich
      position: absulte; top: 0;
      genutzt habe.

      Nur ist das Zentrieren noch das Problem.
      Und ab dort weiß Ich nicht genau, wie. :I

      Können Sie etwas damit anfangen Jnnbo?

      MfG
      Kopfzerbrecher

      1. Hallo,

        wenn ich dich richtig verstanden habe, dann willst du es in etwa so haben?

          
        * {  
        	padding:0;  
        	margin:0;  
        }  
          
        body {  
        	width:980px;  
        	margin:0 auto;  
        }  
          
        nav {  
        	position:fixed;  
        	top:0;  
        	width:980px;  
        	height:2em;  
        	text-align:center;  
        	background-color:#efefef;  
        }  
          
        nav ul li {  
        	display:inline-block;  
        	padding:0.5em;  
        }  
          
        nav ul li a {  
        	text-decoration:none;  
        	font-weight:bold;  
        	color:#000;  
        }  
        
        
          
        <!doctype html>  
        <html>  
        <head>  
        <meta charset="utf-8">  
        <title>Navigation</title>  
        </head>  
        <body>  
            <nav>  
              <ul>  
                <li><a href="#">Link 1</a></li>  
                <li><a href="#">Link 2</a></li>  
                <li><a href="#">Link 3</a></li>  
                <li><a href="#">Link 4</a></li>  
              </ul>  
            </nav>  
        </body>  
        </html>  
        
        

        Ich denke wenn das ein CSS Profi sich anschaut könnte man hier noch einiges verbessern. Aber es sollte dir etwas weiter helfen.

        1. Hallo Jnnbo!

          Ich muss mich herzlich bei Ihnen bedanken!

          Genau das habe Ich mir drunter vorgestellt und Sie haben es innerhalb ~1 Stunde geschafft. x.x
          Ich schau mir das mal genauer an und versuche es mit dem Bild einzubinden.
          Und nochmals danke! :)

          MfG
          Kopfzerbrecher

          1. Hallo,

            Genau das habe Ich mir drunter vorgestellt und Sie haben es innerhalb ~1 Stunde geschafft. x.x
            Ich schau mir das mal genauer an und versuche es mit dem Bild einzubinden.

            ein Hintergrundbild kannst du so einbinden

              
            nav {  
            	position:fixed;  
            	top:0;  
            	width:980px;  
            	height:2em;  
            	text-align:center;  
            	background-image:url(_dein_Hintergrund.jpg);  
            	background-repeat:no-repeat;  
            }  
            
            

            Mit "background-repeat" kannst du festlegen ob dein Bild wiederholt werden soll, sollte es zu klein sein oder nicht. In meinem Fall wird es _nicht_ wiederholt.

        2. @@Jnnbo:

          nuqneH

          wenn ich dich richtig verstanden habe, dann willst du es in etwa so haben?

          • {

          padding:0;
          margin:0;
          }

            
          Solcherlei General-Reset ist i.d.R. nicht das, was man will. Dann gibt es keinerlei Abstand mehr zwischen Elementen. Oder man müsste Abstände erst wieder setzen. Wenn man die aber sowieso auf den gewünschten Wert setzt, macht es keinen Sinn, sie erst zu nullen.  
            
            
          
          > ~~~css
          
          body {  
          
          > 	width:980px;  
          > }
          
          

          Das will man gar nicht! Die meisten Nutzer haben schmalere Viewports als 980 Pixel. Die Annahme einer festen Breiten widerspricht dem Web.

          Niemals™ eine Breite für body setzen; höchstens eine Maximalbreite! (No pun intended.)

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)