Foros del Web » Creando para Internet » CSS »

Varias dudas en mi proyecto

Estas en el tema de Varias dudas en mi proyecto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/10/2010, 11:11
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.746
Antigüedad: 15 años, 10 meses
Puntos: 3
Varias dudas en mi proyecto

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;
    }
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #2 (permalink)  
Antiguo 05/10/2010, 11:22
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Varias dudas en mi proyecto

Te aconsejo te leas un manual de xhtml/css y de optimizacion de imagenes, xq las imagenes negras estan muy pesadas y de muy mala calidad en el sitio, a pesar de q en el psd se ven bien... Solo es un consejo no lo tomes a mal

Suerte
  #3 (permalink)  
Antiguo 05/10/2010, 11:26
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.746
Antigüedad: 15 años, 10 meses
Puntos: 3
Respuesta: Varias dudas en mi proyecto

ok, las iagenes son de prueba, pero lo q de verdad necesito es adaptarlo al css, luego las imagenes nos hay problema para pasarlas
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #4 (permalink)  
Antiguo 05/10/2010, 11:31
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Varias dudas en mi proyecto

Ok! el menu no te lo are, tienes que aprender, solo te dare la estructura de como podria ser el css viendo que hiciste el menu con lista que es lo correcto, te pondre la estructura, los estilos los haces tu... si tenes dudas andare por aki todo el dia para ayudarte, hacertelo no puedo, iremos por partes a ver como avanzas

Para comenzar

Código CSS:
Ver original
  1. .interior          {}
  2. .interior ul       {}
  3. .interior ul li     {}
  4. .interior ul li a  {}

Comienza con eso, es la forma mas facil cuando estas aprendiendo
  #5 (permalink)  
Antiguo 05/10/2010, 13:55
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.746
Antigüedad: 15 años, 10 meses
Puntos: 3
Respuesta: Varias dudas en mi proyecto

ok, gracias , ya entiendo, pensaba que era

Código:
div#menu          {}
div#menu ul       {}
div#menu ul li     {}
div#menu ul li a  {}
voy a probarlo y les cuento
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #6 (permalink)  
Antiguo 05/10/2010, 14:05
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.746
Antigüedad: 15 años, 10 meses
Puntos: 3
Respuesta: Varias dudas en mi proyecto

he conseguido hacerle el hover y todo, pero no se como centrar todo el menú y como hacer para centrar cada texto dentro de su celda, ya q al meter paddings se pega todo a la derecha de la celda
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #7 (permalink)  
Antiguo 05/10/2010, 14:58
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.746
Antigüedad: 15 años, 10 meses
Puntos: 3
Respuesta: Varias dudas en mi proyecto

he realizado esto, y algo he conseguido parecido a lo que yo quiero

Código:
.menu_fondo{
    background-color: fuchsia;
    height: 30px;
    width: 990px;
    background-color: #96bcf3;
}

.menu_fondo li{
    float: left;
    list-style: none;
    font-family: Verdana;
    font-size: 12px;
    color: #FFF;
    height: 30px;
}

.menu_fondo li:hover{
    float: left;
    list-style: none;
    font-family: Verdana;
    font-size: 12px;
    color: #FFF;
    background-color: #70a4f1;
    height: 30px;
}

.menu_fondo a{
    float: left;
    list-style: none;
    font-family: Verdana;
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
    padding-top: 5px;
    padding-left: 37px;
    padding-right: 37px;
}
lo único malo, es q no se como hacer que llegue de lado a lado exactamente

queda uno o 2 píxeles sin estar dentro

pueden verlo aquí

http://manucastro.es/avi_pru/

espero me puedan ayudar
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #8 (permalink)  
Antiguo 05/10/2010, 15:25
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Varias dudas en mi proyecto

Aki te dejo la solucion:


.menu_fondo li{
float: left;
list-style: none;
font-family: Verdana;
font-size: 12px;
color: #FFF;
height: 30px;
width: 140px;
}

.menu_fondo li:hover{
float: left; //Esto no
list-style: none;
font-family: Verdana;
font-size: 12px;
color: #FFF;
background-color: #70a4f1;
height: 30px;
}

.menu_fondo a{
float: left; //Esto no
list-style: none;
font-family: Verdana;
font-size: 14px;
color: #FFF;
text-decoration: none;
padding-top: 5px;
padding-left: 37px;
padding-right: 37px;
//Esto no
line-height: 30px;
}
  #9 (permalink)  
Antiguo 05/10/2010, 15:33
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.746
Antigüedad: 15 años, 10 meses
Puntos: 3
Respuesta: Varias dudas en mi proyecto

pues esto no me hace nada, no me cambia nada de nada, ni colores ni nada
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #10 (permalink)  
Antiguo 05/10/2010, 15:40
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Varias dudas en mi proyecto

Sette, hermano, no solo copies y pegues... te puse en negrita lo que tenes que agregar y en cursiva y negrita lo que tenes que eliminar, para que veas los cambios y donde estaba tu error y como lo podias simplificar y mejorar de otra forma
  #11 (permalink)  
Antiguo 05/10/2010, 15:41
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.746
Antigüedad: 15 años, 10 meses
Puntos: 3
Respuesta: Varias dudas en mi proyecto

si, ya lo he hecho y lo veo, pero sigue sin llegar a acoplarse al 100% del ancho, siguen quedando unos pixeles sueltos al final del menu
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #12 (permalink)  
Antiguo 05/10/2010, 15:45
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Varias dudas en mi proyecto

acopla el tamano del li, tiene 140px prueba con 139px, 138px, etc... que se yo, para que se acople man... yo te lo di asi xq asi me funciono en mi navegador...

Y en el sitio sigo viendo los mismo estilos tuyos, actualiza en linea para que pueda ver que hiciste xfa
  #13 (permalink)  
Antiguo 05/10/2010, 15:47
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.746
Antigüedad: 15 años, 10 meses
Puntos: 3
Respuesta: Varias dudas en mi proyecto

ok, listo, lo he acoplado todo lo que he podido con 141px, si le pongo uno mas, se separa en 2 líneas, pero sigue quedando un par de pixeles
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #14 (permalink)  
Antiguo 05/10/2010, 15:54
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Varias dudas en mi proyecto

Intenta antes de cerrar el div menu_fondo pone un clear both: asi

Código HTML:
Ver original
  1. <div class="menu_fondo">
  2.    <div style="clear: both;"></div>
  3. </div>

Lo que pasa que le quitaste los tamaños al ul o al div... pero algo le quitaste por que no estaba asi cuando yo lo modifique... intenta y si no te dare la solucion correcta a eso, xq asi como lo has hecho no es la correcta, pero si funciona... lo correcto es no usar float left para que los li se alineen, sino que display inline... pero eso es otro cuento
  #15 (permalink)  
Antiguo 05/10/2010, 16:05
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.746
Antigüedad: 15 años, 10 meses
Puntos: 3
Respuesta: Varias dudas en mi proyecto

mira, he adaptado esto, y me sigue quedando lo mismo, el espacio al final puedes verlo en la url

Código:
<div="menu">
    <div class="interior">
    <div style="clear: both;"></div>
        <ul id="navi">
            <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 -->
Código:
#navi li{
    float: left;
    list-style: none;
}

#navi li a {
    display:block;
    width:131px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: Verdana;
    font-size: 10px;
    text-decoration:none;
    text-align:center;
    font-size:11px;
    color:#FFFFFF;
    background-color:#96bcf3;
    border-left:10px solid #fff;  //Agrego un borde ancho a la izquierda
}

#navi li a:hover {
    color:#050773;
    background-color:#fff;
    border-left-color:#000; //Luego le cambio el color al borde en el evento hover.
}
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #16 (permalink)  
Antiguo 05/10/2010, 16:54
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Varias dudas en mi proyecto

Ok! ya casi me voy, descargue tu css y html y lo deje lo mas parecido posible, tu agregale lo que le haga falta, te lo doy de la forma correcta... lo unico que ese pixel no cuadra desgraciadamente, si el sitio lo estas haciendo en php, valida que cuando sea el ultimo elemento a, le agregue un padding-right: 1px mas lo que ya tenga... bueno ahi te lo dejo, espero te aya sido de ayuda.

Código CSS:
Ver original
  1. .menu { width: 990px; min-height: 10px; _height: 10px; background: #96BCF3; }
  2.  
  3. #navi { margin: 0px auto; }
  4. #navi li { list-style: none; }
  5.  
  6. #navi li a { display: block; float: left; height: 30px; line-height: 30px; text-decoration: none; color: #fff; font-size: 12px; padding: 0px 44px; background: #96BCF3; }
  7. #navi li a:hover { background: #fff; color: #000; }

Código HTML:
Ver original
  1. <div class="menu">
  2.     <ul id="navi">
  3.         <li><a href="#">El Club</a></li>
  4.         <li><a href="#">Atletismo</a></li>
  5.         <li><a href="#">Balonmano</a></li>
  6.         <li><a href="#">Baloncesto</a></li>
  7.         <li><a href="#">Piraguismo</a></li>
  8.         <li><a href="#">Histórico</a></li>
  9.         <li><a href="#">Contacto</a></li>
  10.     </ul>
  11.     <div style="clear:both;"></div>
  12. </div>

solo copia y pega, te tiene que funcionar, tambien que tenias un div masl cerrado, lo tenias asi </div=""> o algo parecido... ahora si me voy, si no pudiste seguimos mañana ok
  #17 (permalink)  
Antiguo 06/10/2010, 03:20
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.746
Antigüedad: 15 años, 10 meses
Puntos: 3
Respuesta: Varias dudas en mi proyecto

es decir, que no podré hacer el menú al 100% de ancho de la web verdad?
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #18 (permalink)  
Antiguo 06/10/2010, 12:42
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Varias dudas en mi proyecto

Cita:
Iniciado por Sette Ver Mensaje
es decir, que no podré hacer el menú al 100% de ancho de la web verdad?
si no estas trabajando con php... al ultimo li agregale un id o class... y le pones 1px mas de padding a la derecha y asunto arreglado :)
  #19 (permalink)  
Antiguo 09/10/2010, 15:19
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Varias dudas en mi proyecto

Hola:

No entiendo porqué pones el border-left en tu #nav li a, suprímelo y añade 10px al width; además defines dos font-size distínto (10px y 11px), como el segundo sobreescribe al primero, suprime el primero.

Debería quedarte algo como esto:

Código CSS:
Ver original
  1. #navi li a {
  2.     display:block;
  3.     width:110px;
  4.     padding-top: 10px;
  5.     padding-bottom: 10px;
  6.     font-family: Verdana;
  7.     text-decoration:none;
  8.     text-align:center;
  9.     font-size:11px;
  10.     color:#FFFFFF;
  11.     background-color:#96bcf3;
  12. }

Saludos.


Etiquetas: proyectos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:34.