Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML]Obrazek umieszczony na stonie i na nim napis z odsyłaczem, odsyłacz jako link do podstrony
ciapus4
post
Post #1





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

Witam, umieszczam na stronie obrazek

[HTML] pobierz, plaintext 
  1. margin-left: 50px;" width="600" height="700" src="gfx/co nowego.png
[HTML] pobierz, plaintext


i teraz na tym obrazku chce umieścić napis "słodka niespodzianka", klikając na ten napis odsyła nas na podstronę, odsyłacz to nie problem tylko, jak wypozycjonować napis na obrazku, który będzie np. tłem dla napisu.


pozdrawiam
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 18)
Szymciosek
post
Post #2





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

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

Coś takiego ? http://jsfiddle.net/Phder/
Go to the top of the page
+Quote Post
ciapus4
post
Post #3





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

No, no tak i teraz, żebym mógł sobie dobierać pozycje textu, i widze, że tym parametrem top, left tzeba operować, tak ?
Go to the top of the page
+Quote Post
Szymciosek
post
Post #4





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

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

Jeżeli chodzi o sam html/css, to tak.
Nie jestem aż tak obeznany w css, ale za pomocą js bez problemu mógłbyś "zmierzyć" wymiary zdjęcia, "zmierzyć" wymiary tekst i na tej podstawie ustawić automatycznie tekst na środku każdego zdjęcia bez względu na jego rozmiar.
Go to the top of the page
+Quote Post
ciapus4
post
Post #5





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

ten css gdzie zapakować na stronę z obrazkiem, czy nowy plik .css na serwerz ?
Go to the top of the page
+Quote Post
Szymciosek
post
Post #6





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

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

index.html
Kod
<html>
<head>
...
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="thumb">
    <a href="#test">Słodka niespodzianka</a>
    <img src="http://eoimages.gsfc.nasa.gov/images/imagerecords/4000/4882/AS11-44-6548_lrg.jpg" />
</div>
</body>
</html>


style.css
Kod
.thumb a {
    position: absolute;
    color: yellow;
    top: 150px;
    left: 150px;
}

.thumb img {
    color: yellow;
}
Go to the top of the page
+Quote Post
ciapus4
post
Post #7





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

http://www.restauracjemaciek.pl/conowego.php

coś mi mie idzie jak umieścić tu ten napis np. wyśrodkowany słodka niespodzianka
Go to the top of the page
+Quote Post
Szymciosek
post
Post #8





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

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

Trochę bałagan masz w tym kodzie, część jest osobno w pliku css, a druga część jest w kodzie html czyli <div style="...">

Ja Ci podałem w sumie kod jak na tacy.
Tylko dodać i zmienić u siebie.
Sprawdź najpierw na czysto jak to działa. Przyjrzyj się uważnie temu jak i gdzie umieszczony jest obrazek i tekst.
Go to the top of the page
+Quote Post
ciapus4
post
Post #9





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

Wstawiłem tak ... http://www.restauracjemaciek.pl/conowego.php i ?
Go to the top of the page
+Quote Post
Szymciosek
post
Post #10





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

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

Do stylu są specjalne znaczniki, jeżeli chcesz umieścić styl bezpośrednio w html.

Kod
<style></style>
Go to the top of the page
+Quote Post
ciapus4
post
Post #11





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

Nie wiem, chyba jestem tępy możesz napisać jasniej gdzie wstawić te style, żeby wszystko się zsynchronizowało i dziłało tak jak należy ?

[HTML] pobierz, plaintext 
  1. <? require_once('tpl_header.php'); ?>
  2. <link rel="stylesheet" href="style.css" />
  3. </head>
  4. <body>
  5.  
  6.  
  7. .thumb a {
  8.     position: absolute;
  9.     color: yellow;
  10.     top: 150px;
  11.     left: 250px;
  12. }
  13.  
  14. .thumb img {
  15.     color: yellow;
  16. }
  17.  
  18. <div class="thumb">
  19.     <a href="">Słodka niespodzianka</a>
  20.     <img src="gfx/co nowego.png" />
  21. </div>
  22.  
  23.  
  24.  
  25.  
  26. <? require_once('tpl_footer.php'); ?>
[HTML] pobierz, plaintext


tak wklejam kod na strone, pewnie coś, żle ;-((

Ten post edytował ciapus4 2.05.2013, 23:17:25
Go to the top of the page
+Quote Post
Mackos
post
Post #12





Grupa: Zarejestrowani
Postów: 362
Pomógł: 44
Dołączył: 10.06.2009

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

Ciapus zrób tak, w pliku ze stylami wstaw sobie coś takiego:
[HTML] pobierz, plaintext 
  1. .thumb a {
  2. display: block; 
  3. position: relative;  
  4. top: 235px; 
  5. left: 80px;
  6. }
[HTML] pobierz, plaintext


I odległościami operujesz z tym top i left.

@edit:
Wkleiłeś źle.
Usuń to co tutaj:
Cytat
<link rel="stylesheet" href="style.css" />
</head>
<body>


.thumb a {
position: absolute;
color: yellow;
top: 150px;
left: 250px;
}

.thumb img {
color: yellow;
}

Bo to jest jakiś bałagan.
A to co Ci podałem powyżej wklej do pliku maciek.css

Ten post edytował Mackos 2.05.2013, 23:21:56
Go to the top of the page
+Quote Post
ciapus4
post
Post #13





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

Jeszcze coś nie tak, już mnie krew zalewa ...
Go to the top of the page
+Quote Post
Mackos
post
Post #14





Grupa: Zarejestrowani
Postów: 362
Pomógł: 44
Dołączył: 10.06.2009

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

Ciapus, bez nerwów - bo to błędne koło.
Po prostu źle wkleiłeś - zapomniałeś zamknąć jedną klamrę w pliku css.
Tutaj wrzucam na pastebina pełny kod twojego maciek.css skopiuj go sobie (IMG:style_emoticons/default/wink.gif)
http://pastebin.com/6RdRn8J4
Go to the top of the page
+Quote Post
ciapus4
post
Post #15





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

No jesteś wielki, a jak bym chciał dodać jeszcze jeden napis, w innej pozycji ?
Go to the top of the page
+Quote Post
Mackos
post
Post #16





Grupa: Zarejestrowani
Postów: 362
Pomógł: 44
Dołączył: 10.06.2009

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

No to analogicznie, jeśli ma to być link dodajesz linka w divie z klasą thumb, a jeśli to ma być tekst to wstaw go w jakiś znacznik np. <span>
i w pliku maciek.css daj:
Kod
.thumb span {


Ten post edytował Mackos 2.05.2013, 23:47:11
Go to the top of the page
+Quote Post
ciapus4
post
Post #17





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

[HTML] pobierz, plaintext 
  1. <div class="thumb">
  2.     <a href="">coca-cola</a>
  3.     <img src="gfx/co nowego.png" />
  4. </div>
[HTML] pobierz, plaintext


zmieniam na coca cola i co w css-sie jeszcze zmieniam ?
Go to the top of the page
+Quote Post
Mackos
post
Post #18





Grupa: Zarejestrowani
Postów: 362
Pomógł: 44
Dołączył: 10.06.2009

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

Nie, jak tak zmienisz, to finał - nic więcej nie musisz.
Ja pisałem o sytuacji jakbyś chciał zrobić np. tak:
Kod
<div class="thumb">
    <a href="">coca-cola</a>
    <span>Zapraszamy do nas!</span>
    <img src="gfx/co nowego.png" />
</div>
Go to the top of the page
+Quote Post
ciapus4
post
Post #19





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

To może tak wyjasnie np. na tym tle .obrazka chce dodac np.3 słowa

- słodka niespodzianka
- coca cola
- paczek

po najechaniu kursorem odsyłacz do podstrony

, ale tylko interesuje mnie jak pisałem pozycja tych trzech słów.

Witam, jak zrobić, żeby napisy początkowe były białe teraz są fioletowe jak dam parametr font color - white to są białe, ale po najechaniu kursorem nie zmieniają się na czerwone w css - sie mam atrybut white ale to nie działa. (IMG:style_emoticons/default/thumbsdownsmileyanim.gif) 

[PHP] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. a:link {
  4.         color: white
  5. }
  6. a:hover {
  7.         color: red
  8.  
  9. </style>
[PHP] pobierz, plaintext


http://www.restauracjemaciek.pl/conowego.php

Ten post edytował ciapus4 3.05.2013, 16:47:16
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 22.08.2025 - 17:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn