Benötige Hilfe für die positionierung eines Elements

[Olaf]

Hallo zusammen,

ich versuche gerade ein Element auf einer meiner Webseiten zu positionieren. Es geht um das gelbe Post-It Bild, welches sich oben rechts auf auf dieser Seite befindet.

Irgendwie gelingt es mir nicht das Element noch weiter nach oben zu verschieben.
Ich habe in meinem Content-Container ein neues DIV namens "postit" erstellt:

<div id=content>

<div id=postit>
<a href="images/birds/birds77.jpg" rel="lightbox[topical]"title="Hier geht es zu den neusten Foto, [Nikon D300, 600mm, Blende 5, 1/500s, ISO400, Beanbag]"><img style="border: 0px solid ; width: 350px; height: 290px;" alt="Zu meinen aktuellsten Fotos" title="Zu meinen aktuellsten Fotos" src="images/post-it.png"></a>
</div>

....

und habe versucht mit meiner CSS-Datei:

#postit {
	position:absolute;
  top:5px; 
  left:700px; 
  }
...

...die Position zu definieren. Leider schaffe ich es nicht den Post-It Zettel höher zu positionieren. Muss ich den neuen DIV "postit" dafür woanders erstellen?

[powergold]

Hallo Olaf,

hast du schon probiert den Code hier einzufügen:

<div id=container>
<div id=postit>
<a href="images/birds/birds77.jpg" rel="lightbox[topical]"title="Hier geht es zu den neusten Foto, [Nikon D300, 600mm, Blende 5, 1/500s, ISO400, Beanbag]"><img style="border: 0px solid ; width: 350px; height: 290px;" alt="Zu meinen aktuellsten Fotos" title="Zu meinen aktuellsten Fotos" src="images/post-it.png"></a>
</div>
<div id=kopf><a href=index.htm><img height=100 border="0" alt="Zur Sta......

Lg
Stefan

[Wishu]

Nur so als kleinen Tipp, es gibt auch negative Positionierung. Also zum Beispiel top:-50px; Das können alle Browser.

[Olaf]

Danke Stefan und Wishu für die Antworten. Ich habe es jetzt wie Wishu vorgeschlagen hatte, mit einem negativen Wert gemacht.

Ist jetzt vielleicht wieder eher eine Frage des Designs, aber ich bleibe jetzt mal in diesem Unterforum. Wäre schön wenn ihr alle noch mal einen Blick drauf werfen könnten bezüglich, Größe, Lesbarkeit und Positionierung. Mir gefällt es eigentlich so recht gut, aber ich höre mir dennoch gerne eure Meinungen an

Hier Klick geht es zur meiner Testseite.

[powergold]

So sieht das ganze bei mir im Firefox bei einer Auflösung von 1680x1050Pixel aus:



Und so siehts im IE 6 bei gleicher Auflösung aus:



Lg
Stefan

[Olaf]

Hallo Stefan,
das ist natürlich sehr unschön Solche Auflösungen schafft mein Monitor leider nicht.

Zwei Fragen stellen sich mir jetzt

1.) Kann man solche Auflösungen irgendwie simulieren, dass ich so etwas besser nachvollziehen kann?

2.) Was muss ich ändern, damit so etwas nicht passiert?

Meine CSS sieht für den DIV nun so aus:

#postit {
	                   position:absolute;
                           top:-40px; 
                           left:735px; 
                         }

[Degers]

Nicht allzu ernstnehmen, ist nur ein logischer Schluss von mir, vom fachlichen her bin ich in dem Bereich absolut unbewandert:
In der CSS-Datei definierst du die Position in Pixel, wenn ich das richtig verstehe?
Kann man vielleicht nicht absolut, sondern relativ definieren, damit sich die Verhältnisse an unterschiedliche Auflösungen und Browser anpassen können?
Zumindest im Bereich von HTML ist das meines Wissens nach möglich, wie es in Stylesheets aussieht, da müssen die Profis ran.


#
Eric

[lig_80]

Gib mal dem wrapper ein »position: relative;« und richte dein postit dann absolut aus.

Bei der absoluten Positionierung ist immer das nächste Vorfahrenelement entscheidend, daß einen anderen Positionierungswert als »static« hat. Sobald du dem Wrapper oder auch dem Container ein position:relative; gibst wird das daran ausgerichtet. Momentan statt dessen am Body, und daher klappt das nur bei exakt dem von dir genutzten Viewport so wie du es haben möchtest.

Beispiel hier: http://huepenbecker-design.de/stuff/pos_test.htm

Die Innenboxen sind in beiden Fällen identisch. Aber block2 hat ein position: relative; bekommen.

[Wishu]

Das mit der Positionierung hat lig ja schon gut erklärt. Das mit dem IE6 kannst du leicht damit umgehen: DD_belatedPNG: Medicine for your IE6/PNG headache!

[Olaf]

Zitat:

Zitat von Wishu Das mit der Positionierung hat lig ja schon gut erklärt. Das mit dem IE6 kannst du leicht damit umgehen: DD_belatedPNG: Medicine for your IE6/PNG headache!

Ist vermutlich nur wirklich einfach für Leute mit Programmierkentnissen. Bei mir klappt es leider nicht

Wie habe ich es gemacht:
- das js-Script heruntergeladen und passen umbenannt (DD_belatedPNG.js)
- bei mir auf meine Testseite ins Unterverzeichnis /js hochgeladen
- dann im Im Header Bereich meiner Testseite folgenden Code eingetragen:

<!--[if IE 6] -->
<script src="js/DD_belatedPNG.js"></script>

<script>
  /* EXAMPLE */
  DD_belatedPNG.fix();
 
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>

Irgendwo müsste ich sicherlich auch meine post-it.png eintragen. Mir erschließt sich leider nicht so ganz wo. In den Klammern von DD_belatedPNG.fix(); habe ich es schon versucht (auch mit Pfad Angabe "images/post-it.png"), aber der Fehler bleibt im IE6 erhalten.

Vielleicht hat ja noch jemand einen Tipp.

P.S. Mit der Positionierung-Problem habe ich noch nichts weiter ausprobiert