PhP-webmarket: Hiperlink képekel

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hiperlink képekel css segítségével.</title>

<style>

#menu{
    width:1040px;
    height: 300px;
        margin: 0 auto;
}

#menu ul {
    list-style: none;
    padding-left: 0px;
}

#menu li {
    display: inline;

}

#button1{
    background: url(kepek/a.jpg) no-repeat left;
    width: 256px;
    height: 300px;
    display: block;
    text-align: center;
}

#button1:hover{
    text-decoration: none;
    background: url(kepek/a2.jpg);
    background-repeat:no-repeat;
}

#button2{
    background:url(kepek/b.jpg) no-repeat left;
     width: 256px;
    height: 300px;
    display: block;
    text-align: center;
}

#button2:hover{
    text-decoration: none;
    background: url(kepek/b2.jpg);
    background-repeat:no-repeat;
}

#button3{
    background: url(kepek/c.jpg) no-repeat left;
     width: 256px;
    height: 300px;
    display: block;
    text-align: center;
}
#button3:hover{
    text-decoration: none;
    background: url(kepek/c2.jpg);
    background-repeat:no-repeat;
}

#button4{
    background: url(kepek/d.jpg) no-repeat left;
    width: 256px;
    height: 300px;
    display: block;
    text-align: center;
}
#button4:hover{
    text-decoration: none;
    background: url(kepek/d2.jpg);
    background-repeat:no-repeat;
}

#menu ul
{
margin: 0px;
padding: 0px;
}

#menu ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight:normal;
    color: #ffffff;
    float: left;
    width: 256px;
        height: 300px;
    display: block;
    text-align: center;
    text-decoration: none;
    padding-top: 0px;
        margin-right: 0px;
}

#menu a:hover{

}

</style>

</head>

<body bgcolor="#000000">

<div id="menu">
        <ul>
        <img src="kepek/fej.png" width="1024" height="100" />
            <li><a href="#" title="" id="button1">Home</a></li>
            <li><a href="#" title="" id="button2">Blog</a></li>
            <li><a href="#" title="" id="button3">Gallery</a></li>
            <li><a href="#" title="" id="button4">About</a></li>
            <font color="#FFFFFF" face="28 Days Later" size="+3">webmarketshop@gmail.com</font>
        </ul>
    </div>

</div>

</body>
</html>

Oldalak

Wednesday, April 30, 2014

Hiperlink képekel

No comments:

Post a Comment