[mTc]

Hallo zusammen,

kann mir bitte kurz jemand beschreiben, wie man in HTML Objekte richtig positioniert bzw. was sich für euch in der Praxis bewährt hat ?
Bei mir geht es jetzt im speziellen darum, wie ich die folgende Navi in HTML umgesetzt bekomme...

[Witi]

Absolute Positionierung per CSS.

Dürfte aber tricky werden. Stichwort: Größenänderung des Fensters.

[kreischweide]

Möglichst einfach? Imagemap.

[HighFidelity]

Jawohl, absolute positionierung mit CSS.

Wenn der bereich mit menü und übersicht immer die gleiche größe haben soll, egal wie groß das browserfenster ist, dann müssen die einzelnen navi-elemente (1, 2, 3, ...) eben nicht absolut zum browserfenster, sondern innerhalb eines als position:relative; definierten div-containers mit fester breite angeordnet werden.

Um das einfacher zu halten, würde ich von der rechten oberen ecke als positionierungsursprung ausgehen, dabei wäre dann aber oben links zwischen fensterrahmen und menüelement 1 sowas wie ein variabel langer freiraum - genauso unten rechts.

[mTc]

Navi würde sich in einem fixen Popup befinden, d.h. die variable Postiton fällt weg und ich kann mit absoluten werten arbeiten.
Muss ich denn jetzt für jeden Button im CSS ein Objekt erstellen oder wie schaut das dann in HTML/CSS aus ? Könnt ihr das vielleicht mal kurz beschreiben bzw. ein Beispiel geben ?

Dieser Beitrag wurde von mTc bearbeitet: 19. Oktober 2006 - 13:45

[Graumagier]

mTc sagte:

Muss ich denn jetzt für jeden Button im CSS ein Objekt erstellen oder wie schaut das dann in HTML/CSS aus ?

Jupp, am besten trennst du in Klassen für's Aussehen (Ränder, Hintergrund etc.) und in solche für die Positionierung.

[mTc]

Zitat (Graumagier: 19.10.2006, 14:53)

Jupp, am besten trennst du in Klassen für's Aussehen (Ränder, Hintergrund etc.) und in solche für die Positionierung.

Sorry, das übersteigt etwas meine Kompetenzen bzw. Wissensstand

Kannst du mir bitte vielleicht mal ein Beispiel geben ?
Für die Buttons sollen Grafiken verwendet werden und es soll einen hover- und aktiv-Effekt geben.

[Graumagier]

In dem Fall:

a.button1:link { position:absolute; top:WWpx; left:XXpx; height:YYpx; width:ZZpx; background:url($IMAGE); }
a.button1:hover { background:url($IMAGE_HOVER); }

Dieser Beitrag wurde von Graumagier bearbeitet: 19. Oktober 2006 - 14:13

[mTc]

Mh, hab jetzt folgendes eingetragen:
CSS

.btn_startseite {
		position:absolute;
		top:5px;
		left:10px;
		height:15px;
		width:15px;
		background:url(../images/icons/navi_impressum.gif);
		}
a.btn_startseite:hover {
		background:url(../images/icons/navi_impressum_hover.gif);
		}

HTML

<class="btn_startseite">

</class>

Aber so Recht wird nix angezeigt

Mein Fehler, man sollte das natürlich in den bereits existierenden Navi-Block schreiben.

[Graumagier]

mTc sagte:

Aber so Recht wird nix angezeigt

Das wundert mich gar nicht. Du solltest dir mal entsprechende Dokumentationen durchlesen.

<div class="btn_startseite"></class>

Ist natürlich alles andere als schön. Würde ich sogar eher mit JavaScript realisieren, dann stellt's zwar nicht jeder Browser dar, aber der Code bleibt ordentlicher.

Schöner wird's natürlich, wenn nur der Hintergrund des Buttons gewechselt werden soll und die eigentliche Beschriftung des Textes als regulärer Text in HTML geschrieben wird.

Dieser Beitrag wurde von Graumagier bearbeitet: 19. Oktober 2006 - 14:44

[mTc]

Hab's jetzt so gemacht:
CSS

#btn_startseite {
		position:absolute;
		top:15px;
		left:10px;
	}

HTML

<div id="btn_startseite">
<a href="./html/ger_main.html"><img src="./../images/icons/navi_impressum.gif" alt="Startseite" title="Startseite" border="0" width="35px" height="40px"></a>
</div>

Dürftet ihr zwar die Hände über den Kopf zusammen schlagen, aber es funktioniert erstmal.

Wie bekomme ich da jetzt aber einen Hover-Effekt, bei dem das Bild ausgetauscht wird ?
Wenn man auf die Grafik klickt, soll sich im Content-CSS-Block eine andere HTML-Seite öffnen. Wie realisiere ich dies ?

[Graumagier]

mTc sagte:

Wie bekomme ich da jetzt aber einen Hover-Effekt, bei dem das Bild ausgetauscht wird ?

So gar nicht. Über background:url($IMAGE); schon. Das ist AFAIK die einzige Möglichkeit, das ganze mit CSS zu realisieren.

mTc sagte:

Wenn man auf die Grafik klickt, soll sich im Content-CSS-Block eine andere HTML-Seite öffnen. Wie realisiere ich dies ?

Gar nicht. PHP und include() sind angesagt. Oder mal ein HTML-Kurs.

[[Elite-|-Killer]]

Zitat (kreischweide: 19.10.2006, 11:58)

Möglichst einfach? Imagemap.

Einfach?
Das wäre ja die Grausmanste lösung überhaupt, kein Hover nix möglich, ungenau etc.

[mTc]

Zitat (Graumagier: 19.10.2006, 16:29)

Gar nicht. PHP und include() sind angesagt. Oder mal ein HTML-Kurs.

Es gibt ja in HTML die Möglichkeit Frames etc. anzulegen und damit die Seite wieder in Bereiche zu unterteilen und auf diese in Links mittels target=... zu verweisen, oder ?

Was ich nur nicht verstehe, ich hab die Seite doch schon mittels CSS unterteilt und wenn ich jetzt mit Frames anfange, ist das doch sicher ein großes durcheinander bzw. steht mit dem CSS in Konflikt.

Im Anhang nochmal das aktuelle Layout. Ziel ist es, dass sich im grünen und blauen Bereich die entsprechende Seite öffnet, wenn man im roten auf das jeweilige Symbol klickert.

Angehängte Miniaturbilder

• 

[Graumagier]

mTc sagte:

Es gibt ja in HTML die Möglichkeit Frames etc. anzulegen und damit die Seite wieder in Bereiche zu unterteilen und auf diese in Links mittels target=... zu verweisen, oder ?

Ja, aber das will man aus gutem Grund nicht.