Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak rozciąć naglowek + hiperłącza
Forum PHP.pl > Forum > Po stronie przeglądarki
Pawel.Dabrowski
23.02.2014, 12:14:39
Witam
Tworzę nową stronę hufca ZHP w WordPressie (szablon html przystosowany pod wordpressa)

Niestety w wymogach stron jest:

Cytat
Hufce:
2.1 WYMAGANE:
• Pełna nazwę organizacji - "Związek Harcerstwa Polskiego" lub jej skrót literowy "ZHP" (pełna nazwa widoczna przynajmniej na stronie głównej)
• Pełna nazwa jednostki wraz z przydziałem do jednostki nadrzędnej
• Miejsce działania, miasto, gmina
• Logo ZHP oraz aktywny odnośnik do strony głównej ZHP


Niestety, ja mam logo w headerze strony, a header jest zdefiniowany w style.css

1. Jak rozciąć na 3 części header, w taki sposób żeby każda z nich była odnośnikiem do innej strony (strona glowna zhp, strona choragwi i strona glowna hufca)
2. Poniżej ilustruję to, co chcę dokonać oraz podaję kod css oraz kod naglowka strony.



[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <div id="fb-root"></div>
  4. <script>(function(d, s, id) {
  5.   var js, fjs = d.getElementsByTagName(s)[0];
  6.   if (d.getElementById(id)) return;
  7.   js = d.createElement(s); js.id = id;
  8.   js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1";
  9.   fjs.parentNode.insertBefore(js, fjs);
  10. }(document, 'script', 'facebook-jssdk'));</script>
  11.  
  12. <div id="templatemo_header_wrapper">
  13.  
  14. 	<div id="templatemo_header">
  15.  
  16.  
  17.     	<div class="cleaner"></div>
  18.     </div> <!-- end of templatemo_header -->
  19.  
  20. </div>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. /*
  2. Theme Name: Hufiec ZHP Kolno
  3. Theme URI: <a href="http://kolno.zhp.pl" target="_blank">http://kolno.zhp.pl</a>
  4. Zwiazek Harcerstwa Polskiego, Ch. Bialostocka, H. Kolno
  5. Author: Pawel Dabrowski & Free CSS Templates
  6. Author URI: <a href="http://pdabrowski.art.pol" target="_blank">http://pdabrowski.art.pol</a>
  7. Description: Szablon strony Hufca ZHP Kolno
  8. Version: 1.0
  9. Text Domain: zhpkolno
  10. */
  11.  
  12.  
  13.  
  14. body {
  15. 	margin: 0;
  16. 	padding: 0;
  17. 	line-height: 1.5em;
  18. 	font-family: Georgia, "Times New Roman", Times, serif;
  19. 	font-size: 12px;
  20. 	color: #555a4a;
  21.     background: #a0c73f;
  22. }
  23.  
  24. a:link, a:visited { color: #0683ab; text-decoration: none; font-weight: normal; } 
  25. a:active, a:hover { color: #0683ab; text-decoration: underline; }
  26.  
  27. .button_01 a {
  28. 	display: block;
  29. 	width: 102px;
  30. 	height: 23px;
  31. 	padding: 7px 0 0 0;
  32. 	background: url(images/templatemo_button.png)  no-repeat;
  33. 	color: #333;
  34. 	font-size: 12px;
  35. 	font-weight: bold;
  36. 	text-align: center;
  37. 	text-decoration: none;
  38. }
  39.  
  40. .button_01 a:hover {
  41. 	color: #fff;
  42.     background:url(images/templatemo_button_hover.png) no-repeat;
  43. }
  44.  
  45. p { margin: 0px; padding: 0px; }
  46.  
  47. img { margin: 0px; padding: 0px; border: none; }
  48.  
  49. .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
  50.  
  51. .cleaner_h30 { clear: both; width:100%; height: 30px; }
  52. .cleaner_h40 { clear: both; width:100%; height: 40px; }
  53.  
  54. .margin_r10 { margin-right: 10px; }
  55.  
  56. .float_l { float: left; }
  57. .float_r { float:  right; }
  58.  
  59. #templatemo_header_wrapper {
  60. 	width: 100%;
  61. 	height: 265px;	
  62. 	background: url(images/templatemo_header.jpg) no-repeat top center;
  63. }
  64.  
  65. #templatemo_header {
  66. 	position: relative;
  67. 	width: 980px;
  68. 	height: 265px;		
  69. 	padding: 0 10px;
  70. 	margin: 0 auto;
  71. 	background: url(images/templatemo_header.jpg) no-repeat top center;
  72. }
  73.  
  74. /* site title */
  75.  
  76. #templatemo_header  #site_title {
  77. 	float: left;
  78. 	width: 220px;
  79. 	padding: 90px 0 0 50px;
  80. }
  81.  
  82. #site_title h1 {
  83. 	margin: 0;
  84. 	padding: 0;
  85. }
  86.  
  87. #site_title h1 a {
  88. 	margin: 0px;
  89. 	padding: 0px;
  90. 	font-size: 30px;
  91. 	color: #ffffff;
  92. 	font-weight: bold;
  93. 	text-decoration: none;
  94. }
  95.  
  96. #site_title h1 a:hover {
  97. 	font-weight: bold;	
  98. 	text-decoration: none;
  99. }
  100.  
  101. #site_title h1 a span {
  102. 	display: block;
  103. 	margin-left: 2px;
  104. 	font-size: 14px;
  105. 	color: #416902;
  106. 	font-weight: bold;
  107. 	letter-spacing: 2px;
  108. }
  109.  
  110. /* end of site title */
  111.  
  112. /* menu */
  113.  
  114. #templatemo_menu {
  115. 	float: right;
  116. 	padding-top: 70px;
  117. 	height: 43px;
  118. }
  119.  
  120. #templatemo_menu ul {
  121. 	margin: 0;
  122. 	padding: 0;
  123. 	list-style: none;
  124. }
  125.  
  126. #templatemo_menu ul li {
  127. 	padding: 0;
  128. 	margin: 0;
  129. 	display: inline;
  130. }
  131.  
  132. #templatemo_menu ul li a {
  133. 	float: left;
  134. 	display: block;
  135. 	height: 35px;
  136. 	width: 125px;
  137. 	margin: 0;
  138. 	padding: 8px 0 0 0;
  139. 	text-align: center;
  140. 	font-size: 12px;
  141. 	text-decoration: none;
  142. 	color: #333333;	
  143. 	font-weight: bold;
  144. 	outline: none;
  145. }
  146.  
  147. #templatemo_menu li a:hover, #templatemo_menu li .current {
  148. 	color: #333333;
  149. 	background: url(images/templatemo_menu_hover.png) no-repeat top;
  150. }
  151.  
  152. /* end of menu */
  153.  
  154. /* Search */
  155.  
  156. #templatemo_header #search_box {
  157. 	position: absolute;
  158. 	width: 335px;
  159. 	height: 72px;
  160. 	bottom: 30px;
  161. 	right: 50px;
  162. 	background: url(images/templatemo_search.png)
  163. }
  164.  
  165. #search_box form {
  166. 	width: 280px;
  167. 	height: 27px;
  168. 	margin: 0;
  169. 	padding: 25px 0 0 0;
  170. }
  171.  
  172. #searchfield {
  173. 	height: 17px;
  174. 	width: 270px;
  175. 	padding: 4px 5px 6px 5px;
  176. 	color: #fff;
  177. 	font-size: 12px;
  178. 	font-variant: normal;
  179. 	line-height: normal;
  180. 	background: none;
  181. 	border: none;	
  182. }
  183.  
  184. /* end of search */
  185.  
  186. /* content */
  187.  
  188. #templatemo_content_wrapper {
  189. 	width: 920px;
  190. 	margin: 0 auto;
  191. 	padding: 30px 40px;
  192. 	background: url(images/templatemo_content.jpg) repeat-y;
  193. }
  194.  
  195. #templatemo_content_wrapper_bottom {
  196. 	width: 1000px;
  197. 	height: 15px;
  198. 	margin: 0 auto;
  199. 	background: url(images/templatemo_content_bottom.jpg) no-repeat;
  200. }
  201.  
  202. #templatemo_content {
  203. 	float: left;
  204. 	width: 600px;
  205. }
  206.  
  207. #templatemo_content p {
  208. 	text-align: justify;
  209. 	margin-bottom: 10px;
  210. }
  211.  
  212. .content_section {
  213. 	clear: both;
  214. 	width: 100%;
  215. }
  216.  
  217. #templatemo_content h2 {
  218. 	color: #3a5909;
  219. 	font-size: 24px;
  220. 	padding: 0 0 60px 20px;
  221. 	background: url(images/templatemo_header_bg.png) no-repeat bottom left;
  222. }
  223.  
  224. .product_box {
  225. 	float: left;
  226. 	width: 190px;
  227. 	padding-bottom: 10px;
  228. 	border-bottom: 1px dotted #666;
  229. 	margin-bottom: 20px;
  230. }
  231.  
  232. .fl_image {
  233. 	float: left;
  234. 	margin: 3px 15px 5px 0;
  235. }
  236.  
  237. #templatemo_content .product_box p {
  238. 	padding: 0;
  239. 	margin: 0 0 5px 0;
  240. }
  241.  
  242. #templatemo_content .product_box a {
  243. 	color: #000000;
  244. 	font-weight: bold;
  245. }
  246.  
  247. #templatemo_content .em_text {
  248. 	color: #537c11;
  249. }
  250.  
  251. .price {
  252. 	color: #C30;
  253. 	font-size: 14px;
  254. 	font-weight: bold;
  255. }
  256.  
  257. .product_box h3 {
  258. 	background: #63a103;
  259. 	padding: 3px 10px;
  260. 	margin: 0 0 10px 0;
  261. 	color: #ffffff;
  262. 	font-size: 12px;
  263. }
  264.  
  265. .product_box img {
  266. 	width: 180px;
  267. 	height: 100px;
  268. 	border: 5px solid #e6e0ce;
  269. 	 margin-bottom: 10px;
  270. }
  271.  
  272. #templatmeo_sidebar {
  273. 	float: right;
  274. 	width: 280px;
  275. 	padding: 0;
  276. 	background: url(images/templatemo_sidebar.jpg) repeat-y; 
  277. }
  278.  
  279. #templatmeo_sidebar .sidebar_section {
  280. 	margin-bottom: 30px;
  281. }
  282.  
  283. #templatmeo_sidebar .sidebar_section_content {
  284. 	margin:0 0 0 35px;
  285. }
  286.  
  287. #templatmeo_sidebar h2 {
  288. 	color: #3a5909;
  289. 	font-size: 24px;
  290. 	padding: 0 0 60px 20px;
  291. 	background: url(images/templatemo_header_bg.png) no-repeat bottom left;
  292. }
  293.  
  294. #templatmeo_sidebar .categories_list {
  295. 	margin: 0;
  296. 	padding: 0;
  297. 	list-style: none;
  298. }
  299.  
  300. #templatmeo_sidebar .categories_list li {
  301. 	padding: 0;
  302. 	margin: 0;
  303. }
  304.  
  305. .categories_list li a {
  306. 	display: block;
  307. 	color: #201f1c;
  308. 	padding: 5px 0 5px 20px;
  309. 	background: url(images/templatemo_list.png) center left no-repeat;
  310. }
  311. .categories_list li a:hover {
  312. 	color: #537c11;
  313. 	text-decoration: none;
  314. }
  315.  
  316. .sidebar_section label {
  317. 	display: block;
  318. 	margin-bottom: 10px;
  319. }
  320.  
  321. .sidebar_section #input_field {
  322. 	height: 20px;
  323. 	width: 233px;
  324. 	padding: 0 5px;
  325. 	margin-bottom: 10px;
  326. 	color: #000000;
  327. 	font-size: 12px;
  328. 	font-variant: normal;
  329. 	line-height: normal;
  330. }
  331.  
  332. .sidebar_section #submit_btn{
  333. 	float: right;
  334.  	height: 30px;
  335. 	width: 80px;
  336. 	margin: 0px;
  337. 	padding: 3px 0 15px 0;
  338. 	cursor: pointer;
  339. 	font-size: 12px;
  340. 	text-align: center;
  341. 	vertical-align: bottom;
  342. 	white-space: pre;
  343. 	outline: none;
  344. }
  345.  
  346. /* end of content */
  347.  
  348. /* footer */
  349.  
  350. #templatemo_footer {
  351. 	width: 980px;
  352. 	margin: 0 auto;
  353. 	padding: 30px 10px;
  354. 	text-align: center;
  355. 	color: #333333;
  356. }
  357.  
  358. #templatemo_footer a {
  359. 	color: #000000;
  360. }
  361.  
  362. #templatemo_footer .footer_menu {
  363. 	margin: 0 0 10px 0;
  364. 	padding: 0px;
  365. 	list-style: none;
  366. }
  367.  
  368. .footer_menu li {
  369. 	margin: 0px;
  370. 	padding: 0 20px;
  371. 	display: inline;
  372. 	border-right: 1px solid #000000;
  373. }
  374.  
  375. .footer_menu .last_menu {
  376. 	border: none;
  377. }
  378.  
  379. /* end of footer */
[HTML] pobierz, plaintext



Roboczo strona znajduje się pod adresem http://hufiec.fabryka-www.eu
krzysztof_kf
23.02.2014, 12:40:32
Możesz zawsze podzielić to na trzy części i dodać do każdej z niej odnośnik, to jest jpeg i nic z tym nie zrobisz.
Pawel.Dabrowski
23.02.2014, 12:49:08
Jak rozetne to nie straci to jakosci? Moze lepiej by bylo zrobic mape odsylaczy?
Tylko jak to zrobic gdy obrazek w naglowku nie jest wstawiony przez <img src tylko w arkuszu styli
krzysztof_kf
23.02.2014, 13:09:55
Nie nie będzie problemu jeżeli to dobrze zakodujesz, obrazek jest o stałych proporcjach tylko wycentrowany. Dodatkowo będziesz musiał zrobić osobny div itp.

Jak byś chciał wrzuć gdzieś szablon w archiwum zip, na darmowy hosting to na szybkiego można coś ogarnąć.
qbas-s
24.02.2014, 01:28:45
a dlaczego obrazka z headera nie potniesz sobie na trzy części w photoshop'ie(lub czymś innym) i nie zakodujesz tak jak należy?

Jeśli z jakiś powodów nie chcesz tego robić to tak na szybko

to
[CSS] pobierz, plaintext 
  1. #templatemo_header_wrapper {
  2. 	width: 100%;
  3. 	height: 265px;	
  4. 	background: url(images/templatemo_header.jpg) no-repeat top center;
  5. }
[CSS] pobierz, plaintext

zmodyfikuj na to
[CSS] pobierz, plaintext 
  1. #templatemo_header_wrapper {
  2.         position:relative;
  3. 	width: 100%;
  4. 	height: 265px;	
  5. 	background: url(images/templatemo_header.jpg) no-repeat top center;
  6. }
  7. #templatemo_header_wrapper a{
  8.        position:absolute;
  9.        left:0px;
  10.        top:0px;
  11.        width:200px//tu sobie dopasuj
  12.        display:block;
  13.        height:265px;
  14.  
  15. }
[CSS] pobierz, plaintext


a to
[HTML] pobierz, plaintext 
  1. <div id="templatemo_header_wrapper">
  2.  
  3. 	<div id="templatemo_header">
  4.  
  5.  
  6.     	<div class="cleaner"></div>
  7.     </div> <!-- end of templatemo_header -->
  8.  
  9. </div>
[HTML] pobierz, plaintext

zmień na to
[HTML] pobierz, plaintext 
  1. <div id="templatemo_header_wrapper">
  2.  
  3. 	<div id="templatemo_header">
  4.  
  5.  
  6.     	<div class="cleaner"></div>
  7.     </div> <!-- end of templatemo_header -->
  8.     <a href="twoj_link"></a>
  9. </div>
[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.