Podstrony
- telcocafe
- [PHP+MySQL] Problem z połączeniem mysqli('localhost', 'xxx', 'xxx', 'xxx'
- [php] Dodanie textu do pliku. Problem... :) POMOCY!!!!!!!!!!!!!
- Problem ze zgrywaniem z kamery Problem ze zgrywaniem z kamery
- [JS] Problem ze skryptem pobierającym źródło strony skrypt pobierający źródło strony
- Głupi problem HELP !!!
- [JS, jQuery] Problem z przejściem z JS na jQuery
- [domena] Problem z domeną
- Problem z O/C - Barton 2800+ AMD Athlon XP 2800+ Barton
- [mysql/php]'problem z identyfikatorami [mysql/php]
- [php/mysql]problem z wyświetleniem danych [php/mysql]
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- szkoleniahr.opx.pl
telcocafe
Witam wszystkich po długiej nieobecności. Mam dwa pytania, lecz najpierw przedstawie wam kod:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>WebDesigner Portfolio</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta name="description" content="WebDesigner Portfolio" /> <style type="text/css"> body{text-align:center;} #glowny{margin: 0 auto; width:472px;} #botom1{background-image: url(images/1.gif); width:307px; height:80px; float:left;} #botom2{background-image: url(images/3.gif); width:165px; height:80px; float:right;} #przycisk1{width:134px; height:78px; float:left; padding-top:8px;} </style> </head> <body> <div id="glowny"> <div id="botom1"></div><div id="botom2"></div> <div id="przycisk1"><a href="index.html"><img src="images/4.gif" onmouseover="this.src='images/5.gif'" onmouseout="this.src='images/4.gif'" border="0" /></a></div> </div> </body> </html>
Pierwsze pytanie: jak ustawić kilka divów aby leżały obok siebie, a nie jeden pod drugim. Użyłem float, ale nie jestem pewien czy dobrze zrobiłem
ponieważ kiedy mam trzy (lub więcej) divów to nie da się zrobić tego w ten sposób.
Po drugie: jak widzicie jest tam kod na zmiane obrazka po najechaniu na niego kursorem. Są to dwa obrazki bez tekstu o dwóch różnych kolorach. Co zrobić, aby można było na nich pisać?
Wszystkim divom daj float: left i je wstaw w kod w takiej kolejności jaką chcesz; aby przejść niżej wstaw dowolny element z clear:both;
Zamiast zmieniać obrazki javascriptem zastosuj atrybut hover w css;
Aby pisać po obrazku - zamiast <img...> wstaw np.
<div id="obrazek"></div> oraz #obrazek { background: url(costam1.png); } #obrazek:hover { background: url(costam2.png); }
Voila ;) tekst wstawiasz normalnie i masz o wiele lepszą zmianę obrazka.
Użytkownik Einzeinbleth edytował ten post 01 marzec 2008, 22:07
Co do float to działa i dzięki, ale z tą zmianą obrazka to niebardzo. Gdy tak robie i kursor znajduje się nad obrazkiem nic się nie dzieje.
#przycisk1{background: url(images/4.gif); width:134px; height:78px;} #przycisk1:hover{background: url(images/5.gif); width:134px; height:78px;} <div id="przycisk1">link</div>
Faktycznie, na IE to nie działa (działa na operze/ff). Można to jednak ominąć zastępując diva zwykłym <a> mniej więcej tak:
<a href="#" id="przycisk1">link</a>
Dobrze też dopisać display:block; do tego #przycisk1.
Głupi IE obsługuje :hover wyłącznie dla odnośników...
Wszystko fajnie dopóki nie wpiszę display:block; aby obrazki miały normalny rozmiar. IE to czyta, ale opera/ff nie i wtedy wogóle nie widać obrazków.
Użytkownik ini edytował ten post 02 marzec 2008, 12:42
Witam wszystkich po długiej nieobecności. Mam dwa pytania, lecz najpierw przedstawie wam kod:
Pierwsze pytanie: jak ustawić kilka divów aby leżały obok siebie, a nie jeden pod drugim. Użyłem float, ale nie jestem pewien czy dobrze zrobiłem
ponieważ kiedy mam trzy (lub więcej) divów to nie da się zrobić tego w ten sposób.
Po drugie: jak widzicie jest tam kod na zmiane obrazka po najechaniu na niego kursorem. Są to dwa obrazki bez tekstu o dwóch różnych kolorach. Co zrobić, aby można było na nich pisać?
*.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>WebDesigner Portfolio</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <link rel="stylesheet" type="text/css" href="images/style.css" /> <meta name="description" content="WebDesigner Portfolio" /> </head> <body> <div id="glowny"> <div id="botom1"> <div class="zawartosc">pierwszy</div> </div> <div id="botom2"> <div class="zawartosc">drugi</div> </div> <div id="przycisk1"> <div class="zawartosc">Przycisk<a href="index.html" class="obrazeka" onmouseover="this.className='obrazekb'" onmouseout="this.className='obrazeka'" />tekst</a></div> </div> </div> </body> </html>
/* CSS Document images/style.css */ body{text-align:left;} #glowny{ margin: 0 auto; /* wysrodkowanie elementu div */ width:800px; /* ust. szerokość */ } #botom1{ background: #cc9933 url(images/1.png); /*ust. kolor bo może np. brakować obrazka */ width:300px; /* (minus) - border jeśli dajesz */ height:80px; float:left; } #botom1 .zawartosc { padding: 10px; } #botom2{ background: #dd9933 url(images/2.png); width:300px; height:80px; float:left; } #botom2 .zawartosc { padding: 20px; } #przycisk1{ background: #ee9933 url(images/3.png); width:200px; height:80px; float:left; } #przycisk1 .zawartosc { padding: 1px; } .obrazeka { background: #0000FF url(2.png); } .obrazekb { background: #990000 url(3.png); }