Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
 Reply to this topicStart new topic
> [css]Problem z dopasowaniem tła, Nie mam siły..
Jarod
post 26.02.2006, 09:13:52
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ć?


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
code46
post 27.02.2006, 13:26:20
Post #2





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

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

Nie rób pod IE tongue.gif
Go to the top of the page
+Quote Post
ens0re
post 27.02.2006, 13:48:19
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


--------------------
"Oprócz tabel istnieje jeszcze jedna dalece ograniczająca struktura, składająca się z rzędów i komórek - więzienie. Dla projektantów nadszedł czas, aby sie uwolnić..." - Eric A. Meyer
Go to the top of the page
+Quote Post
Jarod
post 27.02.2006, 14:41:14
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ę.. :/


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
sztosz
post 27.02.2006, 15:45:09
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 :|


--------------------
Problemy z kompem? ZAPRASZAMY
Open Source is like Corduroy -> Can't buy what I want, because it's free.
Go to the top of the page
+Quote Post
Jarod
post 27.02.2006, 16:21:04
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 :/


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
comzit
post 27.02.2006, 16:22:43
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.


--------------------
Projektowanie, tworzenie, optymalizacja i pozycjonowanie efektywnych stron www dla biznesu.
Go to the top of the page
+Quote Post
ens0re
post 27.02.2006, 16:33:48
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


--------------------
"Oprócz tabel istnieje jeszcze jedna dalece ograniczająca struktura, składająca się z rzędów i komórek - więzienie. Dla projektantów nadszedł czas, aby sie uwolnić..." - Eric A. Meyer
Go to the top of the page
+Quote Post
comzit
post 27.02.2006, 16:44:43
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.


--------------------
Projektowanie, tworzenie, optymalizacja i pozycjonowanie efektywnych stron www dla biznesu.
Go to the top of the page
+Quote Post
revyag
post 27.02.2006, 16:45:53
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 27.02.2006, 17:01:26
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


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
comzit
post 27.02.2006, 17:27:43
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.


--------------------
Projektowanie, tworzenie, optymalizacja i pozycjonowanie efektywnych stron www dla biznesu.
Go to the top of the page
+Quote Post
Zajec
post 27.02.2006, 17:37:22
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 28.02.2006, 01:01:20
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;
}


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
Jarod
post 28.02.2006, 11:31:05
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.


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
comzit
post 28.02.2006, 12:08:04
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.


--------------------
Projektowanie, tworzenie, optymalizacja i pozycjonowanie efektywnych stron www dla biznesu.
Go to the top of the page
+Quote Post
Jarod
post 28.02.2006, 12:13:19
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


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
code46
post 28.02.2006, 19:29:03
Post #18





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

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

Zrób tło jednokolorowe biggrin.gif
Go to the top of the page
+Quote Post
Jarod
post 1.03.2006, 09:30:13
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 biggrin.gif

Kolego nie chcę być niemiły ale zapytam się wprost: Cycki Cię nie bolą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) ?


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
comzit
post 1.03.2006, 09:48:17
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.


--------------------
Projektowanie, tworzenie, optymalizacja i pozycjonowanie efektywnych stron www dla biznesu.
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
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

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

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

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