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.
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 am new to HTML and have been reverse engineering code to suit my own needs for developing an updated internal website for my work.
Currently I have my code linking to different .htm pages that simulate being on the same page. Obviously this is entirely too tedious to change if I need to add or change documents.
I know that I can change the source for an iframe, but every solution I have seen doesn't work for me. I'm so inexperienced I don't even know where to start. I've tried the onclick function, but it just breaks my buttons and does nothing beyond that.
Any help is appreciated.
Here is my current code:
<!DOCTYPE html>
<!---Version: 2.x FOUNDATION--->
<html>
<head>
<title align="center">MainPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown {
top: 7px;
position: center;
display: inline-block;
}
.dropdown-menu {
background-color: white;
color: black;
padding: 12px;
font-size: 14px;
border: none;
left: -100%;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.navbar {
background-color: #C0C0C0;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
border-bottom: 0px;
}
/* Links inside the navbar */
.navbar a {
float: left;
position: center;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 59px; /* Add a top margin to avoid content overlay */
}
iframe {
display: block;
border-style:none;
}
</style>
</head>
<body>
<!---Creates a Navbar at the top of the screen. Will scroll with site if content of the "Main" section is long enough.--->
<div class="navbar">
<p align="center" style="font-size:100%;"><b>Main Page</b></p> <!---Creates a "button" that links to the main page.--->
<div class="dropdown"> <!---The start of the buttons and drop down menus inside the Navbar.--->
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">On Air</a>
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="button1.htm">Example1</a></li>
<li class="dropdown-submenu"><!---Creates a submenu inside of the parent menu.--->
<a class= "test" tabindex="-1" href="#">Weather<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex"-1" href="submenuButton1.htm">Example 2</a><li>
<div class="main"> <!---Creates the Main section of the page that the navabar sits over.--->
<p align="center">Welcome to the new and improved sampleURL.</p>
<!---Creates an iframe that displays the sampleURL.--->
<p align="center"><iframe name="mainframe" width="100%" height="770" src="sampleURL.htm?wmode=transparent" frameborder="0" allowfullscreen wmode="transparent"></iframe></p>
</div>
</a>
<script><!---A script that allows the submenu functions to work properly.--->
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Set a custom class to each tag that changes the iframe like this:
<a class="iframe-change" tabindex"-1" href="submenuButton1.htm">Example 2</a>
Now, catch the click event with this javascript script:
$(".iframe-change").on("click", function(event) {
event.preventDefault(); // Prevents the <a> event
$("[name=mainframe]").attr("src", $(this).attr("href")); // Changes the iframe "src" property to the url setted in the clicked <a>
});
This will be an easy question for you to answer. I'm making a Google Clone Homepage, and I'm trying to connect my CSS and HTML. For some reason it isn't working.
My HTML and CSS are in the same folder so that's not the problem. In my HTML sheet, I've already linked to the external CSS stylesheet as well. The HTML code is below.
<style>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</style>
I'm expecting to see my HTML change because of my CSS, but I don't see that.
You can find my full HTML code: https://codeshare.io/ay3yrw
And full CSS here: https://codeshare.io/GABLnN
link tag is used directly inside the head tag
It must be like this:
<head>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</head>
I check your code and I found three main reasons why your CSS doesn't work properly.
1. link tag
As many others mentioned, you need to remove the <style> ... </style> tag from the <head> tag and use the <link> tag directly inside of it.
2. Not id but class
Your HTML and CSS have many errors. For example, you are styling in the CSS file:
.top left links {
...
}
Here .top is defined as a class but in your HTML code you defined it as an id, check this line:
<!-- Containing Top Left Links on Nav Bar -->
<div id="top left links">
...
</div>
<!--Containing Top Right Links on Nav Bar-->
<div id="top right links">
...
</div>
Remember that an id should be unique therefore you should change id attributes with class attributes.
3. No white spaces
In your CSS file all your definitions are incorrect:
.top left links {
...
}
From this definition, we know that .top is a class, but left and links are representing tags. And we all know that where is no <left> nor <links> tags they should be represented as classes. Also, remember that you concatenate them when you want to refer to a single element with multiple classes and you separate classes by a white space when you want to refer to a descendant element.
So the correct definition will be without white spaces:
.top.left.links {
...
}
Finally, I did some modification on the CSS file for the .search1 class. Check this code:
/* Google Duplicate CSS */
.top.left.links {
float: left;
color: #718090;
text-align: left;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.left.links a:hover {
text-decoration: none;
}
.top.right.links {
float: right;
color: #718090;
text-align: right;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.right.links a:hover {
text-decoration: none;
}
#ham_menu {
height: 24px;
width: 24px;
float: right;
}
.search1 {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
-webkit-border-radius: 2px;
-webkit-user-select: none;
color: #5F6368;
height: 36px;
line-height: 27px;
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 4px;
cursor: pointer;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
min-width: 54px;
padding: 0 16px;
text-align: center;
}
.bottom.left.links,
.bottom.right.links {
list-style-type: none;
color: #718090;
padding: 30px;
margin: auto;
font-size: 13px;
}
.bottom.left.links {
float: left;
}
.bottom.right.links {
float: right
}
.footer {
position: fixed;
min-width: 980px;
z-index: 103px;
height: 64px;
background-color: lightgray;
}
<!--Header Menu of Page -->
<header>
<!-- Containing Top Left Links on Nav Bar -->
<div class="top left links">
About
Store
</div>
<!--Containing Top Right Links on Nav Bar-->
<div class="top right links">
<li>Gmail</li>
<li>Images</li>
<li>Sign In</li>
</div>
</header>
<!--Top Right Ham Menu-->
<img id="ham_menu" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" class="right">
<!--Actual Google Image, Search Form, and Buttons-->
<center>
<img src="http://www.google.com/logos/doodles/2019/us-teacher-appreciation-week-2019-begins-4994791740801024-2x.jpg" alt="Happy US Teacher Appreciation Week 2019!" class="center">
<form class="search" input type="text"> </form>
<button class="search1" type="submit" value="Google Search" style="visibility">
Google Search
</button>
<button class="search1">
I'm Feeling Lucky
</button>
<p>We're supporting teachers inspiring the next generation.</p>
</center>
<!--Footer Links-->
<footer>
<div class="bottom left links">
Advertising
Business
</div>
<div class="bottom right links">
<li>Privacy</li>
<li>Terms</li>
</div>
</footer>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
and in this condition make sure your HTML file and CSS file need to be in same folder.
Please, remove the <script> tag so that you can reference this CSS file.
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.
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.