Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css]problem z wyśrodokowaniem
Forum PHP.pl > Forum > Przedszkole
gigzorr
8.03.2010, 15:36:05 
[CSS] pobierz, plaintext 
  1. * {margin:0;
  2.    padding:0;
  3.  
  4. }
  5.  
  6. body {background-image:url(images/tlo.jpg);
  7.  
  8. 	max-width: 1200px;
  9.     min-width: 790px;
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  
  17. }
  18.  
  19. #logo {background-image:url(images/logo.png);
  20.        width:990px;
  21. 	   height:174px;
  22. }
  23.  
  24. #content {   float: left;
  25.     width: 70%;
  26.     height: 500px;
  27.     float:left;
  28.     margin-left: 20%;
  29.     display: inline;
  30.  
  31.  
  32.  
  33. 		 }
  34.  
  35.  
  36.  
  37. ul, ul li {
  38. 	display: block;
  39. 	list-style: none;
  40. 	margin: 0;
  41. 	padding: 0;
  42. }
  43.  
  44. ul {
  45. 	width: 124px;
  46. 	padding: 2px 2px 1px 2px;
  47. 	background-color: #f90;
  48.  
  49. 	position:absolute;
  50.  
  51.  
  52.  
  53.  
  54.  
  55. }
  56.  
  57. ul li {
  58. 	border-bottom: 1px solid #C90;
  59. }
  60.  
  61. ul a:link, ul a:visited {
  62. 	display: block;
  63. 	width: 110px;
  64. 	text-decoration: none;
  65. 	padding: 7px;
  66. 	font-weight: bold;
  67. 	color: #000;
  68. 	font-family:Verdana, Geneva, sans-serif;
  69. 	font-size:12px;
  70.  
  71. }
  72.  
  73. ul a:hover {
  74. 	width: 100px;
  75. 	background-color: #f90;
  76. 	color: #fff;
  77. 	border-left: 2px solid #f60;
  78. }		  
  79.  
  80.  
  81.  
  82.  
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95. #menu     {background-image:url(images/menu.png);
  96.            width:990px;
  97. 		   height:45px;
  98. 		   text-align:center;
  99.  
  100.  
  101.  
  102. }
  103.  
  104.  
  105.  
  106.  
  107.  
  108. .men {text-decoration:none;
  109.       margin-left:32px;
  110. 	  font-family:Verdana, Geneva, sans-serif;
  111. 	  color:#000;
  112. }     
  113.  
  114. #menu .opisy {color:#000;
  115.               font-family:Georgia, "Times New Roman", Times, serif;
  116. 			  font-size:20px;
  117. 			  float:left;	  
  118. }
  119.  
  120. .str {color:#000;
  121.       font-family:Verdana, Geneva, sans-serif;
  122. 	  font-size:16px;
  123. 	  text-decoration:none;
  124. }
  125.  
  126.  
  127. #stopka {
  128.          height:87px;
  129. 		 clear:both;
  130. 		 text-align:center;
  131. 		 font-size:12px;
  132. 		 width:1007px;
  133.  
  134.  
  135.  
  136. }
[CSS] pobierz, plaintext 




[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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>test</title>
  6. <link rel="stylesheet" href="style.css" type="text/css" />
  7. <link rel="shortcut icon" href="images/16.png" type="image/x-icon" />
  8. </head>
  9. <body>
  10. <center>
  11.  
  12.  
  13.  
  14. <center><div id="logo"></div>
  15.  
  16.  
  17.   <div id="menu">
  18.     <p class="opisy">Opisy:
  19.       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="str">Strona główna</a>&nbsp;&nbsp;&nbsp;<a href="#" class="str">Dodaj</a>&nbsp;&nbsp;&nbsp;<a href="#" class="str">Pobierz</a>&nbsp;&nbsp;&nbsp;<a href="#" class="str">Pomoc</a>&nbsp;&nbsp;&nbsp;<a href="#" class="str">Kontakt</a></a> </p>
  20.   </div>
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.   <div id="content">
  30.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere eros et nunc sodales a dictum enim dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tristique eleifend tempor. Nam tincidunt interdum eros a suscipit. Curabitur in mauris orci, sit amet commodo augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse at dignissim felis. Nam commodo sem urna. Ut non augue dolor. Vestibulum ultricies tincidunt dolor a fermentum. Sed a iaculis velit. Aliquam id urna elit, eget faucibus leo. Donec pulvinar, nunc ut ornare lobortis, felis mauris egestas mi, nec rutrum mauris lorem a velit. Nunc vel sollicitudin est. Nunc bibendum, dui sed commodo aliquam, lorem felis tempor purus, eu ullamcorper ligula mi luctus nisl. Etiam ut augue velit, a rhoncus tellus. 
  31.   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere eros et nunc sodales a dictum enim dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tristique eleifend tempor. Nam tincidunt interdum eros a suscipit. Curabitur in mauris orci, sit amet commodo augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse at dignissim felis. Nam commodo sem urna. Ut non augue dolor. Vestibulum ultricies tincidunt dolor a fermentum. Sed a iaculis velit. Aliquam id urna elit, eget faucibus leo. Donec pulvinar, nunc ut ornare lobortis, felis mauris egestas mi, nec rutrum mauris lorem a velit. Nunc vel sollicitudin est. Nunc bibendum, dui sed commodo aliquam, lorem felis tempor purus, eu ullamcorper ligula mi luctus nisl. Etiam ut augue velit, a rhoncus tellus. 
  32. </div>
  33.  
  34.   <div>
  35. <ul>
  36. <li><a href="#">śmieszne</a></li>
  37. <li><a href="#">erotyczne</a></li>
  38. <li><a href="#">angielskie</a></li>
  39. <li><a href="#">o kobietach</a></li>
  40. <li><a href="#">o facetach</a></li>
  41. <li><a href="#">na dobranoc</a></li>
  42. <li><a href="#">polityczne</a></li>
  43. <li><a href="#">o życiu</a></li>
  44. <li><a href="#">miłość</a></li>
  45. <li><a href="#">sportowe</a></li>
  46. <li><a href="#">chuck norris</a></li>
  47. <li><a href="#">gadu-gadu</a></li>
  48.  
  49. </ul></div>
  50.  
  51.  
  52.  
  53.  
  54.  
  55. <div id="stopka"><br /><br /><i>All rights reserved Š by Gigzor 2010</i></div>
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68. </center>
  69.  
  70. </body>
[HTML] pobierz, plaintext


Problem jest w tym , że na rozdzielczości 1024 jest wszystko ok , ale na każdej większej lewe menu nie chce się wycentrować.
czyli :
[HTML] pobierz, plaintext 
  1.   <div>
  2. <ul>
  3. <li><a href="#">śmieszne</a></li>
  4. <li><a href="#">erotyczne</a></li>
  5. <li><a href="#">angielskie</a></li>
  6. <li><a href="#">o kobietach</a></li>
  7. <li><a href="#">o facetach</a></li>
  8. <li><a href="#">na dobranoc</a></li>
  9. <li><a href="#">polityczne</a></li>
  10. <li><a href="#">o życiu</a></li>
  11. <li><a href="#">miłość</a></li>
  12. <li><a href="#">sportowe</a></li>
  13. <li><a href="#">chuck norris</a></li>
  14. <li><a href="#">gadu-gadu</a></li>
  15.  
  16. </ul></div>
  17.  
[HTML] pobierz, plaintext

a css jest wyżej.

Tak jak napisałem wyżej , wszystko jest ok , strona się wyśodkowuje oprócz tego menu, cały czas jest w tym samym miejscu.Probowałem marginesow,pozycjowania absolutnego.
Pewnie się zapytacie poco jest w position:absolute w menu, bez tego position absolute menu wygląda okropnie.Raz mi się udało menu ustawić dobrze, ale znowu content aka tekst nawalał.Czyli na 1024 all jest ok , każda większa nawala , a problem jest tylko w tym lewym menu.
[CSS] pobierz, plaintext 
  1. ul {
  2. 	width: 124px;
  3. 	padding: 2px 2px 1px 2px;
  4. 	background-color: #f90;
  5. 	position:absolute;
  6.  
  7.  
  8. }
[CSS] pobierz, plaintext
MateuszS
8.03.2010, 15:43:15
ale jak wyrzuciles position absolute to sie wysrodkowywalo? a zwykle <center> nie dziala, czy nie chcesz?
gigzorr
8.03.2010, 15:51:46
Cytat(MateuszScirka @ 8.03.2010, 15:43:15 ) *
ale jak wyrzuciles position absolute to sie wysrodkowywalo? a zwykle <center> nie dziala, czy nie chcesz?



zwykłe center przecież mam w kodzie , ale to nie pomaga , wszystko się centruje oprócz tego menu

a position absolute już centrowałem , wycentrowałem , ale znowu pod inna rozielczościa tekst zachodził na menu.marginy nie pomagaja.
Twist
8.03.2010, 15:54:20
Masz gdzieś to online?

Popróbuj z margin:0 auto i stałą szerokością.
MateuszS
8.03.2010, 15:56:20 
[HTML] pobierz, plaintext 
  1. position:absolute;
  2. top: 100px; //zmieniasz
  3. left: 300px;  //zmieniasz
[HTML] pobierz, plaintext
gigzorr
8.03.2010, 18:41:50
Cytat(MateuszScirka @ 8.03.2010, 15:56:20 ) *
[HTML] pobierz, plaintext 
  1. position:absolute;
  2. top: 100px; //zmieniasz
  3. left: 300px;  //zmieniasz
[HTML] pobierz, plaintext



Tak nie da rady, bo do jednej rozdzielczości się przystostuje a do innej już dupa .
MateuszS
8.03.2010, 18:50:48
na poczatku
[HTML] pobierz, plaintext 
  1. <center>
  2. <div align="center" style="width: 1024px;">
[HTML] pobierz, plaintext


i na koncu 
[HTML] pobierz, plaintext 
  1. </div>
[HTML] pobierz, plaintext


+ usun jedno <center> na poczatku, u mnie sie troche polozenie zmienilo, nie wiem jak to wyglada na innych rozdzielczosciach, sprawdz sobie to juz sam. Operuj na tym divie

i pobaw sie atrybutem float
gigzorr
8.03.2010, 19:09:59
Cytat(MateuszScirka @ 8.03.2010, 18:50:48 ) *
na poczatku
[HTML] pobierz, plaintext 
  1. <center>
  2. <div align="center" style="width: 1024px;">
[HTML] pobierz, plaintext


i na koncu 
[HTML] pobierz, plaintext 
  1. </div>
[HTML] pobierz, plaintext


+ usun jedno <center> na poczatku, u mnie sie troche polozenie zmienilo, nie wiem jak to wyglada na innych rozdzielczosciach, sprawdz sobie to juz sam. Operuj na tym divie

i pobaw sie atrybutem float



Pomogło troche poustawiałem i działa , dzięki smile.gif
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.