CODEWITHSUNDEEP
htmlcsshyperlink
ryan houben
ryan houben

Reputation: 31

Can't click on my links after placing some images

I'm new in html and css so i have a question.

I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.

HTML:

<!DOCTYPE html>
<html>
 <head>
   <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <title>Rijschool Houben</title>
 </head>
 <body>
   <div id="header"></div>
    <div id="header-pic"><img src="image/test.png"></div>
    <p>
     <div id="nav-bar">
         <ul>
           <li>|<a href="http//www.google.nl">Home</a>|</li>
           <li><a href="contact">Info</a>|</li>
           <li><a href="portfolio">Prijzen</a>|</li>
           <li><a href="over ons">Acties</a>|</li>
           <li><a href="over ons">Machtiging</a>|</li>
           <li><a href="over ons">Theorie</a>|</li>
           <li><a href="over ons">Begeleid rijden</a>|</li>
           <li><a href="over ons">Bromfiets</a>|</li>
           <li><a href="over ons">Contact</a>|</li>
         </ul>
     </div>
   </p>
   <p>
     <div id="icon-main">
         <i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
         <i class="fa fa-paste" style="font-size:18px;"></i><a>[email protected]</a><br />
         <i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
     </div>
   </p>
   <p>
    <div id="img-1">
      <img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
    </div>
    <div id="img-2">
      <img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
    </div>
    <div id="img-3">
      <img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
    </div>
    <div id="img-4">
      <img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
    </div>
    <div id="img-5">
      <img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
    </div>
    <div id="img-6">
      <img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
    </div>
  </p>
 </body>
</html>

CSS:

div#header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: white;
}

div#header-pic{
  position: fixed;
  height: 50px;
  left: 500px;
}
div#nav-bar{
  position: fixed;
  padding-top: 130px;
  left: 0;
  width: 100%;
  white-space: nowrap;
}

div#nav-bar ul{
  list-style: none;
  text-align: center;
  background-color: #323232;
  padding: 10px 0;
}

div#nav-bar li{
  display: inline;
}

div#nav-bar li a{
  text-decoration: none;
  color: white;
  padding: 14px 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

div#icon-main{
  position: fixed;
  color: #323232;
  padding: 10px;
}

div#icon-main i{
  padding: 5px;
}

div#icon-main a{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

div#img-1 {
  position: fixed;
  left: 0;
  padding-top: 184px;
  width: 100%;
}

div#img-2 {
  position: fixed;
  padding-top: 184px;
  padding-left: 255px;
}

div#img-3 {
  position: fixed;
  padding-top: 184px;
  padding-left: 915px;
}

div#img-4 {
  position: fixed;
  padding-top: 184px;
  padding-left: 585px;
}

div#img-5{
  position: fixed;
  padding-top: 184px;
  padding-left: 1245px;
}

div#img-6 {
  position: fixed;
  padding-top: 184px;
  padding-left: 1575px;
}

i know the code is bad but i hope someone can help me! Here is a fiddle.

-Ryan

Upvotes: 3

Views: 2366

Answers (4)

Aki
Aki

Reputation: 2928

You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.

Try using something like:

selector {
   position: absolute; /* or `fixed` like in your css; see below*/
   top: 100px; /* pixels from the top */
   left: 100px; /* pixels from the left */
   /* you can also use `bottom` and `right` */
}

For example:

div#img-3 { /* or just `#img-3`; see below */
  position: absolute;
  top: 184px;
  left: 915px;
}

Check this w3 schools article for more information on positioning.

Not related to the question:

  • If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.

  • Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.

  • If you are using HTML5 then try using semantic elements.

  • Avoid using fixed position when you don't need to (your page is an example of such page).

  • Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.

  • Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.

  • Read about HTML Responsive Web.

Upvotes: 1

Alexandru Alexe
Alexandru Alexe

Reputation: 33

I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?

Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).

Like this: http://codepen.io/Attrexx/pen/KVvwXP

Upvotes: 1

dreamweaver
dreamweaver

Reputation: 303

I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.

Your code is messy but your doing okay.

  • First off wrap everything you are putting in the header in the header div
  • The images are floating up to the top over your nav due to the position:fixed
  • Remove all the empty <p></p> between your div's
  • Use floats on your images and width of a percentage of 100% plus wrap them in a container/div

If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.

You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.

Upvotes: 1

geeves
geeves

Reputation: 661

I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.

From the external HTML you have the following code:

<a>046-4524501</a>

Which does not work as a link.

You have this code

<a href="http//www.google.nl">Home</a>

That works as you would expect it to.

Change this line:

<a>046-4524501</a>

to 

<a href="http//www.example.com">046-4524501</a>

Where the href="Where you want the link to go".

It's all about the value for "href"

Upvotes: 1

Related Questions