Forum PHP.pl > Unieruchomienie tła i zawartości strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Unieruchomienie tła i zawartości strony

-NoVy-

8.03.2008, 21:38:27

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 
<body>
<div class="frame">
   <div class="header"><div></div>
   </div>
 
   <div class="middlepanel">
      <div id="points"><?php mosMainBody(); ?></div>
      <div id="points">
        <?php if (mosCountModules('user9')>0) mosLoadModules('user9',0); ?>
</div>
   </div>
</div>
</body>
[HTML] pobierz, plaintext

b4x

8.03.2008, 21:45:36

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..

-NoVy-

8.03.2008, 22: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?

b4x

8.03.2008, 22:21:06

Kod

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

Spróbuj

-NoVy-

8.03.2008, 22:25:25

Niestety dalej to samo...

nitek

8.03.2008, 22:29:44

Cytat(-NoVy- @ 8.03.2008, 23:09:41 )

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...

PawelC

8.03.2008, 22:32:02

Według mnie lepiej było by dać:

[HTML] pobierz, plaintext 
margin-left:auto;
margin-right:auto;
[HTML] pobierz, plaintext

Wtedy strona powinna być zawsze widoczna bez suwaka. A tej szerokości nie możesz zmniejszyć?

nitek

8.03.2008, 22:35:22

sprobuj dodać:

Kod

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

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

-NoVy-

8.03.2008, 22:53:52

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.

PawelC

8.03.2008, 22:56:08

Daj w body:

[HTML] pobierz, plaintext 
width:auto;
[HTML] pobierz, plaintext

Mi to działa i nie mam poziomego suwaka

nitek

8.03.2008, 22:59:10

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

-NoVy-

8.03.2008, 23:08:48

"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ę

MicNoVy

8.03.2008, 23:24:53

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

)

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

Temat do zamknięcia

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.