Jak określić pozycję?

pytanie zadane 6 kwietnia 2015 w HTML i CSS przez Matt Sochi Obywatel (1,930 p.)

Jak określić pozycję tego diva?

http://screenshooter.net/102363052/tlrsoqy

Mój kod:

<div id="welcome">
			Lorem ipsum ect.
</div>


body
{
	background-image:url(2.jpg);
	background-size:100%;
	font-family: 'Lato', sans-serif;
}

#welcome
{
	background-color:red;
	 background-position: 20% 80%;
	opacity:0.9;
	width:30%;
	height:auto;
	border-radius:5px;
}

3 odpowiedzi

odpowiedź 6 kwietnia 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

Najlepsza

Spróbuj użyć marginesów:

margin: górny prawy dolny lewy;

czyli np.

margin: 10px 30px 10px 30px;

Możesz zapisywać też tak w zależności od potrzeb:

margin: 5px; /*wszystkie marginesy 5px*/
margin: 10px 20px; /*margines górny i dolny po 10 a lewy i prawy po 20*/
margin-top: 5px; /*margines górny 5px zamiast top może być jeszcze bottom (czyli dół), left, right*/

komentarz 6 kwietnia 2015 przez DL TD Nałogowiec (36,710 p.)

Dokładnie. Najlepsze rozwiązanie ;)

odpowiedź 6 kwietnia 2015 przez DL TD Nałogowiec (36,710 p.)

Pozycję w CSS określa się za pomacą: padding: 50px 150px 25px 100px; Nie będę ci mówił za co odpowiada np. 150px ;) wklej to jako wartość do div'a :) Zapomniałem jeszcze dodać o marginesach. Do div'a dodać można top: 10px; bottom:10px margin-left: 10px; margin-right: 10px; (top - odległość od góry w px, bottom - odległość od dołu, left - od lewa, right - od prawa) Wartości mogą być ujemne. Np. top: -20px;

komentarz 6 kwietnia 2015 przez Matt Sochi Obywatel (1,930 p.)

Dzięki, ale chodzi mi o odstęp tego tła czerwonego, czyli z automatu z tekstem. Całego diva inaczej mówiąc. Nie tekstu.

komentarz 6 kwietnia 2015 przez DL TD Nałogowiec (36,710 p.)

Zedytowałem mają odpowiedź :P Do div welcome dodaj marginesy ;) wystarczy nawet chyba margin: 10px 10px 10px 10px; Jest mocniejszy od pojedynczych marginesów ;)

komentarz 6 kwietnia 2015 przez Matt Sochi Obywatel (1,930 p.)

Dzięki, działa :)

odpowiedź 6 kwietnia 2015 przez BerdPL Obywatel (1,190 p.)
edycja 6 kwietnia 2015 przez BerdPL

Aby prosto zmienić pozycje danego elementu nie za pomocą marginesów zmień pozycjonowanie na absolute (jeśli nie chcesz aby odziaływał na inne elementy) lub na relative aby odziaływał na inne elementy. Aby regulować pozycje elementu używasz opcji top left right oraz bottom. A o to przykład:

#welcome{
position:absolute;
top:50px;
left:30px;
}

W tym wypadku Element o ID welcome został odsunięty od początku strony o 50 px w dół oraz od lewego boku strony o 30px w prawo.

Jeżeli użylibyśmy opcji :

#welcome{
position:relative;
top:50px;
left:30px;
}

Element także został by poodsuwany o dane piksele lecz od pozycji w której został umieszczony w pliku HTML (np od diva który go by poprzedzał) a nie od początklu strony tak jak w przypadku opcji absolute.

Pozdrawiam :D