Foros del Web - Ver Mensaje Individual

Sette · #1 (**permalink**) 05/10/2010, 10:11

Estoy pasando por primera vez un diseño que he creado en psd a XHtml y Css

de momento, he conseguido sacar esto, como sigo con el menú?, les dejo la imagen de el diseño y lo que tengo creado hasta el momento

este es el diseño original

y lo q tengo hasta el momento es

http://manucastro.es/avi_pru/

les dejo pegado el código

index.html

Código:

<!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" />
<link href="css/estilo.css" rel="stylesheet" type="text/css" media="screen">
<title>Untitled Document</title>
</head>
<body>
<div id="contenedor">
<div id="encabezado">
    <div class="interior">
        <div id="logo">
            <img src="imagenes/logo.png">
        </div>
        <div id="merchandising">
            <img src="imagenes/merchandising.png">
        </div>
    </div><!-- fin de div interior -->
</div><!-- fin de div encabezado -->

<div="menu">
    <div class="interior">
        <ul>
            <li><a href="#">El Club</a></li>
            <li><a href="#">Atletismo</a></li>
            <li><a href="#">Balonmano</a></li>
            <li><a href="#">Baloncesto</a></li>
            <li><a href="#">Piraguismo</a></li>
            <li><a href="#">Histórico</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </div>
</div><!-- fin div menu -->

<div="publicidad_principal">
    <div class="interior">
        <img src="imagenes/publi_principal.jpg"
    </div>    
</div><!-- fin div publicidad_principal -->

<div="contenido">
    <div class="interior">
        <div id="act_fecha"></div>
        <div id="col1"></div>
        <div id="separador12"></div>
    </div>
    
</div><!-- fin div contenido -->

<div="footer">
    <div class="interior">
        Creado por manucastro.es
    </div>
</div><!-- fin div menu -->
</div><!-- find div contenedor -->
</body>
</html>

y esta la hoja de estilos

Código:

/*RESET CSS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/*FIN DE RESET CSS*/



    
/*ESTILOS GENERALES*/

body{
    background-image: url(../imagenes/back_web.gif)
}

#contenedor {
    width: 990px;
    margin: 0px auto;
    text-align: left;
}

div#encabezado{
    background-image:url(../imagenes/encabezado_bg.jpg);
    background-repeat: repeat-x;
    height: 147px;
    width: 990px;
}
    
    
    
div#publicidad_principal{

}
    
div#contenido{
}
    
div#footer{
}
    
div.interior{
    width:990px;
    margin:0 auto;
}

/*ENCABEZADO*/

div#logo{
    float: left;
    padding-left: 60px;
    padding-top: 23px;
}


div#merchandising{
    float: right;
    padding-right: 60px;
    padding-top: 18px;
}

/*FIN DE ENCABEZADO*/



/*MENU*/

div#menu{
    list-style-type: square;
    }