Stała pozycja elementów HTML.

[TheSundbay 0]

Witajcie! W trakcie tworzenia strony internetowej napotkałem perypetię, której nie potrafię rozwikłać. Otóż chcę ustalić stałą pozycję objektów znajdujących się na stronie - chcę, aby powiększając bądź też pomniejszając stronę (kombinacją CTRL i +, CTRL i -) nie zmieniała się pozycja elementów względem jej marginesów. Początkowo przystosowałem się do tego sposobu: element umieszczam w dwóch div'ach - jeden z nich posiada pozycję absolutną, a także stuprocentową szerokość i wysokość, aczkolwiek ów rozwiązania nie jest uniwersalne, często nie spełnia moich oczekiwań. Kieruję do Was ogromną prośbę. Moglibyście przedstawić mi swoje rozwiązania? W jaki sposób rozmieszczacie elementy? Prosiłbym o przedstawienie rozwiązania prezentując kod.

[wlodziu 49]

Po co pozycje? Pozycje nie mają zastosowania do tego typu rozwiązań, bo:

• często wadzą przy zmianie treści strony,
• brak możliwości modyfikacji, tak, jest ale o wiele trudniejsza,
• no i więcej problemów przy kodowaniu

Czyli mam rozumieć, chcesz uzyskać efekt, gdzie przy scrollowaniu element będzie się pomniejszał, ale zostanie w miejscu bez uciekania względem marginesu, czyli jak ustawisz 20px od lewego marginesu to będzie sobie podróżował i trzymał tego marginesu jak matki?

 

demo: http://demo.wlodziu.pl/center.html

[TheSundbay 0]

W bardzo trafny sposób to ująłeś. Owszem, mam to na myśli. Posiadasz jakieś sugestie?

[wlodziu 49]

Sugeruję wyrzucić pozycje do kosza, owszem, są potrzebne, ale nie znalazłem tutaj możliwości zastosowania

[TheSundbay 0]

Sugeruję wyrzucić pozycje do kosza, owszem, są potrzebne, ale nie znalazłem tutaj możliwości zastosowania

Dobrze, wezmę to pod uwagę, ale jako iż jestem początkującym web-developer'em, proszę Cię o dalszą pomoc. Jak będzie się prezentował poprawny kod zakładając, że chcę ustalić stałe położenie jakiegoś obiektu?

[wlodziu 49]

Można to oprzeć na podstawie bloczków, mozesz zrobić za pomocą właściwości display, czy float. I układać wszystkie elementy jak pudełka, a w pudełkach kolejne. Musisz sobie wyobrazić jak dane coś ma wyglądać, rozebrać na części pierwsze w stylu to co jest szkieletem i to co niekoniecznie.

 

Coś w stylu, wstawiasz do pokoju komputer, czyli Twoim elementem glownym bedzie mieszkanie, w mieszkaniu masz pokoje, a w wybranym pokoju meble i na jakims meblu komputer lub w półce

[TheSundbay 0]

Można to oprzeć na podstawie bloczków, mozesz zrobić za pomocą właściwości display, czy float. I układać wszystkie elementy jak pudełka, a w pudełkach kolejne. Musisz sobie wyobrazić jak dane coś ma wyglądać, rozebrać na części pierwsze w stylu to co jest szkieletem i to co niekoniecznie.

 

Coś w stylu, wstawiasz do pokoju komputer, czyli Twoim elementem glownym bedzie mieszkanie, w mieszkaniu masz pokoje, a w wybranym pokoju meble i na jakims meblu komputer lub w półce

 

Zacytuję wypowiedź innej osoby dotyczącej kwestii stałego położenia: "robisz 1 duży div ok width: (ok.) 1000px. height: jak tam chcesz, dajesz mu margin:0 auto 0 auto. i w nim umieszczasz elementy o stałej wielkości i wysokości.".

Uważasz, że jest to racjonalne rozwiązanie problemu?

[wlodziu 49]

zobacz demko, zrobiłem tak samo

[TheSundbay 0]

zobacz demko, zrobiłem tak samo

Kurczę, wciąż nie mogę tego zrozumieć. Poświęcisz mi jeszcze chwilę Twojego czasu?

Załóżmy, że dysponuję tym kodem:

HTML:

<div id="image1">

<div class="image1"></div>

</div>

CSS:

#image1{

width: 100%;

height: 100px;

margin: 0 auto 0 auto;

}

.image1{

background-repeat:no-repeat;

background-size: 100%;

background-image:url('gw21.jpg');

height: 500%;

}

W jaki sposób go zmodyfikować, aby uzyskać oczekiwany przeze mnie efekt? Coś w deseń elementów tej strony: https://livespot.pl/

[wlodziu 49]

Po co height 500%? Chcesz mieć stronę bez treści 5 razy dłuższą?

Właśnie w systemie bloczkowym strona się rozciąga według treści na niej, w pozycjach tego tak łatwo nie osiągniesz.

[TheSundbay 0]

Po co height 500%? Chcesz mieć stronę bez treści 5 razy dłuższą?

Właśnie w systemie bloczkowym strona się rozciąga według treści na niej, w pozycjach tego tak łatwo nie osiągniesz.

Przystosowałem się do Twoich zaleceń. Kod prezentuje się następująco:

HTML:

<div id="image1">

<div><img class="image1" src="gw21.jpg"</img></div>

<div class="menu-item1"><font face="FontAwesome" color="black">REJESTRACJA</font></div>

</div>

CSS:

body{

margin: 0 0;

}

#image1{

width: 100%;

height: 100%;

margin: 0 auto 0 auto;

}

.image1{

float: none;

width: 100%;

height: 50%;

}

.menu-item1{

width: 10%;

height: 10%;

margin-left: 50%;

margin-top: -10%;

}

Problem nie minął - element "REJESTRACJA" podczas scrollowania zmienia swoje położenie względem marginesów strony. W czym tkwi sęk?

[wlodziu 49]

Bo opierasz wszystko na dynamicznych wartościach względem okna. przydaloby się ogarnąć to na stałej wartości kontenera, np

#image1{
width: 1000px;
height: 100%;
margin: 0 auto;
}

Wtedy odpierasz się na stałym kontenerze.

Może dla tego tekstu - jesli chcesz mieć na środku zrób jakiś div o całej szerokości kontenera, czyli 1000px z text-align: center;

Na pewno będzie na środku.