[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