Hallo zusammen,
ich habe aus langeweile eine Homepage gebastelt. www.pchelpnow.de
Momentan bin ich am integrieren von Screenshots - eine Ansicht gibt´s unter www.pchelpnow.de/test.shtml
Problem ist einmal dass es mir fast meine ganze Website zerreisst.
Dann möchte ich zu den Photos noch ein - zwei kurze Sätze einfügen. Leider ist die Schrift etwas zu klein.
Und zu guter Letzt werden beim überfahren der Thumbnails die Bilder immer rechts unten im Eck aufzoomen.
Ich hätte gerne dass der Zoom nach links oben aufgeht.
Bitte um Hilfe.
mfg
Rollercoaster
Meine CSS Codes:
Code
/*
Template name: Dirtylicious
Template URI: http://templates.arcsin.se/dirtylicious-website-template/
Release date: 2007-03-10
Description: A soft-colored, bright and somewhat dirty two-column template.
Author: Viktor Persson
Author URI: http://arcsin.se/
This template is licensed under a Creative Commons Attribution 2.5 License:
http://templates.arcsin.se/license/
*/
/* standard elements */
html {min-height: 100%;}
* {
margin: 0;
padding: 0;
}
a {color: #048;}
a:hover {color: #06C;}
body {
background: #E7E7E2 url('img/body.jpg') no-repeat center top;
color: #444;
font: normal 62.5% Tahoma,sans-serif;
padding-top: 64px;
}
p,code,ul {padding-bottom: 1.2em;}
li {list-style: none;}
h1 {font: normal 1.8em Tahoma,sans-serif;}
h2 {font: bold 1.4em sans-serif;}
h3 {font: bold 1em Tahoma,sans-serif;}
form,input {margin: 0; padding: 0; display: inline;}
code {
background: #FFF;
border: 1px solid #EEE;
border-left: 6px solid #CCC;
color: #666;
display: block;
font: normal 1em Tahoma,sans-serif;
line-height: 1.6em;
margin-bottom: 12px;
padding: 8px 10px;
white-space: pre;
}
blockquote {
background: url(img/quote.gif) no-repeat;
display: block;
font-weight: bold;
padding-left: 28px;
}
h1,h2,h3 {padding-top: 6px; color: #553; margin-bottom: 4px;}
/* misc */
.clearer {clear: both; font-size: 0;}
.left {float: left;}
.right {float: right;}
/* structure */
.inner-container {
border: 2px solid #D7D7D2;
background: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 10px;
width: 780px;
}
.outer-container {
background: url('img/container.jpg') no-repeat center bottom;
padding-bottom: 64px;
}
/* headere & title */
.header {
background: #222 url('img/header.jpg') no-repeat;
height: 160px;
margin-bottom: 5px;
text-align: center;
}
.header .title {
color: #FFF;
padding-top: 50px;
}
.header .title .sitename a {
border-bottom: 1px dashed #657382;
color: #FFF;
font: normal 3em sans-serif;
padding-bottom: 2px;
text-decoration: none;
}
.header .title a:hover {border-color: #F60;}
.header .title .slogan {
font: normal 1.1em Verdana,sans-serif;
padding-top: 6px;
}
/* path */
.path {
background: #949490;
color: #FFF;
font: normal 1.1em Verdana,sans-serif;
padding: 8px 12px;
}
.path a {
color: #FAFAFA;
text-decoration: none;
}
.path a:hover {
color: #FFE;
text-decoration: underline;
}
/* main */
.main {
background: url(img/main.gif) repeat-y;
border-top: 4px solid #FFF;
padding: 8px 12px 0 0;
}
/* content */
.content {
float: right;
width: 538px;
}
.content .descr {
color: #664;
font-size: 0.9em;
margin-bottom: 6px;
}
.content li {
list-style: url(img/li.gif);
margin-left: 18px;
}
.content p {font-family: "Lucida Sans Unicode",sans-serif;}
/* navigation */
.navigation {
float: left;
width: 210px;
}
.navigation h2 {
color: #5A5A43;
font: bold 1.1em Tahoma,sans-serif;
line-height: 30px;
margin: 0;
padding-left: 12px;
}
.navigation ul {
padding: 0;
border-top: 1px solid #EAEADA;
}
.navigation li {border-bottom: 1px solid #EAEADA;}
.navigation li a {
font-size: 1.1em;
color: #554;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.navigation li a:hover {
background: #F0F0EB;
color: #654;
}
/* footer */
.footer {
background: #949490;
color: #F7F7F2;
font: bold 1em sans-serif;
margin-top: 5px;
padding: 10px 12px;
}
.footer a {
color: #F7F7F2;
text-decoration: none;
}
.footer a:hover {color: #FFC;}
.footer .right, .footer .right a {color: #C8C8C3;}
.footer .right a:hover {color: #F7F7F2;}
div.imageHold {
padding: 55px 85px; /* damit der container die höhe des großen bildes annimmt */
/* andere formatierung, z.B. zentrieren/etc: */
/* .... */
}
div.imageHold div {
float: left;
width: 230px;
height: 150px;
/* ab hier kann man die abstände
und sonstiges der bilder eintragen */
margin-left: 50px;
}
div.imageHold img {
width: 230px; /* wir skalieren das große bild auf die kleine größe */
height: 150px; /* um verpixelung beim vergößern zu verhindern */
}
div.imageHold img:hover {
position: absolute;
margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
margin-top: -55px; /* hier genau so */
width: 400px; /* die weite beim vergrößern */
height: 260px; /* die höhe beim vergrößern */
}Mein HTML Code:
Code
<div class="outer-container">
<div class="inner-container">
<div class="header">
<div class="title">
<span class="sitename"><a href="index.shtml">www.pchelpnow.de</a></span>
<div class="slogan">Wenn nichts mehr geht.</div>
</div>
</div>
<div class="path">
<a href="index.shtml">Home</a> › <a href="impressum.shtml">Impressum</a>
</div>
<!-- Beginn content -->
<div class="main">
<div class="content">
<h1>Hier soll die Gallerie rein</h1>
<div class="descr">26.05.2014 by webmaster</div>
<p>Hier findet Ihr ein paar Bios/UEFI-Einstellungen um z.B. das automatische Über-/Untertakten zu unterbinden.</p>
<p>Bild 1</p>
<p>Text zu Bild 1</p
<p>Bild 2</p>
<p>Text zu Bild 2</p>
<p>usw.</p>
<div class="imageHold">
<div><img src="img/test/autostartpng.png"/></div>
<p>Text zu Bild 1</p>
<div><img src="img/test/Bootopt.png"/></div>
<p>Text zu Bild 2</p>
<div><img src="img/test/Bootopt2.png"/></div>
<p>Text zu Bild 3</p>
<div><img src="img/test/chipsetkonfig2.png"/></div>
<p>Text zu Bild 4</p>
<!--
.