Ayuda con CSS

[gateous]

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.

[safe]

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?

[xurxinho]

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