Logowanie

Obrazek przyklejony css

pytanie zadane 11 kwietnia 2016 w HTML i CSS przez BlauVeB Początkujący (410 p.)

Witma, mam stronę startową, a na na niej tło i jeden obrazek działający na zasadzie <a href. Udało mi się, żeby tło się nie skalowało i było na cały monitor. Na każdym komputerze i przeglądarce działa. Zrobiłem to tak:

body{
	background-image: url(../grafika/background_strona_glowna.png);
	background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-position: center top;
	display: block;
	min-height: 100%;
	width: 100%;
	height: 100%;
	overflow: auto;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 auto;
	position: relative;
}

W index.html znajduje się jedynie jeden div i jeden img, zmieniający się w zależności od pozycji myszki, a wygląda to tak:

	<body>
		<div id="przycisk">  
		
			<a href="home_page.php" onMouseOver="go.src='grafika/Go_button2.png'" onMouseOut="go.src='grafika/GO_button.png'">
			
			  <img src="grafika/GO_button.png" name="go" width="146px" height="60px">
			
			</a>		
		</div>
	</body>

Nie mam pojęcia jak mam zrobić aby ten img na każdej stronie i przeglądarce był w tym samym miejscu, niezależnie od rozdzielczości monitora. Chce aby był on na środku (w poziomie) i w pionie około margines górny około 60% przeglądarki okna.

Na ten moment wygląda to tak:(nie działa, tak jak chcę)

#przycisk{	
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	margin: auto;
	margin-top: 25%; // mam 25%, bo kiedy jest 60%, to znika i po prawej stronie pojawia się pasek do przewijania

#przycisk:hover{
	cursor: pointer;
}

2 odpowiedzi

odpowiedź 11 kwietnia 2016 przez Eimens Maniak (69,240 p.)
wybrane 11 kwietnia 2016 przez BlauVeB

Najlepsza

Skoro #przycisk ma:

width: 100%;
height: 100%;

To jak można go wyrównać?

komentarz 11 kwietnia 2016 przez BlauVeB Początkujący (410 p.)

Myślałem, że jeśli ustawię tyle, to div będzie obejmował całe okno przeglądarki, a przez margin-top: wartość; określę ile on % ma być oddalony od górnej części ekranu.

komentarz 11 kwietnia 2016 przez Eimens Maniak (69,240 p.)

podeślij grafiki

komentarz 11 kwietnia 2016 przez BlauVeB Początkujący (410 p.)

W jakim celu i jak?

Background body ma rozdzielczość FULL HD, a przyciski: 146px na 60px;

komentarz 11 kwietnia 2016 przez Eimens Maniak (69,240 p.)

Podmień to:

#przycisk{
    position: absolute;
    left: calc(50% - 60px);
    right: calc(50% - 60px);
    top: 60vh;
}

komentarz 11 kwietnia 2016 przez Eimens Maniak (69,240 p.)

http://codepen.io/PatrykTal/pen/wGyPGg?editors=1100

Tutaj masz poprawione lekko :p

__

Jak twoja strona ma być wyższa niż 100% to lepiej zamiast "body" zrób jakiegoś diva.

komentarz 11 kwietnia 2016 przez BlauVeB Początkujący (410 p.)

Super, działa dużo lepiej. :)

Jak działa left: calc() to mam nadzieję, że znajdę sobie w internecie, ale mógłbyś mi napisać co to za jednostka vh?

Dałoby radę jeszcze tak zrobić, żeby przycisk nie zmieniał się pod wpływem powiększania okna i zmniejszania? ('Ctrl' + '+-/scroll') Bo jeśli powiększę to ten przycisk to źle to wygląda, a nie wiadomo jak kto będzie miał ustawioną wielkość strony w przeglądarce. Jak otwieram stronę na telefonie, to ten przycisk ogólnie znajduje się na samym dole prawie, ale na razie niech działa chociaż dobrze na komputerach.

/edit

Ogólnie zamysł jest taki, żeby strona startowa nie miała żadnego paska po boku, a tło było na całą przeglądarkę.

komentarz 11 kwietnia 2016 przez Eimens Maniak (69,240 p.)

Nie sprawdza się tego poprzez ctrl + "scroll". Jeżeli już to prawym zbadaj element i w konsoli ustawiasz większą rozdzielczość. Lepiej się ustawić nie da :p

__

calc działa na zasadzie obliczania np 50% - 60px mówi o tym żeby od połowy szerokości odjął 60px, 50% będzie liczbą zmienną w zależności od monitora a 60px wartością stałą,

PS tam powinno być 146px a nie 60 popraw sb. Bo 146px to szerokość klawisza.

@up - edit

Mimo wszystko zamknął bym to w diva a nie body.

komentarz 11 kwietnia 2016 przez BlauVeB Początkujący (410 p.)

Tak to wygląda przy 100%:

https://scr.hu/nK24OO

a tak przy 200%:

https://scr.hu/4qeK84

Nie wiem jak to się będzie zachowywało na mniejszych ekranach (tło na pewno działa dobrze).

komentarz 11 kwietnia 2016 przez Eimens Maniak (69,240 p.)

The server returned a "404 Not Found".

komentarz 11 kwietnia 2016 przez BlauVeB Początkujący (410 p.)

Czyli div np. Container? Ustawienia będą wtedy takie same jak dla body? Czy w body ma mieć wtedy jakieś ustawienia?

Co mi to da? :P

komentarz 11 kwietnia 2016 przez Eimens Maniak (69,240 p.)

dla body zostawisz tylko margin: 0;

a resztę nadajesz dla .container

Co ci to da?

-twoja strona od kodu będzie wyglądała lepiej, nie stosuje się praktyki żeby z body robić diva.

komentarz 11 kwietnia 2016 przez BlauVeB Początkujący (410 p.)

100%:
http://i.imgur.com/q0POgdM.jpg

200%:
http://i.imgur.com/e6ZV5ft.jpg

Nie wygląda to źle, ale boję się jak będzie się zachowywało na mniejszych ekranach. :d

komentarz 11 kwietnia 2016 przez Eimens Maniak (69,240 p.)

Będzie okey :p Na mniejszych ekranach będzie po prostu większy, ale to tak będzie ze wszystkimi elementami na stronie, które będą miały jakąś stałą szerokość.

komentarz 11 kwietnia 2016 przez BlauVeB Początkujący (410 p.)

Ok, powiedz mi jeszcze jedno, proszę. Kazałeś poprawić i zrobić przy left i right calc 146px. W ten sposób przycisk nie jest po środku, a lekko po lewo. Wydaje mi się, że 146px, to całość, a odejmuje z lewej i prawie, więc podzieliłem po połowie i mam:
left: calc(50% - 73px);
right: calc(50% - 73px);

działać - działa, ale tak jest poprawnie?

komentarz 11 kwietnia 2016 przez Eimens Maniak (69,240 p.)

Tak dobrze jest.

1	komentarz 11 kwietnia 2016 przez BlauVeB Początkujący (410 p.) Super, dziękuję Ci baaardzo. :) PS. Znalazłem na Twojej stronie wykonany telefon. Naprawdę świetna praca, szacunek. :D Nie sądziłem, że można takie rzeczy w samym kodzie robić. Jeszcze raz, dzięki! :D

komentarz 11 kwietnia 2016 przez Eimens Maniak (69,240 p.)

"na Twojej stronie" - to nie moja strona a profil, ale dziękuję bardzo :)

odpowiedź 11 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

Wystarczy tylko background-size, bez przedrostków...
http://caniuse.com/#search=background-size

Po drugie, właściwości bez prefiksów powinny być na końcu, czyli powinno być np. tak:

-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

komentarz 11 kwietnia 2016 przez BlauVeB Początkujący (410 p.)

A przeglądarka interpretuje od góry do dołu? Tak szczerze, to nie wiem na czym polegają te przedrostki. Znalazłem w internecie, to stwierdziłem, że zadziała. :P

Podobne pytania

0 głosów

4 odpowiedzi 2,434 wizyt

Wyśrodkowany, przyklejony footer do dołu strony - HTML/CSS

pytanie zadane 14 kwietnia 2016 w HTML i CSS przez RedMartin Użytkownik (640 p.)

0 głosów

1 odpowiedź 534 wizyt

Footer nie chce się przykleić do dołu.

pytanie zadane 2 sierpnia 2016 w HTML i CSS przez Mistrz0000000 Bywalec (2,780 p.)

0 głosów

2 odpowiedzi 219 wizyt

Jeden obrazek na dwóch obiektach css

pytanie zadane 9 lipca 2020 w HTML i CSS przez PanJan3214 Użytkownik (560 p.)

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...