• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Obrazek przyklejony css

VPS Starter Arubacloud
0 głosów
1,490 wizyt
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

+1 głos
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 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 :) 

0 głosów
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,515 wizyt
0 głosów
1 odpowiedź 594 wizyt
0 głosów
2 odpowiedzi 246 wizyt
pytanie zadane 9 lipca 2020 w HTML i CSS przez PanJan3214 Użytkownik (560 p.)

92,830 zapytań

141,771 odpowiedzi

320,817 komentarzy

62,159 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

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!

...