[CSS]Wyśrodkowanie strony Opcje

[daniel1302]

Witam mam taki CSS

[HTML] pobierz, plaintext 
*{
	background-color : #000000;
}
#header
{
	background-image : url("images/header.jpg");
	width : 989px;
	height : 300px;
	overflow: auto;
	position : absolute;
	top : 0px;
	right : 10px;
}
#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 : -45px;
	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 : absolute;
	top : 300px;
	right : 812px;
}
#leftField
{
	margin-left : 5px;
}
#leftLine 
{
	background-image : url("images/leftLine.jpg");
	background-repeat : repeat-y;
	position : absolute;
	top : 300px;
	right : 800px;
	width : 13px;
	min-height: 550px;
	height:auto; 
	height: 100%;
}
#centerColumn
{
	width : 585px;
	position : absolute;
	top : 360px;
	right : 210px;
}
#rightLine 
{
background-image : url("images/rightLine.jpg");
	background-repeat : repeat-y;
	position : absolute;
	top : -60px;
	right : -13px;
	width : 13px;
	min-height: 550px;
	height:auto; 
	height: 100%;
}
#rightMenu 
{
	background-image : url("images/rightMenu.jpg");
	background-repeat : repeat-y;
	padding-right : 0px; 
	width : 187px;
	overflow: auto;
	position : absolute;
	top : -60px;
	right : -200px;
	min-height: 550px;
	height:auto; 
	height: 100%;
}
#rightField
{
	margin-right : 5px;
}
[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]

[HTML] pobierz, plaintext 
body {
margin: 0px auto;
width: 1000px;
}
[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]

Ale przy mniejszej rozdzielczosci ucina lewa czesc strony

Ten post edytował daniel1302 16.06.2008, 06:33:52

[Lonas]

Tez mialem podobny problem, w najgorszym wypadku dodaj

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

i powinno byc tez dobrze

[Kreton]

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.

Ten post edytował Kreton 16.06.2008, 08:34:01

[ciepolml]

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.

Ten post edytował ciepolml 16.06.2008, 11:16:32

[Kreton]

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

Ten post edytował Kreton 16.06.2008, 12:44:07

[--daniel1302--]

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]

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;
}