Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css]Problem z dopasowaniem tła, Nie mam siły..
Jarod
post
Post #1





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

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 
  1. <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
  2.  
  3.       <div id="kontener">
  4.  
  5.          <p>test, test </br></p>
  6.          <p>test, test </br></p>       
  7. 	  </div>
  8.  
  9.    </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ć?
Go to the top of the page
+Quote Post
2 Stron V   1 2 >  
 Start new topic
Odpowiedzi (1 - 19)
code46
post
Post #2





Grupa: Zarejestrowani
Postów: 88
Pomógł: 0
Dołączył: 21.04.2005

Ostrzeżenie: (0%)
-----

Nie rób pod IE (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
Go to the top of the page
+Quote Post
ens0re
post
Post #3





Grupa: Zarejestrowani
Postów: 143
Pomógł: 0
Dołączył: 23.08.2005
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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

@J4r0d: Spróbój coś takiego, chociaż nie jestem pewny:
[HTML] pobierz, plaintext 
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Jarod
post
Post #4





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

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 
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. }
[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ę.. :/
Go to the top of the page
+Quote Post
sztosz
post
Post #5





Grupa: Zarejestrowani
Postów: 866
Pomógł: 32
Dołączył: 2.06.2004
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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

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

Nie daję głowy, tak gdybam :|
Go to the top of the page
+Quote Post
Jarod
post
Post #6





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

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 :/
Go to the top of the page
+Quote Post
comzit
post
Post #7





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 14.11.2003
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
ens0re
post
Post #8





Grupa: Zarejestrowani
Postów: 143
Pomógł: 0
Dołączył: 23.08.2005
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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.

Ten post edytował ens0re 27.02.2006, 16:34:08
Go to the top of the page
+Quote Post
comzit
post
Post #9





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 14.11.2003
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
revyag
post
Post #10





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

@J4r0d - daj linka do strony, po screenach też nie można wszystkiego powiedzieć
Go to the top of the page
+Quote Post
Jarod
post
Post #11





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

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 
  1. <body>
  2.  
  3.       <div id="kontener">
  4.  
  5.          <p>test, test </br></p>
  6.          <p>test, test </br></p>
  7.          <p>test, test </br></p>
  8.          <p>test, test </br></p>
  9.          <p>test, test </br></p>
  10.          <p>test, test </br></p>
  11.          <p>test, test </br></p>
  12.          <p>test, test </br></p>
  13.          <div id="belka">
  14.          </div>
  15.          <p>test, test </br></p>
  16.          <p>test, test </br></p>
  17.          <p>test, test </br></p>
  18.          <p>test, test </br></p>
  19.          <p>test, test </br></p>
  20.          <p>test, test </br></p>
  21.          <p>test, test </br></p>
  22.          <p>test, test </br></p>
  23.          <p>test, test </br></p>
  24.          <p>test, test </br></p>
  25.          <p>test, test </br></p>
  26.          <p>test, test </br></p>
  27.          <p>test, test </br></p>
  28.          <p>test, test </br></p>
  29.          <p>test, test </br></p>
  30.          <p>test, test </br></p>
  31.          <p>test, test </br></p>
  32.          <p>test, test </br></p>
  33.          <p>test, test </br></p>
  34.          <p>test, test </br></p>
  35.          <p>test, test </br></p>
  36.          <p>test, test </br></p>
  37.          <p>test, test </br></p>
  38.          <p>test, test </br></p>
  39.          <p>test, test </br></p>
  40.          <p>test, test </br></p>
  41.          <p>test, test </br></p>
  42.          <p>test, test </br></p>
  43.          <p>test, test </br></p>
  44.          <p>test, test </br></p>
  45.          <p>test, test </br></p>
  46.          <p>test, test </br></p>
  47.          <p>test, test </br></p>
  48.          <p>test, test </br></p>
  49.          <p>test, test </br></p>
  50.          <p>test, test </br></p>
  51.          <p>test, test </br></p>
  52.          <p>test, test </br></p>       
  53. 	  </div>
  54.  
  55.    </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
comzit
post
Post #12





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 14.11.2003
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Zajec
post
Post #13





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----

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 
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. }
[HTML] pobierz, plaintext

Próbowałem. Nie pomaga.

Na pewno? Wygląda na niewyzerowane paddingi/marginesy elementu p.
Go to the top of the page
+Quote Post
gekon
post
Post #14





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

Ostrzeżenie: (0%)
-----

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;
}
Go to the top of the page
+Quote Post
Jarod
post
Post #15





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

Cytat(gekon @ 2006-02-28 00: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;
}

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.
Go to the top of the page
+Quote Post
comzit
post
Post #16





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 14.11.2003
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Jarod
post
Post #17





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

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

Ten post edytował J4r0d 28.02.2006, 12:18:28
Go to the top of the page
+Quote Post
code46
post
Post #18





Grupa: Zarejestrowani
Postów: 88
Pomógł: 0
Dołączył: 21.04.2005

Ostrzeżenie: (0%)
-----

Zrób tło jednokolorowe (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
Jarod
post
Post #19





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

Cytat(code46 @ 2006-02-28 18:29:03)
Zrób tło jednokolorowe (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

Kolego nie chcę być niemiły ale zapytam się wprost: Cycki Cię nie bolą(IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

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) ?
Go to the top of the page
+Quote Post
comzit
post
Post #20





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 14.11.2003
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

2 Stron V   1 2 >
Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 15:08
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn