• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 fragen zur Navbar

V

Vinek

Neues Mitglied
Hallo com,
ich habe hier 2 kurze fragen zu meiner Navbar die ich gerade am erstellen bin.
Zuersteinmal mein Code:
Code: 
<img src="/images/nav_0.png" />
<a href="http://wwww.gamers-special.de"><img src="/images/nav_01.png" /></a>
<a href="http://wwww.gamers-special.de"><img src="/images/nav_1.png" /></a>
<a href="http://www.gamers-special.de/games/"><img src="/images/nav_2.png" /></a>
<a href="http://www.gamers-special.de/topgames/"><img src="/images/nav_3.png" /></a>
<a href="http://www.gamers-special.de/articles/"><img src="/images/nav_5.png" /></a>
<a href="http://www.gamers-special.de/video/"><img src="/images/nav_6.png" /></a>
<a href="http://www.gamers-special.de/gallery/"><img src="/images/nav_7.png" /></a>
<a href="http://www.gamers-special.de/downloads/"><img src="/images/nav_8.png" /></a>
<img src="/images/nav_9.png" /></a>

1. Wie kriege ich es hin das meine das die Navbar beim Runterscrollen mitgeht?
2. Ich möchte hinter die einzelnen bilder ein ganzes als sozusagen den Hintergrund legen damit man die lücken zwischen den bildern nicht mehr sieht.
Eine vorschau findet ihr hier:

http://www.gamers-special.de/test.php

Dort habe ich mal einen schwarzen Hintergrund eingefügt damit man auch die Lücken sehen kann.

Ich hoffe Ihr könnt mir helfen.

MfG
Vinek
 
Du musst ja auch nicht ein Menü von dort nehmen, aber du könntest dir einfach mal ansehen, wie diese gemacht wurden. Oder hier mal nachsehen: CSS Tipps und Anleitungen

Beispiele findet man im Netz massenhaft, man muss sich das nur mal ansehen.
 
Und was Du da hast ist kein Menü. Das ist eine bloße Linksammlung ohne semantische Formatierung. Außerdem sind Navigationen mit Bildern heutzutage eher nicht gern gesehen. Bei Suchmaschinen wirst Du damit nur Nachteile haben.
 
Das ist alles richtig, was hier geschrieben wird und unbeding zu beachten. Aber um deine Fragen zu beantworten:
1. Lass die unverlinkten Bilder draußen und pack den Rest in ein div:
HTML: 
<div style="position:fixed"> ... </div>
Die Style-Anweisung position:fixed sorgt dafür, dass deine Navigation am oberen Bildschirmrand sichtbar bleibt.
Besser wäre es natürlich, den Style in einem style-Bereich im head-Bereich zu definieren. Dann lösen sich noch mehr Probleme, als du unter 2 beschrieben hast.
HTML: 
<head>
...
<style type="text/css">
    #myNavigation {
        position:fixed; /* Damit die Navigation oben bleibt */
        background-color:white; /* wegen der Lücken */
        height:50px; /* Entspricht deiner Bildhöhe */
        padding-left:255px; /* Ersetzt dir deine Platzhaltergrafik am Anfang */    
    }
</style>
</head>
<body>
...
<div id="myNavigation"> ... </div>
...
</body>
Die Lücken zwischen den Bilder bekämst du auch weg, wenn du die Umbrüche und die Leerzeichen zwischen den Links rausnimmst.
Deinen Grafiken solltest du dringend alt-Parameter verteilen:
HTML: 
<img src="/images/nav_01.png" alt="Home" />
Dann bekommen auch die Suchmaschinen ne Chance und vor allem auch jene Menschen, die sich Websites von ihrem Browser vorlesen lassen. (alt-Parameter sin Pflicht. Auch wenn sie leer "" sind.)

Und nicht vergessen: auch mit meinen Ergänzungen hat das, was du da baust, wenig mit zeitgemäßem HTML zu tun. Meine Ergänzungen lösen deine optischen Probleme, nicht deine strukturellen. Je nach dem, was unterhalb deiner Navigation noch so passieren soll, könntest du das noch deutlich zu spüren bekommen ...
 
Danke das du mir schon wieder helfen konntest :D

Und sry das nochmal fragen muss.
Ich habe jetzt ein Suchfeld das ich auf der letzen Grafik platzieren will, wie kriege ich das hin?
Hier mal der Code vom Suchfeld:

HTML: 
<div style="width: 971px; height: 25px; margin: 0px; border: 0px; padding: 0px; background: url(/top_panel.png);">


<div style="float: right; letter-spacing: 0; padding-right: 7px; padding-top: 2px; padding-left: 0px; padding-right: 0px;">
    <form method="post" action="search/" name="search">
    <table align="right" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td><img style="padding-right: 3px;" src="/top_search.png" alt="Search" /></td>
        <td style="line-height: 0; background: url(/top_searchbg.png) no-repeat; width: 199px; height: 19px; padding-left: 3px;"><input type="text" name="search" style="background: transparent; margin: 0px; border: 0px; padding: 0px; width: 192px; font-family: Arial; font-size: 10px;" /></td>
        <td><input style="padding-right: 6px;" type="image" src="/top_go.png" value="Search" /></td>
    </tr>
    </table>
    </form>
    </div>
 
width: 971px;
Zum Vergrößern anklicken....

 Möglicherweise wird das Erproben deiner Seite auf unterschiedlichen Sytemen (Browserbreite einfach mal von Hand variieren) dazu führen, dass du solche Angaben weglässt.

Zur Frage:
Auf der letzten Grafik? In dem du das umgebende Div so groß machst wie deine Grafik und dort die Hintergrundgrafik im style vermerkst:
Code: 
background:url(meinBild.jpg) no-repeat scroll 0 0 white;
Gewöhn dir aber bitte mal an, styles in einer eigenen css-Datei zu verwalten. (Achtung: der relative Pfad zur Grafik richtet sich dann nach dem Pfad der css-Datei.)
 
bodil schrieb:

Möglicherweise wird das Erproben deiner Seite auf unterschiedlichen Sytemen (Browserbreite einfach mal von Hand variieren) dazu führen, dass du solche Angaben weglässt.

Zur Frage:
Auf der letzten Grafik? In dem du das umgebende Div so groß machst wie deine Grafik und dort die Hintergrundgrafik im style vermerkst:
Code: 
background:url(meinBild.jpg) no-repeat scroll 0 0 white;
Gewöhn dir aber bitte mal an, styles in einer eigenen css-Datei zu verwalten. (Achtung: der relative Pfad zur Grafik richtet sich dann nach dem Pfad der css-Datei.)
Zum Vergrößern anklicken....

Danke für deine Tipps, aber ich kann das nicht erproben :D
Da gestern Dank dem YandexBot von der Suchmaschiene Yandex.com meine Server abgestützt sind und mein Hoster diese dann kurzeitig sperren musst ewird sich wahrscheinlich aber im laufe des Tages wieder legen.
Yandex habe ich auch geschrieben das die meine Seite nichtmehr Indexieren sollen :D und diese aus Ihrem System nehmen sollen

MfG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben