Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Obrazek umieszczony na stonie i na nim napis z odsyłaczem
Forum PHP.pl > Forum > Przedszkole
ciapus4
Witam, umieszczam na stronie obrazek

  1. margin-left: 50px;" width="600" height="700" src="gfx/co nowego.png


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
Szymciosek
Coś takiego ? http://jsfiddle.net/Phder/
ciapus4
No, no tak i teraz, żebym mógł sobie dobierać pozycje textu, i widze, że tym parametrem top, left tzeba operować, tak ?
Szymciosek
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.
ciapus4
ten css gdzie zapakować na stronę z obrazkiem, czy nowy plik .css na serwerz ?
Szymciosek
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;
}
ciapus4
http://www.restauracjemaciek.pl/conowego.php

coś mi mie idzie jak umieścić tu ten napis np. wyśrodkowany słodka niespodzianka
Szymciosek
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.
ciapus4
Wstawiłem tak ... http://www.restauracjemaciek.pl/conowego.php i ?
Szymciosek
Do stylu są specjalne znaczniki, jeżeli chcesz umieścić styl bezpośrednio w html.

Kod
<style></style>
ciapus4
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 ?

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


tak wklejam kod na strone, pewnie coś, żle ;-((
Mackos
Ciapus zrób tak, w pliku ze stylami wstaw sobie coś takiego:
  1. .thumb a {
  2. display: block;
  3. position: relative;
  4. top: 235px;
  5. left: 80px;
  6. }


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
ciapus4
Jeszcze coś nie tak, już mnie krew zalewa ...
Mackos
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 wink.gif
http://pastebin.com/6RdRn8J4
ciapus4
No jesteś wielki, a jak bym chciał dodać jeszcze jeden napis, w innej pozycji ?
Mackos
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 {
ciapus4
  1. <div class="thumb">
  2. <a href="">coca-cola</a>
  3. <img src="gfx/co nowego.png" />
  4. </div>


zmieniam na coca cola i co w css-sie jeszcze zmieniam ?
Mackos
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>
ciapus4
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. thumbsdownsmileyanim.gif

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


http://www.restauracjemaciek.pl/conowego.php
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.