las p.... medidas....
ay no sé, CSS será el invento del siglo pero anda que no es complicadillo de aprender... o eso o los navegadores se han empeñado en volvernos locos...
EStoy haciendo esto y quería intentar hacerlo todo en css, pasando de tablas, pero estoy teniendo unos problemas con las medidas impresionantes, porque ie y netscape no las interpretan igual (eso si lo hacen, porque de la altura de los div parece que pasan los dos... grrrr!!!
la hoja de estilos básica que de momento tengo asociada es:
body {
font-family: georgia, verdana, sans serif;
font-size: 9pt;
color: #3B4B5B;
text-align: left;
background-color: #DFCBA3;
}
a {
font-size: 8pt;
color: #3B4B5B;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #fff;
background-color: #3B4B5B;
}
#frame {
width: 750px;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
padding-top: 15px;
padding-right: 5px;
padding-left: 5px;
text-align: right;
background: #fff;
background-image: url(../image/general/logo_dep_cirugia.gif);
background-repeat: no-repeat;
background-position: top left;
}
.menu {
width: 140px;
height: 40px;
float: left;
border: 2px solid white;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding-top: 30px;
padding-left: 5px;
text-align: left;
background: #BAE9F7;
}
#seccion {
width: 737px;
height: 20px;
float: left;
margin-right: auto;
margin-left: 1px;
margin-top: 2px;
padding-top: 15px;
padding-left: 5px;
text-align: left;
background: #FFA419;
}
bastante sencillita... pero tengo mucho problema con las alturas, no me las respeta ni pa atrás... aparte que no tengo ni idea de como se verá en ie 5, netscape 5 y demás, sólo tengo las últimas versiones de los navegadores...
en fin no se, un alma caritativa que me explique en que fallo y me haga volver a confiar en la maquetación con div... :(
meddle
¿puedes poner el ejemplo completo online? (css+html)
belen_c
si perdona, el código completo es este:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<style type="text/css" media="all">
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="frame"><a href="#">enlaces relacionados</a>| <a href="#">descargas</a>
| <a href="#">mapa del web</a> | <a href="#">contacto</a>
<br /> <br />
<div class="menu"><a href="#">portada</a></div>
<div class="menu"> </div>
<div class="menu"> </div>
<div class="menu"> </div>
<div class="menu"> </div>
<div id="seccion">portada</div>
<div id="presentacion"></div>
<br /> <br /><br /> <br />
<br /> <br /><br /> <br />
<br /> <br /><br /> <br />
<br /> <br /><br /> <br />
<br /> <br /><br /> <br />
<br /> <br /><br /> <br />
<br /> <br /><br /> <br />
<br /> <br /><br /> <br />
</div>
</body>
</html>
estaba haciendo pruebas ahora, y creo que he conseguido arreglarlo, aunque me he inventado la respuesta... jejejeje!!! lo he puesto asi:
height: 20px fixed;
y parece que asi aguanta...
belen_c
vaya, los enlaces me los interpreta al poner el código... de todas maneras en la página vas a "ver-código fuente" y ya tá... :D :D
meddle
¿y cual era el problema? yo sin el fixed lo veo perfecto. ademas, el fixed se usa para position, no para height, y no recuerdo ninguna contraccion valida para height (como las hay para border, background. etc)
belen_c
el problema es que no me respeta las alturas, mucho menos cuando le meto texto. Es decir, quiero que esas alturas sean fijas, y tanto ie como nt las ponen diferentes...
joshuatree
Uoooooooh!
Lo siento por el offtopic, pero voy a tener q coincidir contigo en eso de q se aprende de los libros :shock:
Ah, veo todo de PM. Uso Mozilla Firebird 0.7
belen_c
una pregunta... asi como en las tablas puedes alinear el texto no sólo a la derecha o a la izquierda, si no también arriba y abajo...¿como se puede hacer para que en un div el texto esté alineado abajo a la izquierda? si es que se puede...
meddle
http://www.w3.org/TR/CSS2/visudet.html#line-height
es decir http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
belen_c
como algún día cobres por tus respuestas nos dejas a todos en las mínimas XDDDD
meddle
jaja, no, no creo que llegue a trabajar de esto
black
este meddle es un jabato! :)
meddle
mmm, eso é güeno o malo? :P
belen_c
pues nada, allá voy, a maquetar con css todo... la verdad que esto es como cambiar de pais donde vivir.. jeje no sabes muy bien como saldrá la cosa. Si si, ya sé que es mejor, pero los clientes para los que estoy haciendo esta web no creo que estén demasiado actualizados... jejeje
belen_c
por cierto, una interesante página: la traducción, más o menos legible :D de las reglas de W3C sobre CSS2:
palosquenosepaningles
Y nada meddle, que no me sale el alineamiento abajo a la izquierda... lo he conseguido arreglar más o menos en el menú de arriba, pero en el bloque al lado de la foto na de na... la web era esta (en fase de pruebas). El css aplicado a ese bloque gris es:
#presentacion {
width: 247px;
height: 275px;
float: left;
margin-right: auto;
margin-left: 0px;
margin-top: 5px;
padding-top: 15px;
padding-left: 5px;
text-align: left;
background: #F2F4F5;
vertical-align: bottom;
}
en el html:
<div id="presentacion">
<p>
esto es una prueba de texto</p>
</div>
Asi que no se´... siento dar tanto el coñazo, pero es que idea de como arreglarlo...
gracias (a quien sea ;) )
pedro_fm
naya, esos menus superiores no me convencen demasiado (usar un div para un enlace??) mejor un <ul><li> y aplicarle esto:
http://www.alistapart.com/articles/slidingdoors
asi ademas sería mas accesible ya que cuando impriman o vean ese contenido desde un PDA o WAP saldrán las secciones como un indice asi:
· El departamento de Cirugía
· Docencia de pregrado
· etc...
Tambien puedes mejorar el titular con: http://www.stopdesign.com/also/articles/replace_text/
asi lo de "departamento de cirujia" si el dispositivo no soporta graficos a color, o lo que sea, presenta un texto alternativo con ese mismo contenido.
son tutoriales del mismo autor. es el puto amo :)
y que suerte tienes, de poder hacer pruebas que no sean "con gaseosa" como las que me vuelven loco a mi... loco pero porque no me sale nada de nada :(
belen_c
hmmm... si tienes razón, he visto tutoriales con ese tipo de menus que parecen más sencillos.. también es verdad que dudo mucho que estas páginas se vean en pda´s jejeje pero bueno, mejor que sean estables.
<fieldset>
y que suerte tienes, de poder hacer pruebas que no sean "con gaseosa" como las que me vuelven loco a mi... loco pero porque no me sale nada de nada :(</fieldset>
¿einn? jejejejeje
pedro_fm
ya, pero el problema de accesibilidad 100% es eso precisamente, que hay que cumplir a rajatabla la funcion de cada tag html porque si hacemos trucos como lo del div para un cuadrado que rodea un menu, al final es casi como lo de siempre cuando trabajamos con tablas, pixels transparentes y todo esos truquis que ahora cuesta tanto quitar de nuestra cabeza cuando maquetamos (o en mi caso, cuando intentamos maquetar XHTML :)
meddle
naya, no te lo alinea porque el P es un tag de bloque, no de linea, en cambio si que te alinea los de arriba porque son simples links.