✔ Zellen <td> <div> Seiteneffekt

C

cleanAir

Mitglied
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?
 
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
 
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.
 

Anhänge

  • common.txt
    5,2 KB · Aufrufe: 29
  • jquery.txt
    26,5 KB · Aufrufe: 27
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
 
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
 
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.
 

Anhänge

  • img_popup.zip
    27,5 KB · Aufrufe: 17
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
 
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
 
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.
 
Funktioniert bei mir einwandfrei :)

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

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück