Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Wyśrodkowanie całości treści
beel
post
Post #1





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 20.04.2007

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 16)
kamil4u
post
Post #2





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
----- 

[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


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
el.pablo.72
post
Post #3





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 1.11.2010

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
beel
post
Post #4





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 20.04.2007

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
kamil4u
post
Post #5





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
----- 

[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!


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
beel
post
Post #6





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 20.04.2007

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
Damonsson
post
Post #7





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

Oczywiście, że się nie sprawdzi.

Dlaczego nie skorzystasz z poprawnego rozwiązania, które podał @kamil4u?
Go to the top of the page
+Quote Post
beel
post
Post #8





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 20.04.2007

Ostrzeżenie: (0%)
-----

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.

Ten post edytował beel 1.06.2011, 22:58:21
Go to the top of the page
+Quote Post
Damonsson
post
Post #9





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

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

Ten post edytował Damonsson 1.06.2011, 23:20:43
Go to the top of the page
+Quote Post
beel
post
Post #10





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 20.04.2007

Ostrzeżenie: (0%)
-----

Ok, rozumiem, że tabelka nie była najlepszym wyborem. Co polecasz zastosować aby później objąć to ramką.
Go to the top of the page
+Quote Post
Damonsson
post
Post #11





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

http://lmgtfy.com/?q=obramowanie+css
Go to the top of the page
+Quote Post
beel
post
Post #12





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 20.04.2007

Ostrzeżenie: (0%)
-----

Umiem posługiwać się Google. Uzasadniając moje pytanie, chciałem uniknąć sytuacji, że znów dokonam złego wyboru wink.gif
Go to the top of the page
+Quote Post
kamil4u
post
Post #13





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
demolka666
post
Post #14





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 28.09.2009

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
toaspzoo
post
Post #15





Grupa: Zarejestrowani
Postów: 778
Pomógł: 84
Dołączył: 29.07.2010
Skąd: Gliwice / Pławniowice Mistrz niezmordowanej klawiatury.

Ostrzeżenie: (20%)
X----


vertical-align: center;
text-align: center;
float: center;
margin: auto;


--------------------

LS Easter egg <
Go to the top of the page
+Quote Post
kamil4u
post
Post #16





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
Fluke
post
Post #17





Grupa: Zarejestrowani
Postów: 247
Pomógł: 9
Dołączył: 20.09.2010
Skąd: Kraków

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <style>
  2. body {
  3.      width: 70%;
  4.      margin: 0 auto;
  5. }
[HTML] pobierz, plaintext


Działa wszędzie.
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 04:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn