Zaloguj się

misio · 22-03-2012, 02:42

Witam, mam pewien problem z wyśrodkowaniem strony. Po dodaniu margin: 0 auto; tylko połowę strony wyśrodkowuje się, a reszta zostaje po lewej stronie.

Kod:
body {

        background:white;

        width: 900px;

        height: auto;

        font-family:"Times New Roman", Times, serif;

        padding: 0px;

        font-size: 14pt;

        color:white;

    }

a:link {

            color: white;

            text-decoration:none;

        }

a:visited {

            color: white;

            text-decoration:none;

        }

a:hover {

            color: white;

            text-decoration:none;

        }

ul li {

        display: block;

        list-style: none;

        margin: 0;

        padding: 0;

        float: left;

    }

ul {

    position: absolute;

}

/* ############# Nagłówek ############# */

div#naglowek {

        background-color:#222222 ;

        width: 900px;

        height: 50px;

    }

div.menu {

        width: 900px;

        height: 50px;

        margin-left: 75px;

        margin-right: 75px;

        }

div.menu  li {

        padding-left: 10px;

    }

/* ############# Top ############# */

div#top {

    background-image:url('../grafika/tlo_ciemne.jpg');

    width: 900px;

    height: 110px;

}    

div.lewy_top {

    width: 75px;

    height: 309px;

    background-image: url('../grafika/lewy_top.jpg');

    float:left;

}

div.prawy_top {

    width: 75px;

    height: 309px;

    background-image: url('../grafika/lewy_top.jpg');

    float:left;

}

div.srodkowy_top {

    width: 750px;

    height: 286px;

    background-image: url('../grafika/obraz_top.jpg');

    float:left;

}

/* ############# Belka pod głownym obrazem ############# */

div.lewy_przycisk {

    position: absolute;

    top: 454px;

    left: 83px;

    width: 22px;

    height:23px;

    background-image: url('../grafika/lewy_przycisk.jpg') ;

    background-repeat:no-repeat;

}

div.prawy_przycisk {

    position: absolute;

    top: 454px;

    left: 810px;

    width: 23px;

    height:23px;

    background-image: url('../grafika/prawy_przycisk.jpg') ;

    background-repeat:no-repeat;

}

div.belka {

    position: absolute;

    top: 454px;

    left: 105px;

    width: 705px;

    height: 23px;

    background-color: #DE0000;

}

/* ############# Główna część strony ############# */

div#content {

    position: absolute;

    top: 477px;

    left: 8px;

    width: 900px;

    height: 641px;

    background-image: url('../grafika/content.jpg');

}

div.pierwsza_kolumna {

    position: absolute;

    background-image:url('../grafika/content.jpg');

    top: 40px;

    left: 75px;

    width: 164px;

    height: 177px;

    z-index:auto;

}

Myślę że ktoś na pewno mi pomoże.

Pozdrawiam

hieroshima · 22-03-2012, 03:14

a gdzie dodałeś to margin: 0 auto ?

Pedro84 · 22-03-2012, 03:32

Strukturę HTML jeszcze pokaż...

misio · 22-03-2012, 12:58

To jest struktura html:

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="pl" http-equiv="Content-Language" />

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Untitled 1</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

    <div id="calosc">

    <div id="naglowek">

        <div class="menu">

        <ul>

            <li><a href="#">HOME</a></li>

            <li><a href="#">ABOUT</a></li>

            <li><a href="#">FEATURES</a></li>

            <li><a href="#">SHORTCODES</a></li>

            <li><a href="#">BLOG</a></li>

            <li><a href="#">CONTACT</a></li>

        </ul>

        </div>

</div>

<div id="top"></div>

<div id="top2">

<div class="lewy_top"></div>

<div class="srodkowy_top"></div>

<div class="lewy_przycisk"></div>

<div class="belka"></div>

<div class="prawy_przycisk"></div>

<div class="prawy_top"></div>

</div>

<div id="content">

    <div class="pierwsza_kolumna">

    <h3>Tytuł</h3>

    <p>Lorem</p>

    </div>

</div>

</div>

</body>

</html>

Cytat:a gdzie dodałeś to margin: 0 auto ?

Dodałem do body { ... } na samym końcu. Tutaj akurat nie mam, bo chciałem pokazać kod z przed próby wyśrodkowania.

Pedro84 · 22-03-2012, 16:08

Do kontenera to daj, a nie do body.

hieroshima · (Ten post był ostatnio modyfikowany: 22-03-2012, 17:28 przez hieroshima.)

to nic nie zmieni. Za dużo pozycjonowania absolutnego prawie każdy div ma pozycje absolutną i w każdym jest wartość top i left więc jak on ma środkować jak każdy element ma swoje wartości left i top.

hieroshima · 22-03-2012, 21:40

lepiej zmień ten kod i nie pozycjonuj bezwzględnie bo będzie się sypać

misio · 22-03-2012, 23:50

Dzięki za pomoc, niestety nawet po wprowadzeniu tego ostatniego kodu nic nie pykło.

Mam pozycjonowanie absolutne przez jeden głupi element, a dokładnie mówiąc przez pewną belkę. Nie umiałem jej w inny sposób wypozycjonować więc poszedłem na łatwiznę a teraz będę poprawiał cały kod.

TastemanPL · 23-03-2012, 12:21

Hmm. rozumiem cię też chciałem kiedyś wyśrodkować stronę zrobiłem to <center> po <html> i </center> przed </html>.Mi pomogło

hieroshima · 23-03-2012, 22:55

<center> jest niezgodne ze standardami

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie