Dodałem dwa elementy div do przechowywania obrazów tła w celach dekoracyjnych - zgodnie z żądaniem artysty, który pracuje ze mną na stronie internetowej.Bezwzględne pozycjonowanie: jeden element rozwija okno, inny element go nie dotyczy. Oba używają tego samego kodu: C
Początkowo działało bardzo dobrze. Obrazy miały się wyświetlać po każdej stronie opakowania opakowania zawierającego zawartość witryny - bez wpływu na szerokość strony.
Następnie organizacja posiadająca stronę dostała kolejnego sponsora, którego logo musiałem dodać do kolumny po prawej stronie. Stworzyłem nowy identyfikator dla piątego "przycisku" i utworzyłem dla niego div. Przesyłając go zauważyłem, że pasek przewijania pojawił się nagle na dole strony, bez wyraźnego powodu.
Najpierw podejrzewałem, że przycisk stanowi problem, ale ostatecznie okazało się, że najbardziej prawy element dekoracyjny wygiął szerokość strony, mimo że zastosowano bezwzględne pozycjonowanie. Obydwa elementy div używają tego samego kodu, tylko lustrzane dla lewego i prawego. Nie mam pojęcia, co jest przyczyną problemu ..
(Można zobaczyć problem w działaniu, podczas gdy trwa co www.torucon.no/no/)
Proszę mi pomóc! Oto CSS dla obu div:
#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}
#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}
Oto fragment kodu HTML pokazujący HTML div:
<div class="wrapper"> <!-- Contains the entire website for structure -->
<div id="wolf">
</div>
<div id="lion">
</div>
((W przypadku, gdy nie dostać go: Opakowanie div powinien on być wyśrodkowany, i tak jest, ale kiedy zmieniam rozmiar okna, widzę, że pasek przewijania pojawia się na długo przed tym, zanim zawartość opakowania znajdzie się w pobliżu granic okna przeglądarki. Byłoby to denerwujące na komputerach o niskiej rozdzielczości lub małych ekranach !))
Mogę zasugerować 'body {/ * inne rzeczy */overflow-x: hidden; } '? Nie jestem pewien, ale * dlaczego * tak się dzieje, ale wydaje się, że przynajmniej łagodzi objawy. Może być jednak konieczne użycie opcji 'overflow-y: auto;', aby uniknąć problemów w niektórych przeglądarkach. –
@DavidThomas Tak, pomyślałem, że mogę to również zrobić. Ale tak się nie powinno stać, prawda? Elementy absolutnie pozycjonowane są ignorowane przez przepływ strony, a więc nie powinny wpływać na szerokość elementu ciała - o ile rozumiem. Więc to nie moja wina, ale raczej problem ze zdolnością przeglądarek do renderowania kodu? Również - użycie overflow-x: hidden ;, nie powoduje to również zniknięcia elementu div opakowania poza ścianami przeglądarki po zmianie rozmiaru ekranu? –
Podejrzewam, że w zależności od używanej przeglądarki programiści stosowali się do standardów W3 w zakresie renderowania (brak oprogramowania jest doskonały, więc mogą występować błędy, ale nawet ...). I tak; ma problemy jako podejście. =/ –