Først vil jeg sige at jeg er helt ny i css programmering. Men jeg har brugfor hjælp til onmouseover funktionen. Jeg har lavet følgende css fil.
Kode: Vælg alt
#wrapper {
width: 715px;
height: 1500px;
border:0px solid ;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
position: absolute;
left: 50%;
margin-left: -500px;
}
.Video{
width:179px;
height: 179px;
border:1px solid #CCCCCC ;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
position: absolute;
margin-top:5px;
margin-left:510px;
}
.header1 {
width: 700px;
height: 190px;
border:1px solid #CCCCCC;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
position: absolute;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
}
ul {
list-style-type: none;
width: 600px;
font-family: verdana;
font-size: 12px;
font-weight: normal;
}
.li2 {
list-style-type: none;
width: 600px;
font-family: verdana;
font-size: 12px;
line-height: 150%;
font-weight: normal;
}
.li3 {
list-style-type: none;
width: 600px;
font-family: verdana;
font-size: 12px;
line-height: 150%;
font-weight: normal;
}
.indhold1 {
width: 226px;
height: 400px;
border:1px solid #CCCCCC;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
position: absolute;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
left: 0px;
top: 200px;
}
.indhold2 {
width: 226px;
height: 400px;
border:1px solid #CCCCCC;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
position: absolute;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
left: 236px;
top: 200px;
}
.indhold3 {
width: 226px;
height: 400px;
border:1px solid #CCCCCC;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
position: absolute;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
left: 472px;
top: 200px;
}
.Header2 {
width: 700px;
height: 240px;
border:1px solid #CCCCCC;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
position: absolute;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
left:0px;
top: 611px;
}
.indhold4 {
width: 226px;
height: 400px;
border:1px solid #CCCCCC;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
position: absolute;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
left: 0px;
top: 865px;
font-size: 14px;
}
.indhold5 {
width: 226px;
height: 400px;
border:1px solid #CCCCCC;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
position: absolute;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
left: 236px;
top: 865px;
}
.indhold6 {
width: 226px;
height: 400px;
border:1px solid #CCCCCC;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
position: absolute;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
left: 472px;
top: 865px;
}
.Header3 {
width: 700px;
height: 240px;
border:1px solid #CCCCCC;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
position: absolute;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
left:0px;
top: 1275px;
}
.P {
margin-top: 220px;
margin-left: 10px;
margin-right: 10px;
font-family: "verdana";
font-size: 12px;
line-height: 15px;
}
.h2{
font-size: 18px;
margin-left: 10px;
font-family: Verdana;
color: #20a220;
}
.bestil {
width: 100px;
height: 30px;
font-size: 22px;
color: #FF0000;
font-weight: bold;
padding-left: 5px;
padding-top: 5px;
background-color: #FF0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
position: absolute;
top: 355px;
left: 63px;
box-shadow:4px 5px 2px rgba(0, 0, 0, 0.2);
}
.pakker {
width:210px;
height: 30px;
font-size: 22px;
color: #FFF;
Padding-left:5px;
padding-top:5px;
background-color: #20a220;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
position: absolute;
top: 10px;
left: 6px;
}
.billed {
width: 210px;
height: 150px;
background-image: url(c:/HTML/guardsman.jpg);
background-repeat: no-repeat;
background-position: center center;
border:1px solid #20a220;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
top: 60px;
left:6px;
position: absolute;
}
.billed2 {
width: 210px;
height: 150px;
background-image: url(c:/HTML/1241.jpg);
background-repeat: no-repeat;
background-position: center center;
border:1px solid #20a220;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
top: 60px;
left:6px;
position: absolute;}
.billed3 {
width: 210px;
height: 150px;
background-image: url(c:/HTML/CTC1916.jpg);
background-repeat: no-repeat;
background-position: center center;
border:1px solid #20a220;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
top: 60px;
left:6px;
position: absolute;
}
.billed4 {
width: 210px;
height: 150px;
background-image: url(c:/HTML/PK-1132s.jpg);
background-repeat: no-repeat;
background-position: center center;
border:1px solid #20a220;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
top: 60px;
left:6px;
position: absolute;
}
.billed5 {
width: 210px;
height: 150px;
background-image: url(c:/HTML/918.jpg);
background-repeat: no-repeat;
background-position: center center;
border:1px solid #20a220;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
top: 60px;
left:6px;
position: absolute;
}
.billed6 {
width: 210px;
height: 150px;
background-image: url(c:/HTML/foto.jpg);
background-repeat: no-repeat;
background-position: center center;
border:1px solid #20a220;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
top: 60px;
left:6px;
position: absolute;
}
.pris{
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
width: 140px;
font-family: "verdana";
font-size: 18px;
font-weight: bold;
position: absolute;
top:300px;
}
a:link {
color: #FF0000;
font-size: 22px;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #FF0000;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
a:active {
color: #FFF;
}
Kode: Vælg alt
<div id="wrapper">
<div class="header1">
<div class="video"> <video width="180" height="180" controls="controls" autoplay="autoplay">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="180" height="180">
<embed width="180" height="180" src="movie.swf" />
</object>
</video></div>
<p class="h2">Tyverialarmer til private boliger</p>
<ul>
<li class="ul">Private Alarmer forhandler flere forskellige former for moderne trådløse<br> og effektive tyverialarmer, som kan overvåge boligen døgnet rundt.</li>
<li class="li2">Stort udvalg i tilbehør til alarmsystemerne. </li>
<li class="li3">Du kan få alarm med eller uden abonnement. </li>
</ul>
</div>
<div class="indhold1">
<div class="billed"></div>
<div class="pakker">Guardsman 1132 GSM</div>
<div class="p"> Flot og funktionel alarmsystem i hvidt design.<br><br>Alarmsystem klar til montering.<br><br></div>
<div class="pris"> 5.295,00 kr.</div>
<div class="bestil">Læs mere</div>
</div>
<div class="indhold2">
<div class="pakker"> Guardsman 1241 GSM</div>
<div class="billed2"></div>
<div class="p"> Alarmsystem klar til montering.<br></div>
<div class="pris"> 6.895,00 kr.</div>
<div class="bestil">Læs mere</div>
</div>
<div class="indhold3">
<div class="pakker">Guardsman fotoalarm</div>
<div class="billed3"></div>
<div class="p"> Alarmsystem klar til montering.<br></div>
<div class="pris"> 3.695,00 kr.</div>
<div class="bestil">Læs mere</div>
</div>
<div class="Header2">
<p class="h2"> Sammemsæt selv din Guardsman tyverialarm</p>
<ul>
<li class="ul">Du kan her vælge selv at sammensættte dit Guardsman alarmsystem, sådan at det dækker dine krav til sikring af boligen.</li>
<li class="li2">Du kan vælge følgende Guardsman modeller:<br>Guardsman CTC <a href="http://www.privatealarmer.dk/index.php/basis-alarmpakke-houseguard-tradlos-gsm-model-1132.html" target="_blank"> 1132</a> GSM<br>Guardsman CTC 1142 CTC GSM<br>Guardsman 1241 CTC GSM<br>Guardsman CTC 1916 GSM Fotoalarm</li>
<li class="li3">Du vælger ved at klikke på ovenstående modeller og tilbehør til alarmpanelerne vælger du under det enkelte alarmpanel "under relaterede produkter".</li>
</ul>
</div>
<div class="indhold4">
<div class="pakker"> HouseGuard Basis</div>
<div class="billed4"></div>
<div class="p"> Alarmsystem klar til montering.<br></div>
<div class="pris"> 3.695,00 kr.</div>
<div class="bestil">Læs mere</div>
</div>
<div class="indhold5">
<div class="pakker">HouseGuard Plus</div>
<div class="billed5"></div>
<div class="p"> Alarmsystem klar til montering.<br></div>
<div class="pris"> 3.695,00 kr.</div>
<div class="bestil">Læs mere</div>
</div>
<div class="indhold6">
<div class="pakker">HouseGuard Fotoalarm</div>
<div class="billed6"></div>
<div class="p"> Alarmsystem klar til montering.<br></div>
<div class="pris"> 3.695,00 kr.</div>
<div class="a, bestil"> <a href="http://www.privatealarmer.dk/index.php/fotoalarm-houseguard-pro-gsm-tradlos-tyverialarm.html">Læs mere</a></div>
</div>
<div class="Header3">
<p class="h2">Sammemsæt selv din HouseGuard tyverialarm</p>
<ul>
<li class="ul">Du kan her vælge selv at sammensættte dit HouseGuard alarmsystem, sådan at det dækker dine krav til sikring af boligen.</li>
<li class="li2">Du kan vælge følgende Guardsman modeller:<br>HouseGuard<a href="http://www.privatealarmer.dk/index.php/basis-alarmpakke-houseguard-tradlos-gsm-model-1132.html" target="_blank"> Basis</a> GSM<br>HouseGuard Plus GSM<br>HouseGuard Pro GSM Fotoalarm</li>
<li class="li3">Du vælger ved at klikke på ovenstående modeller og tilbehør til alarmpanelerne vælger du under det enkelte alarmpanel "under relaterede produkter".</li>
</ul>
</div>
</div>
</body>
Jeg vil gerne at når man holder musen over et af billederne kommer der "den velkendte tekst gule boks", dels skal den kunne læses af kunderne og ikke mindst søge robotterne. Jeg kunne selvfølgelig skrive under hvert billede hvad det det viser, men for at minimere pladsen ser jeg flere fordele i "onmouseover" funktionen.
Jeg beklager hvis der er formeget kode med, men det er for bedre at kunne forklare hvad jeg mener.
Med venlig hilsen
Søren