Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Poprawne wyśrodkowanie DIV'ów
Forum PHP.pl > Forum > Przedszkole
in5ane
15.10.2008, 20:24:38
Elo, chciałbym się poprawnie używać xHTML'a i zaczynam od kompletnych podstaw. Jak mam prawidłowo coś takiego wyśrodkować?

[HTML] pobierz, plaintext 
  1. <?xml version="1.1" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">    
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 	<link rel="stylesheet" type="text/css" href="style.css" />
  7. 	<?xml-stylesheet type="text/css" href="style.css" ?>
  8. 	<title>Test</title>
  9. </head>
  10. <body xml:lang="pl">
  11.  
  12. <div id="header">
  13. GÓRA
  14. </div>
  15.  
  16. <div id="left">
  17. LEWA
  18. </div>
  19.  
  20. <div id="content">
  21. ŚRODEK
  22. </div>
  23.  
  24. <div id="footer">
  25. DÓŁ
  26. </div>
  27.  
  28. </body>
  29. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body {
  2. text-align: center;
  3. }
  4.  
  5. div {
  6. border: 1px solid;
  7. width: 50%;
  8. text-align: left;
  9. margin: 0 auto 0 auto;
  10. }
  11.  
  12. div#header {
  13. height: 100px;
  14. width: 600px;
  15. background-color: #000000;
  16. }
  17.  
  18. div#left {
  19. height: 400px;
  20. width: 100px;
  21. background-color: #ff0000;
  22. float: left;
  23. }
  24.  
  25. div#content {
  26. height: 400px;
  27. width: 600px;
  28. background-color: #ffde00;
  29. }
  30.  
  31. div#footer {
  32. height: 50px;
  33. width: 600px;
  34. background-color: #00c6ff;
  35. }
[HTML] pobierz, plaintext


Ja już tutaj zastosowałem wyśrodkowanie, ale jest problem, że div o nazwie left jest do lewej, a on ma być też na środku, ale do lewej części środka.
wookieb
15.10.2008, 20:36:52
Nie dam ci gotowca
Polecam goraco
kurs.browsehappy.pl
Maxik
15.10.2008, 20:41:47
Jeśli chcesz wyśrodkować całą stronę w poziomie to obejmij to wszystko jeszcze jednym divem i nadaj mu margin-left:auto; i margin-right:auto;
in5ane
15.10.2008, 20:46:36 
[HTML] pobierz, plaintext 
  1. <div id="all">
  2.  
  3. <div id="header">
  4. GÓRA
  5. </div>
  6.  
  7. <div id="left">
  8. LEWA
  9. </div>
  10.  
  11. <div id="content">
  12. ŚRODEK
  13. </div>
  14.  
  15. <div id="footer">
  16. DÓŁ
  17. </div>
  18.  
  19. </div>
  20.  
  21. -----------
  22.  
  23. div#all {
  24. margin-left: auto;
  25. margin-right: auto;
  26. }
[HTML] pobierz, plaintext



I jest do lewej.
wookieb
15.10.2008, 20:47:51
Cytat(in5ane @ 15.10.2008, 21:46:36 ) *
[HTML] pobierz, plaintext 
  1. <div id="all">
  2.  
  3. <div id="header">
  4. GÓRA
  5. </div>
  6.  
  7. <div id="left">
  8. LEWA
  9. </div>
  10.  
  11. <div id="content">
  12. ŚRODEK
  13. </div>
  14.  
  15. <div id="footer">
  16. DÓŁ
  17. </div>
  18.  
  19. </div>
  20.  
  21.  
  22. div#all {
  23. margin-left: auto;
  24. margin-right: auto;
  25. }
[HTML] pobierz, plaintext



I jest do lewej.

Bo patrzysz w ie. Dla ie dla rodzica elementu srodkowanego musi byc text-align: center;
in5ane
15.10.2008, 20:49:56
Patrzę w FF.
MajareQ
15.10.2008, 20:50:02
dla ff:
Kod
body {
margin-left: auto;
margin-right: auto;
}

dla ie:
Kod
html {
margin-left: auto;
margin-right: auto;
}
in5ane
15.10.2008, 20:51:25
To nic nie dało. Kurcze, takie małe, a tyle problemu.
MajareQ
15.10.2008, 20:52:22
Jak nie dało ja musi dać? dziwnym trafem u mnie działa.
in5ane
15.10.2008, 21:02:26
Naprawdę nie działa.

[HTML] pobierz, plaintext 
  1. <?xml version="1.1" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">    
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 	<link rel="stylesheet" type="text/css" href="style.css" />
  7. 	<?xml-stylesheet type="text/css" href="style.css" ?>
  8. 	<title>Test</title>
  9. </head>
  10. <body xml:lang="pl">
  11.  
  12.  
  13. <div id="header">
  14. GÓRA
  15. </div>
  16.  
  17. <div id="left">
  18. LEWA
  19. </div>
  20.  
  21. <div id="content">
  22. ŚRODEK
  23. </div>
  24.  
  25. <div id="footer">
  26. DÓŁ
  27. </div>
  28.  
  29.  
  30. </body>
  31. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body {
  2. background-color: #bd2d2d;
  3. margin-left: auto;
  4. margin-right: auto;
  5. }
  6.  
  7. html {
  8. margin-left: auto;
  9. margin-right: auto;
  10. }
  11.  
  12. div#header {
  13. height: 100px;
  14. width: 600px;
  15. background-color: #e6d7c8;
  16. }
  17.  
  18. div#left {
  19. height: 400px;
  20. width: 100px;
  21. background-color: #a67c53;
  22. float: left;
  23. }
  24.  
  25. div#content {
  26. height: 400px;
  27. width: 600px;
  28. background-color: #171616;
  29. }
  30.  
  31. div#footer {
  32. height: 50px;
  33. width: 600px;
  34. background-color: #e6d7c8;
  35. }
[HTML] pobierz, plaintext


Do tego mam jeszcze jedno pytanie, dlaczego jak łączna szerokość to 600px i ustawię menu na 100px a środek na 500px to środek jest jakby o 100px za mały (to jest tak w FF, a w IE jest dobrze), a jak zrobię 100px menu i 600px środek (w FF jest dobrze, a w IE jest za duże o 100px). Proszę o pomoc.
MajareQ
15.10.2008, 21:04:00
zrób samo:

Kod
body {
    font-family:Tahoma;
    font-size:11px;
    color:black;
    background: #bd2d2d;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: auto;
}


co do pytania - nie idzie cię zrozumiec, pokaż stronę.
in5ane
15.10.2008, 21:11:53
Nie idzie z tym wyśrodkowaniem.




Do tego pytania screenshot: http://img378.imageshack.us/my.php?image=screennv4.jpg
l1em1on1
15.10.2008, 22:39:07
no dziwne ze nic nie dalo skoro masz kilka divow luzno w body winksmiley.jpg

daj na to jakis kontener o stalej szerokosci i wtedy margin: 0 auto; w body i powinno chulac
MajareQ
16.10.2008, 11:43:56
No patrz... byłem przekonany że on robi w kontenerze...


[HTML] pobierz, plaintext 
  1. <?xml version="1.1" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. <?xml-stylesheet type="text/css" href="style.css" ?>
  8. <title>Test</title>
  9. </head>
  10. <body xml:lang="pl">
  11.  
  12. <div id="kontener">
  13. <div id="header">
  14. GÓRA
  15. </div>
  16.  
  17. <div id="left">
  18. LEWA
  19. </div>
  20.  
  21. <div id="content">
  22. ŚRODEK
  23. </div>
  24.  
  25. <div id="footer">
  26. DÓŁ
  27. </div>
  28. </div>
  29.  
  30. </body>
  31. </html>
[HTML] pobierz, plaintext


Kod
body {
background-color: #bd2d2d;
margin-left: auto;
margin-right: auto;
}

#contener {
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}

#header {
height: 100px;
width: 600px;
background-color: #e6d7c8;
}

#left {
height: 400px;
width: 100px;
background-color: #a67c53;
float: left;
}

#content {
height: 400px;
width: 600px;
background-color: #171616;
}

#footer {
height: 50px;
width: 600px;
background-color: #e6d7c8;
}
in5ane
16.10.2008, 14:06:06
Dzięki za pomoc. Teraz już wiem o co chodzi tongue.gif

A teraz proszę o odpowiedź na to: http://img378.imageshack.us/my.php?image=screennv4.jpg

Do tego doszedł problem, że w IE jak mam left na float: left; to jest w ogóle kaszanka, screen: <a href="http://xs.to/xs.php?h=xs132&d=08424&f=asd205.jpg" target="_blank">http://xs.to/xs.php?h=xs132&d=08424&f=asd205.jpg</a>
Co do tego, to jak dopisałem float: right; dla content to śmiga. Aha i ten problem wyżej też się przy tym rozwiązał. Teraz tylko problem to, że na IE nadal jest do lewej.


Taki kod mam teraz:
[HTML] pobierz, plaintext 
  1. <?xml version="1.1" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. <?xml-stylesheet type="text/css" href="style.css" ?>
  8. <title>Test</title>
  9. </head>
  10. <body xml:lang="pl">
  11.  
  12. <div id="contener">
  13.  
  14. 	<div id="header">
  15. 	GÓRA
  16. 	</div>
  17.  
  18. 	<div id="center">
  19.  
  20. 		<div id="left">
  21. 		LEWA
  22. 		</div>
  23.  
  24. 		<div id="content">
  25. 		ŚRODEK
  26. 		</div>
  27.  
  28. 	</div>
  29.  
  30. 	<div id="footer">
  31. 	DÓŁ
  32. 	</div>
  33.  
  34. </div>
  35.  
  36. </body>
  37. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body {
  2. background-color: #bd2d2d;
  3. margin-left: auto;
  4. margin-right: auto;
  5. }
  6.  
  7. #contener {
  8. margin-left: auto;
  9. margin-right: auto;
  10. width: 600px;
  11. }
  12.  
  13. #header {
  14. height: 100px;
  15. width: 600px;
  16. background-color: #e6d7c8;
  17. }
  18.  
  19. #center {
  20. height: 400px;
  21. width: 600px;
  22. }
  23.  
  24. #left {
  25. height: 400px;
  26. width: 100px;
  27. background-color: #a67c53;
  28. float: left;
  29. }
  30.  
  31. #content {
  32. height: 400px;
  33. width: 500px;
  34. background-color: #171616;
  35. float: right;
  36. }
  37.  
  38. #footer {
  39. height: 50px;
  40. width: 600px;
  41. background-color: #e6d7c8;
  42. }
[HTML] pobierz, plaintext
Maxik
16.10.2008, 14:46:08
1. Wywal pierwszą linijkę bo wprowadzasz IE w Quirks Mode
2. Zmień doctype na xhtml 1.1 transitional(znajdziesz je na www.w3.org )
in5ane
16.10.2008, 14:50:20
Śmiga, dzięki za pomoc. Teraz dalej będę brnął w poprawną naukę xhtmla.
MajareQ
16.10.2008, 14:56:45
Wydaje mi się że mi mi Maxikowi należą się punkty pewne... ;p
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.