LinkBack URL
About LinkBacks
ZitierenAuf dieser Site findest Du jede Menge Galerien - die von Dir gesuchte ist sicher auch dabei:
http://www.cssplay.co.uk/menu/ -> Photo galleries
Ergebnis 1 bis 6 von 6
Thema: Bilder darstellen
-
11.11.2010, 16:24 #1TP-Junior
- Registriert seit
- Mar 2010
- Beiträge
- 26
Bilder darstellen
Hallo,
ich würde gerne bilder auf einer hp präsentieren.
Und zwar als thumbnails in einer Reihe, wo dann die einzelnen Fotos bei mouseclick unten drunter größer dargestelltwerden.
Wie kann ich das lösen?
Ich habe es schon mit der Verhaltensfunktion "vergrössern" bei click versucht, aber da verrutscht immer alles!
Und kann ich die Schrift in einer Tabelle vertikal darstellen?
Danke für die Hilfe und beste Grüße
Fossil
-
-
13.11.2010, 18:07 #2TP-Greis
- Registriert seit
- Oct 2003
- Ort
- Niederbayern
- Beiträge
- 6.057
</andy>
m-ra
-
14.11.2010, 14:04 #3TP-Junior
- Registriert seit
- Mar 2010
- Beiträge
- 26
Hallo Rinaldo,
danke für Info.
Beste Grüße
fossil
-
-
15.11.2010, 21:30 #4TP-Junior
- Registriert seit
- Mar 2010
- Beiträge
- 26
geschafft, aber noch nicht ganz am Ziel!
Hallo,
ich habe es tatsächlich geschafft!
Die Fotos sind oben klein und unten bei mouseover folgt die große Darstellung.
Das ganze habe ich micht div-tags gelöst.
Wie bekomme ich diese einzelnen tags denn nun "fixiert" und zentriert?
Dh. für die gängigen browser optimiert?
Ich habe position:absolut gewählt....korrekt? und zusätzlich von
float:none
und left: und top: definiert.
Passt das so?
beste Grüße
fossil
-
19.11.2010, 12:55 #5TP-Greis
- Registriert seit
- Oct 2003
- Ort
- Niederbayern
- Beiträge
- 6.057
Zeig doch bitte den Quelltext/Link zur Site...
</andy>
m-ra
-
19.11.2010, 18:48 #6TP-Junior
- Registriert seit
- Mar 2010
- Beiträge
- 26
quelltext
Hi Rinaldo,
dies ist der quelltext:
wolltest Du das wirklilch komplett?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/vorlage_wild.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
.navi {
font-variant:small-caps;
text-align: center;
position: absolute;
width:12px;
z-index:10;
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
color: #FF6600;
left: 60px;
top: 73px;
height: 700;
float: none;
font-weight: bold;
}
.navi_rechts {
font-variant:small-caps;
text-align: center;
position: absolute;
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
z-index:10;
color: #ff6600;
height: 700px;
width: 12px;
margin-left: 1120px;
top: 73px;
float: none;
left: 3px;
font-weight: bold;
}
.main {
height: 700px;
width: 1016px;
margin-left: 80px;
position: absolute;
left: 14px;
top: 73px;
float: none;
}
#box{
height:120px;
width:180px;
padding:0;
margin:0;}
#box div{display:none;}
#box:hover div{
display:block;
width:300px;
position:absolute;top:260px;left:200px;
padding:100px;}
img {
border: thin solid #333;
}
.header {
font-family: "Bradley Hand ITC";
font-size: 22pt;
font-weight: bold;
color: #99cc00;
float: none;
width: 1000px;
position: absolute;
left: 118px;
top: 16px;
}
a:link {
color: #ff6600;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #ff6600;
}
a:hover {
text-decoration: none;
color: #99cc00;
}
a:active {
text-decoration: none;
color: #ff6600;
}
body {
background-image: url(fotos/wallpaper_1280.jpg);
}
.footer {
font-family: Verdana, Geneva, sans-serif;
font-size: 11pt;
color: #ff6600;
float: none;
height: 20px;
width: 1021px;
top: 764px;
position: absolute;
left: 92px;
}
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div class="header">wildimages </div>
<div class="navi">
<p><a href="portrait.html">P o r t r a i t</a></p>
<p> </p>
<p>N u d e</p>
<p> </p>
<p>W e d d i n g</p>
<p> </p>
<p>K i d s</p>
</div>
<div class="main"><!-- InstanceBeginEditable name="EditRegion1" -->
<table width="600" align="center" cellpadding="10">
<tr>
<td><div id="box"><a href="#"><img src="fotos/k.jpg" width="180" height="120" /> </a>
<div><p><img src="fotos/g.jpg" width="400" height="260"></p></div></div></td>
<td><div id="box"><a href="#"><img src="fotos/k2.jpg" alt="" width="180" height="120" /></a>
<div><p><img src="fotos/g2.jpg" alt="" width="400" height="260" /></p></div></div></td>
<td><div id="box"><a href="#"><img src="fotos/k1.jpg" alt="" width="180" height="120" /></a>
<div><p><img src="fotos/g1.jpg" alt="" width="400" height="260" /></p></div></div></td>
<td><div id="box"><a href="#"><img src="fotos/k.jpg" width="180" height="120" /> </a>
<div><p><img src="fotos/g.jpg" width="400" height="260"></p></div></div></td>
</tr>
<tr>
<td><div id="box"><a href="#"><img src="fotos/k2.jpg" alt="" width="180" height="120" /></a>
<div><p><img src="fotos/g2.jpg" alt="" width="400" height="260" /></p></div>
</div></td>
<td><div id="box"><a href="#"><img src="fotos/k1.jpg" alt="" width="180" height="120" /></a>
<div><p><img src="fotos/g1.jpg" alt="" width="400" height="260" /></p></div></div></td>
<td><div id="box"><a href="#"><img src="fotos/k.jpg" width="180" height="120" /> </a>
<div><p><img src="fotos/g.jpg" width="400" height="260"></p></div></div></td>
<td><div id="box"><a href="#"><img src="fotos/k2.jpg" alt="" width="180" height="120" /></a>
<div><p><img src="fotos/g2.jpg" alt="" width="400" height="260" /></p></div></div></td>
</tr>
</table>
<!-- InstanceEndEditable --></div>
<div class="navi_rechts">
<p>W i l d</p>
<p> </p>
<p>S t u d i o</p>
<p> </p>
<p>t a m e</p>
<p> </p>
<p>L a n d s c a p e</p>
</div>
<div class="footer">Kontakt Impressum</div>
<p> </p>
</body>
<!-- InstanceEnd --></html>
Vielleicht hast Du ja auch noch einen Tip zur vertikalen Schrift....
Beste Grüße
fossil
Aktive Benutzer
Aktive Benutzer
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
Ähnliche Themen
-
Transparente Bilder im IE darstellen
Von Headbanger im Forum HTML & CSSAntworten: 80Letzter Beitrag: 30.05.2005, 15:06 -
bilder mittels rahmen größer darstellen
Von junkerhans im Forum GoLiveAntworten: 3Letzter Beitrag: 28.01.2004, 21:16 -
Bilder in Ergebnisseite darstellen - DWW MX
Von SMan im Forum Dreamweaver & andere WebeditorenAntworten: 3Letzter Beitrag: 20.12.2003, 13:39 -
pixelorientierte bilder bildschirmfüllend auf hp darstellen
Von Tommy Noob im Forum PhotoshopAntworten: 7Letzter Beitrag: 14.01.2003, 20:25 -
Bilder als Thumbnails darstellen oder als Bildlaufleiste
Von jazz im Forum Traum-DynamikAntworten: 2Letzter Beitrag: 29.01.2002, 08:55
Aktive Benutzer
Aktive Benutzer
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
