overflow-y + margin-left[top]...

pytanie zadane 17 grudnia 2016 w HTML i CSS przez Apsik Użytkownik (990 p.)
edycja 17 grudnia 2016 przez Apsik

2 błedy!

1. ustawiam divowi margines 50 jego dziecku -10 a przesuwa mi do góry jednego i drugiego

2. ustawiam overflow-y na hidden rodzic wraca z powrotem na swoje miejsce, ale jak ustawie margin-left: -20px to go scina DLACZEGO! jak ***** tylko w pionie ustawiam brak widoczności to czemu bok również? overflow-x na visible nie pomaga. Co robię źle lub co jest nie tak z przeglądarkami?????

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<meta charset="UTF-8">
	<style>
		#test{
			margin: 50px;
			width: 100px;
			height: 200px;
			overflow-y: hidden; // overflow-x nie pozwala również na wyświetlanie osi x?;
			background: red;
		}

		#test2{
			margin-top: -10px; //cały element jest przesuwany do góry !!!!;
			margin-left: -20px;
			width: 50px;
			background: green;
		}
	</style>
</head>
<body>
	<div id="test">
		<div id="test2">coś tu jest</div>
	</div>

</body>
</html>

2 odpowiedzi

odpowiedź 18 grudnia 2016 przez Czort Nałogowiec (32,500 p.)

odpowiedź 18 grudnia 2016 przez Apsik Użytkownik (990 p.)

Chodzi o to że piszę stronę internetową, która z założenia ma być responsywna i nie chcę przy tym używać js'a. Z racji że css jest tępą technologią, która w dziwaczy sposób stara się być prosta - chce stworzyć efekt animacji w którym tekst jest częściowo niewidoczny w pionie,a przy tym chcę dodać efekt trzęsienia się na boki. Wszystko ładnie fajnie na papierze, ale z niewiadomych przyczyn overflow wymusza parametr, coś pomiędzy scroll a hidden, który jest nadawany przeciwnej osi. Powoduje to, że wszystko się sypie i wyświetlają mi się tylko ostatnie litery, lub tworzy mi się suwak na boki jeśli przesunięcie jest dodatnie...

Pozycja absolutna nie pomaga.., a co do pierwszego to okej da sie to rozwiązać chociażby pozycją relatywną i top: -x;, czy też paddingiem, ale co do drugiego to już nie...

komentarz 18 grudnia 2016 przez Czort Nałogowiec (32,500 p.)

Z racji że css jest tępą technologią (...) chce stworzyć efekt animacji w którym tekst jest częściowo niewidoczny w pionie,a przy tym chcę dodać efekt trzęsienia się na boki.

Nie do końca rozumiem Twoją logikę. Skoro css jest "tępą technologią" to daj sobie z nim spokój.

komentarz 18 grudnia 2016 przez Apsik Użytkownik (990 p.)

Chciałbym, ale postawiłem sobie za cel stworzenie strony, która nie jest ograniczona widzimisię użytkownika, który może wyłączyć obsługę js, bo co bym nie robił nawet używając JS i tak jestem zmuszony grzebać w css, tylko wtedy musiałbym skupiać się na niepotrzebnych obliczeniach, bo musiałbym przedefiniować aktualny styl css oraz skupić się na symulowaniu wyśrodkowania pozycji.

komentarz 18 grudnia 2016 przez Czort Nałogowiec (32,500 p.)

Myślę, że użytkownik, który wyłącza js nie chce oglądać animacji. Także jak nie możesz sobie poradzić w css, zrób to w js.

komentarz 18 grudnia 2016 przez Apsik Użytkownik (990 p.)

Eh.. Dostaje odpowiedź, która mnie nie zadowala. Chciałem wiedzieć czy tworząc taki styl robię błąd lub czy interpretacja przeglądarek jest błędna, bo skoro overflow: visible wyświetla poprawnie przesunięcie o -10px w lewo; to czemu overflow-y: hidden; overflow-x:visible nie?

komentarz 18 grudnia 2016 przez Czort Nałogowiec (32,500 p.)

Wszystko da się zrobić tylko trzeba trochę pokombinować, np. https://jsfiddle.net/gcut3v9q/ Jeśli o taki efekt chodziło i chciałeś gotowca.

komentarz 18 grudnia 2016 przez Apsik Użytkownik (990 p.)

To jest właśnie to czego nie chce robić, ponieważ całość opieram na procentach (ten kod miał tylko przedstawiać problem jaki napotkałem).

Mam stworzony przycisk z divów na który są nakładane animacje. Jedną z nich jest właśnie pojawianie się tekstu z góry na dół coś ale buforowanie. Tekst znajduje się pod tym przyciskiem i jest wyśrodkowany, czyli używam w tym celu float:left a w dziecku position:relative i left:-50%. Teraz wewnątrz znajduje się element spawn który odpowiada za zwiekszanie wysokości i ucinanie tekstu w pionie czyli height i overflow-y: hidden. I tu jest problem, bo nawet gdybym ustawił left na -70% a później padding na 20% to całość fajnie się przesunie, ale cholerny overflow-y zrobi mi w poziomie suwak, bo nie chce zwiększyć rozmiaru całości.. eh..