info box

[david]

hi,

ich will ein mosaik aus 4*4 bildern machen, wenn der user mit der maus darüber fährt gibts nähere infos.
also gut, ins selfhtml rein und nachgeschaut unter info box.

nun ja und da hab ich schon erste vertändnisprobleme, glaub ich halt:
der autor schreibt:

Das Grundelement der aufklappbaren Infobox ist ein deutschsprachige Seite <div>-Bereich, welcher auf der Seite deutschsprachige Seite absolut positioniert ist. Wäre der Bereich fließend im Text angeordnet, würde das ein Verrutschen des Inhaltes unter die Box zur Folge haben.

was ist die erklärung dafür dass die box runterrutschen würde?
Etwa weil wenn

#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}

eintritt, das element in die nächste zeile springen würde wenn es nicht genug platz hat??

grübel :-)
lg

[Ashura]

Hallo david.

Das Grundelement der aufklappbaren Infobox ist ein deutschsprachige Seite <div>-Bereich, welcher auf der Seite deutschsprachige Seite absolut positioniert ist. Wäre der Bereich fließend im Text angeordnet, würde das ein Verrutschen des Inhaltes unter die Box zur Folge haben.

Inklusive der kopierten Text aus den alt–Attributen der Grafiken klingt dieser Absatz recht amüsant.

was ist die erklärung dafür dass die box runterrutschen würde?
Etwa weil wenn

#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}

eintritt, das element in die nächste zeile springen würde wenn es nicht genug platz hat??

Beinahe. Der mögliche Problemherd steht ein paar Zeilen weiter drunter:

#box a:hover span {  
color:black;  
background:#ffffff;  
font:normal 16px courier, sans-serif;  
border:1px solid black;  
display:block;  
padding:10px;}

Wäre hier keine absolute Positionierung im Spiel, würde das beim Hovern eingeblendete span–Element natürlich seinen Platz im Dokument einfordern und infolgedessen den folgenden Inhalt verschieben. Dieses Verhalten ist üblicherweise nicht gewünscht.

Einen schönen Dienstag noch.

Gruß, Ashura

[david]

Wäre hier keine absolute Positionierung im Spiel, würde das beim Hovern eingeblendete span–Element natürlich seinen Platz im Dokument einfordern und infolgedessen den folgenden Inhalt verschieben. Dieses Verhalten ist üblicherweise nicht gewünscht.

hmm da hab ich falsch gedacht...
also schwebt das <span> element dann über dem restlichen text?

und nocheine kleine frage:

wie gruppe ich am besten meine elemente?
mein versuch:

<div id="info">
<a><img src="andi.jpg"><span>andreas<span></a>
<a><img src="dani.jpg"><span>dani<span></a>
<a><img src="simon.jpg"><span>simon<span></a>
<br>
<a><img src="dominik.jpg"><span>dominik<span></a>
<a><img src="freddy.jpg"><span><span>fred</a>
<a><img src="david.jpg"><span><span>david</a>
<br>
<a><img src="maxl.jpg"><span><span>maxl</a>
</div>

lg

[Ashura]

Hallo david.

hmm da hab ich falsch gedacht...
also schwebt das <span> element dann über dem restlichen text?

Eigentlich das div–Element, aber infolgedessen natürlich auch alle seine Kindelemente, wozu das span–Element gehört. Kurz: ja.

und nocheine kleine frage:

wie gruppe ich am besten meine elemente?
mein versuch:

<div id="info">
<a><img src="andi.jpg"><span>andreas<span></a>
<a><img src="dani.jpg"><span>dani<span></a>
<a><img src="simon.jpg"><span>simon<span></a>
<br>
<a><img src="dominik.jpg"><span>dominik<span></a>
<a><img src="freddy.jpg"><span><span>fred</a>
<a><img src="david.jpg"><span><span>david</a>
<br>
<a><img src="maxl.jpg"><span><span>maxl</a>
</div>

Ich sehe hier eine http://de.selfhtml.org/html/text/listen.htm@title=Liste.

Einen schönen Dienstag noch.

Gruß, Ashura

[david]

Ich sehe hier eine http://de.selfhtml.org/html/text/listen.htm@title=Liste.

cool,danke für die hilfe!
hoffe ich kann mein fertiges ergebnis gleich präsentieren :)

lg
david

[david]

Ich sehe hier eine http://de.selfhtml.org/html/text/listen.htm@title=Liste.

hi ashura,

bin deinem link gefolgt und verstehe nicht ganz worum hier die liste vorzuziehen ist.
eine <ul> ist ja auch ein block element ich will die bilder aber eben
z.b 3*3 im quadrat haben, da müsste ich die liste ja auch wieder formatieren...

bitte um erneute aufklärung,
lg david

[OhneNamen]

Hi David,

bin deinem link gefolgt und verstehe nicht ganz worum hier die liste vorzuziehen ist.
eine <ul> ist ja auch ein block element ich will die bilder aber eben
z.b 3*3 im quadrat haben, da müsste ich die liste ja auch wieder formatieren...

Grundregel 1: HTML hat nichts mit Darstellung zu tun, es zeichnet den Inhalt logisch aus. Du hast hier ganz eindeutig eine Liste von Personen, also zeichne sie auch so in HTML aus.

Grundregel 2: Für die Darstellung ist immer CSS zuständig. Du willst, dass die Liste wie ein 3*3-Quadrat aussieht, also formatiere die Liste so mit CSS wie du es wünschst.

gruss
OhneNamen

[Ashura]

Hallo david.

Ich sehe hier eine http://de.selfhtml.org/html/text/listen.htm@title=Liste.

hi ashura,

bin deinem link gefolgt und verstehe nicht ganz worum hier die liste vorzuziehen ist.

Weil du eine Auflistung von Elementen hast.

eine <ul> ist ja auch ein block element ich will die bilder aber eben
z.b 3*3 im quadrat haben, da müsste ich die liste ja auch wieder formatieren...

Formatieren musst du sowieso. Mein Vorschlag:

Verpasse dem ul–Element eine bestimmte durch 3 teilbare Breite und Höhe, bspw. 30em. Lasse nun die li–Elemente floaten und verpasse diesen ein Drittel der Breite und ein Drittel der Höhe der Liste, hier also 10em. Fertig ist das Quadrat.

Solltest du die Inhalte der Listenelemente nun noch vertikal zentrieren wollen, musst du entweder mit display:table-cell arbeiten, oder — wenn du den IE unterstützen möchtest —  an Stelle der Liste eine Tabelle verwenden.

Einen schönen Dienstag noch.

Gruß, Ashura

[Ashura]

Hallo Gunnar™.

Solltest du die Inhalte der Listenelemente nun noch vertikal zentrieren wollen, musst du entweder mit display:table-cell arbeiten, […]

Das ist Unsinn, da dies bei gefloateten Elementen wirkungslos ist.

Statt dessen könntest du mit einer geschickten Kombination von padding und height sowie width arbeiten. Bei einer Höhe von 1em für die li–Elemente und einem padding-top und -bottom von 4.5em ist der Text ebenfalls vertikal zentriert. (Alle Zahlen beziehen sich auf meine vorher genannten.)

Einen schönen Dienstag noch.

Gruß, Ashura

[david]

danke nochmal