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ś:
  1. <title>Mój dokument</title>
  2. <link rel="stylesheet" type="text/css" href="style.css" />
  3. </head>
  4. <center><img src="logo.png"></center>
  5. <div class="box"><a href="http://mfo3.pl">O grze</a><br>Fabuła<br>Pomoc</div>
  6. <div class="box2">Info<br>Działy</div>
  7.  
  8. </body>


Tym oto sposobem uzyskałem efekt, który możecie zobaczyć na mojej stronie internetowej: LINK
Jak widać, nie wygląda to zbyt ciekawie 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ę:
  1. <img src="logo.png" class="logo">


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. ohno-smiley.gif