position:fixed; mittig platzieren...

[hannover96xd]

Moin,

bevor ihr wieder meckert, dass man die Hände von position: lassen soll ;), lasst euch bitte sagen, dass mir das bewusst ist...ich aber keine andere Möglichkeit sehe eine Navigation zu fixieren...;)

Hier mal alles hochgeladen:
http://multicultipage.bplaced.net/

Zur 1. frage, wie kann man position:, in diesem Fall fixed; mittig platzieren? mit margin: 0 auto; funkt das ja nicht...

Zur 2. Frage: Wenn man die Seite (siehe Link) zur Größe eines Handy-Bildschirms verkleinert, dann rutschen die anderen Punkte ja darunter, wie kann man das verhindern?

Eine nicht so "tolle" Lösung wäre die Punkte verkleinern lassen, so dass sie nebeneinander passen, dann ist es aber nicht mehr für fette Finger komfortabel xD

----

Oder man lässt die Punkte so wie sie sind, aber die "#navbackground" lässt mann bei einer bestimmten Größe, nach unten hin erweitern....wie ist das möglich?

Muss man sich da schon mit anderen Sprachen beschäftigen, wenn man bisher nur mit CSS und Html sowie ein mini-bisschen mit Java gearbeitet hat? Oder ist da Flexbox, aus CSS für geeignet?

Danke für eure mal wieder tolle Hilfe!

l.g.

 

[hannover96xd]

Punkt 2. hat sich erledigt!

Habe es mit max-width gelöst! Hätte ich auch vorher schon drauf kommen können ;) Aber bei Punkt 1. bin ich noch nicht weiter!

 

[MrMurphy]

Hallo

Habe es mit max-width gelöst!

Kann ich auf deiner Beispielseite noch nicht erkennen.

Oder ist da Flexbox, aus CSS für geeignet?

Ja, das ist der aktuelle Stand: HTML5 / CSS3 und für solche Positionierungen Flexbox. Flexbox ist schließlich "erfunden" worden um auf Hilfslösungen wie float verzichten zu können und damit die Erstellung eines Layouts deutlich zu vereinfachen.

Gruss

MrMurphy

 

[WhispR]

Die nav in deinen navbackground, so hast du nur einen Container für deine Navigation und dann kannst du die nav relative positionieren und dein margin wird akzeptiert ;)



CSS:

nav { position: relative; z-index: 1000; top: 30px; width:500px; margin:auto;}

HTML:


<div id="navbackground">

<nav>
<ul style="
/* margin: auto; */
">
<li><a href="http://multicultipage.bplaced.net/index.html">Home</a></li>
<li><a href="http://multicultipage.bplaced.net/about.html">About</a></li>
<li><a href="http://multicultipage.bplaced.net/contact.html">Contact</a></li>
<li><a href="http://multicultipage.bplaced.net/blog.html">Blog</a></li>
</ul>
</nav>


<div id="navbottom">
</div>
</div>

 

[hannover96xd]

Die nav in deinen navbackground, so hast du nur einen Container für deine Navigation und dann kannst du die nav relative positionieren und dein margin wird akzeptiert ;)

Danke, ich grübele schon seit stunden und habe es auch schon mit display:inline; etc. ausprobiert, ohne richtigen Erfolg, dann ist mir eingefallen, dass ich ja hier eine Frage zu dem Problem gestellt habe...hätte ich mal früher hierher geschaut ;)

Nochmal vielen Dank...:)

EDIT:
Nun ist aber doch das Problem, dass das Menü nicht mehr nicht mitscrollt....was tun?

 

[Tronjer]

Viel zu kompliziert.

Hier hast du eine responsive Navigation für deine Seite, die fixiert am oberen Rand steht. Rein unter Verwendung der Standard Bootstrap Klassen, ohne dass ich dazu eine einzige Zeile CSS geschrieben hätte.

http://jsbin.com/hekujeka/2/edit

 

[hannover96xd]

Viel zu kompliziert.

Hier hast du eine responsive Navigation für deine Seite, die fixiert am oberen Rand steht. Rein unter Verwendung der Standard Bootstrap Klassen, ohne dass ich dazu eine einzige Zeile CSS geschrieben hätte.

http://jsbin.com/hekujeka/2/edit

Danke.... Werde ich mir nachher, wenn ich am PC bin, mal angucken.....

 

[hannover96xd]

Bin ich zu blöd für diese Website?
Da ist ja eine CSS-Datei eingebeunden.....siehe hier: http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

Kann ich, bzw. darf ich die nun verändern, und wenn ja wie? Denn ich habe keine Lust diesen Code da auseinander zu nehmen...der ist ja ewig lang... :-(
Oder verstehe ich da irgendetwas falsch?

 

[Tronjer]

Die beiden im Head verlinkten Dateien binden Bootstrap ein. Die kannst du nicht verändern.
http://getbootstrap.com/components/#navbar

Du kannst innerhalb des HTML aber natürlich weitere Klassen definieren und diese in einer zusätzlichen CSS Datei mit Styles belegen. Ich habe die Navigation mal erweitert und einen blauen border-bottom angehängt. Wobei die CSS Klasse hier in einem Style-Container im Head steht.
http://jsbin.com/hekujeka/6/edit

 

[hannover96xd]

Die beiden im Head verlinkten Dateien binden Bootstrap ein. Die kannst du nicht verändern.
http://getbootstrap.com/components/#navbar

Du kannst innerhalb des HTML aber natürlich weitere Klassen definieren und diese in einer zusätzlichen CSS Datei mit Styles belegen. Ich habe die Navigation mal erweitert und einen blauen border-bottom angehängt. Wobei die CSS Klasse hier in einem Style-Container im Head steht.
http://jsbin.com/hekujeka/6/edit

Danke...

Aber wie sieht das eigentlich mit der rechtlichen Seite aus, darf man das auf seiner HP benutzen?
Denn auf der Seite: http://jsbin.com/ finde ich nicht viel

 

[Tronjer]

Sicher darfst du Bootstrap einbinden. Bootstrap ist von Twitter und gehört zu den meistverwendeten HTML Frameworks.

jsbin hat damit nichts zu tun. Das ist nur ein Code Playground zur Demonstration von Beispielen.