CSS position

[bleumi85]

Hallo,

ich arbeite weiterhin an meiner ersten kleinen Homepage und habe mir jetzt eine Seite gebastelt bei der ich diverse Rezepte hinterlegen will (also zum kochen). Jedem Rezept gebe ich einen eigenen Listenpunkt mit 3 Einträge undzwar

1. dem Rezeptnamen
2. dem Rezeptbild
3. einem Fragezeichenbild

Das ganze sieht dann bei mir wie folgt aus:

<li>
  <a id="Rezept01" href="#">
    <span><b>Rezept Nr. 1</b><br>Königsberger Klopse mit Kartoffeln</span>
    <span><img src="pics/koenigsberger.jpg" alt="koenigsberger"></span>
    <span><img src="pics/Fragezeichen.png" alt="Fragezeichen"></span>
  </a>
</li>

Jetzt hab ich mir folgendes vorgestellt: Jeder Listenpunkt soll 150 x 600 Pixel sein, rechtsbündig liegt das Menübild (150 x 300), auf der linken Seite steht das Bild von dem Fragezeichen (zentriert in dem linken Bereich 150 x 300) und der Name des Rezeptes steht unter dem Menübild und wird sichtbar wenn man über das Menübild hovert weil dieses dann nach links wandert (widerum über das Fragezeichen). Mit dem z-Index komme ich klar. Hovern funktioniert problemlos nur ich bekomm die 3 spans nicht ansatzweise an die Position wo ich sie gerne hätte.

position:absolute;
top:0;

funktioniert nicht, da sich dann bei mehreren Rezepten alle Bilder an den oberen Rand setzen und

position:relative;
top:0;

funktioniert genau so wenig, da die 3 spans dann irgendwie alle komisch aufeinander reagieren.

Hat jemand eine Lösung für mich? Ist der Ansatz mit span unklug gewählt oder wie kann ich das hinbekommen?

[Matthias Apsel]

Hallo bleumi85,

Nur kurze Stichpunkte, damit du dein Konzept überdenken kannst.

<li>
  <a id="Rezept01" href="#">
    <span><b>Rezept Nr. 1</b><br>Königsberger Klopse mit Kartoffeln</span>
    <span><img src="pics/koenigsberger.jpg" alt="koenigsberger"></span>
    <span><img src="pics/Fragezeichen.png" alt="Fragezeichen"></span>
  </a>
</li>

Gut, dass du li-Elemente verwendest, schlecht, dass du b und br dabei hast. Elemente die nur ein einziges weiteres Element gruppieren sind allermeisten sinnlos. href="#" soll bleiben?

<li>
  <a id="Rezept01" href="#">
      <span>Rezept Nr. 1</span> <span>Königsberger Klopse mit Kartoffeln</span>
      <img src="pics/koenigsberger.jpg" alt="koenigsberger">
  </a>
</li>

Das Fragezeichen ist Verzierung, sollte deshalb ins CSS

Jetzt hab ich mir folgendes vorgestellt: Jeder Listenpunkt soll 150 x 600 Pixel sein,

Pixel? Vergiss, dass es Pixel gibt. Was machst du mit Handys?

wird sichtbar wenn man über das Menübild hovert weil dieses dann nach links wandert (widerum über das Fragezeichen). Mit dem z-Index komme ich klar.

Viele Handys simulieren zwar schon ein Hover, aber es ist allgemein keine gute Idee.

position:absolute;
top:0;

funktioniert nicht

ist mMn. für dein Vorhaben ungeeignet.

Hat jemand eine Lösung für mich?

Im Moment nicht, weil ich nicht ganzso genau weiß, wie es aussehen soll.

              BBB
Rezept Nr.1   BBB
              BBB

BBB
BBB Königsberger
BBB

So richtig?

Bis demnächst
Matthias

[bleumi85]

Hi Matthias,

ich hab es jetzt durch Umgruppierung soweit hinbekommen, aber deine Kritikpunkte stimmen mich natürlich nachdenklich. Ich hab neulich mal was von Responsive Design gehört aber hab mich bisher noch nicht damit auseinander gesetzt.

Hallo bleumi85,

Nur kurze Stichpunkte, damit du dein Konzept überdenken kannst.

<li>
  <a id="Rezept01" href="#">
    <span><b>Rezept Nr. 1</b><br>Königsberger Klopse mit Kartoffeln</span>
    <span><img src="pics/koenigsberger.jpg" alt="koenigsberger"></span>
    <span><img src="pics/Fragezeichen.png" alt="Fragezeichen"></span>
  </a>
</li>

Gut, dass du li-Elemente verwendest, schlecht, dass du b und br dabei hast. Elemente die nur ein einziges weiteres Element gruppieren sind allermeisten sinnlos. href="#" soll bleiben?

Ja, erst mal schon, bis ich weiß worauf genau ich verlinke, ich denke da an eine Lösung mit php

<li>
  <a id="Rezept01" href="#">
      <span>Rezept Nr. 1</span> <span>Königsberger Klopse mit Kartoffeln</span>
      <img src="pics/koenigsberger.jpg" alt="koenigsberger">
  </a>
</li>

Das Fragezeichen ist Verzierung, sollte deshalb ins CSS

Jetzt hab ich mir folgendes vorgestellt: Jeder Listenpunkt soll 150 x 600 Pixel sein,

Pixel? Vergiss, dass es Pixel gibt. Was machst du mit Handys?

Was wäre denn sie sinnvollere Lösung?

wird sichtbar wenn man über das Menübild hovert weil dieses dann nach links wandert (widerum über das Fragezeichen). Mit dem z-Index komme ich klar.

Viele Handys simulieren zwar schon ein Hover, aber es ist allgemein keine gute Idee.

Was für Alternativen gäbe es denn oder kann ich solche Effekte für Handys eh vergessen?

position:absolute;
top:0;

funktioniert nicht

ist mMn. für dein Vorhaben ungeeignet.

Hat jemand eine Lösung für mich?

Im Moment nicht, weil ich nicht ganzso genau weiß, wie es aussehen soll.

              BBB
Rezept Nr.1   BBB
              BBB

BBB
BBB Königsberger
BBB

So richtig?

Ja, absolut korrekt so.

Bis demnächst
Matthias

Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.

[Rolf b]

Unabhängig von grundsätzlichen Erwägungen zu Responsive Design...

Wenn du beim hovern über dem Rezeptbild einen Text einblenden willst, kannst Du das auch mit einem title-Attribut tun, das ist ein Tooltip, da musst Du gar nichts weiter machen.

Mit position:absolute nimmst Du ein DOM Element aus dem normalen Fluss heraus. D.h. für die Berechnung der Größe des Containers, wo das position:absolute Element drin steht, wird es dann nicht mehr herangezogen. Du musst also ggf. den Container, in dem das absolut positionierte Element angezeigt werden soll, per width oder height groß genug machen.

Zweiter Aspekt bei position:absolute ist, dass der Browser sich ein Bezugselement sucht, relativ zu dem er das absolut positionierte Element anordnet. Der CSS 2.1 Standard sagt: Dieses Bezugselement ist das "nächstgelegene positionierte Elternelement". Ein Element ist positioniert, wenn es eine position: Angabe im Style hat (ggf auch wenn es ein float: ist, bin nicht ganz sicher). Das äußerste positionierte Element ist <body>, d.h. wenn Du kein eigenes positioniertes Element in der Elternhierarchie hast, landen alle absolut positionierten Elemente oben links.

Ein Element positionieren ohne die Position zu verändern - das geht mit position:relative. Wenn Du also deinen <li> Elementen einen Style position:relative gibst, werden deren absolut positionierte Kindelemente mit Bezug auf das Listenelement positioniert, in dem sie stehen.

Gruß Rolf

[Matthias Apsel]

Hallo Rolf b,

Ergänzung: Position richtig verwenden, zwar ein wenig altbacken …

Bis demnächst
Matthias

[Matthias Apsel]

Hallo bleumi85,

eine erste Idee: http://dabblet.com/gist/412890d9b5f4717d3cf468de7241f171

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

bisschen schicker: http://dabblet.com/gist/614a55f5bfce30824e39bbcaf9b1af84

Bis demnächst
Matthias