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

Fixe Positionierung

Status
Für weitere Antworten geschlossen.
T

Thorti

Neues Mitglied
Hallo Leute!
Hab schon lange nix mehr mit HTML gemacht und will mal wieder was basteln. Ich hab mir eine Graphik erstellt, die ich als zentriertes Hintergrundbild verwende.
In diesem Bild habe ich eine Stelle hervorgehoben, auf dem ich eine Navigation einbauen will.
Die Positionierung klappt auch über Tabellen oder über CSS (style="position:absolute; top:200px; left:250px") realisieren. Aaaaber: Das ganze verschiebt sich natürlich, wenn das Fenster minimiert wird, oder sich die Auflösung ändert.

Was ist state of the art um ein solches Problem zu umgehen? für Hilfe wäre ich sehr dankbar!

viele Grüße
Thorti
 
Ich weiß nicht, ob sich das Problem bloß auf eine Zentrierung bezieht.

Ich sehe das Problem bei dem Wunsch, eine Navigation auf ein Hintergrundbild zu machen.
Eine Navigation ist in HTML eigentlich eine Liste. Ich würde eine Navigation immer auf ein HTML-Element beziehen, wenn es ein Hintergrundbild sein muss (und keine Image Map vielleicht) dann würde ich das Bild dem Navigationselement geben.

Außerdem sollte Deine Navigation auch funktionieren, wenn man die Größe des Viewports ändert oder die Schriftgröße. Dass dann bei Dir was nicht geht, ist IMHO eher Anzeichen dafür, dass da was von der Idee der Realisierung her nicht funktioniert.

Gibts einen Link, damit man sich das mal ansehen kann, was Du vor hast?
 
Thorti schrieb:
Wow das geht ja fix hier!

(1) @prm: Ich hab´s nur kurz überflogen, aber die Links behandeln jur Zentrierung - da liegt nicht das Problem

(2) @Efchen: Folgender URI ist nicht meine Seite, aber sowas habe ich mir vorgestellt:
Fabian Zastrow - Diplom-Informatiker (FH) - Person
Zum Vergrößern anklicken....

Hallo Thorti,

ich denke, dass die Links von PRM das richtige für Dich sind.
Ansonsten schau doch mal bei der von Dir genannten Website in den Quelltext,
Anregungen holen darf man sich ja, abschreiben darf man natürlich nicht.

Grüße
Bernhard
 
Das Menu ist einfach zu machen. setze den mainteil mit hintergrund auf position:relative; und das menu position:absolute; und verschiebe es mit left:100px; (px-wert musste selbst dir festlegen) einfach nach links.

Grüße und viel Erfolg.

Loon3y


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>test</title>
<style type="text/css">

        #over   { 
width:500px; 
height:500px; 
background-color:#FF0000; 
position:relative; 
}

        #navi { 
width:200px;
height:500px; 
background-color:#000000; 
position:absolute; 
left:50px; 
margin:0; 
padding:0;
list-style:none;
            }


</style>
</head>

<body>

<div id="over">

<ul id="navi">
  <li> hallo </li>
  <li> ui </li>
</ul>

</div>

</body>

</html>
hmpf ^^ viel spass.
 
Zuletzt bearbeitet:
Wozu muss bei dem Beispiel irgendwas absolut oder relativ positioniert werden?
Ist das nicht ein einfaches, zweispaltiges Layout?

Und das Menü ist eine einfache <ul> und benötigt auch kein besonderes Hintergrundbild...oder ich hab das Eingangsposting schon völlig falsch verstanden.
 
Efchen schrieb:
Wozu muss bei dem Beispiel irgendwas absolut oder relativ positioniert werden?
Ist das nicht ein einfaches, zweispaltiges Layout?

Und das Menü ist eine einfache <ul> und benötigt auch kein besonderes Hintergrundbild...oder ich hab das Eingangsposting schon völlig falsch verstanden.
Zum Vergrößern anklicken....


nö das menu braucht kein hintergrundbild, das over hat das hintergrundbild, das menu ist einfach drüber gelegt.

zweispaltiges layout....hm...kann ich mir grad im kopfe nicht vorstellen...weil das komische bild mit dem "schatten-typ" ja in dem teil der page ist, wo die ecken abgerundet sind und das menu liegt drüber. Er hat dies bei der Page eigentlich genauso gemacht, wie ich das beispiel da oben, wenn ich mir n quelltext so betrachte.
 
@ Thorti:

Wenn du einen Div mit Hintergrundgrafik wie von mir vorgeschlagen zentrierst, dann kannst du darein deine Navi setzen und diese entsprechend dem Hintergrund positionieren.
Dazu reichen entsprechende margin-Werte aus, oder aber du positionierst den zentrierten Div ralativ und die navi dazu absolut wie von Loon3y vorgeschlagen.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben