Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Unieruchomienie tła i zawartości strony, problem...
--NoVy--
post
Post #1





Goście
Już męczę się tym parę dobrych godzin, przejrzałem wszelkie pomoce w google, ale poległem. Dlatego zwracam się do Was o pomoc.

Pytanie jest następujące jak unieruchomić zawartość strony, żeby nie latała po ustawionym tle gdy np. zmniejszy sie okno przeglądarki lub rozdzielczość.

Dla przykładu, owe zastosowanie wykorzystano tutaj lub tutaj.

Ps. Strona z która się użeram (^^) jest tworzona w XHTML + CSS. Wszelkie porady dot. dodatkowych linijek lub skryptów, mile widziane.

Z góry dziękuje za pomoc.
Pozdrawiam

Kod:

CSS:
Kod
[BODY {
   padding: 0px;
   margin: 0px;  
   background-color: #000;
   background: transparent url(../images/tlogow.png);
   color: #fff;
   font-size: 11px;
   font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
   text-align: left;
}

a:link, a:visited{
  font-weight: bold;
  color: #3d79b5;
  text-decoration: none;
}


a:hover {
   color: #fff;
   text-decoration: underline;
}

.frame
{
   margin: 0px auto;
   width: 480px;
   text-align: left;
   border: 1px #454545 solid;
/*   height:2000px;*/
   background-image: url(../images/background.gif);
}

.header {
   background-image: url(../images/top.png);
   height: 170px;
   width: 480px;
}
.middlepanel{
  width: 448px;
  _width: 450px;
  font-size:9px;
  background-color: #111;
  margin:0px 0px 0px 14px;
  border-left: 1px #454545 solid;
  border-right: 1px #454545 solid;

}

.contentpaneopen

{
  width: 99%;
  margin: 0px 2px 0px 2px;
  font-size:10px;
}

.contentheading
{
  width: 420px;
  height: 25px;
  padding: 0px 20px;
   font-weight: bold;
   color:#FFFFFF;
   font-size:11px;
  line-height: 25px;
   background-image: url(../images/bar1.gif);
   text-align: left;
}

.small {
  padding: 2px 0px 6px 8px;
   line-height: 50%;
   font-size: 9px;
   color: #888;
   font-weight : bold;
}

.createdate, .modifydate {
  padding: 3px 0px 6px 15px;
   line-height: 50%;
   font-size: 9px;
   color: #666;
   font-weight : bold;
}


[HTML] pobierz, plaintext 
  1. <body>
  2. <div class="frame">
  3.    <div class="header"><div></div>
  4.    </div>
  5.  
  6.    <div class="middlepanel">
  7.       <div id="points"><?php mosMainBody(); ?></div>
  8.       <div id="points">
  9.         <?php if (mosCountModules('user9')>0) mosLoadModules('user9',0); ?>
  10. </div>
  11.    </div>
  12. </div>
  13. </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
b4x
post
Post #2





Grupa: Zarejestrowani
Postów: 658
Pomógł: 95
Dołączył: 20.12.2005
Skąd: N54,35° E18,63° (Gdańsk)

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

Jak się nie mylę - trzeba ustalić szerokość..

np

Kod
BODY {
   width: 700px;
   padding: 0px;
   margin: 0px;  
   background-color: #000;
   background: transparent url(../images/tlogow.png);
   color: #fff;
   font-size: 11px;
   font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
   text-align: left;
}


W takim wypadku strona będzie miała ustaloną stałą szerokość - i nic jej nie zmniejszy.. winksmiley.jpg

Ten post edytował b4x 8.03.2008, 21:46:50


--------------------
b4x.pl
Go to the top of the page
+Quote Post
--NoVy--
post
Post #3





Goście
Rezultat prawie osiągnięty. Co racja tło i strona nie latają teraz, ale jest problem innej natury. Sama strona ma szerokość 990px, zaś tło ok. 1250px (większe ponieważ ma ona być na maks 1600x1200). Na rozdziałce 1280x1024 jest ok. Tak jak powinno być. Jednak gdy zmienię już rozdzielczość na 1024x786 to pojawia się dolny pasek w przeglądarce, do przesuwania strony w poziomie... co komplikuje sprawę. W przypadku podanych stron tło pozostaje ukryte poza ekranem. Jakieś propozycje?
Go to the top of the page
+Quote Post
b4x
post
Post #4





Grupa: Zarejestrowani
Postów: 658
Pomógł: 95
Dołączył: 20.12.2005
Skąd: N54,35° E18,63° (Gdańsk)

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

Kod
background: #000 url(../images/tlogow.png) repeat-x;


Spróbuj


--------------------
b4x.pl
Go to the top of the page
+Quote Post
--NoVy--
post
Post #5





Goście
Niestety dalej to samo...
Go to the top of the page
+Quote Post
nitek
post
Post #6





Grupa: Zarejestrowani
Postów: 209
Pomógł: 37
Dołączył: 27.02.2008
Skąd: Kwidzyn

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

Cytat(-NoVy- @ 8.03.2008, 23:09:41 ) *
Rezultat prawie osiągnięty. Co racja tło i strona nie latają teraz, ale jest problem innej natury. Sama strona ma szerokość 990px, zaś tło ok. 1250px (większe ponieważ ma ona być na maks 1600x1200). Na rozdziałce 1280x1024 jest ok. Tak jak powinno być. Jednak gdy zmienię już rozdzielczość na 1024x786 to pojawia się dolny pasek w przeglądarce, do przesuwania strony w poziomie... co komplikuje sprawę. W przypadku podanych stron tło pozostaje ukryte poza ekranem. Jakieś propozycje?


jeśli nadałeś width na body na 990px, to nie dziw się, że przy mniejszej rozdzielczości niż te 990 strona ma suwak..
Przecież sam powiedziałeś przeglądarce, że strona ma 990px, więc musi ona jakoś pozwolić obejrzeć uzytkownikowi całą jej zawartość - stąd poziomy suwak...


--------------------
www.id2it.pl
Go to the top of the page
+Quote Post
PawelC
post
Post #7





Grupa: Zarejestrowani
Postów: 1 173
Pomógł: 121
Dołączył: 24.09.2007
Skąd: Toruń

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

Według mnie lepiej było by dać:
[HTML] pobierz, plaintext 
  1. margin-left:auto;
  2. margin-right:auto;
[HTML] pobierz, plaintext

Wtedy strona powinna być zawsze widoczna bez suwaka. A tej szerokości nie możesz zmniejszyć?
Go to the top of the page
+Quote Post
nitek
post
Post #8





Grupa: Zarejestrowani
Postów: 209
Pomógł: 37
Dołączył: 27.02.2008
Skąd: Kwidzyn

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

sprobuj dodać:

Kod
background:#ffffff url(../images/tlogow.png) repeat-x center;


piszę 'z palca', nie wiem, czy pomoże?


--------------------
www.id2it.pl
Go to the top of the page
+Quote Post
--NoVy--
post
Post #9





Goście
Aktualnie wygląda to tak:

Kod
BODY {
    width: 1250px;
    padding: 0px;
    margin-top:0px;
    margin-left:auto;
        margin-right:auto;    
    background: transparent url(../images/tlogow.png) repeat-x center;
    background-position: -70px 0px;
    background-color: #000000;
    color: #fff;
    font-size: 11px;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    text-align: center;
    
}

.frame
{
    margin: 0px auto;
    width: 992px;
    text-align: justify;
    border: 1px #454545 solid;
    background-image: url(../images/background.gif);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    opacity: 0.8;

}


Dalej jednak bez zmian. Chyba, że już za bardzo zamieszałem.
Go to the top of the page
+Quote Post
PawelC
post
Post #10





Grupa: Zarejestrowani
Postów: 1 173
Pomógł: 121
Dołączył: 24.09.2007
Skąd: Toruń

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

Daj w body:
[HTML] pobierz, plaintext 
  1. width:auto;
[HTML] pobierz, plaintext

Mi to działa i nie mam poziomego suwaka

Ten post edytował ExPlOiT 8.03.2008, 23:06:22
Go to the top of the page
+Quote Post
nitek
post
Post #11





Grupa: Zarejestrowani
Postów: 209
Pomógł: 37
Dołączył: 27.02.2008
Skąd: Kwidzyn

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

równiez xle spojrzałem na htmla.. to: repeat-x center spróbuj dodać do background w .frame

PS - masz ta stronkę gdzieś w sieci? łatwiej będzie winksmiley.jpg

Ten post edytował nitek 8.03.2008, 22:59:41


--------------------
www.id2it.pl
Go to the top of the page
+Quote Post
--NoVy--
post
Post #12





Goście
"Normalna"wersja jest w sieci, ale nowa przeróbka pod kampanie niestety tylko na lokalu.

Hym.. sprawy wygląda następująco, pod mniejsza rozdziałka (1024x786) następuję mimo wszystko przesunięcie tła, co widać na tym screenie - Link

W przypadku 1280 tak jak było jest ok - link

Przejście w środku strony to dodatkowy Div

Kod:
Kod
#reklamaban{
    height: 185px;
    width: 992px;
    background-image: url(../images/reklamaban.png);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    opacity: 0.8;
    position: relative;

}


Ps. repeat-x center do background w .frame tylko pogorszyło sprawę
Go to the top of the page
+Quote Post
MicNoVy
post
Post #13





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 8.03.2008

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

Dobra, już wszystko wygląda chyba ok. (jeszcze nie wszystkie testy zrobione, ale nic się nie rozwala smile.gif )

Sprawę załagodziło dodanie "top center" do background-position zamiast -70px 0px

Kod
BODY {
    width: auto;
    padding: 0px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;    
    background: transparent url(../images/tlogow.png) repeat-x center;
    background-position: top center;
    background-color: #000000;
    color: #fff;
    font-size: 11px;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    text-align: center;
    
}

.frame
{
    margin: 0px auto;
    width: 992px;
    text-align: justify;
    border: 1px #454545 solid;
/*    height:2000px;*/
    background-image: url(../images/background.gif);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    opacity: 0.8;

}


Wielkie dzięki, za bezinteresowną pomoc smile.gif

Temat do zamknięcia
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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 Aktualny czas: 19.08.2025 - 10:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn