✔ Zellen <td> <div> Seiteneffekt

cleanAir · 25. Oktober 2009

Hallo,

ich (vielleicht auch andere) habe ein kleines. Ich versuche in ein Tabellen/Zellen Gerüst css Elemente einzubinden. Hier mein Versuch.

Hier der HTML ohne dem <td> bzw. Zellen Tag. Das bringt den gewünschen Effekt ist aber leider nicht in einer Tabelle angerdnet:

Code:

<ul id="imagelist"><div class="image">
<a href="http://google.com"><img src="thumbs/$thumb" /></a>
<dl class="popup"><dt>name</dt><dd>$name</dd><dt>quality</dt><dd>$quality</dd><dt>tags</dt><dd>TAGS</dd></dl></div>

Die Bilder werden untereinender angezeigt, beim Scrollen mit dem Maus Cursor erscheint ein kleines PopUp über dem Bild mit sonstiges Infos.

Schreibe ich nun den Zellen Tag "<td>" davor damit die Bilder in einer Zelle einer Tabelle eingeordnet werden.

Code:

<td><ul id="imagelist"><div class="image">
<a href="http://google.com"><img src="thumbs/$thumb" /></a>
<dl class="popup"><dt>name</dt><dd>$name</dd><dt>quality</dt><dd>$quality</dd><dt>tags</dt><dd>TAGS</dd></dl></div></td>

Erscheint dieses gewünschte Popup nur beim ersten Bild in der Tabelle. Bei den folgenden tut sich nichts.

Hier die CSS:

Code:

/* popup */
dl{
	overflow:hidden;
	width:100%;	
}
	dl dt{
		text-transform:uppercase;
		color:#555;
		font-size:0.95em;
		font-weight:normal;
		float:left;
		clear:left;
		margin:0  5px 7px 0;
	}
	dl dd{
		float:left;
		margin:0 0 7px 5px;
	}

ul#imagelist{
	float:left;
	overflow:hidden;
	width:100%;
}
		ul#imagelist .image{
			overflow:hidden;
			position:relative;
			text-align:center;
			height:180px;
			width:240px;
			display:block;
		}
			ul#imagelist dl.popup{
				display:none;
				text-align:left;

				opacity:.7;
				filter: alpha(opacity=70);
				width:240px;
				background-color:black;
				position:absolute;
				bottom:0;
				left:0px;
				color:white;
				padding:5px;
				width:240px;
				font-size:0.95em;
			}
				ul#imagelist dl.popup dt{
					width:45px;
					font-size:0.75em;
					color:white;
					line-height:1.2em;
				}
				ul#imagelist dl.popup dd{
					width:95px;
					color:white;
					font-size:1em;
					line-height:1em;
				}

Ich muss irgendwie einen Fehler in der Anbindung (an die Zelle) machen. Ich habe aber schon das "ul"-Tag im css durch den "td"-Tag ersetzt sowie den HTMLcode angepasst. Trotzdem erhält nur das erste Bild das gewünschte Popup.

Wie funktioniert das generell wenn man css-Elemente in/an "<td>" Tags anbinden möchte?

Maik · 25. Oktober 2009

Hi,

gibt es das Ganze irgendwo online zu sehen?

Zumindest ist dein Markup in dieser Form nicht valide, da das <div>-Element kein unmittelbares Nachfolgeelement des <ul>- Elements darstellt, und darin der schliessende </ul>-Tag fehlt.

mfg Maik

cleanAir · 25. Oktober 2009

Leider nicht, mir wurde das auf den Schreibtisch "gerotzt".

Wenn es dir um das bildliche geht, so kann man sagen das dieses "Popup" über das Thumbnail/Bild geblendet wird. Also ein kleines Bildchen wo von unten eine anders Div geschoben wird (30% trasparent) per Javascript. Dies schiedt sich bis zur mitte des Thumbs. Auf diesem Div wiederum stehen so Sachen wie Bildname, Qualität etc.

Du kannst es dir zusammenbauen: Hier die js-Files;

Einfach Dateien in .js umbennen und in ein leeres html einbinden.

Maik · 25. Oktober 2009

Besser du lädst mal alles erforderliche in einem ZIP-Archiv hier hoch, denn mit deinen spärlichen Codeschnipseln kann ich hier in einem HTML-Dokument herzlich wenig anfangen.

mfg Maik

Maik · 25. Oktober 2009

Hab's mir mal zusammengeschustert, kann aber keine Ignoration des Popup-Scripts erkennen, wenn sich die Liste in einem <td>-Element befindet.

Und was hat dies alles nun mit CSS zu tun, wenn bei dir das Popup nicht erscheint, das via common.js erzeugt wird?

mfg Maik

cleanAir · 25. Oktober 2009

Hier nochmal die Zip. Damit wir wirklich vom gleichen Standpunkt ausgehen.

Also das css positioniert das popup über das Bild. die Animation führen die .js Files aus.

Zwischen der CSS und der Html erscheint das Problem. Je nachdem ob Zellen verwendet werden oder nicht verändert sich die Funktionsweise.

Maik · 25. Oktober 2009

Tja, so enstehen dann ganz schnell Mißverständnisse.

Ein ID-Bezeichner (hier #imagelist) muß im (X)HTML-Dokument eindeutig sein.

Ich hatte das eben auf die Schnelle so getestet:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-10-25">
<title>tutorials.de</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="common.js"></script>
<style type="text/css">
<!--
/* popup */
dl{
        overflow:hidden;
        width:100%;
}
        dl dt{
                text-transform:uppercase;
                color:#555;
                font-size:0.95em;
                font-weight:normal;
                float:left;
                clear:left;
                margin:0  5px 7px 0;
        }
        dl dd{
                float:left;
                margin:0 0 7px 5px;
        }

ul#imagelist{
        float:left;
        overflow:hidden;
        width:100%;
}
                ul#imagelist .image{
                        overflow:hidden;
                        position:relative;
                        text-align:center;
                        height:180px;
                        width:240px;
                        display:block;
                }
                        ul#imagelist dl.popup{
                                display:none;
                                text-align:left;

                                opacity:.7;
                                filter: alpha(opacity=70);
                                width:240px;
                                background-color:black;
                                position:absolute;
                                bottom:0;
                                left:0px;
                                color:white;
                                padding:5px;
                                width:240px;
                                font-size:0.95em;
                        }
                                ul#imagelist dl.popup dt{
                                        width:45px;
                                        font-size:0.75em;
                                        color:white;
                                        line-height:1.2em;
                                }
                                ul#imagelist dl.popup dd{
                                        width:95px;
                                        color:white;
                                        font-size:1em;
                                        line-height:1em;
                                }
-->
</style>

</head>
<body>

<table border="1"><tr><td>
    <ul id="imagelist">
        <li class="image"><a href="http://google.com"><img src="./images/test.jpg" /></a>
            <dl class="popup"><dt>name</dt><dd>$name</dd><dt>quality</dt><dd>$quality</dd><dt>tags</dt><dd>TAGS</dd></dl>
        </li>
        <li class="image"><a href="http://google.com"><img src="./images/test.jpg" /></a>
            <dl class="popup"><dt>name</dt><dd>$name</dd><dt>quality</dt><dd>$quality</dd><dt>tags</dt><dd>TAGS</dd></dl>
        </li>
        <li class="image"><a href="http://google.com"><img src="./images/test.jpg" /></a>
            <dl class="popup"><dt>name</dt><dd>$name</dd><dt>quality</dt><dd>$quality</dd><dt>tags</dt><dd>TAGS</dd></dl>
        </li>
        <li class="image"><a href="http://google.com"><img src="./images/test.jpg" /></a>
            <dl class="popup"><dt>name</dt><dd>$name</dd><dt>quality</dt><dd>$quality</dd><dt>tags</dt><dd>TAGS</dd></dl>
        </li>
        <li class="image"><a href="http://google.com"><img src="./images/test.jpg" /></a>
            <dl class="popup"><dt>name</dt><dd>$name</dd><dt>quality</dt><dd>$quality</dd><dt>tags</dt><dd>TAGS</dd></dl>
        </li>
        <li class="image"><a href="http://google.com"><img src="./images/test.jpg" /></a>
            <dl class="popup"><dt>name</dt><dd>$name</dd><dt>quality</dt><dd>$quality</dd><dt>tags</dt><dd>TAGS</dd></dl>
        </li>
    </ul>
</td></tr></table>

</body>
</html>

mfg Maik

Maik · 25. Oktober 2009

Und hier die funktionstüchtige Variante mitzellen.htm unter Zuhilfenahme des Klassenbezeichners ".imagelist":

HTML:

<!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" xml:lang="en">
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>
</head>
<body>

<table width="963" border="0">
<tr>
<td><ul class="imagelist"><li class="image"><a href="http://www.google.de"><img src="54559326.jpg" /></a><dl class="popup"><dt>name</dt><dd>blabla</dd><dt>quality</dt><dd>1</dd><dt>tags</dt><dd>TAGS</dd></dl></li></ul></td>
<td><ul class="imagelist"><li class="image"><a href="http://www.google.de"><img src="54559326.jpg" /></a><dl class="popup"><dt>name</dt><dd>blabla</dd><dt>quality</dt><dd>1</dd><dt>tags</dt><dd>TAGS</dd></dl></li></ul></td>
<td><ul class="imagelist"><li class="image"><a href="http://www.google.de"><img src="54559326.jpg" /></a><dl class="popup"><dt>name</dt><dd>blabla</dd><dt>quality</dt><dd>1</dd><dt>tags</dt><dd>TAGS</dd></dl></li></ul></td>
<td><ul class="imagelist"><li class="image"><a href="http://www.google.de"><img src="54559326.jpg" /></a><dl class="popup"><dt>name</dt><dd>blabla</dd><dt>quality</dt><dd>1</dd><dt>tags</dt><dd>TAGS</dd></dl></li></ul></td>
<td><ul class="imagelist"><li class="image"><a href="http://www.google.de"><img src="54559326.jpg" /></a><dl class="popup"><dt>name</dt><dd>blabla</dd><dt>quality</dt><dd>1</dd><dt>tags</dt><dd>TAGS</dd></dl></li></ul></td>
</tr>
<tr>
<td><ul class="imagelist"><li class="image"><a href="http://www.google.de"><img src="54559326.jpg" /></a><dl class="popup"><dt>name</dt><dd>blabla</dd><dt>quality</dt><dd>1</dd><dt>tags</dt><dd>TAGS</dd></dl></li></ul></td>
<td><ul class="imagelist"><li class="image"><a href="http://www.google.de"><img src="54559326.jpg" /></a><dl class="popup"><dt>name</dt><dd>blabla</dd><dt>quality</dt><dd>1</dd><dt>tags</dt><dd>TAGS</dd></dl></li></ul></td>
<td><ul class="imagelist"><li class="image"><a href="http://www.google.de"><img src="54559326.jpg" /></a><dl class="popup"><dt>name</dt><dd>blabla</dd><dt>quality</dt><dd>1</dd><dt>tags</dt><dd>TAGS</dd></dl></li></ul></td>
<td><ul class="imagelist"><li class="image"><a href="http://www.google.de"><img src="54559326.jpg" /></a><dl class="popup"><dt>name</dt><dd>blabla</dd><dt>quality</dt><dd>1</dd><dt>tags</dt><dd>TAGS</dd></dl></li></ul></td>
<td><ul class="imagelist"><li class="image"><a href="http://www.google.de"><img src="54559326.jpg" /></a><dl class="popup"><dt>name</dt><dd>blabla</dd><dt>quality</dt><dd>1</dd><dt>tags</dt><dd>TAGS</dd></dl></li></ul></td>
</tr>
</table>

</body>
</html>

Javascript:

function attachRolloverPopups(){
        $('.imagelist .popup').hide();

        $('.imagelist .image').hover(
                function(){
                        $('.imagelist .popup').slideUp(100);
                        $(this).find('.popup').slideDown(100);
                },

                function(){
                        $('.imagelist .popup').slideUp(100);
                }
        );

CSS:

ul.imagelist{
        float:left;
        overflow:hidden;
        width:100%;
}
                ul.imagelist .image{
                        overflow:hidden;
                        position:relative;
                        text-align:center;
                        height:180px;
                        width:240px;
                        display:block;
                }
                        ul.imagelist dl.popup{
                                display:none;
                                text-align:left;

                                opacity:.7;
                                filter: alpha(opacity=70);
                                width:240px;
                                background-color:black;
                                position:absolute;
                                bottom:0;
                                left:0px;
                                color:white;
                                padding:5px;
                                width:240px;
                                font-size:0.95em;
                        }
                                ul.imagelist dl.popup dt{
                                        width:45px;
                                        font-size:0.75em;
                                        color:white;
                                        line-height:1.2em;
                                }
                                ul.imagelist dl.popup dd{
                                        width:95px;
                                        color:white;
                                        font-size:1em;
                                        line-height:1em;
                                }

mfg Maik

cleanAir · 25. Oktober 2009

Danke, funktioniert die Version bei dir? Mit popup und allem?

Bei mir erscheint das popup garnicht.

Hab die .htm neu angelegt sowie die style und common.js kopiert.

Maik · 25. Oktober 2009

Funktioniert bei mir einwandfrei

Leer mal den Browsercache, und lad die Seite anschliessend neu.

mfg Maik

✔ Zellen <td> <div> Seiteneffekt

cleanAir

Mitglied

Maik

cleanAir

Mitglied

Anhänge

Maik

Maik

cleanAir

Mitglied

Anhänge

Maik

Maik

cleanAir

Mitglied

Maik

Neue Beiträge