Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: CSS. Div z treścią i menu ląduje na samej górze.
Forum PHP.pl > Forum > Po stronie przeglądarki
programista95
10.09.2013, 06:58:20
Witam,
Mam problem napisałem szablon z wykorzystaniem PHP i CSS. Niestety pojawił się błąd, ponieważ menu i pole z tekstem poszło mi za bardzo do góry. sad.gif
Oto adres strony:
www.mgr-ms.p.ht
Jak coś to wstawię kod.
Szablon oparty na DIVach.
phpion
10.09.2013, 07:56:11
Proszę poprawić temat na lepiej opisujący problem - w przeciwnym razie wątek zostanie zamknięty. Tutaj 99% użytkowników ma problem z błędem w kodzie.
programista95
10.09.2013, 12:55:55
Kod PHP:

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" 
  4. lang="<?php echo $this->language; ?>">
  5. <head>
  6. <jdoc:include type="head" />
  7. <link href="templates/<?php echo $this->template ?>/css/layout.css" rel="stylesheet" type="text/css" media="all" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta name="author" content="Dawid Oporowicz: www.komputer-land.cba.pl" />
  10. <link rel="shortcut icon" href="http://www.mgr.cba.pl/favicon.ico" type="image/x-icon">
  11. <link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
  12. </head>
  13.  
  14. <body>
  15. <div id="header">
  16.         	<div id="baner">
  17.         	  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300" height="151" id="flash" align="middle">
  18.         	    <param name="movie" value="baner.swf" />
  19.         	    <param name="quality" value="high" />
  20.         	    <param name="bgcolor" value="#f7f7f7" />
  21.         	    <param name="play" value="true" />
  22.         	    <param name="loop" value="true" />
  23.         	    <param name="wmode" value="window" />
  24.         	    <param name="scale" value="showall" />
  25.         	    <param name="menu" value="true" />
  26.         	    <param name="devicefont" value="false" />
  27.         	    <param name="salign" value="" />
  28.         	    <param name="allowScriptAccess" value="sameDomain" />
  29.         	    <!--[if !IE]>-->
  30.         	    <object type="application/x-shockwave-flash" data="http://www.mgr-ms.p.ht/baner.swf" width="300" height="151">
  31.         	      <param name="movie" value="baner.swf" />
  32.         	      <param name="quality" value="high" />
  33.         	      <param name="bgcolor" value="#f7f7f7" />
  34.         	      <param name="play" value="true" />
  35.         	      <param name="loop" value="true" />
  36.         	      <param name="wmode" value="window" />
  37.         	      <param name="scale" value="showall" />
  38.         	      <param name="menu" value="true" />
  39.         	      <param name="devicefont" value="false" />
  40.         	      <param name="salign" value="" />
  41.         	      <param name="allowScriptAccess" value="sameDomain" />
  42.         	      <!--<![endif]-->
  43.         	      <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Pobierz odtwarzacz Adobe Flash Player" /></a>
  44.         	      <!--[if !IE]>-->
  45.       	      </object>
  46.         	    <!--<![endif]-->
  47.       	    </object>
  48.   </div>
  49. 			<div id="logo">
  50.             	<jdoc:include type="modules" name="logo" style="xhtml" />
  51. 			</div>
  52. </div>
  53. <div id="srodek">
  54.   <div id="menu">
  55.     <jdoc:include type="modules" name="menu" style="xhtml" />
  56.   </div>
  57.   <div id="tresc">
  58.     <jdoc:include type="component" />
  59.   </div>
  60.   <div id="addons">
  61.     <jdoc:include type="modules" name="addons" style="xhtml" />
  62.   </div>
  63. </div>
  64. <div id="footer">
  65. 			<div id="wykonanie">
  66.             <b><center>&copy; 2013 Mobilny Gabinet Rehabilitacji</center></b>
  67.             <center>Marek Siewkowski</center><br/>
  68.             <b><center>Projekt witryny i wykonanie:</center></b>
  69.             <center>Dawid Oporowicz</center>
  70. 			</div>
  71. </div>
  72. </body>
  73. </html>
[PHP] pobierz, plaintext



Kod CSS:

[PHP] pobierz, plaintext 
  1. @import url(czcionki.css);
  2. @import url(menu.css);
  3.  
  4. body{
  5. 	background-image:url(../image/bg.jpg);
  6. 	background-attachment:fixed;
  7. 	background-repeat:no-repeat;
  8. }
  9.  
  10. #header{
  11. 	width:960px;
  12. 	height:180px;
  13. 	overflow:hidden;
  14. 	margin-left:110px;
  15. 	position:fixed;
  16. }
  17.  
  18. #baner{
  19. 	float:right;
  20. 	margin-top:15px;
  21. }
  22.  
  23. #logo{
  24. 	background-image:url(../image/logo.jpg);
  25. 	height:141px;
  26. 	width:234px;
  27. 	float:left;
  28. 	margin-top:35px;
  29. 	margin-left:36px;
  30. }
  31.  
  32. #srodek{
  33. 	width:960px;
  34. 	overflow:hidden;
  35. 	margin-left:110px;
  36. }
  37.  
  38. #menu{
  39. 	height:30px;
  40. 	padding-top:20px;
  41.         position:fixed;
  42. }
  43.  
  44. #addons{
  45. 	width:240px;
  46. 	float:right;
  47. 	margin-right:40px;
  48. 	background-image:url(../image/tlo_addons.jpg);
  49. 	background-repeat:repeat-y;
  50. 	margin-top:37px;
  51. 	padding-top:10px;
  52. }
  53.  
  54. #tresc{
  55. 	width:600px;
  56. 	padding-top:10px;
  57. 	margin-top:37px;
  58. 	float:left;
  59. 	background-image:url(../image/tlo_tekst.jpg);
  60. 	background-repeat:repeat-y;
  61. }
  62.  
  63. #footer{
  64. 	width:960px;
  65. 	margin-left:110px;
  66. 	height:150px;
  67. }
[PHP] pobierz, plaintext
valkirek
10.09.2013, 18:32:47
Bo masz #menu position: fixed więc co się dziwisz, jak to ma być? Menu 50px od góry ciągle widoczne? Trochę dziwne rozwiązanie
Dejmien_85
11.09.2013, 00:10:05
Cytat(valkirek @ 10.09.2013, 19:32:47 ) *
Bo masz #menu position: fixed więc co się dziwisz, jak to ma być? Menu 50px od góry ciągle widoczne? Trochę dziwne rozwiązanie


Gdyby wiedział co daje position: fixed, to by się pewnie nie dziwił. Problemem jest jak zawsze syndrom niewiedzy. wink.gif
programista95
11.09.2013, 09:01:41
Jest ok gdy wykasowałem position: fixed z #naglowek.
Tyle że ja chcę aby menu oraz nagłówek stały w miejscu a nie przewijały się razem ze stroną.
Jak to napisać?
mar1aczi
11.09.2013, 09:04:14
Cytat(programista95 @ 11.09.2013, 10:01:41 ) *
...Jak to napisać?

Np. http://www.thecodepress.info/2013/01/fixed...n-css-html.html
programista95
11.09.2013, 09:11:48
A możesz napisać? bo ang dobrze nie znam. Proszę smile.gif
phpion
11.09.2013, 10:45:16
No bez jaj. Masz podane krok po kroku kody źródłowe, a do tego źródło całej przykładowej strony (LIVE). Do tego nie trzeba znać angielskiego.
programista95
11.09.2013, 11:29:29
No może i tak.
A nie można by napisać tak, że np. Wpisz w kod to i to?
Tyle że jak wpisuję "position:fixed;" w menu i jest ok. Tyle że znów tam gdzie ma być tekst to mi wyskakuje zaraz pod to menu
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.