Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [html/css] "Niezaznaczalność" obrazka
koboos
post 16.04.2010, 20:05:35
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
krzysztof_kf
post 16.04.2010, 20:10:18
Post #2





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

Pokaż kod
Go to the top of the page
+Quote Post
pedro84
post 16.04.2010, 20:14:34
Post #3





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

Strzelam, poczytaj o z-index.


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
koboos
post 16.04.2010, 20:29:15
Post #4





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
pedro84
post 16.04.2010, 20:34:05
Post #5





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

Dobra, podaj URL. To po pierwsze.

Po drugie, to nie jest XHTML, a już tym bardziej Strict.


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
krzysztof_kf
post 16.04.2010, 20:38:03
Post #6





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

Dodaj do

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

Go to the top of the page
+Quote Post
koboos
post 16.04.2010, 20:40:16
Post #7





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

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

Link

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


Ten post edytował koboos 16.04.2010, 20:48:03
Go to the top of the page
+Quote Post
krzysztof_kf
post 16.04.2010, 20:42:14
Post #8





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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
Go to the top of the page
+Quote Post
koboos
post 16.04.2010, 20:48:21
Post #9





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

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

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...
Go to the top of the page
+Quote Post
krzysztof_kf
post 16.04.2010, 20:52:02
Post #10





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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



Ten post edytował krzysztof_kf 16.04.2010, 20:53:29
Go to the top of the page
+Quote Post
koboos
post 16.04.2010, 20:57:55
Post #11





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

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

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.
Go to the top of the page
+Quote Post
krzysztof_kf
post 16.04.2010, 21:00:04
Post #12





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

Jak na pierwszy raz nie jest najgorzej tak trzymaj smile.gif
Go to the top of the page
+Quote Post
koboos
post 16.04.2010, 21:02:04
Post #13





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

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

A co z tym xhtml strict?
Go to the top of the page
+Quote Post
krzysztof_kf
post 16.04.2010, 21:12:39
Post #14





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

Poczytaj

Kurs html
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 25.06.2025 - 04:00
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn