Forum PHP.pl > [css]Problem z dopasowaniem tła

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [css]Problem z dopasowaniem tła

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

Jarod

26.02.2006, 09:13:52

Kod CSS:

Kod

#kontener {
      margin: 0 11%;
      padding: 0;
      background-image: url(../layout/tlo.gif);
      background-repeat: repeat-x;
      background-attachment: fixed;
}

#belka {
    margin: 0;
      background-image: url(../layout/belka.gif);
      width: 100%;
      height: 131px;
}

Kod HTML:

[HTML] pobierz, plaintext 
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
 
      <div id="kontener">
 
         <p>test, test </br></p>
         <p>test, test </br></p>       
	  </div>
 
   </body>
[HTML] pobierz, plaintext

Rozumiem, że wtedy długość strony będzie się dopasowywała. Ale jak tak zrobiłem to na samej górze strony jest trochę PUSTEGO miejsca.

Próbowałem się tego pozbyć poprzez ustawienie marginesów ujemnych ale nie we wszystkich przeglądarkach to działa a pozatym czytałem, żeby lepiej nie stosować ujemnych marginesów.

Pozatym chcę żeby tło nie przesuwało się razem z zawartością strony bo mam tło z gradientu i będzie widać PRZEJŚCIA.. Przejścia widać tylko pod IE i chyba operą a w firefoxie jest tak jak chcę. Już nie mam siły..

Jak się tego pustego obszaru pozbyć?

code46

27.02.2006, 13:26:20

Nie rób pod IE

ens0re

27.02.2006, 13:48:19

@code46: Jak nie masz nic do powiedzenia to nie pisz..

@J4r0d: Spróbój coś takiego, chociaż nie jestem pewny:

[HTML] pobierz, plaintext 
* {
margin: 0;
padding: 0;
border: 0;
}
[HTML] pobierz, plaintext

Jarod

27.02.2006, 14:41:14

Cytat(ens0re @ 2006-02-27 12:48:19)

@code46: Jak nie masz nic do powiedzenia to nie pisz..

@J4r0d: Spróbój coś takiego, chociaż nie jestem pewny:

[HTML] pobierz, plaintext 
* {
margin: 0;
padding: 0;
border: 0;
}
[HTML] pobierz, plaintext

Próbowałem. Nie pomaga. Ustawiłem nawet:

Kod

margin: -8px 0;

pod Operą i FF jest ok. IE jedynie przycina tekst, tło nie przesuwa się.. :/

sztosz

27.02.2006, 15:45:09

Może sprobuj dla kontenera ustawić osobno kazdy margin:

margin-top: 0;
margin-bottom: ....itd.

Nie daję głowy, tak gdybam :|

Jarod

27.02.2006, 16:21:04

Cytat(sztosz @ 2006-02-27 14:45:09)

Może sprobuj dla kontenera ustawić osobno kazdy margin:

margin-top: 0;
margin-bottom: ....itd.

Nie daję głowy, tak gdybam :|

Nie pomaga :/

comzit

27.02.2006, 16:22:43

Co do pustego miejsca: Dla BODY ustaw margin i padding na 0;

Co do tego gradientu to chcesz żeby sie #kontener nie przesuwał? Bo nie kumam do konca o co Ci biega.

ens0re

27.02.2006, 16:33:48

Cytat(comzit @ 2006-02-27 15:22:43)

Co do pustego miejsca: Dla BODY ustaw margin i padding na 0;

Wydaje mi się, że już to napisałem w swoim powyżej poście. Selektor uniwersalny(*) ustawia wartość domyślną dla wszystkich selektorów.

comzit

27.02.2006, 16:44:43

Jak dla mnie to wszystko działa. Oczywiście można ustawić wszystko (*) ale to trochę jak GLOBAL w php. Raczej należy tego unikać i dlatego napisałem o BODY.

revyag

27.02.2006, 16:45:53

@J4r0d - daj linka do strony, po screenach też nie można wszystkiego powiedzieć

Jarod

27.02.2006, 17:01:26

Cytat(revyag @ 2006-02-27 15:45:53)

@J4r0d - daj linka do strony, po screenach też nie można wszystkiego powiedzieć

Nie mam jeszcze miejsca na serwerze, dlatego podaje kod.

CSS:

Kod

/* Styl główny */
/* Układ strony */

#kontener {
      margin: -8px 11%;
      padding: 0;
      background-image: url(../layout/tlo.gif);
      height: 100%;
      background-repeat: repeat-x, repeat-y;
      background-attachment: fixed;
}

#belka {
    margin: 0;
    padding: 0;
      background-image: url(../layout/belka.gif);
      width: 100%;
      height: 131px;
}

/* Reszta */

p {
    margin: 0;
    padding: 0;
}

HTML:

[HTML] pobierz, plaintext 
<body>
 
      <div id="kontener">
 
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <div id="belka">
         </div>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>
         <p>test, test </br></p>       
	  </div>
 
   </body>
[HTML] pobierz, plaintext

comzit

27.02.2006, 17:27:43

Kurcze, powiedz co chcesz osiągnąć tym #kontenerem?

Jak ma cały stać w miejscu w IE to gdzieś na forum widziałem link do tego rozwiązania dla IE. Ale jak tylko tło to raczej wykorzystaj tło dla body, tutaj możesz unieruchomić tło dla IE.

I nie wiem co z tym ujemnym marginesem kombinujesz. Wystarczy albo dać na zero margin i pading w {*} albo body.

Zajec

27.02.2006, 17:37:22

Cytat(J4r0d @ 2006-02-27 14:41:14)

Cytat(ens0re @ 2006-02-27 12:48:19)

@J4r0d: Spróbój coś takiego, chociaż nie jestem pewny:

[HTML] pobierz, plaintext 
* {
margin: 0;
padding: 0;
border: 0;
}
[HTML] pobierz, plaintext

Próbowałem. Nie pomaga.

Na pewno? Wygląda na niewyzerowane paddingi/marginesy elementu p.

gekon

28.02.2006, 01:01:20

Kod

/*jednak to, sprawdzalem :)*/
body{
margin: 0;
padding: 0;
}
#kontener {
  margin: 0px 11%; /* tu zamiast -8, 0*/
  padding: 0;
  background-image: url(../layout/tlo.gif);
  height: 100%;
  background-repeat: repeat; /* zamiast repeat-x, repeat-y*/
  background-attachment: fixed;
}

Jarod

28.02.2006, 11:31:05

Cytat(gekon @ 2006-02-28 00:01:20)

Kod

Dziękuje działa - wcześniej źle zrozumiałem. ALE jest nadal jeden problem. Pod IE widać powielanie tła w dół (mógłbym zrobić jednokolorowe ale dlaczego mam rezygnować z czegoś bo IE źle interpretuje?). Mianowicie tło jest fixed czyli ma się nie przesuwać. Mam wycięty pasek (długości tła) i szerokości np 5px i jest on powielany w szerz i wzdłuż. Pod Operą i FF jest ok ale pod IE załamka :/

Kod ten co podany wcześniej z uwzględnieniami gekona a efekt taki:

IE

Firefox i Opera

W FF i Operze jeśli tekst jest dłuższy nisz tło to i tak dobrze wygląda bo tło jest fixed a IE sobie dokłada pasek jeszcze raz i (co długoś paska tła) widać powielanie..

@comzit: Nie mogę zostosować tła dla body bo chcę mieć puste pola po lewej i prawej sttronie bo tak jest wykonany lay.

comzit

28.02.2006, 12:08:04

Po pierwsze tło musi się powielać i w dół bo tak masz ustawione:

Cytat

background-repeat: repeat;

Po drugie ustawianie fixed dla tła jakiegoś pudełka nic ci nie da. Przesuwasz całe pudełko a nie tylko jego tło.

No chyba, że nie rozumiem do końca o co ci z tym tłem chodzi.

Jarod

28.02.2006, 12:13:19

Cytat(comzit @ 2006-02-28 11:08:04)

Po pierwsze tło musi się powielać i w dół bo tak masz ustawione:

Cytat

background-repeat: repeat;

Po drugie ustawianie fixed dla tła jakiegoś pudełka nic ci nie da. Przesuwasz całe pudełko a nie tylko jego tło.

No chyba, że nie rozumiem do końca o co ci z tym tłem chodzi.

Czyli w tym momencie FF i Opera nie respektują standardów? Bo pod tymi dwoma jest ok..

Jak dam dla #kontener tylko

Kod

background-repeat: repeat-x;
background-attachment: fixed;

To pod FF i Operą tło jest rociągane wraz z blokiem div a pod IE TO

code46

28.02.2006, 19:29:03

Zrób tło jednokolorowe

Jarod

1.03.2006, 09:30:13

Cytat(code46 @ 2006-02-28 18:29:03)

Zrób tło jednokolorowe

Kolego nie chcę być niemiły ale zapytam się wprost: Cycki Cię nie bolą

Nie będę robił jednokolorowego tła bo IE pierd*** zasady.

Problem w tym, że IE potrafi zaczepić tło tylko dla body a to rozwiązanie odpada.

Może ma ktoś jakiś pomysł (oprócz code46) ?

comzit

1.03.2006, 09:48:17

Już pisałem wcześniej o tym. Jest jakieś obejście dla tego IE unieruchamiające (chyba) całe pudełko. Musisz tylko poszukać na forum, to był link z gotowym rozwiązaniem.

A jak nie to mozesz pokombinować z tłem dla BODOY o potem przysłonić to co "wystaje" innymi warstwami.

revyag

1.03.2006, 10:08:10

Cytat

Jest jakieś obejście dla tego IE unieruchamiające (chyba) całe pudełko. Musisz tylko poszukać na forum, to był link z gotowym rozwiązaniem.

A pewnie że był

klik

Jarod

1.03.2006, 23:22:16

Cytat(revyag @ 2006-03-01 09:08:10)

Cytat

Jest jakieś obejście dla tego IE unieruchamiające (chyba) całe pudełko. Musisz tylko poszukać na forum, to był link z gotowym rozwiązaniem.

A pewnie że był

klik

Dziękuje ale niestety to nie działa. Z dokumentu który podałeś wnioskuje że chodzi o dodanie dla #kontener definicji

Kod

position: absolute;

To sprawia, że pod FF tło dopasowuje się do szerokości wypełnienia bloku tekstem a tło nie jest powielane a w IE wogóle wszystko się sypie.. :/

Może ja już nie łapie o co chodzi ale próbowałem wszystkiego.. :/

code46

2.03.2006, 11:29:04

Zajrzyj w kod i porównaj. A cycki to ciebie swędzą.

Jarod

2.03.2006, 12:05:17

@Moderator: Czy nie uważasz, że code46 przegina? To jest forum a nie targowisko..

Zajrzałem w kod i fragment, który jest odpowiedzialny za zakotwiczenie tła pod IE to:

Kod

    @media screen
   {
   /* Don't do this at home */

   * html
     {
     overflow-y: hidden;
     }

   * html body
     {
     overflow-y: auto;
     height: 100%;
     padding: 0 1em 0 14em;
     }
   * html div#fixedBox
     {
     position: absolute;
     }

1. Co znaczy @media screen ? Pierwszy raz się z czymś takim spotykam
2. Dlaczego powtarzają się definicje

Kod

* html
* html body[code] ?

3. Mam duży problem ze zgraniem tego z moim css. Czy ktoś może mi w tym pomóc? Rozjeżdża mi się wszystko pod IE :/

Mój poprawiony styl:
[code]
/* Styl główny */
/* Układ strony */

body {
  margin: 0;
  padding: 0;
}

#kontener {
      margin: 0px 11%;
      padding: 0;
      background-image: url(../layout/tlo.gif);
      height: 100%;
      background-repeat: repeat-x;
      background-attachment: fixed;
}

    @media screen
   {

   * html
     {
     overflow-y: hidden;
     }

   * html body
     {
     overflow-y: auto;
     height: 100%;
     padding: 0 1em 0 14em;
     }
   * html div#kontener
     {
     position: absolute;
     }
       }

#belka {
    margin: 0;
    padding: 0;
      background-image: url(../layout/belka.gif);
      width: 100%;
      height: 131px;
}

/* Reszta */

p {
    margin: 0;
    padding: 0;
}

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.