Re: [Ovillo] Maquetando cabecera con CSS
Muchas gracias!! tu código me ha venido genial ^^
Saludos! =)
From: [EMAIL PROTECTED]
To: ovillo@lists.ovillo.org
Date: Mon, 31 Mar 2008 21:51:43 +0200
Subject: Re: [Ovillo] Maquetando cabecera con CSS
Hola, aquí te adjunto un css y el xhtml válido que creo que te servirán:
style type=text/css
body {background-color: #cd;font-size: 11px;font-family: Verdana, Arial,
SunSans-Regular, Sans-Serif;color:#564b47;padding:0;margin:0;}
#container {width: 900px;margin-bottom: 10px;margin: 0 auto;background-color:
#EBD3E0;}
#centro {background-color: #ff;padding: 0px;margin: 0px 250px 0px 200px;}
#izquierda {float: left;width: 200px;margin: 0;padding: 0;}
#derecha {float: right;width: 250px;margin: 0;padding: 0;}
#bajo {clear: both;margin: 0;padding: 0;text-align: left; }
/style
div id=container div id=izquierdaIzquierda/div
div id=derechaDerecha/div
div id=centroCentro/div
div id=bajoPoner aquí el resto de la web, en el caso de que haya/div
/div
Saludos
From: [EMAIL PROTECTED] To: ovillo@lists.ovillo.org Date: Mon, 31 Mar
2008 17:28:21 +0200 Subject: [Ovillo] Maquetando cabecera con CSS
Hola a [EMAIL PROTECTED], estoy maquetando la cabecera de mi web con
CSS. Tiene tres elementos, que son: una logo, un título y un botón; van los
tres colocados, formando una línea horizontal. Ya casi lo tengo, pero no
consigo cuadrar la imagen. Tengo este CSS: /*cabecera*/#L_CabTabla
{/*cabecera*/ POSITION:relative; top:1px; left:5px; WIDTH:617px;
background-color:#6557D0;}#L_CabLogo {/*img.*/ left:5px; width:55px;
background-color:#5215B4; border-right:3px solid #ff;}#L_CabTitulo
{/*titulo general*/ POSITION:absolute; text-align:left; top:1px; left:68px;
padding-left:4px; padding-right:4px;}/*boton salir SSPP*/#L_SALIR {
POSITION:absolute; z-index:1; top:1px; left:505px; width:50px; color:white;
cursor:pointer; BACKGROUND-COLOR:transparent; TEXT-ALIGN:center;
font-weight:bold; BORDER-style:solid; BORDER-width:2px} y este HTML
asociado: center div id=L_CabTabla align=center div
id=L_CabLogo img name=logo alt=SV title=SV src=logo.gif
border=0 /div div class=cabTitulo id=L_CabTitulo
Bienvenidos abr/Portal SV /div div style=top: 18px;
id=L_SALIR a style=color: white;
onmouseover=javascript:document.getElementById('textosalir').style.color='red'
onmouseout=document.getElementById('textosalir').style.color='white'
href=javascript:salir(); span id=textosalirSalir/span /a
/div /div /center Con esto, consigo obtener un bloque centrado,
donde aparecen el título (centrado), el botón de Salir (a la derecha del
texto) y la imagen, que sale también centrada, superpuesta bajo el texto.
Lo que yo quiero es que salga a la izquierda de éste. Lo intenté poniéndole
a su capa float:left, y aunque IE lo coge en FF no sale bien. Muchas
gracias desde ya! Saludos =)
_
Tecnología, moda, motor, viajes,…suscríbete a nuestros boletines para estar
siempre a la última Guapos y guapas, clips musicales y estrenos de cine.
___ Lista de distribución
Ovillo Para escribir a la lista, envia un correo a
Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la
siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
_
La vida de los famosos al desnudo en MSN Entretenimiento
http://entretenimiento.es.msn.com/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_
La vida de los famosos al desnudo en MSN Entretenimiento
http://entretenimiento.es.msn.com/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Maquetando cabecera con CSS
Hola a [EMAIL PROTECTED],
estoy maquetando la cabecera de mi web con CSS. Tiene tres elementos, que son:
una logo, un título y un botón; van los tres colocados, formando una línea
horizontal. Ya casi lo tengo, pero no consigo cuadrar la imagen.
Tengo este CSS:
/*cabecera*/#L_CabTabla {/*cabecera*/ POSITION:relative; top:1px; left:5px;
WIDTH:617px; background-color:#6557D0;}#L_CabLogo {/*img.*/ left:5px;
width:55px; background-color:#5215B4; border-right:3px solid
#ff;}#L_CabTitulo {/*titulo general*/ POSITION:absolute; text-align:left;
top:1px; left:68px; padding-left:4px; padding-right:4px;}/*boton salir
SSPP*/#L_SALIR { POSITION:absolute; z-index:1; top:1px; left:505px; width:50px;
color:white; cursor:pointer; BACKGROUND-COLOR:transparent; TEXT-ALIGN:center;
font-weight:bold; BORDER-style:solid; BORDER-width:2px}
y este HTML asociado:
center
div id=L_CabTabla align=center
div id=L_CabLogo
img name=logo alt=SV title=SV src=logo.gif border=0
/div
div class=cabTitulo id=L_CabTitulo
Bienvenidos abr/Portal SV
/div
div style=top: 18px; id=L_SALIR
a style=color: white;
onmouseover=javascript:document.getElementById('textosalir').style.color='red'
onmouseout=document.getElementById('textosalir').style.color='white'
href=javascript:salir();
span id=textosalirSalir/span
/a
/div
/div
/center
Con esto, consigo obtener un bloque centrado, donde aparecen el título
(centrado), el botón de Salir (a la derecha del texto) y la imagen, que sale
también centrada, superpuesta bajo el texto. Lo que yo quiero es que salga a la
izquierda de éste. Lo intenté poniéndole a su capa float:left, y aunque IE lo
coge en FF no sale bien.
Muchas gracias desde ya!
Saludos =)
_
Tecnología, moda, motor, viajes,…suscríbete a nuestros boletines para estar
siempre a la última
Guapos y guapas, clips musicales y estrenos de cine.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Background para table en FF / IE
Hola a [EMAIL PROTECTED],
Vereis, tengo una tabla a la que doy el siguiente estilo:
.tableNews
{
background: url(img/background_htable.gif);
background-repeat: no-repeat;
background-color: #FF;
background-position: left top;
width: 572px;
height: 171px;
text-align: center;
vertical-align: top;
cellpadding:0;
margin:0;
}
El problema lo tengo con la imagen del background, que Firefox si me lo coge,
pero en Explorer no sale nada. He probado de varias formas, pero explorer no me
lo coge, es muy raro. Por si tuviese algo que ver, la tabla está generada con
DOM, y la sitúo dentro de un span, que está a su vez dentro de algunas div.
Muchas gracias
Saludos
_
MSN Video.
http://video.msn.com/?mkt=es-es
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Background para table en FF / IE
Hola a [EMAIL PROTECTED]
muchas gracias, he conseguido que la imagen salga de fondo en ambos navegadores
^^
en el css lo he cambiado por:
#tableNews
{
background: transparent url(img/background_htable.gif) no-repeat left top;
width: 572px;
height: 171px;
text-align: center;
vertical-align: top;
margin:0;
}
y desde la pagina, antes llamaba al estilo de la tabla con class (y en css
declarado como .tableNews), pero al usar en su lugar el atributo id (y
declarar como #tableNews en css), ya funciona =)
Gracias!
From: [EMAIL PROTECTED]
To: ovillo@lists.ovillo.org
Date: Tue, 19 Feb 2008 11:13:33 -0300
Subject: Re: [Ovillo] Background para table en FF / IE
Intenta con background-image:url(img/etc etc etc
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Rodrigo Álvarez Virgós
Enviado el: Martes, 19 de Febrero de 2008 11:06
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Background para table en FF / IE
Hola, SiMs ViKiTo
SiMs ViKiTo escribió:
Hola a [EMAIL PROTECTED],
Vereis, tengo una tabla a la que doy el siguiente estilo:
.tableNews
{
background: url(img/background_htable.gif);
background-repeat: no-repeat;
background-color: #FF;
background-position: left top;
width: 572px;
height: 171px;
text-align: center;
vertical-align: top;
cellpadding:0;
margin:0;
}
El problema lo tengo con la imagen del background, que Firefox si me lo
coge, pero en Explorer no sale nada. He probado de varias formas, pero
explorer no me lo coge, es muy raro. Por si tuviese algo que ver, la tabla
está generada con DOM, y la sitúo dentro de un span, que está a su vez
dentro de algunas div.
Prueba con poner todas las propiedades para el fondo en una sola línea:
background: #fff url('img/background_htable.gif') no-repeat top left;
o bien pon background-image: url('img/background_htable.gif'); para
indicar la imagen de fondo
Aparte, cellpadding no es una propiedad css. Si quieres que no haya
espacio entre las celdas, usa border-collapse:collapse;
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_
La vida de los famosos al desnudo en MSN Entretenimiento
http://entretenimiento.es.msn.com/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Div's IE vs Div's FF
Hola a todos,
Tengo una cuestión de divs que no consigo resolver. Se trata de una tabla, en
la que las columnas son de la siguiente clase CSS:
.DatoTabla{
font-size: 12px;
font-weight : bold;
text-align:left;
width:20%;
display: inline;
color: #FF;
background-color: #6557D0;
overflow:hidden;
}
Voy colocando las capas una tras otra, y las capas van quedando en linea,
formando las celdas de la tabla. El problema viene porque en IE el width de 20%
se cumple, y hace que queden con una separación entre sí, sin embargo, en
Firefox se quedan juntas, y aparecen los textos pegados unos a otros. Creo que
se debe a que Firefox ajusta el tamaño de la capa a su contenido, sin embargo
IE mantiene cierto tamaño independientemente del contenido :S
Este es el codigo de la pagina:
div class=Tabla
div class=DatoTablaNombre/div
div class=DatoTablaNick/div
div class=DatoTablaEmail/div
div class=DatoTablaURL/div
/div
donde la clase Tabla es,
.Tabla{
width:100%;
text-align:left;
margin: auto;
background-color: #D2D8F9;
}
Muchas gracias
Saludos
- ViKiTo =)
_
La vida de los famosos al desnudo en MSN Entretenimiento
http://entretenimiento.es.msn.com/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Div's IE vs Div's FF
Hola a todos,
Muchas gracias a todos por vuestra ayuda
Se trata de una tabla que voy generando dinámicamente con Java. Inicialmente la
hice con table, pero empecé a usar div para tener toda la página maquetada
con capas y css. Sin embargo, y aunque con lo que me habeis comentado conseguí
ponerlo como quería, las capas me estaban volviendo loco, asi que lo he dejado
con table. Supongo que el tener la web maquetada con css no implica que haga
con capas el 100% de las cosas! hehehe =)
Saludos
- ViKiTo
From: [EMAIL PROTECTED]
To: ovillo@lists.ovillo.org
Date: Mon, 28 Jan 2008 09:05:53 -0200
Subject: Re: [Ovillo] Div's IE vs Div's FF
Vikito:
Si lo que quieres es respetar los estándares de maquetación, es correcto
utilizar tablas para tabular datos. En este caso, por lo que vi, eso es lo
que estás haciendo.
Por otro lado, si lo que quieres es complicarte la vida solucionando
detalles de renderizado entre IE y FF me parece perfecto que estés usando
DIVs. Sólo recuerda que las tablas se verán exactamente iguales en ambos
navegadores y no te traerán dolores de cabeza.
Javier Trejo
Diseñador Web
JT - Comunicación Interactiva
www.cominteractiva.com.ar
Cel.: +54 (11) 15 6485-7734
Nextel: 54*147*423
Mail: [EMAIL PROTECTED]
MSN: [EMAIL PROTECTED]
Skype: trejo.javier
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de SiMs ViKiTo
Enviado el: lunes, 28 de enero de 2008 07:02
Para: ovillo@lists.ovillo.org
Asunto: [Ovillo] Div's IE vs Div's FF
Hola a todos,
Tengo una cuestión de divs que no consigo resolver. Se trata de una tabla,
en la que las columnas son de la siguiente clase CSS:
.DatoTabla{
font-size: 12px;
font-weight : bold;
text-align:left;
width:20%;
display: inline;
color: #FF;
background-color: #6557D0;
overflow:hidden;
}
Voy colocando las capas una tras otra, y las capas van quedando en linea,
formando las celdas de la tabla. El problema viene porque en IE el width de
20% se cumple, y hace que queden con una separación entre sí, sin embargo,
en Firefox se quedan juntas, y aparecen los textos pegados unos a otros.
Creo que se debe a que Firefox ajusta el tamaño de la capa a su contenido,
sin embargo IE mantiene cierto tamaño independientemente del contenido :S
Este es el codigo de la pagina:
div class=Tabla
div class=DatoTablaNombre/div
div class=DatoTablaNick/div
div class=DatoTablaEmail/div
div class=DatoTablaURL/div
/div
donde la clase Tabla es,
.Tabla{
width:100%;
text-align:left;
margin: auto;
background-color: #D2D8F9;
}
Muchas gracias
Saludos
- ViKiTo =)
_
La vida de los famosos al desnudo en MSN Entretenimiento
http://entretenimiento.es.msn.com/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_
MSN Noticias
http://noticias.msn.es/comunidad.aspx
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
