Ссылки dont work (только начинающий html css)

Question

Я просмотрел некоторые вопросы, которые, как я думал, были похожи на мои, но, оказывается, даже начальные вопросы для меня продвинуты!

По какой-то причине мои ссылки в верхнем и нижнем колонтитулах работают, но не в боковой панели или в основном корпусе, кто-то может объяснить мне, почему и как я могу это исправить? Я открыл HTML без CSS и она отлично работает тогда, но я не знаю, как мой CSS будет сделать ссылку несостоявшимся: S

код здесь: http://codepen.io/anon/pen/gppbmP

Im «довольно» уверен, что сво css thats messing things up, поэтому яв вставлял это там, но codepen имеет html тоже :)

(я знаю, что это супер базовый, но это моя первая попытка, и каждый должен где-то начать! :))

body { 
    font-family: "Helvetica"; 
    background: #DCDCDC; 
} 

header a { 
    font-size: 12px; 
    color: black; 
    text-decoration: none; 
} 
.side a { 
    font-size: 12px; 
    color: gray; 
    text-decoration: none; 
} 
.product a { 
    font-size: 12px; 
    color: gray; 
    text-decoration: none; 
    text-align: center; 
} 
    .product p { 
    font-size: 12px; 
    color: gray; 
    text-align: center; 
    } 
footer a { 
    font-size: 12px; 
    color: gray; 
    text-decoration: none; 
} 
body a:hover { 
    color: #FF0066; 
} 

.nav1 { 
    float: left; 
    position: relative; 
    top: 15px; 
    left:20px; 
} 

.nav2 { 
    position: absolute; 
    top: 47px; 
    right: 70px; 
    float: right; 
} 

h1 { 
    font-family: 'Satisfy', cursive; 
    font-size: 48px; 
    position: relative; 
    left: 420px; 
} 

header { 
    background-image: url("http://www.hugohd.com/wp-content/uploads/Pink-Beach-Sunset-Wallpaper-Android-Wallpaper-hugohd.com_.jpeg"); 
    margin: 30px; 
} 

.product { 
    background: white; 
    position: relative; 
    float: right; 
    left: -32px; 
    height: 350px; 
    padding: 30px; 
} 

.product img { 
    height: 200px; 
    width: 150px; 
    margin: 5px; 
} 

.side { 
    margin: 30px; 
    float: left; 
    background-color: white; 
    height: 800px; 
    width: 200px; 
    padding: 10px; 
    position: relative; 
    top: -29px; 
    text-align: center; 
} 

.side ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

footer ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

footer ul li { 
    display: inline; 
    padding: 80px; 
} 

footer { 
    position: relative; 
    bottom: -40px; 
    right: 100px; 
} 

Thanks заранее! x

Редактировать: Спасибо, что помогли, всем! теперь он работает :) х

Answer 1

Update

То, что следует ниже, могут быть использованы, если вы не уверены, как установить анкерные теги (некоторые, кажется, неправильно), но увидеть решение ТАСОС Д.К. выше (и избиратели посмотрите на его решение).

Оригинал ответа

Вы, кажется, не хватает http:// в начале вашего href=:

<a href="http://www.google.com">google</a> 

^^ это правильный способ сделать это, но иногда у вас есть:

<a href="www.google.com">google</a> 

Когда вы уедете от http://, браузер думает, что l чернила относятся к странице html, которую она пытается отобразить. Если вы посмотрите, где эти ссылки попытаются взять вас, они будут чем-то вроде http://www.example.com/www.google.com.

Это на самом деле удобная вещь для использования, потому что это означает, что на носители, такие как javascript, css и изображения, которые находятся на вашем сайте, не нужно ссылаться на полный URL-адрес. Вы можете просто использовать:

<img src="/images/background.png"> 

(вместо)

<img src="http://www.example.com/images/example.png"> 

Аналогично со ссылками, вы можете ссылаться на другие страницы на вашем сайте с:

<a href="/myOtherPage.html">Page 2</a> 

Answer 2

Вы позиционирование вашего <footer> с position:relative;, и он перебирает меню сбоку. Вы можете видеть это ясно, если вы добавляете цвет фона:

footer { 
    background-color:#DEDEDE; 
} 

Вы можете увидеть его here в демке. В зависимости от того, что вы хотите сделать, решение исправить это может различаться.

Чтобы устранить проблему с помощью текущего макета, просто установите для свойства z-index значение, например. 1. См demo здесь

.side { 
    z-index: 1; 
} 
.container { 
    position:relative; 
    z-index:1; 
} 

Мое предложение пересмотреть свое расположение, чтобы избежать подобных проблем в будущем.

Answer 3

Ваш .контейнер и нижний колонтитул перекрывают боковую панель. Попробуйте плавать .container справа, так как ваша боковая панель перемещается влево.

Вы заметите, что как только вы это сделаете, ваш нижний колонтитул, вероятно, переместится в верхнюю часть из-за того, что он имеет положение: относительное. Вы должны добавить «clear: both» в свой CSS. В зависимости от дизайна, который вы ищете, вы также можете поместить нижний колонтитул влево, дать ему ширину 100% и выровнять текст: center

Вы также можете поместить боковую панель (поплавок слева, как будто это теперь) в контейнере. Затем заверните div .product в контейнер с именем #content и float #content справа.

Вот хорошая ссылка для получения дополнительной информации о поплавках: https://css-tricks.com/all-about-floats/

Также FYI, ваша сноска в настоящее время имеет этот список:

<footer> 
<ul> 
    <a href="www.google.com"><li>Example</li></a> 
    <a href="www.google.com"><li>Example</li></a> 
    <a href="www.google.com"><li>Example</li></a> 
    <a href="www.google.com"><li>Example</li></a> 
</ul> 

ссылки должен быть вложен в пределах Ли и использование http: //:

<footer> 
<ul> 
<li><a href="http://www.google.com">Example</a></li> 
</ul> 

Answer 4

добавив в ваш файл CSS сделает ссылки кликабельны

.product { 
    z-index:1000; 
} 

Работа демо с функциональным продуктом ссылки here.

Answer 5

@Sarah, я не знаю, как, почему? но если вы переименуете свой класс из стороны в сторону1 или что-то еще, а затем смените css на то же, что и на side1, или на что-то, что отлично работает.

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