Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Ustawienie wystającego zdjęcia.
Forum PHP.pl > Forum > Przedszkole
przemo191
Witam, mam problem z ustawieniem diva tak aby ucinał się w zależności od rozdzielczości (ewentualnie powiększenia okna przeglądarki)
Przy rozdzielczości poniżej 1920x1080 na stronie piotrkonwa.pl lewe zdjęcie ładnie "chowa" się (#left_foto). A prawe (#right_foto) powoduje, że pojawia się poziomy pasek do przewijania.
Jak ustawić tego diva żeby chował się za pionowy pasek przewijania i nie powodował pokazania poziomego paska przewijania?questionmark.gif

  1. #left_foto {
  2. background: url('grafika/konwa_left.png') no-repeat;
  3. width: 490px;
  4. height: 550px;
  5. float: left;
  6. margin-left: -490px;
  7. margin-bottom: -550px;
  8. }
  9.  
  10. #right_foto {
  11. background: url('grafika/konwa_right.png') no-repeat;
  12. width: 471px;
  13. height: 550px;
  14. float: right;
  15. margin-right: -455px;
  16. margin-top: -420px;
  17. }
mar1aczi
  1. overflow: hidden;


edycja: literówka.
przemo191
Kurczę, albo coś źle robię, albo dalej nie działa.

  1. #right_foto {
  2. background: url('grafika/konwa_right.png') no-repeat;
  3. width: 471px;
  4. height: 550px;
  5. float: right;
  6. margin-right: -455px;
  7. margin-top: -420px;
  8. overflow: hidden;
  9. }


// Wybacz, poczytałem co to jest i jak to zastosować i działa smile.gif
  1. body {
  2. background: #ffffff;
  3. margin: 0px;
  4. padding: 0px;
  5. overflow-x: hidden;
  6. }


//Na pc wszystko jest dobrze, natomiast na urządzeniach mobilnych nie do końca działa width:100% dla hedera, menu i footera. Wygląda to tak jakby ta prawa fotka wychodziła z całości strony o około 400px;
Turson
Nie wygląda mi to dobrze
przemo191
O kurde, a u mnie jest idealnie oprócz urządzeń mobilnych.

Turson
Mam rozdzielczość 1366x768, więc standardowy laptop. Widzę, że to na tabelce jest oparte. Głupi pomysł
przemo191
Na jakiej tabelce?questionmark.gif Tabelka jest tylko w contencie przy fotce i opisie.
Turson
W news_text jest tabelka

na chrome jest strona w porządku, więc jest problem z firefoxem
mar1aczi
Stronę pod FF "rozsypuje" formatowanie:
  1. #news_tittle_background_big {
  2. background: url("grafika/tlo_tittle_news_big.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  3. color: #FFFFFF;
  4. float: left;
  5. font-weight: bold;
  6. height: 27px;
  7. margin: -30px 0 0 -43px;
  8. padding: 5px 5px 5px 20px;
  9. position: relative;
  10. width: 1100px;
  11. z-index: 999;
  12. }

Usuń z powyższego "float: left;". Poza tym, jak widzisz, ten element jest znacznie szerszy od okalającego go.

Edycja:
W
Kod
<div id="header">
<a href="http://piotrkonwa.pl">
<div id="header1"></div>
</a>
<a target="blank" href="http://4f-e-vive.pl/">
<div id="header2"></div>
</a>
</div>
używasz pustych "div". Zamiast tego nadaj klasę dla "a" i tam przenieś obrazek w "img".
przemo191
mar1aczi - dziękuje za radę, poprawione smile.gif
Turson - zaraz pobiorę FF i sprawdzę.

//Turson - za radą mar1aczi, na FF też już jest dobrze.
A macie jeszcze może pomysł na urządzenia mobilne jak naprawić żeby nie wyglądało to tak:
To zdjęcie akurat z LG L5, na tablecie Samsungu Tab3 jest identycznie.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.