Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Polożenie przycisku like
Forum PHP.pl > Forum > Przedszkole
Lethys
23.05.2011, 18:36:59
Witam,

Mam problem z css, nie wiem jak zmienic polozenie przycisku like.


Chciałbym aby przycisk byl w tym miejscu:



Kod headera wyglada w ten sposób:

[PHP] pobierz, plaintext 
  1. <body>
  2. 		<div id="header-wrap">
  3. 			<div id="header">
  4. //Gdy tutaj wstawiam kod przycisku, pojawia się nad logiem tym samym przesuwając logo.
  5. 				<h1 title="<?php echo $config['Site']['title'] ?>"><a href=""><?php echo $config['Site']['title'] ?></a></h1>
  6. 			</div>
  7. 			<div id="menu-wrap">
  8. 				<div id="menu">
  9. 					<ul class="left">
[PHP] pobierz, plaintext


Kod css:

[PHP] pobierz, plaintext 
  1. #header-wrap {
  2. 	height: 110px;
  3. 	background: url('../img/001.png') repeat-x #203953;
  4. 	-mox-box-shadow: 1px 1px 10px #000;
  5. 	-webkit-box-shadow: 1px 1px 10px #000;
  6. 	box-shadow: 1px 1px 10px #000;
  7. }
  8. #header {
  9. 	height: 64px;
  10. 	width: 980px;
  11. 	margin: 0 auto;
  12. }
  13. #header h1 {
  14. 	margin: 0;
  15. }
  16.  
  17. #header h1, #header h1 a {
  18. 	width: 316px;
  19. 	height: 64px;
  20. }
  21. #header h1 a {
  22. 	display: block;
  23. 	text-indent: -99999px;
  24. 	background: url('../img/logo.png') no-repeat;
  25. }
  26. #menu-wrap {
  27. 	background: #000;
  28. 	height: 46px;
  29. 	border-bottom: 1px solid #1F1F1F;
  30. }
  31. #menu {
  32. 	width: 980px;
  33. 	height: 46px;
  34. 	margin: 0 auto;
  35. }
  36. #menu ul {
  37. 	height: 46px;
  38. 	font-size: 1.1em;
  39. 	font-weight: bold;
  40. }
  41. #menu ul li {
  42. 	float: left;
  43. 	margin: 9px 0;
  44. 	padding: 8px 12px;
  45. 	border-left: 1px solid #1F1F1F;
  46. }
  47. #menu ul li:empty {
  48. 	padding: 0;
  49. 	height: 28px;
  50. }
  51. #menu ul li a {
  52. 	color: #B4B3B3;
  53. }
  54. #menu ul li a:hover {
  55. 	color: #fff;
  56.  
  57. }
  58. #menu ul li a:hover .facebook {
  59. 	color: #4C6CAD
  60. }
[PHP] pobierz, plaintext



Jak zrobić diva aby zajmował pozycje zaraz po logo, tak jak na zdjęciu? Chcę tutaj umieścić przycisk Lubie to.
muniekw
23.05.2011, 22:41:41
Możesz zrobić np tak:
[HTML] pobierz, plaintext 
  1.  
  2. <div id="header">
  3.   <div class="logo"></div>
  4.   <div class="like"></div>
  5. </div>
[HTML] pobierz, plaintext


i css ( należy dostosować do własnych potrzeb smile.gif )
[HTML] pobierz, plaintext 
  1. #header {
  2.   height: 64px;
  3.   width: 980px;
  4.   margin: 0 auto;
  5. }
  6.  
  7. .logo {
  8.   width: 120px;
  9.   height: 60px;
  10.   border: 1px red solid;
  11.   float: left;
  12. }
  13.  
  14. .like {
  15.   width: 120px;
  16.   height: 60px; 
  17.   border: 1px blue solid;
  18.   float: left;
  19. }
[HTML] pobierz, plaintext


Zawsze możesz zastosować pozycjonowanie absolutne elementów.
Lethys
24.05.2011, 09:49:11
Ok, dzieki tongue.gif działa ale mam jeszcze jeden problem.

Jak mogę przesunąć button trochę w dół? Css mam tak jak w kodzie munieka

Wygląda to tak: durnowato.pl

Chciałbym aby button był na poziomie loga
muniekw
24.05.2011, 10:23:48
Jak masz iframa w divie "like" to w iframie w tam gdzie masz style dodaj:
[HTML] pobierz, plaintext 
  1. top:25px; position:absolute;
[HTML] pobierz, plaintext
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.