Hola muy buenas a todos.
Ante todo quiero agradecer a toda la gente que me ayuda.
My problema:
Tengo un diseño PSD que estado adaptando con despacito por que nose.Tras encontrar el del sieño que mas me gusta naevegando por internet e logrado hacer esto
My problema es que estado separando el psd en varias imagenes
BG
CONTENT
LOGIN VAR
NAVI
Ahora una vez que lo e colocado en todo sus sitios correctamente me encontrado con que.
Quiero seprar para poder añadir las funciones de php
Osea me explico.
Cuando yo creo un div e inserto la imgen y la posciono, dentro de ese div quiero crear como lo podrias llamar sub divs los cules seperen ciertas partes de la imagen y no se como usarlo esa variable de css
Asi que ustedes me explican perfecto
Os dejo el css y el codigo html
Código HTML:
<!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>RevolutionMT2|FreeMMORPG</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="login_bar">
</div>
<div class="navi">
<ul>
<li class="first"><a href="#"> INICIO
<div class="nav-trenn"></div></a></li>
<li class="middle"><a href="#">REGISTRO</a></li>
<li class="middle"><a href="#">COMUNIDAD</a></li>
<li class="middle"><a href="#">RANKING</a></li>
<li class="middle"><a href="#">DOWNLOAD<div class="nav-trenn"></div></a></li>
<li class="last"><a href="#">VOTE 4 COINS</a></li>
</ul></div>
<div class="content"></div>
</body>
</html>
Código:
@charset "utf-8";
/* CSS Document */
.login_bar {
background-image: url(../img/login_bar.png);
background-repeat: no-repeat;
height: 51px;
width: 1280px;
padding: 1px;
}
.bg {
background-image: url(../img/bg.jpg);
height: 1600px;
width: 1280px;
}
.content {
position: absolute;
height: 1208px;
width: 692px;
background-image: url(../img/content.png);
background-repeat: no-repeat;
background-position: center;
left: 318px;
top: 284px;
}
.navi {
background-image: url(../img/st_navi_but_top.png);
background-repeat: no-repeat;
position: absolute;
height: 308px;
width: 1066px;
left: 129px;
top: 227px;
}
ul li.first{
height: 46px;
width: 113px;
color: #bf8364;
position: absolute;
clip: rect(auto,50px,auto,auto);
left: 196px;
top: 9px;
vertical-align: text-top;
letter-spacing: normal;
word-spacing: normal;
text-align: center;
display: none;
}
ul li.middle{
height: 39px;
width: 111px;
position: absolute;
left: 216px;
top: 19px;
}
Como podreis apreciar o tengo ni las pajolera idea.
Estoy usando dreamviwer
Saludos y gracias