+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [html]tekst na obrazku (/thread-html-tekst-na-obrazku)
[html]tekst na obrazku - bmaci3k - 06-11-2009
Witam.
Po pocięciu w PS szablonu w kodzie obrazki powklejane są takimi komendami.
standardowy html.
Kod:
<TD>
<IMG SRC="Obrazki/1_03.png" WIDTH=227 HEIGHT=73 ALT="">
</TD>RE: [html]tekst na obrazku - Kamil - 06-11-2009
<TD style="width: 227px; height: 73px; background: url(Obrazki/1_03.png) no-repeat; >
</TD>
Moja rada zacznij kodować od nowa ręcznie, nie sugeruj się PS'em będzie Ci łatwiej w późniejszej modyfikacji.
RE: [html]tekst na obrazku - Mateusz K. - 06-11-2009
Nie możesz ciąć szablonu w ten sposób... Przez photoshop wycinasz tylko obrazki (plasterki), bez kodu HTML.
Kod XHTML i CSS trzeba dopisać ręcznie, mając już pocięty layout. Obrazków używaj jako tło (w css), a tekst wpisujesz w XHTMLu, w odpowiednich DIVach...
Krok po kroku Ci tego tutaj nie opiszę, ale poszukaj kursów i tutoriali w Internecie...
RE: [html]tekst na obrazku - razorskate - 06-11-2009
Jest kilka rozwiązań tego problemu.
Pierwsza opcja:
1. Tworzysz nowy div, w którym będzie się znajdował obrazek, użyjmy klasy, jeśli będzie potrzeba użyć kilka razy "tekstu na obrazku" .
2. Dodajesz w CSS kilka komend formatujących tego diva, a więc:
Kod HTML:
Kod:
<div class="tekst_na_obrazku">
<p>Zamiast tego wpisujesz tekst, który ma się pojawić na obrazku. </p>
</div>Kod CSS:
Kod:
.tekst_na_obrazku {
background-image:url(tu podajesz ścieżkę do pliku); /* definicja tła */
}Możesz jeszcze przesuwać akapit, edytować kolor, a więc dodajesz jeszcze do styli np. :
Kod:
.tekst_na_obrazku p {
text-align:left; /* left / right / center do wyboru ;) */
color:red; /* kolor tekstu */
}Druga opcja:
kod HTML:
Kod:
<div style="border:1px solid black; position:relative; width:300px; height: 300px;">
<img src="ścieżka pliku do obrazka" alt="" />
<div style="position:absolute; bottom:0; right:0;">Tekst na obrazie</div>
</div>Oczywiście w przykładzie powyżej trzeba zedytować ścieżkę do pliku, oraz szerokość i wysokość, ewentualnie przesunąć diva z tekstem.
Taki mały offtop:
1. Pisz małymi literami, pora już zapomnieć o znacznikach pisanych wielkimi literami.
2. Strona oparta na tabelach jest stara, niewygodna i ogólnie przez większość uważana za blee
3. Pomogłem? daj reputa ;d
RE: [html]tekst na obrazku - Kamil - 06-11-2009
Cytat:2. Strona oparta na tabelach jest stara, niewygodna i ogólnie przez większość uważana za blee
Niewygodna? ...
Mało masz do czynienia z klientami
Tabelka jest bardzo często wykorzystywana w sklepach gdy klient np.: dodaje nietypowe zdjęcia przez WYSIWYG'a z panelu administracyjnego wtedy istnieje mniejsze prawdopodobieństwo że strona wysypie się w dużej mierze. Nie neguje wyższość div'ów nad tabelkami ponieważ jest 99,8% ona prawdą ale nie mogę się zgodzić że strona (przynajmniej część) oparta na tabelkach jest niewygodna.P.S: Nie zmienia to faktu że powinieneś (autor tematu) liznąć trochę (x)html i css'a.
RE: [html]tekst na obrazku - razorskate - 06-11-2009
Z tym niewygodna chodziło mi o stara, niemodna i w kieszeni niewygodna
. Wiem o co Ci chodzi, ale jeśli trzeba sporo poprawić później na takiej stronie w kodzie to życzę powodzenia ;] . Chyba, że bardzo sprawnie całość zmontowałeś, i połączyłeś stylami, ale sądzę, że to co jest wyżej nie należy do tego typu projektów ( przynajmniej na razie ;] ) . . . Czyli ucz się XHTML, CSS PHP i bądź fajny .Pozdrawiam.