Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Wyśrodkowanie strony
Forum PHP.pl > Forum > Przedszkole
daniel1302
16.06.2008, 06:06:45
Witam mam taki CSS
[HTML] pobierz, plaintext 
  1. *{
  2. 	background-color : #000000;
  3. }
  4. #header
  5. {
  6. 	background-image : url("images/header.jpg");
  7. 	width : 989px;
  8. 	height : 300px;
  9. 	overflow: auto;
  10. 	position : absolute;
  11. 	top : 0px;
  12. 	right : 10px;
  13. }
  14. #title
  15. {
  16. 	font-family : Georgia, Tahoma, sans-serif;
  17. 	font-size : 22px;
  18. 	font-variant : small-caps;
  19. 	font-style : italic;
  20. 	font-weight : bold;
  21. 	letter-spacing : 1px;
  22. 	overflow: auto;
  23. 	position : absolute;
  24. 	top : -45px;
  25. 	right : 192px;
  26. }
  27. #leftMenu
  28. {
  29. 	background-image : url("images/leftMenu.jpg");
  30. 	background-repeat : repeat-y;
  31. 	width : 187px;
  32. 	min-height: 550px;
  33. 	height:auto; 
  34. 	height: 100%;
  35. 	min-height: 350px;
  36. 	overflow: auto;
  37. 	position : absolute;
  38. 	top : 300px;
  39. 	right : 812px;
  40. }
  41. #leftField
  42. {
  43. 	margin-left : 5px;
  44. }
  45. #leftLine 
  46. {
  47. 	background-image : url("images/leftLine.jpg");
  48. 	background-repeat : repeat-y;
  49. 	position : absolute;
  50. 	top : 300px;
  51. 	right : 800px;
  52. 	width : 13px;
  53. 	min-height: 550px;
  54. 	height:auto; 
  55. 	height: 100%;
  56. }
  57. #centerColumn
  58. {
  59. 	width : 585px;
  60. 	position : absolute;
  61. 	top : 360px;
  62. 	right : 210px;
  63. }
  64. #rightLine 
  65. {
  66. background-image : url("images/rightLine.jpg");
  67. 	background-repeat : repeat-y;
  68. 	position : absolute;
  69. 	top : -60px;
  70. 	right : -13px;
  71. 	width : 13px;
  72. 	min-height: 550px;
  73. 	height:auto; 
  74. 	height: 100%;
  75. }
  76. #rightMenu 
  77. {
  78. 	background-image : url("images/rightMenu.jpg");
  79. 	background-repeat : repeat-y;
  80. 	padding-right : 0px; 
  81. 	width : 187px;
  82. 	overflow: auto;
  83. 	position : absolute;
  84. 	top : -60px;
  85. 	right : -200px;
  86. 	min-height: 550px;
  87. 	height:auto; 
  88. 	height: 100%;
  89. }
  90. #rightField
  91. {
  92. 	margin-right : 5px;
  93. }
[HTML] pobierz, plaintext

i jeśli mam rozdzielczość 1024x768
to jest OK
ale jeśli ja pracuję na nowym komputerze(1152x864) to strona jest po prawej stronie i chce ją wyśrodkować
phpion
16.06.2008, 06:11:16 
[HTML] pobierz, plaintext 
  1. body {
  2. margin: 0px auto;
  3. width: 1000px;
  4. }
[HTML] pobierz, plaintext

na pewno jest poprawnie interpretowane przez Operę, FF, IE7 (IE6 na 90%) w XHTML 1.0 Strict ale jak w pozostałych to nie dam głowy.
daniel1302
16.06.2008, 06:32:17
Ale przy mniejszej rozdzielczosci ucina lewa czesc strony
Lonas
16.06.2008, 06:48:58
Tez mialem podobny problem, w najgorszym wypadku dodaj

[HTML] pobierz, plaintext 
  1. <div align="center">
[HTML] pobierz, plaintext


i powinno byc tez dobrze
Kreton
16.06.2008, 08:30:50
Ktoś mnie oświeci jak body { margin: 0px auto; } może wyśrodkować mu elementy spozycjonowane absolutnie?
Nawet jak doda sobie diva obemujacego to i tak użycie absolute wyjmuje mu elementy z naturalnego biegu.

Kolego: tak się nie da. Możesz co najwyżej zamknąć to wszystko w div, nadać mu pozycjonowanie absolutne, a elementom wewnątrz pozycjonowanie relatywne i wtedy to zadziała. Ale na twoim miejscu przebudowałbym lay bez użycia pozycjonowania absolutnego.
ciepolml
16.06.2008, 11:13:32
Aj, a po co pozycjonowanie absolutne? Bedziesz mial problem dodatkowo bo marginesy masz na pikselach ustalone ... a powinny byc margin: 0 auto;, no ale na absolute to bedzie ceizko.
Nadaj wszytkim relative i baw sie teraz w marign-left:auto; margin-right:auto; a topa pokombiuj na minusowych wartościach, jezełi masz jakąś warstwę pod stroną.

Hmm, ok teraz tak patrze to może tam być wieej problemów. Dodaj kod html-a. Pokombinujemy.
Kreton
16.06.2008, 12:36:23
@ciepolml, napisz to jeszcze raz bo nic sie nie da z tego zrozumieć?
Co da nadanie elementom pozycjonowania relatywnego, skoro tak zakładam, nie ma elementu obejmujacego z nadanym position:absolute ? Co najwyżej smiesznie sie ustawią a efekt bedzie tragiczny.
-daniel1302-
16.06.2008, 15:12:59
Teraz zmieniłem na Relatywne i mi sie strona rozłazi w zależności od treści w wcześniejszym Divie
Kod
body{
    background-color : #000000;
}
#header
{
    background-image : url("images/header.jpg");
    width : 989px;
    height : 300px;
    overflow: auto;
    position : relative;
    top : 0px;
    left : 65px;
}
#title
{
    font-family : Georgia, Tahoma, sans-serif;
    font-size : 22px;
    font-variant : small-caps;
    font-style : italic;
    font-weight : bold;
    letter-spacing : 1px;
    overflow: auto;
    position : absolute;
    top : 0px;
    right : 192px;
}
#leftMenu
{
    background-image : url("images/leftMenu.jpg");
    background-repeat : repeat-y;
    width : 187px;
    min-height: 550px;
    height:auto;
    height: 100%;
    min-height: 350px;
    overflow: auto;
    position : relative;
    top : 0px;
    left : 65px;
}
#leftField
{
    margin-left : 5px;
}
#leftLine
{
    background-image : url("images/leftLine.jpg");
    background-repeat : repeat-y;
    position :relative;
    bottom : 350px;
    left : 252px;
    width : 13px;
    min-height: 350px;
    height:auto;
    height: 100%;
}
#centerColumn
{
    width : 585px;
    position : relative;
    bottom : 650px;
    left : 265px;
}
#rightLine
{
background-image : url("images/rightLine.jpg");
    background-repeat : repeat-y;
    position : relative;
    bottom : 421px;
    left : 590px;
    width : 13px;
    min-height: 672px;
    height:auto;
    height: 100%;
}
#rightMenu
{
    background-image : url("images/rightMenu.jpg");
    background-repeat : repeat-y;
    padding-right : 0px;
    width : 187px;
    position : relative;
    bottom : 1093px;
    left : 602px;
    min-height: 672px;
    height:auto;
    height: 100%;
}
#rightField
{
    margin-right : 5px;
}
daniel1302
16.06.2008, 19:09:26
OK przerobiłem na left i right moj lay do zamknięcia
Kod
body {
        background-color: #000;
        margin: 0;
        padding: 0;
        text-align:center;
    }

div {
        font: verdana 12px #000;
        position:relative;
    }

#container {
        margin:0 auto;
        padding:0 5px 0 5px;
        position:relative;
        width:989px;
        text-align:left;
        clear: both;
    }

#naglowek {
        background: url(images/header.jpg) no-repeat;
        width:989px;
        height:300px;
        margin-top:15px;
    }

#lewo {
                background: url(images/leftMenu.jpg) repeat-y;
        width:187px;
        float:left;
                min-height: 500px;
    }
    
#lewo_linia {
                background: url(images/leftLine.jpg) repeat-y;
        width:13px;
        float:left;
                min-height: 500px;
    }

#prawo {
                background: url(images/rightMenu.jpg) repeat-y;
        width:187px;
        float:right;
                min-height: 500px;
    }

#prawo_linia {
                background: url('images/rightLine.jpg') repeat-y;
        width:13px;
        float:left;
                min-height: 500px;
    }

#srodek {
        width:589px;
        float:left;
}

#stopka {
        clear:both;
        text-align:center;
}
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.