Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css]problem z wyśrodokowaniem
gigzorr
post 8.03.2010, 15:36:05
Post #1





Grupa: Zarejestrowani
Postów: 652
Pomógł: 47
Dołączył: 6.02.2010
Skąd: Radom

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

[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


Ten post edytował gigzorr 8.03.2010, 15:37:50
Go to the top of the page
+Quote Post
MateuszS
post 8.03.2010, 15:43:15
Post #2





Grupa: Zarejestrowani
Postów: 1 429
Pomógł: 195
Dołączył: 6.10.2008
Skąd: Kraków/Tomaszów Lubelski

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

ale jak wyrzuciles position absolute to sie wysrodkowywalo? a zwykle <center> nie dziala, czy nie chcesz?


--------------------
O! Zimniok :P
Go to the top of the page
+Quote Post
gigzorr
post 8.03.2010, 15:51:46
Post #3





Grupa: Zarejestrowani
Postów: 652
Pomógł: 47
Dołączył: 6.02.2010
Skąd: Radom

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

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.
Go to the top of the page
+Quote Post
Twist
post 8.03.2010, 15:54:20
Post #4





Grupa: Zarejestrowani
Postów: 174
Pomógł: 11
Dołączył: 12.10.2008
Skąd: Dublin

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

Masz gdzieś to online?

Popróbuj z margin:0 auto i stałą szerokością.
Go to the top of the page
+Quote Post
MateuszS
post 8.03.2010, 15:56:20
Post #5





Grupa: Zarejestrowani
Postów: 1 429
Pomógł: 195
Dołączył: 6.10.2008
Skąd: Kraków/Tomaszów Lubelski

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

[HTML] pobierz, plaintext 
  1. position:absolute;
  2. top: 100px; //zmieniasz
  3. left: 300px;  //zmieniasz
[HTML] pobierz, plaintext


--------------------
O! Zimniok :P
Go to the top of the page
+Quote Post
gigzorr
post 8.03.2010, 18:41:50
Post #6





Grupa: Zarejestrowani
Postów: 652
Pomógł: 47
Dołączył: 6.02.2010
Skąd: Radom

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

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 .
Go to the top of the page
+Quote Post
MateuszS
post 8.03.2010, 18:50:48
Post #7





Grupa: Zarejestrowani
Postów: 1 429
Pomógł: 195
Dołączył: 6.10.2008
Skąd: Kraków/Tomaszów Lubelski

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

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

Ten post edytował MateuszScirka 8.03.2010, 18:51:58


--------------------
O! Zimniok :P
Go to the top of the page
+Quote Post
gigzorr
post 8.03.2010, 19:09:59
Post #8





Grupa: Zarejestrowani
Postów: 652
Pomógł: 47
Dołączył: 6.02.2010
Skąd: Radom

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

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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 31.07.2025 - 10:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn