schönes Navi?

Yamram

Hallo,
bin wieder da!
Und schon hab ich auch eine Frage.
Also, wie kann ich mein Navi fixieren, sodass DIV-Content man scrollen kann und das Navi im oberen Teil bleibt?
Es soll dabei keine zweite Scrollleiste entstehen!

Und weiter:
Wie mache ich das dann transparent, sodass man im Hintergrund noch verblasst die seite sehen kann?

Mit freundlichen Grüßen,
Philipp Escher

Sarkkan

Also das mitscrollen erreicht du mit position: fixed;
An für sich genau wie position: absolute, nur dass sich hier das Element nicht durch ein äußeres position: relative; beeinflussen lässt, es sich halt normal am Bildschirm orientiert und beim scrollen sich mit bewegt

Und das Transparente erreichst du mit opacity: [WERT VON 0-1]; und für den IE mit filter:progid:DXImageTransform.Microsoft.Alpha(opacity=[WERT VON 0-100]);.
Oder einem Transparenten Hintergrundbild :wink:

Yamram

also das mit der transparenz klappt bestimmt.

aber das mit dem schönen navi geht irgendwie nicht.
Guck mal hier ist mein Code:
HTML

Code

<div id="navi">
<ul id="nav">
<li><a href="index.php"><img src="png/menu/home.png" title="Willkommen" width="50" /></a></li>
<li><a id="various2" href="login.txt"><img src="png/menu/key.png" title="Login" width="50" /></a></li>
<li><a id="various22" href="register.txt"><img src="png/menu/register.png" title="Registrieren" width="50" /></a></li>
<li><img src="png/menu/mobile.png" title="Mobile" width="50" /></li>
<li><img src="png/menu/globe.png" title="Download & Co." width="50" /></li>
<li><img src="png/menu/comments.png" title="Reaktionen" width="50" /></li>
<li><a href="impressum.php"><img src="png/menu/vcards.png" title="Impressum" width="50" /></a></li>
</ul>
</div>

Alles anzeigen

und hier CSS:

Code

div#header {
padding: 10px;
background-color: black;
font-family: Tahoma;
font-weight: 100;
}




div#navi {
background-color: #3e3e3e;
color: white;
font-family: Arial;
padding: 1px;
border-top: 1px solid #2c2c2c;
position: fixed;
opacity: [WERT VON 0,5];
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=[WERT VON 0-100]);
}

Alles anzeigen

Wie muss ichs jetz machen?

Sören

Die Transparenz kann mit [WERT von 0,5] auf jeden Fall nicht funktionieren :wink:

Poste mal bitte den kompletten Code, vielleicht ist da noch irgendwo ein Fehler.

Yamram

HTML:

Code

<div id="page">
<div id="header">
<img src="png/logo.png" align="right" width="170" title="Y.T.P" />
<img align="right" src="png/close.png" width="15" height="15" alt="X" id="close" title="Newszeile schließen" /> <h1><span>Yamram</span>.<span>Team</span>.<span>Player</span></h1>
<h2>the possibility for teams, groups and classes</h2>
</div>
<div id="navi">
<ul id="nav">
<li><a href="index.php"><img src="png/menu/home.png" title="Willkommen" width="50" /></a></li>
<li><a id="various2" href="login.txt"><img src="png/menu/key.png" title="Login" width="50" /></a></li>
<li><a id="various22" href="register.txt"><img src="png/menu/register.png" title="Registrieren" width="50" /></a></li>
<li><img src="png/menu/mobile.png" title="Mobile" width="50" /></li>
<li><img src="png/menu/globe.png" title="Download & Co." width="50" /></li>
<li><img src="png/menu/comments.png" title="Reaktionen" width="50" /></li>
<li><a href="impressum.php"><img src="png/menu/vcards.png" title="Impressum" width="50" /></a></li>
</ul>
</div>

Alles anzeigen

CSS:

Code

body {
padding: 0px;
margin: 0px;
}




div#header {
padding: 10px;
background-color: black;
font-family: Tahoma;
font-weight: 100;
}




div#navi {
background-color: #3e3e3e;
color: white;
font-family: Arial;
padding: 1px;
border-top: 1px solid #2c2c2c;
position: fixed;
opacity: [0,5];
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=[WERT VON 0-100]);
}

Alles anzeigen

Yamram

ach ja:
hier ist das so ähnlich:
<a class="postlink" href="http://daswebdesignblog.de/">http://daswebdesignblog.de/</a>

Sarkkan

Hachja.. Schade, dass man den Quellcode von Seiten nicht einsehen kann um sich Sachen, die einem Gefallen genauer an zu schauen und teilweise zu kopieren..

Naja, nun zu deinen Problemen:

Zitat von "Sarkkan"

An für sich genau wie position: absolute;

Wie positionieren wir ein absolut positioniertes Element? top, right, bottom und left schon mal gehöhrt?^^
Da wir außerdem das Element mit fixed quasi herauslösen benötigt es seine eigene Breite und Höhe. Hier kannst du z.b. damit die Navigation über die gesamte Seite geht mit width: 100%; arbeiten.
Ebenfalls schreibt man beim Arbeiten mit HTML, CSS, JavaScript, PHP und allen anderen Sprachen Fließkommazahlen nicht mit einem , (komma) sondern mit einem . (punkt). Und die [ ] (eckigen Klammern) waren quasi nur zur Deko..
Es müsste also vllt. eher

Code

opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

heißen^^

Yamram

also das mit der Transparenz funktioniert super!
Aber das mit dem Fixieren hab ich nicht so ganz hingekriegt:
Ich habe jetzt bei div#navi folgendes hinzugefügt:

width: 100%;
position: fixed;
top: 0;
height: 70px;

Was muss ich jetzt noch machen? Es klappt nicht: keine Veränderung!

mfg
pe

Sarkkan

Welchen Browser verwendest du?
Gib dem Teil mal bitte auch einen z-index..

Und kann ich das Ergebnis vllt mal irgendwo sehen?^^
Blind etwas zu machen ist immer so ne Sache..

Yamram

ok. hab jetz z-index: 1000;

hier is der komplette code:
HTML

Code

<body>
<div id="navi">
<br />
<ul id="nav">
<li><a href="index.php"><img src="png/menu/home.png" title="Willkommen" width="50" /></a></li>
<li><a id="various2" href="login.txt"><img src="png/menu/key.png" title="Login" width="50" /></a></li>
<li><a id="various22" href="register.txt"><img src="png/menu/register.png" title="Registrieren" width="50" /></a></li>
<li><img src="png/menu/mobile.png" title="Mobile" width="50" /></li>
<li><img src="png/menu/globe.png" title="Download & Co." width="50" /></li>
<li><img src="png/menu/comments.png" title="Reaktionen" width="50" /></li>
<li><a href="impressum.php"><img src="png/menu/vcards.png" title="Impressum" width="50" /></a></li>
</ul>
</div>




...

Alles anzeigen

und CSS:

Code

div#navi {
background-color: #3e3e3e;
color: white;
font-family: Arial;
padding: 1px;
border-top: 1px solid #2c2c2c;
width: 100%;
position: relative;
z-index: 1000;
top: 0;
height: 70px;
opacity: 0.1;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
}

Alles anzeigen

Sarkkan

Also in deinem CSS-Code ist dein #navi kein position: fixed; gegeben..

Yamram

jo. aber mit fixed geht immer noch nicht.

Sarkkan

Also bei mir schon
Schau Hier und ich habe nur die positon geändert^^
(Und dem Body ne min-height gegeben, damit man scrollen kann um den Effekt zu sehen^^)

Yamram

bei mir kommt da das:[attachment=0]Unbenannt.PNG[/attachment]

Sarkkan

So, schau noch mal auf der Seite nach
Hab jetzt noch die li's floaten lassen^^ und zumindestens im Firefox 4 und in meinem Chrome geht es ohne Probleme

Ich frage noch mal, welchen Browser verwendest du und in welcher Version? Vllt handelt es sich um einen Fehler in diesem Browser/dieser Version, die ich nicht kenne

Yamram

Ich benutze momentan internet explorer.

Sören

Welche Version?

Sarkkan

Wenn du Scrollst.. MUSS die Navigation aber einfach an ein und der selben Stelle bleiben.. sollte das nicht funktionieren, dann frage ich mich, wieso die Seite, die ich jetzt seit ner Woche in der Agentur anfertige auch im IE richtig dargestellt wird..
und da arbeite ich recht viel mit absolut und fixierten Elementen..

Hab die Seite nun so gestaltet, dass dir der Effekt nun auf jeden Fall auffällt/er sichtbar sein muss.

Yamram

es läuft alles nur im FF.
is jetz alles in ordnung. danke!

Jetzt mitmachen!