Форум Сайтостроение Веб-строительство

Как расположить кнопку в опр точке html

NO
На сайте с 29.03.2012
Offline
48
NOOBITO
13051

Как расположить кнопку в определенной точки. Что бы она не меняла свое положение, даже при разных разрешениях экрана? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Dosuga.COM</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style type="text/css">

BODY {

 background-image: url('ссылка на изображение');

 background-attachment:fixed;

 height:100%;

  background-repeat:no-repeat;

  background-position:center;

}



</style>

  </head>

  <body>

    <div>

  <div style="position:fixed; top:16%;  left:64%">

<button type="button"  onclick="location.href='ссылка';">Вход</button>

</div>

</div>

  </body> 

</html>
outtime
На сайте с 04.05.2008
Offline
197
outtime
#1

top и left в пикселях указать а не в процентах?

Предлагаю воспользоваться моими услугами корректора. Проверю и уберу все ошибки, поправлю грамматику и склонения, сделаю текст лучше и читабельнее. Высокая скорость работы, цена 20 р за 1000 символов.
NO
На сайте с 29.03.2012
Offline
48
NOOBITO
#2
outtime:
top и left в пикселях указать а не в процентах?

А как узнать точное расположение пикселей на картинке или подгонять нужно на глаз?🍿

Yakuza58rus
На сайте с 04.10.2010
Offline
47
Yakuza58rus
#3

Кнопка при скроллинге как вести себя должна?

Только вперёд!
NO
На сайте с 29.03.2012
Offline
48
NOOBITO
#4

Никак, если возможно вообще без скролла сделать. На странице там обычный фон а на фоне кнопка расположена. При увеличение разрешение кнопка уходит

Yakuza58rus
На сайте с 04.10.2010
Offline
47
Yakuza58rus
#5 

 <div style="margin: 10px 0 10px 20px; display:block;">

<button type="button"  onclick="location.href='ссылка';">Вход</button>

</div>

Т.е. мы делаем div в виде блока и отступы margin сверху 10px справа 0 снизу 10px слева 20px.

Если надо кнопку расположить справа например то можно использовать position: absolute; и задать отступы в виде right: 10px; top: 10px;

Как убрать отступы для Как правильно делать внутренний Как лучше сверстать такое
R
На сайте с 18.12.2009
Offline
92
rerighter
#6

Делаете блок, задаете ему position:relative. В него Вашу кнопку с position:absolute, а также right и top. При скриллинге все норм, так как у Вас блок не position:fixed.

Хотя может Вам фиксированный и нужен, я не знаю. В общем-то и все на этом.

Вопрос к HTML-верстальщикам Подскажите, как сделать плавающее position: 'fixed'
NO
На сайте с 29.03.2012
Offline
48
NOOBITO
#7

Кнопку сделал как надо, только теперь изображение при увеличение разрешение все время уезжает вниз. Не получается привязать кнопку к изображению :(

Yakuza58rus
На сайте с 04.10.2010
Offline
47
Yakuza58rus
#8

Покажи, как реализовываешь привязку изображения к кнопке.

NO
На сайте с 29.03.2012
Offline
48
NOOBITO
#9
Yakuza58rus:
Покажи, как реализовываешь привязку изображения к кнопке.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <meta charset="utf-8">

  <title>Вход</title>

  <style>

   body {

    background: url(Изображ) no-repeat;

    -moz-background-size: 100%; 

    -webkit-background-size: 100%; 

    -o-background-size: 100%; 

    background-size: 100%; 

   }

  </style>

 </head>

 <body>

    <div style="position:relative;">

<div style="margin: 110px 0 10px 800px; display:block; position:fixed;">

<button type="button"  onclick="location.href='ссылка';">Вход</button>

</div>

</div>

  </body> 

</html>
Yakuza58rus
На сайте с 04.10.2010
Offline
47
Yakuza58rus
#10

Не уверен, что верно понял задачу. Попробуй вот так: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <meta charset="utf-8">

  <title>Вход</title>

  <style>

   body {

	   background:url('изображение') top center;

   }

   

   .btn {

	   margin: 110px 0 10px 800px;

	   width: 100px;

	   height: 43px;

	   }

  </style>

 </head>

 <body>

<button type="button"  onclick="location.href='ссылка';" class="btn">Вход</button>

  </body> 

</html>

P.S. старайся не писать лишнего кода

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий