[CSS]Ustawienie wystającego zdjęcia. Opcje

[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?(IMG:style_emoticons/default/questionmark.gif)

[CSS] pobierz, plaintext 
#left_foto {
    background:  url('grafika/konwa_left.png') no-repeat;
    width: 490px;
    height: 550px;
    float: left;
    margin-left: -490px;
    margin-bottom: -550px;
}
 
#right_foto {
    background: url('grafika/konwa_right.png') no-repeat;
    width: 471px;
    height: 550px;
    float: right;
    margin-right: -455px;
    margin-top: -420px;
}
[CSS] pobierz, plaintext 

[mar1aczi]

[CSS] pobierz, plaintext 
overflow: hidden;
[CSS] pobierz, plaintext 

edycja: literówka.

Ten post edytował mar1aczi 15.02.2014, 14:34:26

[przemo191]

Kurczę, albo coś źle robię, albo dalej nie działa.

[CSS] pobierz, plaintext 
#right_foto {
    background: url('grafika/konwa_right.png') no-repeat;
    width: 471px;
    height: 550px;
    float: right;
    margin-right: -455px;
    margin-top: -420px;
    overflow: hidden;
}
[CSS] pobierz, plaintext 

// Wybacz, poczytałem co to jest i jak to zastosować i działa (IMG:style_emoticons/default/smile.gif)

[CSS] pobierz, plaintext 
body {
    background: #ffffff;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
[CSS] pobierz, plaintext 

//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;

Ten post edytował przemo191 15.02.2014, 13:42:33

[Turson]

Nie wygląda mi to dobrze
(IMG:http://turson.pl/host/files/7805825.jpg)

[przemo191]

O kurde, a u mnie jest idealnie oprócz urządzeń mobilnych.

(IMG:http://piotrkonwa.pl/2014-02-15_134743.png)

[Turson]

Mam rozdzielczość 1366x768, więc standardowy laptop. Widzę, że to na tabelce jest oparte. Głupi pomysł

[przemo191]

Na jakiej tabelce?(IMG:style_emoticons/default/questionmark.gif) Tabelka jest tylko w contencie przy fotce i opisie.

Ten post edytował przemo191 15.02.2014, 13:58:05

[Turson]

W news_text jest tabelka

na chrome jest strona w porządku, więc jest problem z firefoxem

Ten post edytował Turson 15.02.2014, 14:04:05

[mar1aczi]

Stronę pod FF "rozsypuje" formatowanie:

[CSS] pobierz, plaintext 
#news_tittle_background_big {
    background: url("grafika/tlo_tittle_news_big.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #FFFFFF;
    float: left;
    font-weight: bold;
    height: 27px;
    margin: -30px 0 0 -43px;
    padding: 5px 5px 5px 20px;
    position: relative;
    width: 1100px;
    z-index: 999;
}
[CSS] pobierz, plaintext 

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

Ten post edytował mar1aczi 15.02.2014, 15:29:42

[przemo191]

mar1aczi - dziękuje za radę, poprawione (IMG:style_emoticons/default/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.
(IMG:http://piotrkonwa.pl/2014-02-15-17-27-56.jpg)

Ten post edytował przemo191 15.02.2014, 17:31:53