Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html/css] "Niezaznaczalność" obrazka
Forum PHP.pl > Forum > Po stronie przeglądarki
koboos
16.04.2010, 20:05:35
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?
krzysztof_kf
16.04.2010, 20:10:18
Pokaż kod
pedro84
16.04.2010, 20:14:34
Strzelam, poczytaj o z-index.
koboos
16.04.2010, 20:29:15 
[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
pedro84
16.04.2010, 20:34:05
Dobra, podaj URL. To po pierwsze.

Po drugie, to nie jest XHTML, a już tym bardziej Strict.
krzysztof_kf
16.04.2010, 20:38:03
Dodaj do

[CSS] pobierz, plaintext 
  1. #box_content { 
  2. position: relative;
[CSS] pobierz, plaintext

koboos
16.04.2010, 20:40:16
Link

Czyli co to jest? To mi dreamweaver automatycznie wstawil wiec nie bardzo wiem na co zmienic. Html Strict? Transitional?
krzysztof_kf
16.04.2010, 20:42:14
Cytat(koboos @ 16.04.2010, 21:40:16 ) *
Link

Czyli co to jest? To mi dreamweaver automatycznie wstawil wiec nie bardzo wiem na co zmienic. Html Strict? Transitional?



Przeczytaj mój post wyżej i masz rozwiązanie biggrin.gif
koboos
16.04.2010, 20:48:21
Position:relative zadziałał, ale tekst wychodzi nad obrazek. Mały szczegół, ale jeśli można to jakoś naprawić to by było ekstra. Z-index nie daje rady...
krzysztof_kf
16.04.2010, 20:52:02
A jak sobie inaczej wyobrazasz nie możesz dać paddingu dla zawartości tego boxa ? np dla 

[CSS] pobierz, plaintext 
  1. #box_content {
  2. padding: 0 0 0 15px;
[CSS] pobierz, plaintext

koboos
16.04.2010, 20:57:55
Mogę. Więc jeśli nie da się tego obejść to niech tak zostanie, ewentualnie jak mi bedzie przeszkadzalo to dodam padding.

Na razie dzieki za szybka pomoc.

BTW. Macie moze jakies zastrzezenia co do kodu? Jest to moja pierwsza strona na bazie css, wiec moglem zrobic jakies bledy.
krzysztof_kf
16.04.2010, 21:00:04
Jak na pierwszy raz nie jest najgorzej tak trzymaj smile.gif
koboos
16.04.2010, 21:02:04
A co z tym xhtml strict?
krzysztof_kf
16.04.2010, 21:12:39
Poczytaj

Kurs html
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.