Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]problem z wyśrodkowaniem bloku.
Forum PHP.pl > Forum > Przedszkole
imysz
13.09.2009, 10:38:31
Witam. Mam stronę. Dwa bloki i menu. menu zfloatowane z blokiem wrapper. Blok header wyśrodkowałem za pomocą margin: 0 auto; i nie wiem jak ustawić wrappera wraz z menu na środek strony. Można prosić o pomoc ?

html
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4.  
  5. <title>projekt_02</title>
  6. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  7. <meta http-equiv="content-language" content="pl" />
  8. <link rel="stylesheet" href="style.css" type="text/css" />
  9. </head>
  10.  
  11. <body>
  12.  
  13.  
  14.  
  15.  
  16. 	<div id="header">
  17.  
  18. 	<form action="" method="post">
  19. 	Login:
  20. 	<input type="text" name="login" class="form_log" />
  21. 	Password:
  22. 	<input type="password" name="pass" class="form_log" />
  23. 	<input type="submit" value="Zaloguj" />
  24. 	</form>
  25.  
  26.  
  27. 	</div>
  28.  
  29.  
  30. 		<div id="menu">
  31.  
  32. 							<ul>
  33. 							<li class="main"><a class="main" href="index.html">Home</a></li>
  34. 							<li><a class="Other" href="page1.html">Szukaj</a></li>
  35. 							<li><a class="Other" href="page2.html">Page 2</a></li>
  36. 							<li><a class="Other" href="">Page 3</a></li>
  37. 							<li ><a class="Other" href="">Page 4</a></li>
  38. 							</ul>
  39.  
  40. 							</div>
  41.  
  42.  
  43. 				<div id="wrapper">
  44. 				<p>text wrappertext wrapperteext wrapperteext wrapperteext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrapper</p>
  45.  
  46.  
  47. 				</div>
  48.  
  49.  
  50.  
  51. </body>
  52.  
  53. </html>
[HTML] pobierz, plaintext


css:
[CSS] pobierz, plaintext 
  1. body{
  2. background-color: #E8E8E8
  3.  
  4. }
  5.  
  6. body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,td {
  7.     margin:0;
  8.     padding:0;
  9. }
  10.  
  11. #header{
  12. 	background-color:white;
  13. 	width:785px;
  14. 	margin:0 auto;
  15. 	margin-top:10px;
  16. 	margin-bottom:20px;
  17. 	padding:8px;
  18. 	border: 1px solid #A9A9A9;
  19.  
  20. 	}
  21.  
  22.  
  23.     #wrapper{
  24.     float: left;
  25.     background-color:white;
  26.     margin: 0 auto;
  27.     width:780px;
  28.     padding:10px;
  29.     border: 1px solid #A9A9A9;
  30.     font-size:1.5em;
  31.     font-family:Curier New;
  32.     text-align:center;
  33.     border-left:none;
  34.  
  35. 	}
  36.  
  37. 	#menu{
  38.     float: left;
  39.  
  40.     }
  41.  
  42. #menu ul{
  43. 	width:130px;
  44. 	font-size:15px;
  45.  
  46.  
  47.  
  48. 	}
  49.  
  50.     #menu li  {
  51.     display: block;
  52.     list-style: none;
  53.     border-right:1px solid #a9a9a9;
  54.  
  55.     }
  56.  
  57. #menu a  {
  58. 	display: block;
  59. 	text-decoration:none;
  60. 	padding:10px 10px 10px 10px;
  61. 	border:1px solid #a9a9a9;
  62. 	text-align:left;
  63. 	border-right: 1px solid white;
  64. 	font-weight:bold;
  65. 	font-size:12px;
  66. 	font-family:"Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
  67.  
  68.  
  69. 	}
  70.  
  71. #menu ul a:hover{
  72. 	color:#D51007;
  73. 	background:white;
  74. 	font-weight:bolder;
  75. 	}
  76.  
  77.     .main{
  78.     margin-right:20px;
  79.     width:110px;
  80.     background-color:white;
  81.     color:#D51007;
  82.     border-bottom:0px solid white;
  83.     border-right:none;
  84.     }
  85. .Other{
  86. 	background-image: url('media/menubg.png') ;
  87. 	color:gray;
  88. 	}
  89. .form_log{
  90. 		background-image:url('media/formbg.gif');
  91. 	}
[CSS] pobierz, plaintext



strona: http://test4163.ueuo.com/
pozdrawiam
drake88
13.09.2009, 12:42:02
normalka, float: left; przyciąga #menu do lewej, usuń float ;]
f1xer
13.09.2009, 14:18:04 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4.  
  5. <title>projekt_02</title>
  6. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  7. <meta http-equiv="content-language" content="pl" />
  8. <link rel="stylesheet" href="style.css" type="text/css" />
  9. </head>
  10.  
  11. <body>
  12.  
  13.  
  14.  
  15.  
  16.     <div id="header">
  17.  
  18.     <form action="" method="post">
  19.     Login:
  20.     <input type="text" name="login" class="form_log" />
  21.     Password:
  22.     <input type="password" name="pass" class="form_log" />
  23.     <input type="submit" value="Zaloguj" />
  24.     </form>
  25.  
  26.  
  27.     </div>
  28.  
  29. <div id="container">            
  30.         <div id="menu">
  31.  
  32.                             <ul>
  33.                             <li class="main"><a class="main" href="index.html">Home</a></li>
  34.                             <li><a class="Other" href="page1.html">Szukaj</a></li>
  35.                             <li><a class="Other" href="page2.html">Page 2</a></li>
  36.                             <li><a class="Other" href="">Page 3</a></li>
  37.                             <li ><a class="Other" href="">Page 4</a></li>
  38.                             </ul>
  39.  
  40.                             </div>
  41.  
  42.  
  43.                 <div id="wrapper">
  44.                 <p>text wrappertext wrapperteext wrapperteext wrapperteext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrapper</p>
  45.  
  46.  
  47.                 </div>
  48.  
  49. </div>
  50.  
  51.  
  52.  
  53. </body>
  54.  
  55. </html>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1.                    body{
  2. background-color: #E8E8E8
  3.  
  4. }
  5.  
  6. body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,td {
  7.     margin:0;
  8.     padding:0;
  9. }
  10.  
  11. #header{
  12.     background-color:white;
  13.     width:785px;
  14.     margin:0 auto;
  15.     margin-top:10px;
  16.     margin-bottom:20px;
  17.     padding:8px;
  18.     border: 1px solid #A9A9A9;
  19.  
  20.     }
  21.  
  22.  
  23.     #wrapper{
  24.     float: left;
  25.     background-color:white;
  26.     margin: 0 auto;
  27.     width:780px;
  28.     padding:10px;
  29.     border: 1px solid #A9A9A9;
  30.     font-size:1.5em;
  31.     font-family:Curier New;
  32.     text-align:center;
  33.     border-left:none;
  34.  
  35.     }
  36.  
  37.     #menu{
  38.     float: left;
  39.  
  40.     }
  41.  
  42. #menu ul{
  43.     width:130px;
  44.     font-size:15px;
  45.  
  46.  
  47.  
  48.     }
  49.  
  50.     #menu li  {
  51.     display: block;
  52.     list-style: none;
  53.     border-right:1px solid #a9a9a9;
  54.  
  55.     }
  56.  
  57. #menu a  {
  58.     display: block;
  59.     text-decoration:none;
  60.     padding:10px 10px 10px 10px;
  61.     border:1px solid #a9a9a9;
  62.     text-align:left;
  63.     border-right: 1px solid white;
  64.     font-weight:bold;
  65.     font-size:12px;
  66.     font-family:"Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
  67.  
  68.  
  69.     }
  70.  
  71. #menu ul a:hover{
  72.     color:#D51007;
  73.     background:white;
  74.     font-weight:bolder;
  75.     }
  76.  
  77.     .main{
  78.     margin-right:20px;
  79.     width:110px;
  80.     background-color:white;
  81.     color:#D51007;
  82.     border-bottom:0px solid white;
  83.     border-right:none;
  84.     }
  85. .Other{
  86.     background-image: url('media/menubg.png') ;
  87.     color:gray;
  88.     }
  89. .form_log{
  90.         background-image:url('media/formbg.gif');
  91.     }
  92.  
  93.     #container{
  94.     width:931px;
  95.   margin:0 auto;
  96.   }
[CSS] pobierz, plaintext


nie wiem czy o to chodziło ?
imysz
13.09.2009, 14:38:56
vonEverest
wcześniej miałem zrobione to za pomocą pozycjonowania i było okej, odradzono mi ten sposób i zalecono float. Podali przykład, edytując kod, ale nikt nie powiedział jak to teraz wyrównać do środka..


f1xer
Coś na ten styl mi chodzi, ale tak by prawa krawędź bloku wrapper i header były w jednej linii, a menu może wystawać z lewej. Tak jak na tym screenshocie.
http://www.fotosik.pl/pokaz_obrazek/pelny/...25f8e144c7.html

Da radę tak zrobić ?

pozdrawiam

EDIT:
ustawiłem tak:

[HTML] pobierz, plaintext 
  1.     #container{
  2.     width:1059px;
  3.   margin:0 auto;
  4.  
  5.   }
[HTML] pobierz, plaintext
i teraz jest w środku. Jest to poprawnie ?

sprawdźcie u siebie czy się poprawnie wyświetla.
http://test4163.ueuo.com/

dziękuję.
f1xer
13.09.2009, 17:12:49
ie7,ie8,ff 3.5 jest ok, w ie6 się rozwala smile.gif musisz się pomęczyć z arkuszem dla ie6
imysz
13.09.2009, 19:06:43
a da radę zrobić teraz tak, że jeżeli strona zostanie otwarta na ie6 to wczyta się arkusz stylów dla tej przeglądarki ? jaki kod trzeba dodać by wczytać css, dla ie6 ?

pozdrawiam.
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.