Forum PHP.pl > [HTML/CSS] Pisanie po obrazku

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML/CSS] Pisanie po obrazku

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Xca

31.01.2011, 11:31:13

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

31.01.2011, 11:54:59

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

. 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).

Xca

31.01.2011, 12:34:31

Teraz nie rozumiem dlaczego, ale wgl. obrazek się nie wczytuje:

Kod

#calosc {
background: transparent url(img/www.png) repeat;
margin: 0 auto;
padding: 0 0 0 0;
position: relative;
width: 778px;
text-align: left;
margin-top: 10px;
z-index: 1;
}

I nie rozumiem czemu, przecież wszystko jest dobrze?

charlie-cherry

31.01.2011, 12:47:44

Spróbuj:

[HTML] pobierz, plaintext 
background: transparent url('img/www.png') repeat;
[HTML] pobierz, plaintext

Ale wpierw sprawdź czy obrazek www.png faktycznie znajduje się w katalogu 'img'. Wydaje mi się, żę masz go w katalogu głównym (bo tak miałeś we wcześniejszej wersji kodu), więc może chodzi ci o to:

[HTML] pobierz, plaintext 
background: transparent url('www.png') repeat;
[HTML] pobierz, plaintext

Xca

31.01.2011, 12:55:59

Dziwne nie działa, przeniosłem do folderu img i oczywiście mam tak:

Kod

background: transparent url('img/www.png') repeat;

I nie łapie, w HTML wygląda to tak:

Kod

<div id="calosc">
<div id="content">
tekst

Nie rozumiem co robię źle.

charlie-cherry

31.01.2011, 13:28:59

Upewnij się wszystko się zgadza co do literki: zarówno kod, jak i nazwa pliku i jego lokacja (wszystko pisane małymi literami!).

Wklej też cały kod html, bo nie jestem pewien czy zakończyłeś div, o tak:

[HTML] pobierz, plaintext 
<div id="calosc">
    <div id="content">
        tekst
</div>
</div>
[HTML] pobierz, plaintext

Skoro tłem jest duży obrazek, to w 'calosc' ustawiłbym też height równy wysokości obrazka.

Xca

31.01.2011, 14:02:13

Dobra, ta kwestia zadziałała - faktycznie problem leżał po stronie height
Jednak dalej nie mogę pisać po obrazku, tzn. ustawiam tekst, ale nie może wejść na obrazek.

charlie-cherry

31.01.2011, 14:06:26

Wklej cały kod.

Xca

31.01.2011, 14:31:10

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 {
background: transparent url('img/www.png') repeat;
margin: 0 auto;
padding: 0 0 0 0;
position: relative;
width: 778px;
height: 390px;
text-align: left;
margin-top: 10px;
z-index: 2;
}

#content {
width: 700px;
height: 150px;
z-index: 1;
}

Kod

<?xml version='1.0' encoding='ISO-8859-2'?>
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>

<html>
<head>

<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-2'>
<meta name='Description' content=''>
<meta name='Keywords' content=''>
<meta http-equiv='Content-Language' content='pl'>
<meta name='Author' content=''>
<link rel='stylesheet' href='style.css' type='text/css'>
<title></title>

</head>
<body>

<div id="calosc">
    <div id="content">
        tekst
    </div>
    </div>

</body>
</html>

charlie-cherry

31.01.2011, 15:57:46

U mnie twój kod działa, tzn. powinien zadziałać o ile jest taki, jaki podałeś. Napisałeś, że "tekst nie może wejść na obrazek" - to znaczy że pojawia się gdzieś obok lub nad obrazkiem?

Xca

31.01.2011, 16:27:14

Dokładnie tak, pojawia się pod lub obok obrazka.

charlie-cherry

1.02.2011, 12:09:59

A dopisz do contentu

[HTML] pobierz, plaintext 
position:absolute;
left:0px;
top:0px;
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.