Forum PHP.pl > [HTML][CSS] Tło

Pomoc - Szukaj - Użytkownicy - Kalendarz

Maxik

14.09.2008, 19:14:31

Mam tło z repeat-x które jest u góry strony, reszta to jednolity kolor. Tło jest oczywiście w body, html. Mam do tego głównego diva content i chciałbym żeby ten div był odsunięty od górnej krawędzi ekranu o 45px, więc do diva dałem margin-top: 45px; Na pierwszy rzut oka wszystko było w porządku, potem zauważyłem, że w porządku z tłem jest tylko z lewej strony na szerokość wyciętego elementu tła który za to tło służy, reszta przesunęła się razem z marginem. Dodatkowo strona ma za dużą szerokość, wychodzi daleko poza ekran, a pracuję na rozdzielczości 1280x1024. Działo się tak w Operze, w innych przeglądarkach nie sprawdzałem.

style.css:

Kod

    body, html{
        background-color: #F2F2F2;
        background-image: url('images/miniCMS_01.jpg');
        background-repeat: repeat-x;
        font-family: Arial, Helvetica, Verdana;
        font-size: 11px;
        color: black;
        margin-top: 0;
    }

    #content{
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        border: 2px solid #D7D6D5;
        width: 875px;
        height: 100%;
        min-height: 1000px;
        background-color: #FFFFFF
    }

    #header{
        background-image: url('images/miniCMS_04.jpg');
        background-repeat: no-repeat;
        width: 875px;
        height: 170px;
        padding: 100px 400px 5px 110px;
    }

index.html:

[HTML] pobierz, plaintext 
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  <meta name="Description" content="[ #DESCRIPTION# ]" />
  <meta name="Author" content="[ #AUTHOR# ]" />
  <meta name="Keywords" content="[ #KEYWORDS# ]" />
  <meta name="Generator" content="CoreEditor" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>miniCMS - Strona projektu</title>
</head>
<body>
<div id="content">
<div id="header">
 
</div>
<div id="poziom">
 
</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

W tym pliku wywaliłem górny margines, ale to nie jest dla mnie rozwiązaniem problemu.

wookieb

14.09.2008, 19:51:59

Daj link bo przeciez nie widzimy tła. A po drugie nie chce mi sie tworzyc plikow. Dasz link to bedzie expresowa odp.

Maxik

14.09.2008, 20:00:18

http://maxik.netmark.pl/miniCMS/strona_pro...lay3/index.html Dodałem ten nieszczęsny margin-top

Shili

14.09.2008, 20:14:26

Jak robisz te same style dla body i html, to nic dziwnego. Na sam początek tło daj do html. Usuń je z body.
Tudzież (będzie ładniej pod względem kodu) dla #content daj padding-top zamiast margin-top.

Maxik

14.09.2008, 20:16:46

Cytat

Dodatkowo strona ma za dużą szerokość, wychodzi daleko poza ekran, a pracuję na rozdzielczości 1280x1024. Działo się tak w Operze, w innych przeglądarkach nie sprawdzałem.

A na to Shili masz radę?

Shili

14.09.2008, 20:25:16

Ups, przeoczyłam.
Padding headera. Jest straszliwie duży i to on rozwala stronę.

Maxik

14.09.2008, 20:30:39

Wszystko działa, błąd z tłem był spowodowany body. margin-top zostawiłem bo padding-top odsuwał mi też header. Dzięki wielkie za pomoc, na php.pl zawsze można polegać

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.