Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Układ strony w divach
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
patrysiek2
9.04.2012, 00:07:25
Mam taki problem. Chcę aby strona wyglądała tak jak na obrazku poniżej. Czyli wszystko tak jak jest + do tego, żeby w białej ramce wyświetlała się zawartość diva content.

Tutaj kod CSS:
body
{
font: 12px Arial, Helvetica, sans-serif;
background:url(images/background.png)black repeat-x;
}
table
{
border-collapse:collapse;
}
table td
{
border: 1px solid #4192AF;
border-bottom-color: #6FC2DF;
background: #DFF7FF;
}
table th
{
border: 1px solid #4192AF;
background: #1D7D9F;
color:white;
}

label
{
width: 40px;
}
#add_form
{
margin-top:10px;
}
#LOGO
{
background:url(images/logo.png)no-repeat 50%;
height:117px;
margin-bottom:15px;
}
#formularz
{
color:white;
}
#ap
{
text-align:right;
font: 7pt/10px "MS Sans Serif", Geneva, sans-serif;
}
a
{
text-decoration: none;
}
#white
{
color:white;
}
#login
{
margin-left:40%;
margin-right:40%;
}
#where
{
text-indent:1%;
background:url(images/test.png);
margin-bottom:1%;
text-decoration: none;
}
#apinctable
{
background-image:url(images/test.png);
width:30%;
float:left;
}
#msg
{
float:right;
width:80%;
}
#content {
font-family:arial;
font-size:11px;
}

Tutaj plik php:
[PHP] pobierz, plaintext 
  1. <head>
  2. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3. 	<title>Ajax Loader - Simplified Version</title>
  4. 	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
  5. 	<script type="text/javascript" src="js/jquery.history.js"></script>
  6.  
  7. 	<script type="text/javascript">
  8. $(document).ready(function () {
  9.  
  10. 	//Check if url hash value exists (for bookmark)
  11. 	$.history.init(pageload);	
  12.  
  13. 	//highlight the selected link
  14. 	$('a[href=' + document.location.hash + ']').addClass('selected');
  15.  
  16. 	//Seearch for link with REL set to ajax
  17. 	$('a[rel=ajax]').click(function () {
  18.  
  19. 		//grab the full url
  20. 		var hash = this.href;
  21.  
  22. 		//remove the # value
  23. 		hash = hash.replace(/^.*#/, '');
  24.  
  25. 		//for back button
  26. 	 	$.history.load(hash);	
  27.  
  28. 	 	//clear the selected class and add the class class to the selected link
  29. 	 	$('a[rel=ajax]').removeClass('selected');
  30. 	 	$(this).addClass('selected');
  31.  
  32. 	 	//hide the content and show the progress bar
  33. 	 	$('#content').hide();
  34. 	 	$('#loading').show();
  35.  
  36. 	 	//run the ajax
  37. 		getPage();
  38.  
  39. 		//cancel the anchor tag behaviour
  40. 		return false;
  41. 	});	
  42. });
  43.  
  44.  
  45. function pageload(hash) {
  46. 	//if hash value exists, run the ajax
  47. 	if (hash) getPage();    
  48. }
  49.  
  50. function getPage() {
  51.  
  52. 	//generate the parameter for the php script
  53. 	var data = 'page=' + encodeURIComponent(document.location.hash);
  54. 	$.ajax({
  55. 		url: "loader.php",	
  56. 		type: "GET",		
  57. 		data: data,		
  58. 		cache: false,
  59. 		success: function (html) {	
  60.  
  61. 			//hide the progress bar
  62. 			$('#loading').hide();	
  63.  
  64. 			//add the content retrieved from ajax and put it in the #content div
  65. 			$('#content').html(html);
  66.  
  67. 			//display the body with fadeIn transition
  68. 			$('#content').fadeIn('slow');		
  69. 		}		
  70. 	});
  71. }
  72. </script>
  73. </head>
  74. <html>
  75. <div id="Logo"><div id="ap">
  76. <b><a href="index.php?action=logout">[Wyloguj]</a></b>
  77. </div></div>
  78.  
  79. <div id="where">
  80. <b><font color="green"><a href="index.php">Support - AirHack.PL >></a> </font></b>Admin Panel
  81. <br>
  82. </div>
  83.  
  84. <div id="apinctable">
  85. <?php 
  86. define('DB_HOST','localhost'); 
  87. define('DB_USER','root'); 
  88. define('DB_PASS','krasnal'); 
  89. define('DB_NAME','support'); 
  90. mysql_connect(DB_HOST,DB_USER,DB_PASS,true)or die(mysql_error());
  91. mysql_select_db(DB_NAME)or die(mysql_error());
  92.  
  93.  
  94. $query = mysql_query("select * from support order by data desc")or die(mysql_error()); 
  95.  
  96. echo '<table id="tab"> 
  97. <tr><th><center>ID</th><th>Kategoria</th><th>Napisał</th><th>Akcja</center></th></tr>'; 
  98.  
  99. // jak chcesz wyświetlić wszystkie wyniki zapytania
  100. while($r=mysql_fetch_array($query)){
  101. echo '<tr>'; 
  102. echo '<td width="10px" align="center">'.$r['id'].'</td>'; 
  103. echo '<td width="250px">'.$r['pole'].'</td>'; 
  104. echo '<td width="100px">'.$r['nick'].'</td>'; 
  105. echo '<td width="80px"><a href="admint.php?id='.$r['id'].'"> [Przeczytaj]</A><a href=#page'.$r['id'].'> [Usun]</A>'; 
  106. echo '</tr>'; 
  107. }
  108. ?>
  109. </div>
  110.  
  111. <div id="content">
  112. <!-- Ajax Content -->
  113. </div>
  114. </html>
[PHP] pobierz, plaintext


Pogmatwałem juz się w tym moim kodzie CSS bo jestem prawie zielony w tym. I podajcie co pozmieniać. Ja próbowałem to nie wychodziło.
!*!
9.04.2012, 14:15:37
CSS odpowiada za wygląd. To czego szukasz to połączenie ajax http://api.jquery.com/jQuery.ajax/ co zresztą masz w kodzie, odwołujesz się do pliku "loader.php", poza tym użyj nowszej wersji jQ bo 1.3.1 jest przestarzała.

Popraw znaczniki w poście, masz też źle napisany kod html, gdzie body? Wstaw to wszytko na http://jsfiddle.net/ i podaj link jak masz jakieś pytania. Na żywym przykładzie lepiej się pracuje.
patrysiek2
9.04.2012, 22:34:04
Nie rozumiesz mnie. Mam ten skrypt jQuery teraz chodzi mi o to aby ustawić ten plik CSS, żeby zawartość diva content wyświetlała się w takim miejscu jak na obrazku. Czaisz?
prowseed
9.04.2012, 23:26:13
Właśnie, @!*!, Czaisz? I podaj co pozmieniać. On ma już jQ 1.3.1, podaj CSS bo on próbował i mu nie wychodzi.
patrysiek2
10.04.2012, 11:13:35
Cytat(prowseed @ 10.04.2012, 00:26:13 ) *
Właśnie, @!*!, Czaisz? I podaj co pozmieniać. On ma już jQ 1.3.1, podaj CSS bo on próbował i mu nie wychodzi.


Masz w pierwszym poście napisane. Zmień tak, żeby np. jeżeli jest taki kod
<div id="content">
Tutaj text hehehehe
</div>

I żeby te dane z diva content wyświetlały się w takim miejscu jak na obrazku w 1 poście. Czaicie?
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.