I'm getting into the field of web design, and for practice purposes, I'm trying to create responsive HTML and CSS websites modeled after real websites so I only worry about the development, not the design. As of now, I'm redesigning apple.com. My problem is that in the apple.com navigation bar, the Apple logo is consistently around an inch away from the links to other parts of the site. As you resize the browser, it stays around an inch away. The problem is that on my (unfinished) version of the site, the apple logo stays fixed in one position as you resize the browser.
Here's my code:
html {
font-size: 100%;
}
body {
padding: 0;
margin: 0;
}
#font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
.font {
font-family: San Francisco;
}
.logo {
position: absolute;
left: 5em;
top: .5em;
}
.center {
display: inline;
text-align: center;
}
.search {
display: block;
position: fixed;
right: 1em;
top: .7em;
}
header {
list-style-type: none;
word-spacing: 40px;
background-color: #323232;
height: 2.8em;
width: 100%;
position: fixed;
opacity: .98;
}
.ul-header {
margin: .8em;
}
.li-header {
display: inline;
}
.a-header {
text-decoration: none;
color: white;
font-family: San Francisco;
font-size: 15px;
}
.iphoneximg {
display: block;
margin-left: auto;
margin-right: auto;
}
.iphone {
text-align: center;
font-size: 3em;
line-height: 0.5em;
}
.sayhello {
text-align: center;
font-size: 1.6em;
line-height: 0;
font-weight: 550;
}
#media(min-width: 1500px) {
.iphoneximg {
width: 50%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Apple</title>
<link rel="icon" href="Images/Apple.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<div class="center">
<img src="Images/Screenshot%20from%202018-03-20%2020-59-01.png" class="logo">
<ul class="ul-header">
<li class="li-header">Mac</li>
<li class="li-header">iPad</li>
<li class="li-header">iPhone</li>
<li class="li-header">Watch</li>
<li class="li-header">TV</li>
<li class="li-header">Music</li>
<li class="li-header">Support</li>
<img src="Images/Search.png" class="search">
</ul>
</div>
</header>
<br><br><br><br><br><br><br><br><br>
<section class="iphonex">
<h1 class="font iphone">iPhone X</h1>
<p class="font sayhello">Say hello to the future.</p>
<img src="Images/iphone.png" width="76%" class="iphoneximg">
</section>
<section class="iphonex">
<h1 class="font iphone">iPhone 8</h1>
<p class="font sayhello">A new generation of iPhone.</p>
<img src="Images/generation.jpg" width="76%" class="iphoneximg">
</section>
</body>
</html>
Someone suggested this solution:
How to horizontally center a <div> in another <div>?
The problem is that I'm trying to figure out how to work with the differences between images and text to center them, so simply throwing them in a div won't work.
I've tried putting the text and the image in a div and centering it, % values, messing with the display property, and a few other things, but nothing seems to work.
I'm also a newbie web dev, so if there's anything else I should fix, feel free to let me know.
Thanks,
Lyfe
Run an inspect element on the Apple page and you'll see they place their image as another list element. You on the other hand are placing it outside your list.
Here is your code, with the Apple logo placed as the first list element:
<ul class="ul-header">
<li class="li-header"><img src="apple_logo.png" width='20px'></li>
<li class="li-header">Mac</li>
<li class="li-header">iPad</li>
<li class="li-header">iPhone</li>
<li class="li-header">Watch</li>
<li class="li-header">TV</li>
<li class="li-header">Music</li>
<li class="li-header">Support</li>
</ul>
EDIT
To ensure your apple logo aligns vertically with the other elements in your list, add this to your CSS:
#app_logo {
margin-top: -10px;
}
.center ul img {
vertical-align: middle;
}
Note I added an ID to the image. Also, your settings may be slightly different.
if we have an actual look at the CSS and HTML of the apple page this is how you do it:
html:
<ul class="ac-gn-list">
<li class="ac-gn-item ac-gn-apple">
<a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus">
<span class="ac-gn-link-text">Apple</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-mac">
<a class="ac-gn-link ac-gn-link-mac" href="/mac/" data-analytics-title="mac">
<span class="ac-gn-link-text">Mac</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
<a class="ac-gn-link ac-gn-link-ipad" href="/ipad/" data-analytics-title="ipad">
<span class="ac-gn-link-text">iPad</span>
</a>
</li>
... There are More...
</ul>
css:
#media only screen and (max-width: 767px){#ac-globalnav .ac-gn-item-menu{
height:43px;
border-bottom:1px solid #333;
opacity:0;
pointer-events:none;
}
.ac-gn-apple{
position:absolute;
width:48px;
top:0;
left:50%;
margin-left:-24px;
text-align:center;
z-index:1
}
Comment:
I would bet the
position:absolute;
does the trick, however, I cut out allot of the webkit code. If yo ureally want to make a dynamic page/responsive page, you need to learn the Bootstrap Library, it is honestly super easy to use and to start using. Makes everything dynamic and responsive.
Related
When I try to size down my desktop screen navigation size of 1440px(90em) to any lower width screen, my navigation bar links start dropping off the screen. I have tried using some media query combinations, but nothing to show for it.I haven't got much experience with frontend, so I am a little bit thin on this side. Any long-term fixes to this one?Any hint on this one will be highly appreciated.
HTML header code:
<!--header-->
<header>
<nav class="nav__bar">
<a href="#" class="logo">
<img src="./images/logo.svg" alt="Sunnyside logo">
</a>
<ul class="nav__links">
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="nav__item">
Project
</li>
Contact
</ul>
<img src="./images/icon-hamburger.svg" alt="toggle menu icon" class="toggle__menu">
</nav>
</header>
CSS header styles:
header {
height: 5em;
position: absolute;
left: 0;
right: 0;
}
.nav__bar {
height: 100%;
width: 90em;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
padding: 0 2em;
}
.nav__links {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav__item {
margin: 1em;
}
.nav__link {
text-decoration: none;
font-size: 1.125em;
color: hsl(0, 0%, 100%);
font-family: 'Barlow', sans-serif;
transition: all 350ms ease-in-out;
}
.nav__link:hover {
color: hsl(232, 10%, 55%);
}
.toggle__menu {
cursor: pointer;
display: none;
}
In your example code, you set the color of the link text to white... it's white on white. But that's not fully the problem... you should also remove width:90em from the .nav_bar... it's unnecessary. see this codepen https://codepen.io/aequalsb/pen/jOmyJNp
Just simply allow the <nav> to "be itself"... which is a block level element and naturally attempts to stretch out to fit available width.
padding in CSS Sizes the margin inside a button or element. Try using margin: (how many 'px' it's going off the screen); and I've had this problem before:
SOLUTION 1:
use margin-*left or top*: *px is going off screen*
<style>
#button {
width: 100px; /* the width of the button */
position: absolute;
left: 50%; /* always 50% when centering */
margin-left: -50px; /* minus half the size of the element */
}
</style>
<button id="button">Center of page</button>
SOLUTION 2
i've had this problem before, and in best situations, use position: absolute instead of relative if you are positioning the element.
<head>
<style>
.background {
position: relative;
}
.overlap {
position: absolute;
left: 30px;
}
</style>
</head>
</style>
</head>
<body>
<!-- background-element -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Circle_Rufous_Solid.svg/1200px-Circle_Rufous_Solid.svg.png" class="background" width="10.5%" />
<!-- Overlap element -->
<img src="https://cdn.onlinewebfonts.com/svg/img_24930.png" class="overlap" width="10%" />
</body>
SOLUTION 3
if none of the above works, consider using javascript: device tester command and redirect to an error page with unsupported devices.
This example will detect a handful of mobile-devices, and if so, it'll redirect to 𝘩𝘵𝘵𝘱://𝘨𝘰𝘰𝘨𝘭𝘦.𝘤𝘰𝘮
<script>
if( /Android|webOS|iPhone|iPad|Mahc|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = "http://google.com";
} else {
}
</script>
NOTE: if there is big problem you cannot solve, and none of these work, its best to do research or find some articles to find your answer. Then consider using stackoverflow.
I'm new to HTML and CSS, and my first website is about Python programs, that the user can write into the editbox and then save it as Python file ( .py ). Right now I only created a navigation bar, editbox and also a Python icon.
I have some problems with my code, my Python icon is under the navigation bar and I can't see it, also, my navigation bar is not all over the screen, in the left side of the screen, I can see some space, and my last problem is with my editbox, I can only write from the middle and not from the beginning.
How can I set my Icon to be on top of the navigation bar ?
How can I modify the size of my navigation bar and set it all over the screen ?
How can I write from the beginning and not from the center in my editbox ?
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="description" content="This is an awesome website">
<title>Make Python - Online Python Editor</title>
<style>
body {
background-color: lightslategray
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0px;
width: 100%;
}
li {
float: left;
}
.text {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
background-color: teal;
text-decoration: none;
}
li a:hover {
background-color: black;
}
</style>
</head>
<body>
<a title="Main Page" href=""> <!-- Main Page Link -->
<img style="border: 0px; width: 50px; height: 50px;" src="python.png" alt="Python Image">
</a>
<ul>
<li><a class="text" href="">Home</a></li>
<li><a class="text" href="">About</a></li>
<li><a class="text" href="">Contact</a></li>
</ul>
<form>
<input type="text" style="width: 1500px; height: 750px;">
</form>
</body>
</html>
Use z-index: 1; to place the img tag on top of the ul tag.
Right now your navbar is stretched to all of your page width. To use all of your
page width. I guess you want your navbar links to spread within it.
Use display: flex; and justify-content: space-between for ul to
achieve this.
Use text-align: left; to write from the beginning.
I can't click on my links anywhere. They are not inside of the div that seems to be blocking my ability to click on them. They are also not supposed to be opaque because they are not inside of that div. They are in their own divs. Anyone see what I'm missing here? How do I change this so that I can click on my links again? I was messing with the background image for awhile. I just don't know what's going on. This is my cheezy website I'm making for school. I just need help so I can turn this in! Thank you!
<!DOCTYPE html>
<!--
LOCAL PAGE
Heather M Smith
My First Home Page
CSIS 1430
6/18/2017
-->
<html>
<head>
<title>Heather's Home Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
max-height: 100%;
margin: 0 auto;
}
#background{
background: #373737 url('pinkBackground.jpg') no-repeat;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -3;
}
#heading
{
text-align: center;
}
#emailAddressLink
{
color: white;
}
#topBox
{
margin-top: 50px;
}
h1, h2, h3, h4
{
color: black;
font-family: Georgia;
text-shadow: 1px 0px 5px white;
text-align: center;
z-index: 4;
}
ol, ul, li
{
color: black;
font-family: Georgia;
font-size: 20px;
line-height: 2em;
z-index: 4;
}
.bigText
{
color: #373737;
font-family: Georgia;
font-size: 60px;
}
.link
{
color: #5200cc;
text-decoration: none;
font-family: Georgia;
font-size: 25px;
word-spacing: 5px;
line-height: 2em;
font-weight: bold;
text-shadow: 2px 0px 10px #ffff99;
z-index: 4;
}
.box
{
background-color: #DCD0C0;
padding: 20px;
border: 2px solid #373737;
margin: 10px auto;
width: 800px;
height: 300px;
opacity: .3;
z-index: -3;
}
.boxContents
{
width: 800px;
height: 340px;
margin: 10px auto;
margin-top: -350px;
text-align: left;
line-height: 2em;
z-index: 4;
}
#intro
{
font-family: Georgia;
font-size: medium;
word-wrap: normal;
font-size: 1.5em;
}
#slccLogo
{
position: relative;
float: right;
padding: 30px;
width: 250px;
height: 250px;
}
#owlImage
{
float: right;
width: 300px;
height: 200px;
}
#lastBox
{
line-height: 6em;
}
</style>
</head>
<body>
<!--BACKGROUND-->
<div id="background"></div>
<!--HEADING-->
<div id="heading">
<h1 class='bigText'>Heather's Home Page</h1>
<h2>CSIS 1430 | Email me:</h2>
<!--EMAIL ADDRESS-->
<address>
<a class='link' id="emailAddressLink"
href="mailto:HeatherSmithx#gmail.com" target="_blank">
Heather's Email
</a>
</address>
</div>
<br>
<!--BACKGROUND DIV BOX-->
<div class='box' id="topBox"></div>
<!--INTRO-->
<div class="boxContents">
<span id="intro">Hello! I'm Heather, a student at
<a class='link' href="http://www.slcc.edu/">Salt Lake Community
College</a>
studying Computer Science. I want to be a software developer and
my goal
is to get an internship before I graduate. I'm getting some
experience at
Century Link, where I currently work. I have worked at Century
Link for
two years as a Repair Representative. Even though my interest
in computers is great, I'm also an aspiring artist.
<br>
I've been painting, drawing, and playing music for most of my
life
and I know there's always so much more to learn. I'm hoping to
use my
creativity in a way that can be applied to developing software
in the
future.
</span>
</div>
<br>
<!--COMPUTER SCIENCE COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2 class="heading">My Computer Science Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="slccLogo" src="SLCCLogo.png" alt="SLCC">
<ul>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/computer-science-and-information-
systems">CSIS 1030</a></li>
<li>CSIS 1340 - content coming soon</li>
<li>CSIS 1400 - content coming soon</li>
<li>CSIS 1410 - content coming soon</li>
<li>CSIS 1430 - content coming soon</li>
<li>CSIS 1550 - content coming soon</li>
</ul>
</div>
<br>
<!--GENERAL EDUCATION COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2>My General Education Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="owlImage" src="Owl.png" alt="Wise Owl">
<ul>
<li class="link"><a
href="https://heathersmithx.wordpress.com/coursework/english-2010/">ENGLISH
2010 NOTEBOOKS</a></li>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/coursework/film-culture/686-2/">FILM
1070 FINAL PAPER</a></li>
<li class="link"><a href="index/reflection.html">CSIS 1430
REFLECTION</a></li>
<li class="link"><a
href="https://heathersmithx.wordpress.com/outside-the-classroom/">OUTSIDE OF
SCHOOL...</a></li>
</ul>
</div>
<br>
<!--MY FAVORITE WEBSITES-->
<div class='box'></div>
<div class="boxContents">
<h2>My Favorite Web Sites!</h2>
<ol>
<li class='link'><a href = "http://www.dreamincode.net/"
target="_blank">Dream in Code</a></li>
<li class='link'><a href = "https://www.wolframalpha.com/"
target="_blank">Wolfram Alpha</a></li>
<li class='link'><a href = "https://slcc.instructure.com/"
target="_blank">SLCC Canvas</a></li>
<li class='link'><a href = "https://www.w3schools.com/"
target="_blank">w3schools</a></li>
</ol>
</div>
<br>
<!--PROJECTS FROM THIS CLASS-->
<div class='box'></div>
<div class="boxContents" id="lastBox">
<h2>Projects from CSIS 1430</h2>
<h4 class="link">
<a class='link' href='resume.html' target="_blank">RESUME | </a>
<a class='link' href='littleBoxes/littleBoxes.html'
target="_blank">LITTLE BOXES | </a>
<a class="link" href='map/utahMap.html' target='blank'>IMAGE MAP
|</a>
<a class="link" href='PizzaPlace/pizzaIndex.html'
target='blank'>PIZZA ORDER FORM |</a>
<a class='link' href='GuessingGame/GuessIndex.html'
target="_blank">GUESSING GAME | </a>
<a class='link' href='TicTacToe/TicTacToe.html'
target="_blank">TIC TAC TOE | </a>
<a class='link' href='index/reflection.html'
target="_blank">REFLECTION </a>
</h4>
</div>
</body>
</html>
The issue is with the .boxContents class. The margin-top selector is pulling everything off. If you remove it, your links should function as expected. Also, just on a side-note, it's worth avoiding using lots of z-indexes in your CSS if they aren't required. It can lead to issues and content being hidden all too easily.
You've got a lot of z-index action going on there. I would be careful about how you are using the z-index. Refer to this great article on the CSS z-index which also higlights some of the pitfalls of using z-index. https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Change the class .link to have z-index:5; and then test it. It will put it in front of your other <divs>.
Just make sure you keep that class with a higher z-index than your other classes / IDs.
I have a website www.weardenali.com. A part of the site has an image banner which I want to be overlayed by a Colored Box and some text, just like how Bellroy.com has theirs.
This is what I have, a failed code which isn't responsive :
Wear Denali (my site):
Bellroy:
This is the code i am using now :
.image-banner-content.content-left {
padding-left: 1% !important;
}
.sf-animation.image-banner-content,
.sf-animation[data-animation="none"].image-banner-content {
bottom: 80% !important;
}
a.link:hover,
a.link:active {
text-decoration: underline;
color:#F03E3E !important;
}
<div style="margin-bottom: 60%; float: left; display: inline-block; padding: 0px 10px 5px 10px; background-color: #ffffff; position: relative;">
<h3>
<span style="color: #0e3559;">
Designed by Urban Adventurers
</span>
</h3>
<h4>
<a href="http://weardenali.com/" class="link" style="color: #0e3559; float: left; font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; font-size: 12px; letter-spacing: 1.2px;">
> SHOP NOW
</a>
</h4>
</div>
I appreciate any advice/pointers.
Assuming your image banner was done in a kinda sorta ok way... This should work:
<!--- code for the image banner --->
<div class="MyAdvertisement">
<h3>Designed by Urban Adventurers</h3>
<a href="http://weardenali.com/">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
SHOP NOW
</a>
</div>
<!--- end code for the image banner --->
Note that I added Font Awesome code for the > you had in there. Using glyphs the way you did is annoying for non-sighted users. Google Font Awesome. It's nice.
I'm not sure what you want to do exactly. I'll give you css for pixel values, but if you want responsive as is 'scales with the browser', use percentages.
.MyAdvertisement {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: auto;
overflow: hidden;
background: white;
}
If you can't put your code where I suggested, you are going to have to tell us more about your site code before anyone can help you in any meaningful way.
Good luck & have fun.
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>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</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>raymond#rijschoolhouben.nl</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
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
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
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.
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
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.