| 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. |