Rozmieszczanie elementów, pozycjonowanie absolutne - problem

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Rozmieszczanie elementów, pozycjonowanie absolutne - problem

seitas Zobacz profil	30.08.2013, 19:03:02 Post #1
Grupa: Zarejestrowani Postów: 12 Pomógł: 0 Dołączył: 18.08.2013 Skąd: Tczew Ostrzeżenie: (0%)	Witam ;p Mam problem z poprawnym wyświetleniem niektórych elementów mojej strony. Otóż chodzi o to, że mam 3 obiekty : 2 kolumny i 1 logo Jedna kolumna jest umiejscowiona po lewej stronie, a druga po prawej. Po środku, na tej samej wysokości ma być logo. No i wstawiam to logo. Co mi się ukazuje na oczach? Lewa kolumna spadła znacząco na dół "wypchnięta" przez scentrowane logo. Próbowałem 2 sposobów: W pierwszym sposobie zdefiniowałem sobie dwa divy, czyli przyszłe kolumny - nadałem im formatowanie, kolor, pozycjonowanie absolutne itd. : div.box { background: blue; border-width: 3px; border-style: solid; border-color: red; height: 20cm; width: 3cm; font-size: 22px; positon: absolute; left: 0px; top: 10px; } div.box2 { background: blue; border-width: 3px; border-style: solid; border-color: red; height: 20cm; width: 3cm; font-size: 22px; position: absolute; right: 0px; top: 10px; } body { background: url(background.jpg); } Cały ten arkusz stylów jest w osobnym pliku .css . W pliku index.html ustawiłem sobie takie coś: [HTML] pobierz, plaintext <head> <title>Mój dokument</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <center><img src="logo.png"></center> <div class="box"><a href="http://mfo3.pl">O grze</a><br>Fabuła<br>Pomoc</div> <div class="box2">Info<br>Działy</div> </body> [HTML] pobierz, plaintext Tym oto sposobem uzyskałem efekt, który możecie zobaczyć na mojej stronie internetowej: LINK Jak widać, nie wygląda to zbyt ciekawie (IMG:style_emoticons/default/biggrin.gif) Sposób nr.2 : do pliku .css dodałem specjalną klasę: .logo { position: absolute; left: 50%; } w pliku index.html wywołałem obrazek uwzględniając powyższą klasę: [HTML] pobierz, plaintext <img src="logo.png" class="logo"> [HTML] pobierz, plaintext reszta wygląda tak samo. Dzięki temu sposobowi lewa kolumna już nie spada, ale logo i tak nie jest umiejscowione w połowie ekranu. Dotyka ją dopiero lewą krawędzią, tak jakby od końca, a reszta idzie dalej w prawo. Po prostu chciałbym uzyskać identyczny efekt jak przy użyciu znacznika <center></center>, oraz żeby kolumna nie spadała, choć przyczynę tego zjawiska znam, ale nie mogę doszukać się błędów. (IMG:style_emoticons/default/ohno-smiley.gif)