Foros del Web » Creando para Internet » CSS »

Revision de hoja de estilos

Estas en el tema de Revision de hoja de estilos en el foro de CSS en Foros del Web. Hola compañeros! Resulta que estoy desarrollando una web con su hoja de estilos. He creado un menú deplegable horizontal en css y logrado que se ...
  #1 (permalink)  
Antiguo 12/06/2009, 06:34
 
Fecha de Ingreso: julio-2008
Mensajes: 12
Antigüedad: 9 años, 4 meses
Puntos: 0
Revision de hoja de estilos

Hola compañeros! Resulta que estoy desarrollando una web con su hoja de estilos. He creado un menú deplegable horizontal en css y logrado que se vea bien en los navegadores principales, lo que el 'cuerpo' donde iran los contenidos se ve un poco distinto entre ellos.
Solo me gustaria que si alguien fuera amable y se lo currase, le echara un ojo a mi codigo para que me pueda decir en que sitios cometo errores para poder hacer correcciones... se que existen validadores, pero que mejor que un programador/diseñador en persona para resolver problemas, no¿?

weno, aqui esta el codigo css:
Código:
a {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	color:#000000;
	font-size:13px;
	padding-top:10em;
	
}
a:hover {
	text-decoration:underline;
}
h1{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#333333;
	font-size:24px;
}
h2{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#333333;
	font-size:18px;
	text-decoration:underline;
}
h3 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.1em;
	color:#000000;
	float:left;
	text-align:center;
}
h4{
	border-width:thin;
	border-style:dotted;
	background-color:#FFFF66;
	font-size:14px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	margin-top:10px;
	}
p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.9em;
	color:#FFF;
	float:left;
}
.negrita { font-weight:bold; }


body {
	background-color:#FFF;
}
#contenedor {

	font-family:Arial, Helvetica, sans-serif;
	background-image:url(img/web_DOA_background.jpg);
	width: 800px;
	height:600px;
}



#cabecera {
	width:100%;
	height:6.85em;
	margin-bottom:1.3em;	
}
html>body #cabecera_Logo {
	width:8.9em;
	height:6.85em;
	float:left;
	background-image:url(img/WebDOA_logo.png);
}
#cabecera_Logo {
	width:8.9em;
	height:6.85em;
	background-image:url(img/WebDOA_logo.png);
	float:left;
	margin-top:0.7em;
	margin-left:0.5em;

}


html>body #cabecera_Titol {
	width:25.6em;
	height:6.85em;
	background-image:url(img/WebDOA_titol.png);
	float:left;
}
#cabecera_Titol {
	width:25.6em;
	height:6.85em;
	background:url(img/WebDOA_titol.png);
	float:left;
}

/*---------------------------------------------*/
#menu_Principal{
	width:77%;
	float:left;
	height:4.50em;

}
#menu {  
font-size: 0.7em;
width: 100%;
position: relative;
float:left;
}
#menu ul { list-style-type: none;}

#menu ul li.nivel1 { 
float: left;
width: 20%;
}
#menu ul li { float: left;}

#menu ul li a {display: block;
text-decoration: none;
color:#000;
background-color: #a20000;
border-top: solid 1px #a20000;
border-bottom: solid 1px #a20000;
padding: 0px;
position: relative;
height:36px;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color:#000;
color: #a20000;
position: relative;

}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;width: 458px;border: solid 1px #a20000;border-top: none;background-color: #a20000; left:6em;
}
#menu ul li ul li a {width: 100%;
border: none;
background-color: #a20000;
padding:0px 2px 0px 2px;
left:1.5em;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: 40px;}
ul.dos {left: 40px;}
ul.cuatro {left: 40px;}

/*----------------------------------------*/


#contenido {
	width:44em;
	background-color:#FFFFFF;
	filter: alpha(opacity=70); 
	opacity: .7;
	height:22em;
	position:relative;
	top:6em;

}
#contenido .text{
	width:65%;
	height:100%;
	background-color:#F00;
	float:left;
	position:relative;
	top:-72px;
	filter: alpha(opacity=70); 

}
#contenido .foto{
	width:35%;
	height:100%;
	background-color:#333;
	float:left;
	position:relative;
	top:-72px;
	filter: alpha(opacity=70); 
}
/*---------------------------------------------------*/

#credits{
	width:50em;
	height:1.25em;
	position:relative;
	top:5em;
}
#credits .credits2 {
	border-right:double;
	border-right-color:#333333;
	padding-right:0.5em;
}
#credits .mapaweb {
	border-right:double;
	border-right-color:#333333;
	padding:0em 0.5em 0em 0.5em;
}
el html os dejo el link aqui para que no ocupe tanto el mensaje: "http : //citmprojectes.upc.es:8080/ jaumemc / Web_DO_Alella /index_MF2.html"
(dejo espacios para que pase el link.

PD: hay una funcion javascript que sirve para cargar imagenes para los botones, es solo un comportamiento, que solo he copiado en el primer apartado del menu para que no ocupara tanto el codigo.
PD2: no entiendo porque los links del apartado '#credits' son seleccionables desde 'tan arriba' en firefox, como si tuvieran mucho padding...

gracias por vuestra ayuda y a seguir desarrollando!
  #2 (permalink)  
Antiguo 12/06/2009, 06:43
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Revision de hoja de estilos

Si usas menú con imágenes prueba los Sprites, además de que he visto la clase negrita, de una sola línea, no se saldría ams a cuenta ponerle al texto el <blold>?
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 12/06/2009, 06:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Revision de hoja de estilos

Cita:
se que existen validadores, pero que mejor que un programador/diseñador en persona para resolver problemas, no¿?
Pues eso, si tienes un problema exponlo.
Pero pretender que te hagan una depuración de todo el código porque no te da la gana de pasar un par de validaciones y currártelo tú mismo me parece una desfachatez y atrevimiento que raya lo permisible.

Un saludo.
P.D.1: Aquí tienes el resultado de validar tu html. Te lo miras y arreglas tú, y si algún error no puedes solucionar tú, entonces sí será el momento de solicitar ayuda.
Hasta entonces.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 13/06/2009, 08:56
 
Fecha de Ingreso: julio-2008
Mensajes: 12
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Revision de hoja de estilos

Hola de nuevo! Siento haber sido tan osado, es que soy bastante novatillo...
por ahora solo tengo una duda y es por que en firefox los links de abajo del todo de la pagina son seleccionables con tanto espacio superior; o sea, que paso el mouse muy por encima del hipervinculo 'credits' por ejemplo, y ya es seleccionable.... esto en IE no ocurre pero quiero solventarlo....

gracias de nuevo!
  #5 (permalink)  
Antiguo 13/06/2009, 09:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Revision de hoja de estilos

Hola Hattori21
Ves como así ya está mejor.
Mira tu código:
Cita:
a {/*estilos_...A_MF2.css (línea 1)*/
color:#000000;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
font-weight:bold;
padding-top:10em;
text-decoration:none;
Reduce ese valor
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 13/06/2009, 11:25
 
Fecha de Ingreso: julio-2008
Mensajes: 12
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Revision de hoja de estilos

Gracias!! si esque desde luego, los errores mas 'tontos' son los más complicados de divisar xDDD

asta luego!
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 11:30.