Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML/CSS] Pisanie po obrazku
Xca
post 31.01.2011, 11:31:13
Post #1





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 19.02.2010

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
charlie-cherry
post 31.01.2011, 11:54:59
Post #2





Grupa: Zarejestrowani
Postów: 93
Pomógł: 5
Dołączył: 15.12.2007

Ostrzeżenie: (0%)
-----

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 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).
Go to the top of the page
+Quote Post
Xca
post 31.01.2011, 12:34:31
Post #3





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 19.02.2010

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
charlie-cherry
post 31.01.2011, 12:47:44
Post #4





Grupa: Zarejestrowani
Postów: 93
Pomógł: 5
Dołączył: 15.12.2007

Ostrzeżenie: (0%)
-----

Spróbuj:

[HTML] pobierz, plaintext 
  1. 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 
  1. background: transparent url('www.png') repeat;
[HTML] pobierz, plaintext

Go to the top of the page
+Quote Post
Xca
post 31.01.2011, 12:55:59
Post #5





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 19.02.2010

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
charlie-cherry
post 31.01.2011, 13:28:59
Post #6





Grupa: Zarejestrowani
Postów: 93
Pomógł: 5
Dołączył: 15.12.2007

Ostrzeżenie: (0%)
-----

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 
  1. <div id="calosc">
  2.     <div id="content">
  3.         tekst
  4. </div>
  5. </div>
[HTML] pobierz, plaintext


Skoro tłem jest duży obrazek, to w 'calosc' ustawiłbym też height równy wysokości obrazka.
Go to the top of the page
+Quote Post
Xca
post 31.01.2011, 14:02:13
Post #7





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 19.02.2010

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
charlie-cherry
post 31.01.2011, 14:06:26
Post #8





Grupa: Zarejestrowani
Postów: 93
Pomógł: 5
Dołączył: 15.12.2007

Ostrzeżenie: (0%)
-----

Wklej cały kod.
Go to the top of the page
+Quote Post
Xca
post 31.01.2011, 14:31:10
Post #9





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 19.02.2010

Ostrzeżenie: (0%)
-----

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>
Go to the top of the page
+Quote Post
charlie-cherry
post 31.01.2011, 15:57:46
Post #10





Grupa: Zarejestrowani
Postów: 93
Pomógł: 5
Dołączył: 15.12.2007

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
Xca
post 31.01.2011, 16:27:14
Post #11





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 19.02.2010

Ostrzeżenie: (0%)
-----

Dokładnie tak, pojawia się pod lub obok obrazka.
Go to the top of the page
+Quote Post
charlie-cherry
post 1.02.2011, 12:09:59
Post #12





Grupa: Zarejestrowani
Postów: 93
Pomógł: 5
Dołączył: 15.12.2007

Ostrzeżenie: (0%)
-----

A dopisz do contentu

[HTML] pobierz, plaintext 
  1. position:absolute;
  2. left:0px;
  3. top:0px;
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.04.2025 - 05:33
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn