Как сделать фиксированную позицию div доступной для ссылки ссылкой?

-2

Я видел вопрос make a div a link, но основой для него является div position, установленный в relative. Но в моем случае, когда я сосредоточил свой div, и это тоже круг (я не знаю, имеет ли это значение или нет), но я использовал фиксированную позицию, чтобы независимо от того, какой размер экрана у вас есть, он всегда имеет горизонтальную ориентацию ,Как сделать фиксированную позицию div доступной для ссылки ссылкой?

Основываясь на этой информации, как мне сделать, чтобы мой логотип (div) был кликабельным.

/* Centering of the content */ 
 
div.homepage { 
 
\t position: fixed; 
 
    \t text-align: center; 
 
    \t margin: 0 auto; 
 
\t left: 0; 
 
\t right: 0; 
 
} 
 

 
/* Logo Design */ 
 
div.circle { 
 
\t margin: 0 auto; 
 
\t border-radius: 50%; 
 
\t width: 900px; 
 
\t height: 900px; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
\t flex-direction: column; 
 
\t background: 
 
\t linear-gradient(135deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px), 
 
\t linear-gradient(225deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px)0 64px; 
 
\t background-color:#dddada; 
 
\t background-size: 64px 128px 
 
} 
 

 
p.pavel, p.design { 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t font-size: 12em; 
 
\t color: \t #708090; 
 
\t margin: 0; 
 
}

<link href="css/index.css" rel="stylesheet" type="text/css"> 
 
<body> 
 
\t <div class="homepage"> 
 
\t \t <div class="circle"> 
 
\t \t \t <p class="pavel">Pavel</p> 
 
\t \t \t <p class="design">Design</p> 
 
\t \t </div> 
 
\t \t <ul> 
 
\t \t \t <li class="button"><a href="index.html" data-text="Home">Home</a></li> 
 
\t \t \t <li class="button"><a href="about.html" data-text="About">About</a></li> 
 
\t \t \t <li class="button"><a href="services.html" data-text="Services">Services</a></li> 
 
\t \t \t <li class="button"><a href="contact.html" data-text="Contact">Contact</a></li> 
 
\t \t </ul> 
 
\t </div>

Это то, что сайт выглядит, и я хочу большой круг немного, чтобы быть интерактивными

источник

2016-11-07 oneman

С помощью CSS можно имитировать интерактивные, как визуальные эффекты, но подошва ' div' не доступен. Вам нужно либо вставить элемент 'a', либо использовать некоторый JavaScript. – Leo

Вот рабочая версия ссылки внутри <div>, что делает круг круглым. Предоставленные, имея <p> -tags внутри <a> не совсем кошерно либо, но это разрешено в HTML 5.

/* Centering of the content */ 
 
div.homepage { 
 
\t position: fixed; 
 
    \t text-align: center; 
 
    \t margin: 0 auto; 
 
\t left: 0; 
 
\t right: 0; 
 
} 
 

 
/* Logo Design */ 
 
div.circle,a.circle { 
 
\t margin: 0 auto; 
 
\t border-radius: 50%; 
 
\t width: 900px; 
 
\t height: 900px; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
\t flex-direction: column; 
 
\t background: 
 
\t linear-gradient(135deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px), 
 
\t linear-gradient(225deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px)0 64px; 
 
\t background-color:#dddada; 
 
\t background-size: 64px 128px; 
 
     text-decoration: none; 
 
} 
 

 
p.pavel, p.design { 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t font-size: 12em; 
 
\t color: \t #708090; 
 
\t margin: 0; 
 
}

<link href="css/index.css" rel="stylesheet" type="text/css"> 
 
<body> 
 
\t <div class="homepage"> 
 
\t \t <div class="circle"> 
 
      <a class="circle" href="#"> 
 
\t \t \t <p class="pavel">Pavel</p> 
 
\t \t \t <p class="design">Design</p> 
 
      </a> 
 
\t \t </div> 
 
\t \t <ul> 
 
\t \t \t <li class="button"><a href="index.html" data-text="Home">Home</a></li> 
 
\t \t \t <li class="button"><a href="about.html" data-text="About">About</a></li> 
 
\t \t \t <li class="button"><a href="services.html" data-text="Services">Services</a></li> 
 
\t \t \t <li class="button"><a href="contact.html" data-text="Contact">Contact</a></li> 
 
\t \t </ul> 
 
\t </div>

источник

2016-11-07 03:50:21 junkfoodjunkie

-1

Все, что вы завернуть в якорной тег <a href='http://link.com'></a> будет link, включая все вещи внутри основного div, которые вы обертываете. Обратите внимание, что это включает поля. Например,

<link href="css/index.css" rel="stylesheet" type="text/css"> 
<body> 
    <div class="homepage"> 

     <a href="http://go-somewhere.com"> 
      <div class="circle"> 
       <p class="pavel">Pavel</p> 
       <p class="design">Design</p> 
      </div> 
     </a>

Теперь круг будет доступен для просмотра. Но поскольку он центрирован с margin: 0 auto;, поля проходят через пустое пространство.

Чтобы исправить это, поместите свой круг в контейнер. Дайте контейнеру ширину и позицию, которые вы хотите, а затем окружность в контейнере.

Вот ссылка на рабочий пера:

http://codepen.io/anon/pen/ENapEd

и обновленный HTML/CSS

<div class='container'> 
    <a href="#"> 
     <div class="circle"> 
     <p class="pavel">Pavel</p> 
     <p class="design">Design</p> 
     </div> 
    </a> 
</div>

CSS

.container { 
    width: 900px; 
    position: relative; 
    margin: 0 auto; 
}

Обратите внимание, что position: fixed; будет не держите круг в центре. Для этого вы хотите position: relative.

источник

2016-11-07 03:38:36 Naltroc

, если вы попробуете это самостоятельно, вы обнаружите, что он делает практически все ваши клики, а не только круг. Я попробовал это, прежде чем я разместил свой вопрос, но он не работает, как предполагалось. – oneman

также дает предупреждение «недопустимое место для div» при использовании eclipse – oneman

Вся ширина div будет ссылкой. Divs естественно занимает 100% ширину своего родительского элемента. Если вы хотите, чтобы ссылка была только на круге, укажите ее определенную ширину. – Naltroc

Как сделать фиксированную позицию div доступной для ссылки ссылкой?

ответ

Смежные вопросы