Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Ramki w css na środek
Forum PHP.pl > Forum > Przedszkole
Warmix
15.01.2013, 22:55:05
Mam taki oto kod:
[HTML] pobierz, plaintext 
  1. #menulewe {
  2. border: 1px solid rgba(0,0,255,1);
  3. width: 20%;
  4. float: left;
  5. margin-top: 1%;
  6. background-color: rgba(69,139,116,0.8);
  7. word-wrap: break-word;
  8. padding: 5px 5px 5px 5px;
  9. -webkit-border-radius: 20px;
  10. -khtml-border-radius: 20px;
  11. -moz-border-radius: 20px;
  12. border-radius: 20px;
  13.  
  14. }
  15.  
  16. #tresc {
  17. border: 1px solid rgba(0,0,255,1);
  18. width: 50%;
  19. float: left;
  20. margin-top: 1%;
  21. background-color: rgba(69,139,116,0.8);
  22. word-wrap: break-word;
  23. padding: 5px 5px 5px 5px;
  24. -webkit-border-radius: 20px;
  25. -khtml-border-radius: 20px;
  26. -moz-border-radius: 20px;
  27. border-radius: 20px;
  28. }
[HTML] pobierz, plaintext


Mam takie oto dwie ramki, znajdujące się obok siebie. Niestety próbowałem już kilkunastu sposobów, żeby wyśrodkować je w poziomie i nic... Ktoś pomoże? Zależy mi na tym, by nie określać stałej szerokości strony, ewentualnie w procentach...
tolomei
15.01.2013, 23:04:19
Jeśli możesz - utwórz ten przypadek na http://jsfiddle.net

Pozdro
Damonsson
15.01.2013, 23:04:22
HTML + HTML i CSS rodziców do momentu napotkania określonej szerokości, w przypadku braku, do body. Inaczej to wróżbita Maciej może pomóc. Chyba, że jesteś na etapie tworzenia layoutu, wtedy obydwa w kontener i text-align: center, albo określasz jakąś szerokość i margin: 0 auto.
Warmix
16.01.2013, 20:24:00
Nie działa... ;/
Maciek1705
16.01.2013, 20:33:03
troszkę dziwnie się do tego zabrałeś i jeśli dobrze Cię zrozumiałem chcesz żeby oby dwa te elementy były obok siebie i wyśrodkowane to nie rozumiem atrybutu float.
Moja rada jest taka:
weź te #menulewe i #tresc opakuj divem, następnie wyśrodkuj go za pomocą margin:0 auto; i po sprawie. Pamiętaj tak jak Ci koledzy podpowiedzieli dla html i dla body musisz ustawić atrybut width:100%;
Warmix
17.01.2013, 21:09:21
Opakowałem innym divem, zrobiłem tak jak mowisz i dalej jest po lewej stronie ;/
Maciek1705
17.01.2013, 22:34:23 
[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Untitled Document</title>
  6.  
  7. <style type="text/css">
  8. *{margin:0; padding:0;}
  9. html, body{margin:0; width:100%;}
  10. #calosc{margin:0 auto; position:relative; width:71%;}
  11. #menulewe{
  12.     border:1px solid rgba(0,0,255,1);
  13.     width:28.5%;
  14.     margin-top:1%;
  15.     background-color:rgba(69,139,116,0.8);
  16.     padding:5px;
  17.     -webkit-border-radius:20px;
  18.     -khtml-border-radius:20px;
  19.     -moz-border-radius:20px;
  20.     border-radius:20px;
  21.     float:left;
  22. 	position:relative;
  23. }     
  24. #tresc{
  25.     border:1px solid rgba(0,0,255,1);
  26.     width:68.7%;
  27.     margin-top:1%;
  28.     background-color:rgba(69,139,116,0.8);
  29.     padding:5px;
  30.     -webkit-border-radius:20px;
  31.     -khtml-border-radius:20px;
  32.     -moz-border-radius:20px;
  33.     border-radius:20px;
  34. 	float:left;
  35. }
  36. </style>
  37. </head>
  38.  
  39. <body>
  40. 	<div id="calosc">
  41. 		<div id="menulewe"></div>
  42.     	<div id="tresc"></div>
  43.     </div>
  44. </body>
  45. </html>
[HTML] pobierz, plaintext


działa mogę Ci podpowiedzieć że nie jest to dobre rozwiązanie które chcesz zrobić. Na przyszłość staraj się chociaż 1 elementowi przypisać stałą szerokość np po lewej żeby było 300px a reszta się dostosowywała takie efekt jest praktyczniejszy a to co Ci napisałem nie zawsze muszi działać pamiętaj o tym.
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.