ejemplo real css, ayuda de los senseis
lo que yo quiero es esto
http://demo2.mercuryin.es/startgroup/plantilla.jpg
y lo que tengo hasta ahora es esto
http://demo2.mercuryin.es/startgroup/plantilla2.jpg
y para conseguir eso he hecho este codigo:
<code><?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#EFE9C7" leftmargin="0" topmargin="0">
<div id="cabecera" class="cabecera"> <img src="originales/cabecera.gif" width="564" />
</div>
<div id="botonera" class="botonera"> <a href="index.php?content=1" class="boton"><strong>START</strong>REALTY</a>
<a href="index.php?content=1" class="boton"><strong>START</strong>CONTRUCTIONS</a>
<a href="index.php?content=1" class="boton"><strong>START</strong>RENTING</a>
<a href="index.php?content=1" class="boton"><strong>CONTACT</strong>US</a>
</div>
<div id="apartado1" class="apartado" OnMouseOver="this.style.backgroundColor='#E6D697'" OnMouseOut="this.style.backgroundColor='#FFFFFF'" >
<img src="originales/logo.gif" align="left"/>
<H2>START</H2>
<h3>REALTY</h3>
Click here to see the new developments </div>
<div id="apartado2" class="apartado" OnMouseOver="this.style.backgroundColor='#E6D697'" OnMouseOut="this.style.backgroundColor='#FFFFFF'" >
<img src="originales/logo.gif" align="left"/>
<H2>START</H2>
<h3>CONTRUCTIONS</h3>
Find the property under your search parameters </div>
<div id="apartado3" class="apartado" OnMouseOver="this.style.backgroundColor='#E6D697'" OnMouseOut="this.style.backgroundColor='#FFFFFF'">
<img src="originales/logo.gif" align="left"/>
<H2>START</H2>
<h3>RENTING</h3>
Find all the rentals propeties </div>
<div id="apartado4" class="apartado" OnMouseOver="this.style.backgroundColor='#E6D697'" OnMouseOut="this.style.backgroundColor='#FFFFFF'">
<img src="originales/logo.gif" align="left"/>
<H2>CONTACT</H2>
<h3>US</h3>
Any question? Please, ask Us </div>
</body>
</html>
</code>
y he aplicado esta hoja de estilos:
<code>#cabecera {
position:absolute;
left:50%;
width:566px;
height: 99px;
margin-left:-283px;
background:#ffffff;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: #666666;
border-left-color: #666666;
}
#botonera {
position:absolute;
left:50%;
top:99px;
width:566px;
/*height: 99px;*/
margin-left:-283px;
background:#000000;
font-family: Verdana, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}
.boton {
color: #FFFFFF;
text-decoration: none;
padding-left:10px;
}
.boton:hover {
color: #FFCC33;
text-decoration: none;
}
.apartado{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #000000;
width:566px;
height: 64px;
border-bottom-width: 11px;
border-bottom-style: solid;
border-bottom-color: #333333;
}
#apartado1 {
position:absolute;
left:50%;
top:114px;
margin-left:-283px;
}
#apartado2 {
position:absolute;
left:50%;
top:195px;
margin-left:-283px;
}
#apartado3 {
position:absolute;
left:50%;
top:276px;
margin-left:-283px;
}
#apartado4 {
position:absolute;
left:50%;
top:357px;
margin-left:-283px;
}
h2 {
color: #000000;
margin: 0;
}
h3 {
color: #000000;
margin: 0;
}
</code>
El <em>'problema'</em> por llamarlo de alguna manera, es conseguir el recuadro de abajo, que por supuesto, debe llegar hasta el borde mismo de la pantalla.
Me he planteado si tendria que haber hecho un div #contenedor con posicion absoluta y meter todos los elemntos dentros, o ,no, o que , y me han empezadoa saltar tantas dudas que vengo hasta el monasterio del css a pedir consejo alos lideres espirituales, ¿que me recomendais?
klein
Leeros este documento que explica como utilizar el DOCTYPE correcto para activar el standard mode en los navegadores.
http://www.hut.fi/u/hsivonen/doctype.html
Como dice helenp, si pones la declaración XML, se activa el modo quircks en el IE 6
orange
Esa etiqueta la añadía automáticamente DreamWeaver cuando creabas un nuevo documento y marcabas la casilla XHTML Compliance ... en la última versión ya no lo hace ... sinceramente no sé para qué sirve, yo la quitaba directamente y dejaba el DOCTYPE, que es lo que tiene que ir
helenp
Bueno, ya lo he encontrado,
no lo que tu quiere, pero no te quiero confundir con lo que he dicho.
No es que tu cabezera esta mal,
pero yo me acuerdo si no me acuerdo mal, que tenías problemas para centrar horizontalmente
Tu usas esto:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
El tener esto primero: <?xml version="1.0" encoding="iso-8859-1"?> hace que IE6 entra en quircks mode, asi siempre vas a tener que hacer cosas como left 50% .....para centrar en vez de usar margin:auto., y se centra solo, tanto texto como capas.
Mas trabajoso hacer los layouts en quircks mode.
He mirado la pagina de orange y no la lleva, y he leido que solo sirve para validar (en 1 pagina solo)
Ademas para que validar?
Quizas en strict mode no pasa eso, no sé
Yo no sabía eso, no sé si tu lo sabías.
y es que yo uso IE6...
esa es al menos la información que he conseguido,
corrigame si no es así, pá no confundirlo más
respecto tu problema, lo que ha dicho meddle, he estado probando y no me sale como tu quiere, al menos yo no sé.
En tierra de nomadas hay un ejemplo de fondo elastico, pero esta hecho para el ancho, igualmente se podría aplicar al alto, no lo sé.
meddle
lo que quieres hacer es MUCHO mas facil en javascript. de hecho no se si alguna vez he conseguido hacerlo en css, pero dudo que funcionase en IE+Moz.
helenp
ojo,
pero haz una pagina nueva..........
no uses tu original :)
helenp
si cambias tu cabezera, aplicas el margin:auto,
como te he dado el codigo,
mira mi codigo, no lleva position absolute...........
hartum
helenp
ya se que ese no era tu problema,
pero veia el codigo mal, y con esa cabezera no sale tu pagina bien.
He copiado el tuyo, y cambiandolo estaba ya mejor.
ya entiendo lo que tu necesitas, eso no tengo ni idea como se hace,
quizas usando height 100%??????
eso los profs,
es que heigth 100% me coge el 100% de la pagina, por eso preguntaba antes si quizas tendria que meterlo todo dentro de otro div y este div "contenedor" ponerlo al 100%, pero si hago esto ya tengo que quitar la posicion absolute de los otros divs?
hartum
icaro2m
y con tablas no te has planteado hacerlo?? creo que seria bastante mas sencillo....
jejejejeje eso es precisamente lo que quiero evitar
helenp
ahora lo he vuelto a hacer el tuyo,
y no esta igual, ahora lo veo bien, eso como es?
pues no parece que hace falta height si lo pones en el css.
Pero lo correcto sería margin:auto para centrar
y como tu tenía la cabezera no funciona margin:auto
Vaya te he mareado aun más......
helenp
ya se que ese no era tu problema,
pero veia el codigo mal, y con esa cabezera no sale tu pagina bien.
He copiado el tuyo, y cambiandolo estaba ya mejor.
ya entiendo lo que tu necesitas, eso no tengo ni idea como se hace,
quizas usando height 100%??????
eso los profs,
icaro2m
y con tablas no te has planteado hacerlo?? creo que seria bastante mas sencillo....
hartum
helenp
<div class="quote">
HARTUM
<blockquote>pues no no lleva heigth, no se ¿deberia llevarlo??? si la altura se la defino en el estilo.
Y lo de class tienes razon eso es uan ida de olla de algo anterior, ya esta listo :-), alguna sugerencia sobre lo planteado?</blockquote>
</div>
Me has puesto a dudar, no lo sé,
pero lo tuyo lo veia fatal, tuve que ponerlo height, y cambiar tu cabezera
oues si me cambias la cabecera me has jodido todo el invento porque ya no se centra, o si?
hartum
jejejejejejeje se te va la olla helenp que nooooooooo, que mi problema no es eseeeeeeeeeeee.
Mira las 2 imagenes anda, ves que en la primera tengo un recuadro en la parte inferior de la pantalla, y en la segunda no, pues eso es lo que quiero hacer, y no le puedo poner un alto fijo porque dependiendo de la resolucion sera mas grande o mas pequeño.
helenp
HARTUM
pues no no lleva heigth, no se ¿deberia llevarlo??? si la altura se la defino en el estilo.
Y lo de class tienes razon eso es uan ida de olla de algo anterior, ya esta listo :-), alguna sugerencia sobre lo planteado?
Me has puesto a dudar, no lo sé,
pero lo tuyo lo veia fatal, tuve que ponerlo height, y cambiar tu cabezera
helenp
Las imagenes tienen que llevar width y height, si no se descolocan.
No sé a que te refieres con el problema, a lo mejor poniendo los heights a los imagenes ya te cuadra y entra el recuadro
jejejej
mirandolo bien, eres un poquito de desastre creo:
tu cabezera esta mal, por eso no te funciona margin:auto (para centrar horizontalmente).
debe de ser algo así: primero el doctype
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
Segundo, lo que quieres es algo centrado con un ancho fijo, pues lo mas facil es poner margin:auto, y puedes quitar position:absolute, margin-left y left.
Este css se centra igual que el tuyo:
#cabecera {
margin:auto;
width:566px;
height: 99px;
background:#ffffff;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: #666666;
border-left-color: #666666;
}
#botonera {
margin:auto;
top:99px;
width:566px;
background:#000000;
font-family: Verdana, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}
.boton {
color: #FFFFFF;
text-decoration: none;
padding-left:10px;
}
.boton:hover {
color: #FFCC33;
text-decoration: none;
}
.apartado{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #000000;
width:566px;
height: 64px;
border-bottom-width: 11px;
border-bottom-style: solid;
border-bottom-color: #333333;
}
#apartado1 {
top:114px;
margin:auto;
}
#apartado2 {
margin:auto;
top:195px;
}
#apartado3 {
margin:auto;
top:276px;
}
#apartado4 {
margin:auto;
top:357px;
}
h2 {
color: #000000;
margin: 0;
}
h3 {
color: #000000;
margin: 0;
}
</style>
hartum
pues no no lleva heigth, no se ¿deberia llevarlo??? si la altura se la defino en el estilo.
Y lo de class tienes razon eso es uan ida de olla de algo anterior, ya esta listo :-), alguna sugerencia sobre lo planteado?
helenp
primero esto no lleva height:
<code><div id="cabecera" class="cabecera"> <img src="originales/cabecera.gif" width="564" /> </code>
y no entiendo porque pones id y class, bastaría con el id solo o el class solo, al no ser que quieras aplicar diferentes estilos.