Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [html/css] "Niezaznaczalność" obrazka
koboos
post
Post #1





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 30.03.2010

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

Witam.
Posiadam część jednego div'a pod drugim. W tym z przodu jest obrazek z częścią przezroczystą, która nachodzi na div pod spodem, w którym jest tekst.
Problem polega na tym, że gdy chcę zaznaczyć ten tekst lub najechać na hiperłącze zaznacza mi się ten obrazek albo hiperłącze się nie podświetla.
Własnie wpadłem na pomysł, żeby dać tło div'a zamiast tego obrazka, ale na obrazku mam mapę linków i wolałbym ją sobie zostawić.

Czy jest jakiś inny sposób na to aby ten obrazek się nie zaznaczał, będąc przed tekstem?

Ten post edytował koboos 16.04.2010, 20:06:40
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
koboos
post
Post #2





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 30.03.2010

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

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Dokument bez tytułu</title>
  6. <link href="layout.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="wrapper">
  11. <!-- UpHead -->
  12. 	<div id="uphead"></div>
  13.  
  14. <!-- Content -->
  15. 	<div id="content">
  16.  
  17. <!-- Left -->
  18. 		<div id="left">
  19. 			<img src="img/card_1_alt.png" usemap="#map" border="0">
  20. 			   <map name="map">
  21. 				<area shape="poly" coords="37,226,271,148,287,197,53,276" href="index.html">
  22. 				<area shape="poly" coords="290,155,302,185,439,139,431,122,407,130,402,116" href="kontakt.html">
  23. 			</map>
  24. 		</div>
  25.  
  26. <!-- Right -->
  27. 		<div id="right">
  28. 			<div id="menu">
  29. 				<ul>
  30. 						 <li><a href="firma.html" class="active">firma</a></li>
  31. 						 <li><a href="uslugi.html">usługi</a></li>
  32. 						 <li><a href="adres.html">adres</a></li>
  33. 						 <li><a href="kontakt.html">kontakt</a></li>
  34. 					</ul>
  35. 			   </div>
  36. 			<div id="box">
  37. 				<div id="box_top"></div>
  38. 				<div id="box_middle">
  39. 					<div id="box_right">
  40. 						 	<div id="box_center">
  41. 						 		<div id="box_content"><p><a href="">link link link</a></p></div>
  42. 						 	</div>
  43. 					</div>
  44. 				</div>
  45. 					<div id="box_bottom"></div>
  46. 			</div>
  47. 		</div>
  48. 	</div>
  49.  
  50. <!-- Footer -->
  51. 	<div id="footer"></div>
  52. </div>
  53. </body>
  54. </html>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body { background: url(img/background.png) repeat; line-height:16px; font-size:13px; font-family:Verdana; color:#FFF;}
  4. body a { color:#fff; text-decoration:underline;}
  5. body a:hover { color:#363b3b;}
  6. #wrapper { width:780px;	margin:0 auto;}
  7. #uphead { float:left; width:780px; height:0px;}
  8. #content { float:left; width:780px;}
  9. #footer { float:left; width: 780px; height:0px;}
  10.  
  11. #left { width:493px; height:380px; position:absolute;}
  12. #right { float:right; width:439px; min-height:513px;}
  13.  
  14. 	/* MENU */
  15. 	#menu { float:right; width:268px; height:31px; margin: 225px 22px 0 0;}
  16. 	#menu ul{ width:268px; margin:0 auto; list-style:none; padding:0; text-align:center;}
  17. 	#menu ul li{ display:inline}
  18. 	#menu ul a { display:block; float:left; background:url(img/buttons.png) -7px 3px no-repeat; width:67px; height:31px; padding-top:3px;
  19. 			   line-height:43px; font-size:12px; text-align:center; text-decoration:none; color:#363b3b;}
  20. 	#menu ul a:hover { background:url(img/buttons.png) -7px -31px no-repeat; color:#d7d7d7;}
  21. 	#menu ul a.active { background:url(img/buttons.png) -7px -65px no-repeat; color:#fff; font-weight:bold;}
  22. 	#menu ul a.active:hover { background:url(img/buttons.png) -7px -65px no-repeat; color:#fff;}
  23. 	/* MENU */
  24.  
  25. #box { margin-top:230px; right:0px; width:439px; min-height: 260px;}
  26. #box_top { height:38px; background: url(img/card_2_belts.png);}
  27. #box_middle { min-height:230px; background:url(img/card_2_left.png) repeat-y;}
  28. #box_bottom { height:18px; background: url(img/card_2_belts.png) 0px -38px;}
  29.  
  30. #box_right { width:100%; min-height:230px; background: url(img/card_2_right.png) right repeat-y;}
  31. #box_center { overflow:hidden; margin-left:7px; min-height:230px; width:422px; background:#76a901 url(img/card_2_bg.png) repeat-x;}
  32. #box_content { margin:3px 22px 8px 22px;}
  33.  
  34. p { margin:0px; }
  35. p.title { font-weight:bold; }
  36. p.underline { text-decoration:underline;}
  37. p ul, li { list-style:disc outside;}
  38. p.footer { font-size:9px; color:#8dca03;  padding-left:160px;}
  39. p.footer a { text-decoration:none; font-weight:bold; color:#8dca03;}
  40. p.seemap { font-style:italic; text-decoration:underline; margin-top:5px;}
  41.  
  42. .contact_left { float:left; width:35%; }
  43. .contact_right { float:left; width:65%; }
  44. .contact_left_mail { float:left; width:30%; padding-left:5%;}
  45. .contact_button { float:right; }
  46.  
  47. #adress_left {float:left; width:50%; margin-left:5%;}
  48. #adress_right {float:left; width:45%;}
  49.  
  50. input.text { border: 1px solid #646262; background:#fff; color:#646262; width:100%; font-family:Verdana; font-size:12px;}
  51. input.text:focus { border: 1px solid #646262; background:#e8e8e8;}
  52. textarea.area { border: 1px solid #646262; background:#fff; color:#646262; width:100%; font-family:Verdana; font-size:12px;}
  53. textarea.area:focus { border: 1px solid #646262; background:#e8e8e8;}
[CSS] pobierz, plaintext


Ten post edytował koboos 16.04.2010, 20:47:30
Go to the top of the page
+Quote Post

Posty w temacie
- koboos   [html/css] "Niezaznaczalność" obrazka   16.04.2010, 20:05:35
- - krzysztof_kf   Pokaż kod   16.04.2010, 20:10:18
- - pedro84   Strzelam, poczytaj o z-index.   16.04.2010, 20:14:34
- - koboos   [HTML] pobierz, plaintext <!DOCTYPE html PUBLIC...   16.04.2010, 20:29:15
- - pedro84   Dobra, podaj URL. To po pierwsze. Po drugie, to ...   16.04.2010, 20:34:05
- - krzysztof_kf   Dodaj do [CSS] pobierz, plaintext #box_content ...   16.04.2010, 20:38:03
- - koboos   Link Czyli co to jest? To mi dreamweaver automaty...   16.04.2010, 20:40:16
- - krzysztof_kf   Cytat(koboos @ 16.04.2010, 21:40:16 )...   16.04.2010, 20:42:14
- - koboos   Position:relative zadziałał, ale tekst wychodzi na...   16.04.2010, 20:48:21
- - krzysztof_kf   A jak sobie inaczej wyobrazasz nie możesz dać padd...   16.04.2010, 20:52:02
- - koboos   Mogę. Więc jeśli nie da się tego obejść to niech t...   16.04.2010, 20:57:55
- - krzysztof_kf   Jak na pierwszy raz nie jest najgorzej tak trzymaj   16.04.2010, 21:00:04
- - koboos   A co z tym xhtml strict?   16.04.2010, 21:02:04
- - krzysztof_kf   Poczytaj Kurs html   16.04.2010, 21:12:39

« Następny starszy · Po stronie przeglądarki · 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 · Przełącz na: Linearny+ · Drzewo

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

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