Foros del Web » Creando para Internet » CSS »

Ayuda con CSS

Estas en el tema de Ayuda con CSS en el foro de CSS en Foros del Web. Tengo una tarea que hacer y no se como... Tengo un logo recortado con image ready para colocar en unos espacios de esa imagen texto ...
  #1 (permalink)  
Antiguo 01/04/2009, 19:08
 
Fecha de Ingreso: abril-2009
Mensajes: 7
Antigüedad: 8 años, 8 meses
Puntos: 0
Información Ayuda con CSS

Tengo una tarea que hacer y no se como... Tengo un logo recortado con image ready para colocar en unos espacios de esa imagen texto y me piden que la una con CSS y deje los espacios para los textos. Lo intente con Image ready y me genera el codigo, pero lo malo es que lo crea absolute y se ve bien. pero siempre por encima de mi diseño y si lo cambio a relative se me desacomodan las imagenes. Tampoco se como agregar el espacio para el texto.

Este es el codigo:

Código PHP:
<STYLE TYPE="text/css">
<!--

DIV.logo-01 {
    
position:absolute;
    
left:0px;
    
top:0px;
    
width:755px;
    
height:7px;
}

DIV.logo-02 {
    
position:absolute;
    
left:0px;
    
top:7px;
    
width:512px;
    
height:135px;
}

DIV.logo-03 {
    
position:absolute;
    
left:512px;
    
top:7px;
    
width:243px;
    
height:12px;
}

DIV.logo-04 {
    
position:absolute;
    
left:512px;
    
top:19px;
    
width:243px;
    
height:141px;
}

DIV.logo-05 {
    
position:absolute;
    
left:0px;
    
top:142px;
    
width:22px;
    
height:18px;
}

DIV.logo-06 {
    
position:absolute;
    
left:22px;
    
top:142px;
    
width:102px;
    
height:14px;
}

DIV.logo-07 {
    
position:absolute;
    
left:124px;
    
top:142px;
    
width:388px;
    
height:18px;
}

DIV.logo-08 {
    
position:absolute;
    
left:22px;
    
top:156px;
    
width:102px;
    
height:4px;
}

-->
</
STYLE>



<
DIV CLASS="logo-01">
    <
IMG SRC="logo_01.gif" WIDTH=755 HEIGHT=7 ALT="">
</
DIV>
<
DIV CLASS="logo-02">
    <
IMG SRC="logo_02.gif" WIDTH=512 HEIGHT=135 ALT="">
</
DIV>
<
DIV CLASS="logo-03">
    <
IMG SRC="logo_03.gif" WIDTH=243 HEIGHT=12 ALT="">
</
DIV>
<
DIV CLASS="logo-04">
    <
IMG SRC="logo_04.gif" WIDTH=243 HEIGHT=141 ALT="">
</
DIV>
<
DIV CLASS="logo-05">
    <
IMG SRC="logo_05.gif" WIDTH=22 HEIGHT=18 ALT="">
</
DIV>
<
DIV CLASS="logo-06">
    <
IMG SRC="logo_06.gif" WIDTH=102 HEIGHT=14 ALT="">
</
DIV>
<
DIV CLASS="logo-07">
    <
IMG SRC="logo_07.gif" WIDTH=388 HEIGHT=18 ALT="">
</
DIV>
<
DIV CLASS="logo-08">
    <
IMG SRC="logo_08.gif" WIDTH=102 HEIGHT=4 ALT="">
</
DIV
Si alguien sabe como se lo agradeceria muchisimo.

Última edición por gateous; 01/04/2009 a las 19:44 Razón: Error en el titulo
  #2 (permalink)  
Antiguo 02/04/2009, 18:42
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: Ayuda con CSS

mmmm ese codigo es realmente horrible. ¿Si el logo es una sola imagen porque esta recortado en 8 pedazos? ¿lo que quieres es tener la imagen del logo y texto por encima? si es asi lo que yo haria seria poner el logo como fondo del parrafo y cambiando los valores del padding del parrafo ubicar el texto en la posicion que quieres.
Si por la consigna necesitas que la imagen del logo esta puesta implicitamente en el codigo HTML deberias posicionar el texto por encima de ella mediante posicion absoluta.
Ejemplo:

<div style='position:relative;'>
<img src='logo' />
<p style='left:50px; position:absolute; top:25px;'>texto texto</p>
</div?
__________________
oohh... quisiera ser godines!!!
  #3 (permalink)  
Antiguo 03/04/2009, 07:32
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: Ayuda con CSS

La solución comentada anteriormente es buena.

Otra solución podría ser colocar la imagen como fondo de una tabla por ejemplo y crear celdas y columnas, despúes con margin,width o padding colocar las celdas como quieras y el texto con el margen que veas, a mi me funciona perfectamente e igual de bien y sin tener que recurrir a posiciones absolutas

http://www.paginadelcolegio.com/?acc...o&systemLang=1

El marco de la dirección y el contenido que ves son una imagen de fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:48.