[HTML/CSS] Pisanie po obrazku Opcje

[Xca]

Moja strona jest na tyle 'mała', że postanowiłem ją zapisać jako 1 obrazek bez tekstu, dodatkowo na wszelkie buttony (są 3) ustawiłem kordy, jednak jak piszę to treść nie chce wejść na obrazek.

Kod

body {
background-color : #ebebeb;
margin : 0;
padding : 0;
font-family: Verdana, Tahoma, Arial;
color: #161616;
text-align : center;
font-size : 11px;
}

img {
border-style: solid;
border-width: 0px;
}

h1 {
text-indent: 5px;
}

#calosc {
margin: 0 auto;
padding: 0 0 0 0;
position: relative;
width: 778px;
text-align: left;
margin-top: 10px;
z-index: 1;
}

#content {
width: 550px;
height: 5px;
z-index: 2;
}

Ustawiłem z-index; ale to się nie sprawdza. W Html wygląda to tak:

Kod

<div id="calosc">
        <img src='www.png'>
    <div id="content">
        tekst

Jak to zrobić poprawnie? Bo nie mam pomysłów.

[charlie-cherry]

Div z id 'content' musisz ustawić na position: absolute w css, a następnie ustawić współrzędne. Skoro jednak chcesz robić stronę na jednym obrazku, to radziłbym ci przerzucić cały obrazek do div 'calosc', ustawić go jako tło i wyłączyć jego powtarzanie. I już możesz pisać po obrazku (IMG:style_emoticons/default/smile.gif) . Buttony można wtedy albo ustawić jako same linki z ustawionym position: absolute (tyle, że trzeba koordynaty dopisać) lub jako wycięte z obrazka fragmenty (jeśli chcesz robić z nimi jakieś animacje lub akcje na 'hover).