Skocz do zawartości

[HTML] Błędne wyświetlanie

Nixsior

Przez Nixsior
w HTML, PHP, mySQL, JavaScript

 Udostępnij

Rekomendowane odpowiedzi

Nixsior Smart Newbie

Nixsior

Opublikowano
Opublikowano

Witajcie!

Już od bardzo dawna piszę strony, ale z czymś takim spotykam się pierwszy raz.

Zauważyłem ten błąd gdy zacząłem pisać tę stronę.

Zobaczcie:

nowyobrazmapabitowaas.png

 

Nie mówię tu o niepoprawnym wyświetlaniu tła.

Tylko o div'ach. W zielonym ustawiłem margin-top i czerwony przesuwa się razem z nim, WTF??

Mój kod:

-index.html

<!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=utf-8">
    <meta name="Description" content="Strona">
    <meta name="Keywords" content="">
    <meta name="Author" content="Strona">

    <title>Gra</title>
    <link href="./style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<center>
     <div id="page">
         <div id="test">:)</div>
</div>
</center>
</body>
</html>

 

-style.css

  html, body 
    {
        background-color: #000000;
        background-image: url("./images/tlo.png");
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: scroll;
    }

    #page
    {
        width: 900px;
        height: 100px;
        background-color: #ff0000;
    }
    
    #test
    {
        margin-top: 100px;
        background-color: #00ff00;
    }

 

Dodam jeszcze że źle wyświetla się tylko w FF, a w IE już dobrze

Odnośnik do komentarza
Udostępnij na innych stronach
Tymon Madman

Tymon

Opublikowano
Opublikowano 
    #page
    {
        width: 900px;
        padding-top: 100px;
        background-color: #ff0000;
        
    }
    
    #test
    {
        background-color: #00ff00;
    }

Odnośnik do komentarza
Udostępnij na innych stronach
Pepsi Chicken

Pepsi

Opublikowano
Opublikowano

Potrzebna pomoc w wytłumaczeniu mi :(

Mam coś takiego:

<!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" xml:lang="pl" lang="pl">
<head>

<title>Chelsea</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="zasoby/style.css" href="menu.css" />

</head>


<body>

<div id="pojemnik">
<div id="naglowek"><img src="zasoby/baner.jpg" alt="Tekst alternatywny" /></div>
<div id="menulewe">menu lewe <br />menu lewea</div>
<div id="tresc">tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br /></div>
<div id="menuprawe">menuprawe</div>
<div id="stopka">tutaj jest stopka strony</div>

</body>
</html>

 

i style:

 

#pojemnik {
width: 760px;
margin: 0 auto;
}
#naglowek {
border-bottom: 2px solid black;
}
#menulewe {
float: left;
width: 200px;
}
#tresc {
float:left;
width:406px;
border-left: 2px solid black;
border-right: 2px solid black;
}
#menuprawe {
float: left;
width: 150px;
}
#stopka {
border-top: 2px solid black;
clear: both;
}

 

I to mi daje prosty układ szerokości co miałem podany nawet i nawet kapuje co i jak jest, ale i tak nie mógłbym sobie poradzić z stworzeniem strony z takim czymś

loyt1.png

 

Domyślam się, że to wszystko się ustawia w 

<body>

<div id="pojemnik">
<div id="naglowek"><img src="zasoby/baner.jpg" alt="Tekst alternatywny" /></div>
<div id="menulewe">menu lewe <br />menu lewea</div>
<div id="tresc">tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br />tresc<br /></div>
<div id="menuprawe">menuprawe</div>
<div id="stopka">tutaj jest stopka strony</div>

</body>

 

Tylko może ktoś wytłumaczy jak coś takiego robić, bo to chyba jedna z ostatnich rzeczy która mi jest potrzebna do stworzenia jakiejś strony www :)

 

 

Z góry bardzo dziękuję tym co pomogli :)

Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij
Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...