Hilfe bei Menü Einbindung

[linkin]

Hallo zusammen,

ich bin relativ neu im Thema HTML / CSS und sonst eher auf der Design-Seite tätig.
Momentan bin ich dabei eine erste "kleine" Seite selber zu bauen, hauptsächlich um
zu probieren und zu lernen.

An folgender Stelle komme ich aber nicht weiter.

Ich habe eine HTML Seite erstellt mit mehreren Div's in denen ich meine Inhalte habe.
Per Button soll man dann zu den einzelnen Stellen gelangen (Slidefunktion per jQuery)

Das klappt auch soweit ganz gut. Jetzt würde ich aber gerne die Links (die aktuell auch
in der Div sind) in ein "festes" Menü packen, was oberhalb liegt. Also eine Menüleiste,
die immer fest an einer Stelle ist und meine bisherigen HTML Inhalte, die quasi wie ein
Layer darunter sind und jeweils per Button an die richtige Stelle hoch und runter sliden.

Ist das verständlich? Macht das Sinn? Ich habe mal eine Grafik zur Verdeutlichung angehangen
und den Code, den ich bisher habe.

Freue mich über jede Hilfe.

Vielen Dank vorab,
Alex


Mein HTML Code einer Div:

<div class="section black" id="section1">            <h2 align="center">Section 1</h2>            <h2 align="center"><img src="../../inspiration/7cf9464ef15fd70c41cb78570e99324de06cb1bf_m.jpg" alt="" width="564" height="423" /><br />            </h2><ul class="nav">                <li>1</li>                <li><a href="#section2">2</a></li>                <li><a href="#section3">3</a></li>                <li><a href="#section4">4</a></li>                <li><a href="#section5">5</a></li>  </ul>        </div>

 

[alogheo]

wenn ich dich richtig verstehe, müsste position:fixed dir weiterhelfen:SELFHTML: Stylesheets / CSS-basierte Layouts / Fixe Bereiche

 

[Wustersoss]

Hier geht es um ein ähnliches Problem:
http://www.html.de/html-und-xhtml/41565-loginbox-ein-und-ausfahren.html
ab Seite 2

 

[devilseye]

ausserdem würde ich die styleangaben in einer externen .css datei speichern
dass wollte ich nur erwähnt haben.

LG päde

 

[linkin]

Hallo,

vielen Dank für eure Tipps & Hilfe.
Ich habe mir beide Links angeschaut und versuche gerade ein wenig durchzusteigen.
Leider mit mittelmäßigem Erfolg.

Ich habe ein Beispiel für eine Seite mit fester Navigation gefunden.
Da versuche ich momentan den Code zu verstehen aber stoße da leider
an meine Grenzen.

Momentan versuche ich die Navigation, die momentan ja rein aus Text besteht,
durch ein Bild zu ersetzen.

So schaut der Code dafür aus:

	<div id="wrapper">
		<div id="sidebar">
				<ul id="navigation">
					<li><a id="navfirst" class="current" href="#">First Section</a></li>
					<li><a id="navsecond" href="#">Second Section</a></li>
					<li><a id="navthird" href="#">Third Section</a></li>
					<li><a  id="navtop"href="#">Back to top</a></li>
                    
    </div> <!-- #sidebar -->
		<div id="content">

Wie gesagt, ich habe jetzt versucht Links ein Bild einzufügen
und dieses als Navi zu benutzen. Da wollte ich jetzt ein paar
Hotspots draufsetzen, die als Links funktionieren
(korrigiert mich, wenn das totaler Schrott ist)

Leider funktioniert das überhaupt nicht.
Der Code Ansatz dafür wie folgt:

<img src="m.jpg" alt="" width="177" height="462" usemap="#Map" />
<map name="Map" id=""><area shape="rect" coords="29,54,151,112" href="#" alt="" /></map>

Vielleicht kann mir einer von euch helfen, ein Bild als Navigation einzubinden
und mir kurz beschreiben, bzw. erklären wie er es gemacht hat, damit ich es
nachvollziehen kann.

Wäre genial. Tausend dank vorab!

Anbei noch mal das Beispiel als .zip

 

[cswsol]

Hiho,

vielleicht ist das die Lösung für dein "Problem"... - selbes Beispiel nur mit Grafik... Sieh Dir mal die index.html und die style.css mit den Kommentaren. Wie schon beschrieben, ist die "Fixierung" des Rätsels Lösung...

Die Positionierung bekommst Du sicherlich allein hin.

Gruß,
Thorsten

 

[linkin]

Hallo Thorsten,

vielen Dank für deine tolle Hilfe.
Den Part hab ich jetzt auf jeden Fall verstanden.

Die Positionierung konnte ich eben auch schon selber lösen


Eine Frage hätte ich da noch zu den area shapes, die ja als Link dienen.
Habe dein Beispiel eben mal im Chrome, Safari und Firefox getestet.

Im Chrome und Safari tauchen jetzt leider so hässliche blaue Rahmen um die
Shapes auf. Im Firefox ist um das gesamte Image ein blaues Shape und die Links
funktionieren nicht.

Ist das normal beim Einsatz dieser Methode und lässt sich einfach nicht verhindern
oder gibt es da eine Art "Work around" ?

Ganz lieben Dank nochmal,
Alex

 

[cswsol]

vielen Dank für deine tolle Hilfe.

gerne...

Im Chrome und Safari tauchen jetzt leider so hässliche blaue Rahmen um die
Shapes auf. Im Firefox ist um das gesamte Image ein blaues Shape und die Links
funktionieren nicht.

Ist das normal beim Einsatz dieser Methode und lässt sich einfach nicht verhindern
oder gibt es da eine Alex

Sieh Dir nochmal die style.css an. Hier ist nun ein img-Elemen definiert, bei dem die Umrandung nun eigentlich weg sein sollte ("border: none;").
Zudem habe ich mal die Koordinaten für die komplette Grafik defniert und alle Shapes und Links gesetzt.

HTH,
Thorsten