Foros del Web » Creando para Internet » CSS »

Mi primer CSS, no sé si está bien, ¿lo pueden criticar porfavor?

Estas en el tema de Mi primer CSS, no sé si está bien, ¿lo pueden criticar porfavor? en el foro de CSS en Foros del Web. Mi primer portal con CSS está en proceso ( www.demonpage.com.mx) , pero claro, no sé si esté bien hecho, por lo que pido su Crítica ...
  #1 (permalink)  
Antiguo 06/11/2006, 16:17
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 17 años, 10 meses
Puntos: 1
Mi primer CSS, no sé si está bien, ¿lo pueden criticar porfavor?

Mi primer portal con CSS está en proceso (www.demonpage.com.mx), pero claro, no sé si esté bien hecho, por lo que pido su Crítica Constructiva; sobre todo en cuanto a:

1.Margin, Padding, etc.
2.No sé si en otras "pantallas y resoluciones" se vea bien; ya ni hablar de otros navegadores.
3.Ese rollo de las capas no me ha quedado claro.

Solo los enlaces de "Diseño" y "Fotografía" están finalizados, los demás están en proceso.

Les dejo la hoja de estilos:

Código:
BODY {
background-color: #300;
background-image: url(20s.jpg);
background-position: center;
background-repeat: no-repeat;
font: normal bold 11px/10pt Arial, Tahoma;
color: #c60;
}
img {
border: 0
}
SPAN {
font: normal bold 11px Verdana;
color: #c90;
}
#info {
background: transparent;
width: 200pt;
height: 200pt;
text-align: justify;
font: normal normal 11px Verdana;
color: #c90;
margin: 85pt,0pt,0pt,0pt;
padding: 50pt,0pt,74pt,0pt;
float: left;
}
#diseno {
background: transparent;
width: 200pt;
height: 200pt;
margin: 20pt,0pt,0pt,80pt;
padding: 0pt,45pt,11pt,0pt;
float: left;
}
#diseno1 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 105pt,66pt,0pt,150pt;
float: left;
}
#diseno2 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 100pt,0pt,0pt,119pt;
float: left;
}
#diseno3 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 20pt,9pt,0pt,80pt;
padding: 0pt,0pt,7pt,0pt;
float: left;
}
#diseno4 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 30pt,27pt,0pt,74pt;
padding: 0pt,0pt,0pt,0pt;
float: left;
}
#diseno5 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 105pt,46pt,0pt,120pt;
float: left;
}
#diseno6 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 105pt,66pt,0pt,150pt;
float: left;
}
#diseno7 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 20pt,26pt,0pt,60pt;
padding: 0pt,0pt,5pt,0pt;
float: left;
}
#diseno8 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 13pt,24pt,0pt,55pt;
padding: 0pt,0pt,0pt,0pt;
float: left;
}
#foto {
background: transparent;
width: 200pt;
height: 200pt;
margin: 85pt,30pt,0pt,100pt;
float: left;
}
#foto1 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 15pt,0pt,0pt,75pt;
float: left;
}
#foto2 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 90pt,7pt,0pt,120pt;
float: left;
}
#foto3 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 90pt,5pt,0pt,100pt;
padding: 0pt,25pt,0pt,0pt;
float: left;
}
#foto4 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 15pt,19pt,0pt,75pt;
float: left;
}
#foto5 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 15pt,24pt,0pt,50pt;
float: left;
}
#foto6 {
background: transparent;
width: 200pt;
height: 200pt;
margin: 0pt,121pt,0pt,75pt;
float: left;
}
#fotoinfo {
background: transparent;
width: 130pt;
height: 200pt;
text-align: justify;
font: normal normal 11px Verdana;
color: #c90;
margin: 85pt,0pt,0pt,10pt;
padding: 50pt,0pt,44pt,0pt;
float: left;
}
#menu {
background: transparent;
width: 100pt;
height: 100pt;
float: right;
font: normal bolder 25px/20pt Agency FB, Arial, Tahoma;
margin: 130pt,0pt,0pt,50pt;
}
A, A.ligamenu:LINK, A.ligamenu:VISITED {
text-decoration: none; color: #cccc99;
}
A.ligamenu:ACTIVE, A.ligamenu:FOCUS, A.ligamenu:HOVER {
text-decoration: none; color: #c60; 
}
#next {
background: transparent;
width: 50;
height: 50;
font: normal bold 11px/10pt Arial, Tahoma;
margin: 0pt,0pt,0pt,100pt;
padding-left: 50pt;
}
#sec {
background: transparent;
width: 400pt;
height: 50pt;
margin: 40pt,0pt,0pt,0pt;
text-align: center;
}
A, A.secmenu:LINK, A.secmenu:ACTIVE, A.secmenu:VISITED, A.secmenu:FOCUS, A.secmenu:HOVER {
text-decoration: none;
text-align: center;
}
Gracias amigos.
  #2 (permalink)  
Antiguo 06/11/2006, 16:42
Avatar de erick_arcini  
Fecha de Ingreso: julio-2005
Ubicación: Jaltenco / DF
Mensajes: 1.723
Antigüedad: 18 años, 8 meses
Puntos: 50
Esta buena, pero yo pondria los links en un lugar mas visible para la gente ya que tienes que deslizar el scroll para poder verlos y gente como yo se desesperan
__________________
Mejoremos nuestro país, ayudemos al planeta... próximamente.
  #3 (permalink)  
Antiguo 06/11/2006, 17:44
Avatar de marce_str  
Fecha de Ingreso: septiembre-2006
Ubicación: La Plata, Argentina
Mensajes: 203
Antigüedad: 17 años, 6 meses
Puntos: 1
mmm... es dificil decirte algo en concreto porque la pagina no esta completa, estaria bueno al menos ver una imagen de como tiene que quedar tu pagina.

Por lo que veo seguis usando tablas, si usas css y quieres aprender más trata de no usarlas, es decir, trata de maquetar todo con css, hay muchos tutoriales en la red de como hacer pagina a 3 columnas por ejemplo.

Ojo con los identificadores, usaste todos "#" el uso de identificadores es para cuando aparece un solo elemento en la pagina, por ejemplo #contenedor.
Cuando se repiten, se usan clases, su sintaxis es con un punto (.) por ejemplo... si tenes alguna especie de caja que tenes que mostrarla varias veces .caja_de_texto
también podés aplicarselos a algunos elementos html como a ul li h1 h2 h3 p
entonces podes hacer variables de esos elementos

Ej:

Código:
p {
margin:0px;
color: #000;
}

p.otro {
color: #666}
No es necesario poner comas entre los valores de margin o paddin o cualquier elemento donde agrupes las propiedades, con poner ";" basta.
Quizas es una cuestion de costumbre y de modo de trabajo, pero yo acostumbro a usar px en esas medidas, y para texto lo recomendable es usar em, pero es un poco complicado a veces, asi que segui usando px para texto

Y bueno... para interiorizarte mas trata de buscar informacion sobre marcado semantico, uso de etiquetas html (h1, h2, h3, p, strong, em) maquetacion con css como ya te dije, accesibilidad (al menos tener nociones de conceptos aunque no siempre los apliques).

Mucha suerte!
Saludos!
  #4 (permalink)  
Antiguo 06/11/2006, 18:49
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 17 años, 10 meses
Puntos: 1
Gracias por sus comentarios; de hecho (por este tipo de comentarios), les pedí su punto de vista.
Mi intención fue que no apareciese barra de scroll por ningún motivo y erick arcini me comenta que la tiene que usar (a ver cómo le hago para que no aparezca); marce str me dice que ya no utilice tablas, ok, las voy a eliminar.
Amigos, necesito más comentarios por favor: expertos, moderadores, colaboradores, todos. Gracias.......
  #5 (permalink)  
Antiguo 06/11/2006, 20:10
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 19 años, 9 meses
Puntos: 0
Cita:
BODY {
background-color: #300;
background-image: url(20s.jpg);
background-position: center;
background-repeat: no-repeat;
font: normal bold 11px/10pt Arial, Tahoma;
color: #c60;
}
Trata de usar minusculas en tus elementos de html y tus selectores css además de usar propiedades abreviadas así como haces con font por ejemplo:

Cita:
body {
background: #300 url(20s.jpg) center no-repeat;
font: normal bold 11px/10pt Arial, Tahoma;
color: #c60;
No uses puntos para tus medidas usa pixeles, usa puntos cuando hagas un hoja de estilo (CSS) para impresión por eso word usa puntos para el tamañao del texto (porque generalmente imprimes ese tipo de archivos).

cuando uses id y class trata de nombrarlas de acuerdo a su función en tu documento no a su presentación.

bueno son las recomendaciones que se me ocurren aparte de las que ya te dieron.

Saludos
__________________
Mi blog
  #6 (permalink)  
Antiguo 06/11/2006, 23:00
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 17 años, 10 meses
Puntos: 1
Gracias marce str, no me queda claro esto....

Cita:
Iniciado por marce_str Ver Mensaje
Ojo con los identificadores, usaste todos "#" el uso de identificadores es para cuando aparece un solo elemento en la pagina, por ejemplo #contenedor.
Cuando se repiten, se usan clases, su sintaxis es con un punto (.) por ejemplo... si tenes alguna especie de caja que tenes que mostrarla varias veces .caja_de_texto
...porque los elementos en que se usan los identificadores, son todos diferentes y utilizan margin's y padding's distintos, por lo que es necesario identificadores distintos.
¿Aún así debo colocarlos en el mismo identificador?

Gracias por ayudarme.
  #7 (permalink)  
Antiguo 06/11/2006, 23:27
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 18 años, 5 meses
Puntos: 4
una observacion.. yo lo veo todo descuadrado en firefox yopera.

el unico en el que se ve bien es en IE, una recomendacion ..

no porgrames testeando con IE

y agrega ls DTD el pobre navegador por eso no sabe ni que hacer..


Cita:
<table>
<div id="info">
<p>La mejor inversi&oacuten para su empresa es publicitar su imagen a aquellos Clientes que deben ser Cautivos.</p>
<p>Demon Page le facilita esta labor, por medio de tres conceptos que son nuestra columna vertebral:
<span>Excelencia, Creatividad y Puntualidad.</span></p></div>
<div id="menu">
<p><a href="diseno.html" class="ligamenu">DISE&NtildeO</a></p>
<p><a href="inter.html" class="ligamenu">INTERNET</a></p>
<p><a href="foto.html" class="ligamenu">FOTOGRAFIA</a></p></div>
</table>
ahy no ahy semantica, se esperaira un TABLE >TD pero donde esta ????


Cita:
<div id="menu">
<p><a href="diseno.html" class="ligamenu">DISE&NtildeO</a></p>
<p><a href="inter.html" class="ligamenu">INTERNET</a></p>
<p><a href="foto.html" class="ligamenu">FOTOGRAFIA</a></p></div>
usa listas sirve mucho mejor..
Cita:
<ul id="menu">
<li><a href="diseno.html">DISE&NtildeO</a></li>
<li><a href="inter.html">INTERNET</a></li>
<li><a href="foto.html">FOTOGRAFIA</a></li>
</ul>
__________________
Saludos
FT.
www.fernando.com.mx

Última edición por fer10; 06/11/2006 a las 23:33
  #8 (permalink)  
Antiguo 07/11/2006, 00:11
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 17 años, 10 meses
Puntos: 1
Gracias fer10.
¿qué es ls DTD?
Cita:
Iniciado por fer10 Ver Mensaje
una observacion.. yo lo veo todo descuadrado en firefox yopera.

el unico en el que se ve bien es en IE, una recomendacion ..

no porgrames testeando con IE

y agrega ls DTD el pobre navegador por eso no sabe ni que hacer..
Esto lo pregunto porque, claro que me intersa muchísimo que todos los navegadores representen bien mi diseño.

Y tambien llego a una disyuntiva: marce str me dice que ya no use tablas y fer10 espera que las use y me comenta que faltan las td
¿Qué hago?

Por cierto, ¿algo al respecto de las capas? ese tema todavía no me queda claro....
Gracias amigos, en verdad, gracias......
  #9 (permalink)  
Antiguo 07/11/2006, 00:23
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 18 años, 5 meses
Puntos: 4
hola yo no espero a que las uses, para marquetar un sitio no se usan , pero abriste una etiqueta table y no les hiciste nada.. y eso no es correecto depues de una etiqueta table ahy td.. y metiste div asi a la "braba"

los dtd.. son...:
http://www.forosdelweb.com/f91/info-sobre-doctype-440763/
__________________
Saludos
FT.
www.fernando.com.mx
  #10 (permalink)  
Antiguo 07/11/2006, 01:11
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 19 años, 9 meses
Puntos: 0
con que respecta a capas:

Primero le este artículo. Es bastante sencillo pero a veces no comprenderlo es lo que provoca los grandes problemas.

El modelo de Cajas

e inmediatamente dsepués practica con este otro

diseñar una página con código semántico

creeme te ayudara bastanta para entender como trabajan las capas con css.

Saludos
__________________
Mi blog
  #11 (permalink)  
Antiguo 07/11/2006, 06:44
Avatar de marce_str  
Fecha de Ingreso: septiembre-2006
Ubicación: La Plata, Argentina
Mensajes: 203
Antigüedad: 17 años, 6 meses
Puntos: 1
Hola Emiliano!
con respecto a eso de los identificadores, está bien que si son todos distintos hagas que todos sean ID... pasa que llamó la atención que varios tenian el nombre parecido.
Lo que te recomiendo es que reveas ese tema, si es que todos tienen que tener margin y padding diferentes, fijate si podes estandarizar un poco tu diseño.

Sobre este tema hay información en este blog, seguro aca te lo explica mejor que yo :p
Contenido y Presentación, Clases e Identificadores
CSS, Clases e Identificadores

Lo que dice opeth sobre:
Cita:
cuando uses id y class trata de nombrarlas de acuerdo a su función en tu documento no a su presentación.
aca tenes la info sobre ese tema para que lo entiendas http://www.webstudio.cl/blog/css-clases-y-semantica/

Saludos!
  #12 (permalink)  
Antiguo 07/11/2006, 13:05
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 19 años, 9 meses
Puntos: 0
Cita:
cuando uses id y class trata de nombrarlas de acuerdo a su función en tu documento no a su presentación
hey cuando dije eso realmente no estaba muy convencido y esta mal más bien es

nombrar id o class de acuerdo al contenido no a la presentación

aqui la referencia
__________________
Mi blog
  #13 (permalink)  
Antiguo 07/11/2006, 14:11
Avatar de marce_str  
Fecha de Ingreso: septiembre-2006
Ubicación: La Plata, Argentina
Mensajes: 203
Antigüedad: 17 años, 6 meses
Puntos: 1
ja! yo ni me di cuenta, no lo lei detenidamente, pero bueno ahi igual le pase un link tambien con la informacion correcta :p
  #14 (permalink)  
Antiguo 09/11/2006, 15:28
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 17 años, 10 meses
Puntos: 1
Gracias a todos, que buena respuesta de su parte al asesorarme; les garantizo visitar las ligas y practicar mucho.
Ahora, ¿Entonces debo entender que las capas las puedo manejar como (valga la comparación) en photoshop?, me refiero que con index-z y background: transparent se van sobreponiendo una tras otra, como hojas de cuaderno transparentes.
¿No es así?
  #15 (permalink)  
Antiguo 10/11/2006, 12:00
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 17 años, 10 meses
Puntos: 1
En http://www.ignside.net/man/html/doctype.php (liga contenida en las ligas que me facilitaron) dice que la versión de html 4.01 será la última versión de html, las siguientes serán xhtml;
¿esto no afecta al escribir la declaración DOCTYPE? ó
¿debo cambiar <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

por,
<!DOCTYPE XHTML PUBLIC "-//W3C//DTD XHTML 1.0//EN"
"http://www.w3.org/TR/xhmtl1/strict.dtd">

,claro que lo que busco es aprender y apegarme a los estándares de la W3C.
  #16 (permalink)  
Antiguo 11/11/2006, 16:26
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 19 años, 9 meses
Puntos: 0
Cita:
¿Entonces debo entender que las capas las puedo manejar como (valga la comparación) en photoshop?, me refiero que con index-z
si pero realmente con que sepas como esta el orden de tus divs en tu documento html lo usaras poco esa propiedad.

Cita:
En http://www.ignside.net/man/html/doctype.php (liga contenida en las ligas que me facilitaron) dice que la versión de html 4.01 será la última versión de html, las siguientes serán xhtml;
¿esto no afecta al escribir la declaración DOCTYPE?
no entiendo muy bien tu pregunta pero puedes trabajr perfectamente con los dos pero cuidadao tu DOCTYPE de XHTML esta incompleto
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Saludos
__________________
Mi blog
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 07:36.