[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:
Bienvenidos aPortal SV
Salir
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
Re: [Ovillo] Maquetando cabecera con CSS
Hola, aquí te adjunto un css y el xhtml válido que creo que te servirán:
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; }
Izquierda
Derecha
Centro
Poner aquí el resto de la web, en el caso de que haya
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:> > > > id="L_CabLogo">> border="0">> > > > >
> Bienvenidos aPortal SV> > > > id="L_SALIR">> onmouseover="javascript:document.getElementById('textosalir').style.color='red'"
> onmouseout="document.getElementById('textosalir').style.color='white'"
> href="javascript:salir();">> Salir> >
> > > > > 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
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:
>
>
> 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; }
>
>
>
> Izquierda
> Derecha
> Centro
> Poner aquí el resto de la web, en el caso de que haya
>
>
>
>
> 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:> > > > > id="L_CabLogo">> > border="0">> > > > >
> > Bienvenidos aPortal SV> > > > > id="L_SALIR">> > onmouseover="javascript:document.getElementById('textosalir').style.color='red'"
> > onmouseout="document.getElementById('textosalir').style.color='white'"
> > href="javascript:salir();">> Salir> >
> > > > > > 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
