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

Obrazek przyklejony css

Aruba Cloud - Virtual Private Server VPS
0 głosów
1,772 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,948 wizyt
0 głosów
1 odpowiedź 683 wizyt
0 głosów
2 odpowiedzi 317 wizyt
pytanie zadane 9 lipca 2020 w HTML i CSS przez PanJan3214 Użytkownik (560 p.)

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,662 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...