Урок 8: Абсолютно позициониране

25 април 2012, 07:41 Публикувано в Начално образование | 3 коментара , 1292 прочита
Ключови думи: сайт, училищен
Искало ли ви се е да поставите картинка без да се съобразявате с полетата? Да я преместите малко настрани или я поставите върху друга, а не се е получавало?
Днес си играх с абсолютното позициониране и буквално накарах една пеперуда да кацне близо до хедъра
Може да видите резултата на страница от сайта на училището ни: http://souhssz.webnode.com/uchilishchna-dokumjentatsija/ Дано и на Дани и харесат тези.

Ползвах картинка от този набор: http://i1147.photobucket.com/albums/o549/souhs/Setofbutterflies-1.png ,но може да сложите всяка друга по свой вкус.

Поставянето се извършва по следния начин. Просто поставете този код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script> <script type="text/javascript"> $("body").append($("<img id='xmasleftbell' src='http://i1147.photobucket.com/albums/o549/souhs/Setofbutterflies.png' style='position:absolute; top: 198px;right:300px;border:none;'/>")); </script>

С червен цвят е отбелязан адреса на картинката и отстоянията от горния край (198px) и от десния край (300px) на страницата. Тези стойности може да промените както поискате!

Кода се поставя, като изберете в Webnode опцията Widgets и след това Embed code. Аналогично е за други сайтове.

https://lh6.googleusercontent.com/-_YIt_w3noVo/Tvy2ke4svZI/AAAAAAAAB9U/bQXJZQ7uNyo/s636/snimka.png

Ако има въпроси съм насреща : )

 Слънчева седмица!