Forum PHP.pl > [HTML][CSS]Rozjeżdzanie się divów

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Rozjeżdzanie się divów

lwc

12.10.2008, 08:20:56

Witam, mam pewien problem związany z divami. Otóż jestem w trakcie tworzenia pewnej stronki. W tej chwili robię jej wygląd, jednak mam problem z divami, które nie trzymają się "kupy." Teoretycznie strona wygląda ok, ale jeżeli scrollem przybliżą lub oddale stronę, od razu wszystko zmienia swoje położenie, mówiąc delikatnie, lata gdzie chce. Tak się dzieje w FF, w Operze od razu wszystko jest źle poukładane, IE to już porażka. Głównie chodzi o div "srodkowa" z napisem "Strona Główna". Tutaj dam kod i screen. Mam nadzieję, że pomożecie, aby tak się nie działo, bo ja już nie mam pojęcia czemu tak, a nie inaczej.

Screen: http://img262.imageshack.us/img262/1685/divlj7.jpg

arkusz.css

Kod

  .menu {
    font-size: 15px;
    font-family: Tahoma;
    letter-spacing: 1px;
    line-height: 18px;
    margin-top: 10px;
    padding: 5px;
    padding-top: 0px;

  }

  .menu ul {
    list-style: none;
  }

  .lewa {
    border: 1px solid #C6C6C6;
    width: 190px;
    margin-top: 3px;
    float: left;

  }

  .gora {
    border: 1px solid #C6C6C6;
    float: left;
    margin-top: 3px;
    width: 1000px;
    height: 100px;
  }

  .prawa {
    border: 1px solid #C6C6C6;
    float: right;
    width: 190px;
    margin-top: 3px;
    text-align: center;
    margin-right: 6px;
  }

  .prawa img {

    margin-bottom: 3px;
  }

  .lewa form {
    margin-top: 35px;
    text-align: center;
    margin-bottom: 3px;
    font-size: 13px;
    font-family: Tahoma;
  }

  h1 {

    font-size: 16px;
    font-family: Tahoma;
    text-align: center;
  }

  .srodkowa {
    margin-top: 3px;
    margin-left: 3px;
    border: 1px solid #C6C6C6;
    float: left;
    width: 610px;
  }

index.php

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title>elo</title>
<meta name="description" content="elo">
<meta name="keywords" content="elo">
<meta name="author" content="lwc">
<link rel="stylesheet" href="arkusz.css" type="text/css">    
</head>
<body>
 
<!--gora-->
<div class="gora">
<img src="images/logo.jpg" alt="logo">
</div>
 
<!--lewa-->
<div class="lewa">
 
<!-- Menu -->
<h1>Menu</h1>
<div class="menu">
<ul>
<li><a href="index.php?id=1">Strona Główna</a></li>
<li><a href="index.php?id=2">Linki</a></li>
<li><a href="ksiega.php">Księga Gości</a></li>
<li><a href="index.php?id=3">Kontakt</a></li>
</ul>
</div>
 
<!--formularz logowania-->
<form action="logowanie.php" method="POST">
<h1>Logowanie</h1>
<br>Login:<br>
<input type="text" name="login">
<br>Hasło:<br>
<input type="password" name="password">
<input type="submit" name="przycisk" value="Zaloguj">
</form>
</div>
 
<!--prawa-->
<div class="prawa">
<h1>Reklama</h1>
<img src="images/reklama.jpg" alt="reklama">
<a href="http://www.we.krolnet.pl" target="_blank"><img style="border: 0px;" src="http://www.we.krolnet.pl/reklama/button.jpg" alt="Web Edit - Edytor HTML, PHP, CSS. Posiada dużo funkcji i generatorów."></a>
</div>
 
<!--srodkowa-->
<div class="srodkowa">
<h1>Strona Główna</h1>
<?
include 'include.php';
?>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

Zac

12.10.2008, 08:45:32

może warto poczytać o pozycjonowaniu ?

trucksweb

12.10.2008, 08:49:45

div class srodkowa powinna byc umieszczona miedzy lewa i prawa strona- w kodzie php a nie na koncu.
POD IE musisz zmniejszyc wartosci wymiarow- albo dodac dla IE wyjatki w css

lwc

12.10.2008, 08:51:10

Czytałem o pozycjonowaniu na kurshtml.boo.pl i szczerze mówiąc nie rozumiem tego za bardzo. Ja mam ogólnie duży problem ze zrozumieniem css'a, ale coś potrafię zrobić. Z tym poradzić sobie nie mogę, więc proszę o pomoc innych. Ja mogę pisać różne skrypty logowania itp. w PHP, ale z szablonem strony zawsze miałem problemy. Wszystko przez css'a. Mogę na was liczyć ?

PS.
Dzięki trucksweb zaraz looknę

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.