Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyśrodkowanie całości treści
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
beel
31.05.2011, 19:51:12
W pliku css ustawiłem sobie między innymi:
[CSS] pobierz, plaintext 
  1. body
  2. {	width: 580px;
  3. 	margin-top: 100px;
  4. 	margin-left: 250px;
  5. 	margin-right: 5px;
  6.         font: small-caps 1em/1.5em Helvetica;
  7.  
  8.         background-color: #F8F8F8;
  9. }
[CSS] pobierz, plaintext


I fajnie, bo mam wszystko wyśrodkowane z takimi ustawieniami. Jednak obawiam się, że przy innej rozdzielczości może nie być już tak kolorowo. Jak więc ustawić parametry, aby niezależnie od np. wspomnianej rozdzielczości zawsze treść dopasowywałaby się do środka okna? Górny margines może być ustawiony na sztywno.
kamil4u
31.05.2011, 20:14:05 
[CSS] pobierz, plaintext 
  1. text-align: center;
[CSS] pobierz, plaintext
?
ew. 
[CSS] pobierz, plaintext 
  1. margin: 10px auto;
[CSS] pobierz, plaintext
,ale to tylko gdy podasz szerokość, najlepiej:
Kod
<body>
<div id="test">
</div>
</body>

i dla #test ustawiasz szerokość bloku i właśnie powyższy styl CSS. Wszystko zależy czego potrzebujesz. Żeby działało w IE należu ustawić odpowiednie doctype -> strict
el.pablo.72
1.06.2011, 13:23:45
Tag body nie należy ustawiać szerokości i wysokości ani marginesów.

Należy zrobić np.:
[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="wrapper_page">
  3. </div>
  4. </body>
[HTML] pobierz, plaintext


a w CSS:

#wrapper_page{
width: 580px;
margin-left: 250px;
margin-right: 5px;
}

Pamiętaj to tylko przykład, a nie gotowe rozwiązanie.
beel
1.06.2011, 17:18:58
Nie działają mi powyższe propozycje. Może więc konkretniej trochę napiszę o co mi chodzi. Otóż mam tabelę w powiedzmy #zawartość i na nią składa się wiele elementów (ale wszystko w table) i teraz chcę aby ta tabela była zawsze na środku strony.
kamil4u
1.06.2011, 17:32:18 
[CSS] pobierz, plaintext 
  1. #zawartosc{
  2.  width: 500px;
  3.  margin: 10px auto;
  4. }
[CSS] pobierz, plaintext

Dla IE odpowiednie Doctype i element zawartosc ma się znajdować bezpośrednio w <body>

Jak nie zadziała pokaż kod!
beel
1.06.2011, 20:19:23
Powiem tak, jeżeli dam ustawienia:
[CSS] pobierz, plaintext 
  1. #zawartosc{
  2. 	width: 580px;
  3. 	margin-top: 80px;
  4. 	margin-left: 225px;
  5. 	margin-right: 5px;	
  6. }
[CSS] pobierz, plaintext

To jest na środku i odpowiednio od górnej krawędzi tak jak chce. Moje pytanie brzmi, czy to się sprawdzi zawsze? Skąd pewność, że przy innej rozdzielczości nie będzie inaczej?
Damonsson
1.06.2011, 21:38:26
Oczywiście, że się nie sprawdzi.

Dlaczego nie skorzystasz z poprawnego rozwiązania, które podał @kamil4u?
beel
1.06.2011, 22:57:37
Bo mi ten gotowy sposób nie działa. Kod poniżej:

[HTML] pobierz, plaintext 
  1. <?php
  2. require_once ('./scripts.php');
  3. ?>
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head>
  8.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  9.     <meta http-equiv="content-language" content="pl" />
  10.     <meta name="author" content="trym" />
  11.  
  12.     <title></title>
  13. </head>
  14. <body>
  15.     <div id="naglowek">
  16.     </div>
  17.  
  18.     <div id="zawartosc">
  19. 		<link href="style/styl.css" rel="stylesheet" type="text/css" />
  20.  
  21.         <table style="border-style: double;" width="800" height="420" cellspacing="35">
  22. 			<tr>
  23. 				<td>
  24. 					<img src="/image/img.jpg" alt="img.jpg" />
  25. 				</td>    
  26. 				<td>
  27. 					<p class="styl1">text text text text text</p>
  28.  
  29. 					<p>
  30.  
  31. 					text text text text text<br />
  32. 					text text text text text<br />
  33. 					text text text text text<br />
  34. 					text text text text text
  35. 					</p>
  36.  
  37. 					<!-- formularz-->
  38.  
  39. 					 <form action="P03WymusPass.php" method="post">
  40. 						<fieldset><legend>Legenda</legend>
  41. 						<table> 
  42. 							<tr> 
  43. 								<td>Opis1:</td>				
  44. 								<td><input type="password" name="op1" /></td>    		
  45. 							</tr> 
  46. 							<tr> 
  47. 						  		<td>Opis2:</td> 
  48. 							  	<td><input type="password" name="op2" /></td>       	
  49. 							</tr>	 
  50. 						</table> 	
  51. 						</fieldset> 
  52. 						<br />
  53. 						<input type="submit" value="OK" />
  54. 					</form>    
  55.  
  56. 				</td>
  57. 			</tr>
  58.  
  59.         </table>
  60.  
  61.  
  62.  
  63.  
  64.     </div>
  65.     <!-- nawigacja -->
  66.     <div id="nawigacja">
  67.  
  68.     </div>
  69.     <!--stopka-->
  70.     <div id="stopka">
  71.  
  72.     </div>
  73. </body>
  74. </html>
[HTML] pobierz, plaintext


I styl:
[CSS] pobierz, plaintext 
  1. body
  2. {	
  3. 	 font: small-caps 1em/1.5em Helvetica;
  4.     background-color: #F8F8F8;
  5.  
  6. }
  7.  
  8. #zawartosc{
  9. 	//width: 580px;
  10. 	//margin-top: 80px;
  11. 	//margin-left: 225px;
  12. 	//margin-right: 5px;
  13. 	width: 500px;
  14.  	margin: 10px auto;
  15.  
  16. }
  17.  
  18. p.styl1 {
  19. 	font-size: larger    
  20. }
[CSS] pobierz, plaintext


W efekcie całość przesunięta jest do prawej strony, zachowując lekki margines.
Damonsson
1.06.2011, 23:19:47
1. Tabelki służą do przedstawienia danych TABELARYCZNYCH
2. Ktoś wyżej zasugerował doctype strict, warto byłoby posłuchać. Osobiście nie sprawdzałem czy coś zmieni. Ale skoro ktoś to napisał, to zapewne ma rację.
3. Wyobraź sobie że masz karton o długości 1,500m i chcesz włożyć do niego człowiek który ma 1,800m. Jak myślisz co się stanie...pewnie mimo ograniczenia zrobi dziurę w kartonie i nogi i tak będą wystawały poza 1,5 metrowy karton wink.gif
beel
2.06.2011, 11:56:42
Ok, rozumiem, że tabelka nie była najlepszym wyborem. Co polecasz zastosować aby później objąć to ramką.
Damonsson
2.06.2011, 12:57:51
http://lmgtfy.com/?q=obramowanie+css
beel
2.06.2011, 17:41:28
Umiem posługiwać się Google. Uzasadniając moje pytanie, chciałem uniknąć sytuacji, że znów dokonam złego wyboru wink.gif
kamil4u
2.06.2011, 20:38:50
Wszystko zależy co chcesz osiągnąć:
- dane tabelaryczne -> tabelka -> <table>, <tr>, <td>, itd.
- dłuższy tekst -> akapit -> <p>
- lista -> <ul>, <ol>
- blok(wiele różnych elementów na stronie) -> <div>
- krótki tekst -> <span>

+ dla wszystkiego odpowiednia style CSS

Najczęściej w celu określenia bloku elementów używa się <div> np.:
[HTML] pobierz, plaintext 
  1. <div id="main">
  2.  <div id="top"></div>
  3.  <ul id="menu">
  4.   <li><a href="#">#1</a></li>
  5.   <li><a href="#">#2</a></li>
  6.  </ul>
  7.  <div id="left"></div>
  8.  <div id="right"></div>
  9.  <div id="bottom"></div>
  10. </div>
[HTML] pobierz, plaintext


Aby wypozycjonować elementy na stronie musisz się posłużyć CSS. Na pewno musisz poznać: float, clear, margin, padding, width, height, border, position, left, top, right, left. Jak poznasz te elementy, z grubsza będziesz mógł układać poprawne semantycznie strony. Powinieneś móc osiągnąć wtedy to co chcesz.

Miłej nauki wink.gif
demolka666
13.06.2011, 11:11:08
przykładowe rozwiązanie:

[CSS] pobierz, plaintext 
  1. #zawartosc{
  2.     position: absolute;
  3.     width: 1000px;
  4.     left:50%;
  5.     margin-left: -500px /*połowa tego co width*/
  6. }
[CSS] pobierz, plaintext
toaspzoo
13.06.2011, 11:19:12

vertical-align: center;
text-align: center;
float: center;
margin: auto;
kamil4u
13.06.2011, 13:31:08
Cytat
float: center;

Skąd to się wzięło? http://www.w3.org/TR/CSS2/visuren.html#propdef-float

Sprawdzaj co piszesz wink.gif, chyba że to jakaś nowość...
Poza tym te rozwiązania były już opisane w wątku - bez vertical-align: center;, ale to służy czemuś innemu
Fluke
30.06.2011, 21:19:56 
[HTML] pobierz, plaintext 
  1. <style>
  2. body {
  3.      width: 70%;
  4.      margin: 0 auto;
  5. }
[HTML] pobierz, plaintext


Działa wszędzie.
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.