Ich beschäftige mich jetzt nach 2 Jahren mal wieder mit HTML/CSS (in Verbindung mit JS) und werde an ähnlichen Stellen verrückt wie zu dem Zeitpunkt an dem ich aufgehört habe 
Objekt der HTML-Datei soll eine kleine Galerie auf einer CD sein, die diverse von mir erstellte Bilder anzeigt. Diese sollen zuerst in einer Thumbnail dargestellt werden und auf Wunsch soll z. B. eine größere Version sichtbar oder die entsprechende PSD-Datei angezeigt werden.
Nun habe ich einige Probleme bei der Umsetzung:
Anmerkung: Ich kann nicht davon ausgehen, dass der Betrachter Internetzugang besitzt. Deswegen fallen Ajax-Frameworks aus und PHP ist selbstverständlich auch nicht drin.
1. Der "pic_overlay_box" DIV, indem die größere Bildversion dargestellt werden soll, überlappt nicht den "thumb_box"-DIV. Ich scheine gerade was die DIV-Positionierung angeht noch schwierigkeiten zu haben, wäre deswegen für eine ausführliche Erklärung an dieser Stelle dankbar. Links die nicht zu CSS4You oder SelfHtml führen gehen auch. Gelöst. Danke sokie
2. Die JS-Funktion "overlay()" macht zwar den DIV sichtbar, das Verstecken funktioniert aber nicht. Gelöst. Habe bei der IF-Abfrage ein "=" vergessen... Warum sagt mir das keiner?
3. Wie kann ich ein Bild in bestmöglicher Größe darstellen, auch wenn ich die Bildschirmauflösung des Betrachters nicht kenne? Gelöst, nochmal ein Dank an sokie.
4. Wie kann ich per JS auf den DIV "main_box" zugreifen um dann eine bestimmten HTML-Code hinein zu schrieben? Ich will den Part "<div id="thumb_box" onclick="overlay()"></div>" nämlich dynamisch schreiben lassen, ohne dass ich meinen JS-Code im ganzen Dokument verstreue.
Hier sind meine Quellcodes:
HTML:
CSS:
Danke für euro Hilfe
Objekt der HTML-Datei soll eine kleine Galerie auf einer CD sein, die diverse von mir erstellte Bilder anzeigt. Diese sollen zuerst in einer Thumbnail dargestellt werden und auf Wunsch soll z. B. eine größere Version sichtbar oder die entsprechende PSD-Datei angezeigt werden.
Nun habe ich einige Probleme bei der Umsetzung:
Anmerkung: Ich kann nicht davon ausgehen, dass der Betrachter Internetzugang besitzt. Deswegen fallen Ajax-Frameworks aus und PHP ist selbstverständlich auch nicht drin.
1. Der "pic_overlay_box" DIV, indem die größere Bildversion dargestellt werden soll, überlappt nicht den "thumb_box"-DIV. Ich scheine gerade was die DIV-Positionierung angeht noch schwierigkeiten zu haben, wäre deswegen für eine ausführliche Erklärung an dieser Stelle dankbar. Links die nicht zu CSS4You oder SelfHtml führen gehen auch. Gelöst. Danke sokie
2. Die JS-Funktion "overlay()" macht zwar den DIV sichtbar, das Verstecken funktioniert aber nicht. Gelöst. Habe bei der IF-Abfrage ein "=" vergessen... Warum sagt mir das keiner?
3. Wie kann ich ein Bild in bestmöglicher Größe darstellen, auch wenn ich die Bildschirmauflösung des Betrachters nicht kenne? Gelöst, nochmal ein Dank an sokie.
4. Wie kann ich per JS auf den DIV "main_box" zugreifen um dann eine bestimmten HTML-Code hinein zu schrieben? Ich will den Part "<div id="thumb_box" onclick="overlay()"></div>" nämlich dynamisch schreiben lassen, ohne dass ich meinen JS-Code im ganzen Dokument verstreue.
Hier sind meine Quellcodes:
HTML:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function overlay() {
if (document.getElementById("pic_overlay_box").style.display == "none") {
document.getElementById("pic_overlay_box").style.display = "block";
} else {
document.getElementById("pic_overlay_box").style.display = "none";
}
}
</script>
</head>
<body>
<div id="main_box">
<div id="thumb_box" onclick="overlay()"></div>
<div id="pic_overlay_box" style="display: none">
<div id="big_pic_box" onclick="overlay()">
</div>
</div>
</div>
</body>
</html>
Code:
body {
background-color:#505050;
margin: 0px;
}
#main_box {
border:1px solid #FFFFFF;
margin:auto;
height: 98%;
width: 98%;
}
#thumb_box {
border: 1px solid #FFF;
position: relative;
margin: 10px;
height: 120px;
width: 120px;
float: left;
}
#pic_overlay_box {
border:1px solid #3C3;
background-image: url("t_back2.png");
position: fixed;
margin: auto;
top: 0px;
width: 98%;
height: 98%;
z-index: 9998;
}
#big_pic_box {
border: 1px solid #FFF;
background-color: #000;
position: relative;
margin: auto;
top: 0px;
width: 300px;
height: 99%;
z-index: 9999;
}
Zuletzt bearbeitet:
