I want to create a horizontal scrolling image panel that consists of large images with a max height of 800px. When the browser is resized I want the entire selection of images to get smaller/bigger according to the size of the browser window. I want the top of the images to hang 200px at the top with a 30px margin at the left (when page is loaded) and 30px at the bottom.
I am really new to this so any help whatsoever would be greatly appreciated
The HTML looks like this so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dean Pauley — Recent work</title>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="infoleft">
<ul>
<li>Dean Pauley</li>
<li>Graphic Design</li>
</ul>
</div>
<div id="inforight">
<ul>
<li>Information</li>
</ul>
</div>
<div id="images">
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
</div>
</body>
</html>
The css:
#charset "UTF-8";
/* CSS Document */
body {
font-family: 'Questrial', sans-serif;
}
#infoleft {
position:fixed;
top:20px;
left:0px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#infoleft ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#infoleft ul li {
display: inline;
padding: 30px;
}
#inforight {
position:fixed;
top:20px;
right:30px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#inforight ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#images {
position:absolute;
left:20px;
bottom:30px;
top:200px;
width:25000px;
height:800px;
padding-top:100px;
padding-bottom:30px;
}
img {
padding:10px;
}
a {
text-decoration:none; color:#000;
}
a:hover {
color:#0080ff;
}
What is the most efficient way to do this?
Many thanks in adavnce
EDIT
On page load
On scroll
On 75% decrease window
How about something like these changes to your CSS for the "#images" and "img" sections...
#images {
position:absolute;
left:20px;
bottom:30px;
top:200px;
border: 2px ridge gray;
width: 90%;
display: inline-block;
overflow: scroll;
white-space: nowrap;
}
img {
padding:10px;
width:50%;
height:95%;
}
You can play around with those values but you should get a horizontally scrolling image section that changes on resizing the window...
You can take the gray border off if you'd like - I was just using it for testing...
EDIT
Uploaded a code sample with absolute positioning instead of relative as that keeps the image section 30px off the bottom...
I would change the image-related size measurements to % rather than px. That way the size of your images, paddings, margins, etc. will change with the size of the browser window although the proportions will stay the same.
example: img {width:80%; height:60%; etc.}
edit
Using part of Zack's answer, I would change your css img rule to:
img {
padding:10px;
width:3.799;
height:100%;
}
That will give you an image that adjusts with the browser window size.
However you will need to use percents (%) to adjust your positioning rules (i.e. left, top, padding, margin, etc.) to keep all proportions the same.
Note
At this point I am only adjusting the example, so for the record Zack's design is more efficient, and would be better if the look satisfies you.
Related
I have some images in a grid-like area and when one is hovered over I would like it so the text on the left-hand side of the screen changes to a predefined description of that image, for every image it will do this and display the text in the same area. Any help would be much appreciated I've been trying to get it for hours now.
The text needs to be displayed in the same area. so if I hover over a lake, the lakes desc will be displayed in another box (let's call it desc box). then if I hover over a duck the desc of that duck will be displayed in that same desc box.
Is there any way using onmouseover to set to show text depending whats being hovered over. so if A duck image is being hovered over the predefined text lets say var DuckImage="A duck is an animal"; is displayed in HoverOverDesc when that duck image is hovered over.
If I understand your question, you want a grid of images to the right on the screen, where each image has predefined text that is displayed on the left side of the screen if the user hovers that image.
This can be achieved via CSS and HTML, without any JavaScript as shown below. Please see the comments in the snippet for further explanation:
.grid {
/* Put 50% white space to the left of the image grid
which provides the space for descriptions to appear */
padding-left:50%;
/* Specify a basic grid layout for images in the grid */
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.grid img {
/* Cause each image to not exceed the grid cell's width */
max-width:100%;
}
.grid a p {
/* With width of description cannot exceed half page width. If text
description is too long, this causes it to wrap onto multiple lines
at the 50% point */
width:50%;
/* Fixed position ensures the description is placed at top left of
screen (by default) regardless of scroll position */
position:fixed;
top:0;
left:0;
/* Do not show description by default */
display:none;
}
.grid a:hover p {
/* When hovering the a around an image, cause it's description to
be shown */
display:block;
}
<div class="wrapper">
<div class="grid">
<a href="#">
<p>Pre defined text for blue image</p>
<img src="https://via.placeholder.com/350/00f.png" alt="blue" />
</a>
<a href="#">
<p>Pre defined text for red image</p>
<img src="https://via.placeholder.com/350/f00.png" alt="red" />
</a>
<a href="#">
<p>Pre defined text for green image</p>
<img src="https://via.placeholder.com/350/0f0.png" alt="green" />
</a>
<a href="#">
<p>Pre defined text for yellow image. Lots of text can be specified,
which will wrap on to a new line.</p>
<img src="https://via.placeholder.com/350/ff0.png" alt="green" />
</a>
</div>
</div>
one way of get this done could be have the grid and the message container in a parent container and use the general sibling selector, the sample I put bellow do that is not perfect but it work, other way that you could use is with javascript using onmouse over on the grid cells and maybe a dataattribute in order to make it more dynamic.
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.grid-area{
width:800px;
height: 600px;/* theses values are only for test define your as you wish*/
position: relative;
top:50px;
left:100px;
background:#444;
display: inline-flex;
justify-content: space-around;
flex-wrap: wrap;
}
.grid-area >.img{
width: 150px;
height:150px;
background:blue;
margin:20px;
border:2px solid rebeccapurple;
}
.text-artifact{
position: absolute;
bottom:10px;
left: -20px;
width: 100%;
height: 100px;
background:#4354FF;
}
.text-artifact *{
display: none;
text-align: center;
color:white;
font-weight: bolder;
text-shadow: 1px 2px 3px #434343;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size:2em;
}
.img:hover{
background: yellow;
}
.img:hover ~ .text-artifact{
background: white;
}
.img1:hover ~ .text-artifact .text1{
display:block;
}
.img2:hover ~ .text-artifact .text2{
display:block;
}
.img3:hover ~ .text-artifact .text3{
display:block;
}
.img4:hover ~ .text-artifact .text4{
display:block;
}
.img5:hover ~ .text-artifact .text5{
display:block;
}
</style>
</head>
<body>
<div class="grid-area">
<div class="img1"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img2"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img3"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img4"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img5"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="text-artifact">
<div class="text1">This should be a description for 1</div>
<div class="text2">This should be a description for 2</div>
<div class="text3">This should be a description for 3</div>
<div class="text4">This should be a description for 4</div>
<div class="text5">This should be a description for 5</div>
</div>
</div>
</body>
</html>
the example bellow contains javascript, this is one of the approach that you could use, I decide to use data attribute that let customize with values and customize, css should work with it and you could query( as in the example and create too with .setAttribute('data', "your attribute name",...; but there are other way.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.center{
width:500px;
height: 400px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
border:3px solid #434343;
}
.nested-box-bottom{
width: 100%;
height: 60px;
position: fixed;
display: inline-block;
bottom:0;
left:0px;
background: #323232;
}
#text-in-nested-box {
margin-top:10px;
width: 90%;
position: relative;
left:5%;
height: 32px;
color:white;
font-weight: bolder;
text-align: center;
}
#outside-box{
margin-top:10px;
width: 100%;
position: absolute;
top:-10px;
left:0%;
height: 49px;
color:white;
font-weight: bolder;
text-align: center;
background:#323232;
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="center">
<img class="img" data-columns="1" src="https://via.placeholder.com/150"alt="">
<img class="img" data-columns="2" src="https://via.placeholder.com/150"alt="">
<img class="img" data-columns="4"src="https://via.placeholder.com/150"alt="">
<div class="nested-box-bottom">
<div id="text-in-nested-box"></div>
</div>
</div>
<div id="outside-box"></div>
<script>
const img = document.querySelectorAll('.img');
const outside = document.getElementById('outside-box');
const inside = document.getElementById('text-in-nested-box');
function display(){
const value = this.dataset.columns;
inside.innerHTML =`you are hover element with ${value}`;
outside.innerHTML =`you are hover element with ${value}`;
}
function out( ){
outside.innerHTML = "";
inside.innerHTML="";
}
for(i=0;i<img.length;i++)
{
///console.log(`setting event src ${img[i].dataset.columns }`);
img[i].addEventListener("mouseover", display, false);
img[i].addEventListener("mouseout", out, false);
}
</script>
</body>
</html>
<img src="Images/duck.png" width="450" height="auto" onmouseover="document.getElementsByName('HoverOverInfo2')[0].innerHTML = 'A Duck'" onmouseout="document.getElementsByName('HoverOverInfo2')[0].innerHTML = ' '" />
<img src="Images/car.png" width="450" height="auto" onmouseover="document.getElementsByName('HoverOverInfo2')[0].innerHTML = 'A Car'" onmouseout="document.getElementsByName('HoverOverInfo2')[0].innerHTML = ' '" />
Some where else
<h4 class="w3-bar-item"><b>Description</b></h4>
<div style="margin-left:8px">
<p id="HoverOverInfo" name=></p>
This worked perfectly for me!
i have made a simple website using a free template. i am confused because the images on my version are not showing but the images on the demo version are working and both have exactly the same css files and html because i copy pasted. i will post them below. my confusion lies in the fact that i dont see any of the images reffered to in either the html or the css stylesheet. the styling is there for the images but no link to the file location. 2 questions.
this is what the site should look like:
http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/
this is what my site looks like:
https://cherry-cupcake-30790.herokuapp.com/
as you can see background, background to the navbar and main images are missing but other styling and css are implemented.
why are the images not showing on my version?
why are the images showing on the demo version 0hen there seems to be no reference to the actual file location of the image (only styling of the image)?
thanks.
html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>NightBeach | florida web design</title>
</head>
<body>
<div id="container">
<div id="mainpic">
<h1>Green<span class="off">Mountain</span></h1>
<h2>A template by Bryant Smith</h2>
</div>
<div id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">About</li>
<li class="menuitem">Products</li>
<li class="menuitem">Services</li>
<li class="menuitem">Design</li>
<li class="menuitem">Contact</li>
</ul>
</div>
<div id="content">
<h2>You may use this template in any manner you like. All I ask is that you leave the link back to my site at the bottom of the page. </h2>
<p> </p>
<p> </p>
<h3>Template Notes</h3>
<p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like. If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find "#mainpic h1" in style.css and modify it's "left" and "top" properties, this is also true for the h2 tag.</p>
<p> </p>
<h3>More information</h3>
<p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
<p> </p>
<h3>Template Notes</h3>
<p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like. If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find "#mainpic h1" in style.css and modify it's "left" and "top" properties, this is also true for the h2 tag.</p>
<p> </p>
<h3>More information</h3>
<p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="footer"><h3>florida web design</div>
</div>
</div>
</body>
</html>
css file:
/* A Free Design by Bryant Smith (bryantsmith.com) */
body {
margin: 0;
padding: 0;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 13px;
color: #061C37;
background: #EEEFE4;
background-image:url(images/background.png);
background-repeat:repeat-x;
}
*
{
margin: 0 auto 0 auto;
text-align:left;}
#container
{
display: block;
height:auto;
position: relative;
width: 940px;
}
#mainpic h1
{
position:absolute;
text-align:right;
color:#F8FDEE;
font-size:30px;
color:#FFF;
left:60px;
top:20px;
}
#mainpic h2
{
position:absolute;
text-align:right;
color:#E1E7F7;
left:60px;
top:50px;
}
#mainpic
{
background-image:url(images/main.jpg);
background-repeat:no-repeat;
width:900px;
height:354px;
}
.off
{
color:#3A6028;
}
#menu
{
background-image:url(images/menu.png);
background-repeat:no-repeat;
width:940px;
height:69px;
float:left;
clear:both;
}
#content
{
width:880px;
height:auto;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
}
#footer
{
width:inherit;
height:auto;
}
#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#7198E1;
}
#menu ul {
list-style: none;
padding: 0px;
margin-left:auto;
width:900px;
}
#menu li {
list-style: none;
padding: 0px;
display: inline;
}
#menu a {
float: left;
width: 150px;
height: 40px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
padding-top: 17px;
font-size: 15px;
}
#menu a:hover{
color:#BEE399;
}
#content p
{
}
html, body {
text-align: center;
}
p {text-align: left;}
[1]: http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/
for problem 1, because your website's css is empty, nothing in. The css link is https://cherry-cupcake-30790.herokuapp.com/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css .
for problem 2, the image link refer is not in the html, but in the css file.
#mainpic {
background-image: url(images/main.jpg);
background-repeat: no-repeat;
width: 900px;
height: 354px;
}
the image link is http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/images/main.jpg
I'm trying to make a horizontal nav bar on my website and I want to use CSS to position it closely under my websites name header and a portion of the background of the nav bar behind the icon to the left. Here is my code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Oldnut.com</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var currPic=1;
var totPics=2;
var keepTime;
function setupPicChange()
{keepTime=setTimeout("changePic()", 5000);}
function changePic()
{currPic++; if(currPic>totPic)currPic=1;
document.getElementByld("image").src="image"+currPic+".jpg";
setupPicChange();}
</script>
</head>
<body onLoad="setupPicChange();">
<div id="wrapper">
<div id="content">
<div id="banner">
<div id="img"><img src="images/Walnut.png" class="nut-image"></div>
<div id="top">Oldnut.com</div>
</div>
Home
Preassmbled
CPU
GPU
<div>
<img id="image" src="images/image1.jpg" alt="picture">
</div>
<div id="deals">
</div>
</div>
<div id="foot"
</div>
</div>
</body>
</html>
Not much to see here I guess it's obvious what I am doing, and my CSS
#charset "UTF-8";
body{background-image:url(../images/bg_bodytakeover.png);
}
#wrapper{
margin-left:auto;
margin-right:auto;
width:1000px;
}
.nut-image {
z-index: 1000;
position: relative;
}
#content{
margin-left:10px;
margin-right:10px;
padding-bottom:20px;
box-shadow:0px 0px 20px 3px;
border-radius:4px;
background-color:#FFFFFF;
height:600px;
position: relative;
}
#banner{
margin:auto;
position: relative;
}
#img{
float:left;
}
#top{
float: left;
color: #FF6600;
text-align: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 75pt;
text-shadow: 2px 2px #FFFFFF;
text-transform: uppercase;
}
nav {
position: absolute;
width: 100%;
background: #FF6600;
top: 110px;
}
#list-nav{
list-style-type:none;
margin:0;
padding:0;
width:calc(100% - 192px);
float:right;
top: 125px;
}
#list-nav li{
float:left;
width: 25%;
padding: 0;
margin: 0;
}
#list-nav li a{
text-decoration:none;
width:100%;
background:#FF6600;
color:#eee;
float:left;
text-align:center;
display:block;
}
#list-nav li a:hover{
background:#1d8ed0;
color:#000;
}
Now I want to have my nav bar very closely under the giant header text and the orange line background to go under the icon to the end of the white content border. I've tried all sorts of padding and margin mixing but its really just making a mess. I have looked around extensively but nothing seems to be working for me what works for others. Or I can't get all of what I'm looking to do. Anyone got any tips?
EDIT:I've tried a lot of padding to get the nav bar to stretch the screen but it keeps breaking the even separation of the buttons and their hover effects, is there another way to sort them evenly?
*SECOND EDIT NEW QUESTION*
I am trying to have my images change back and forth between the two after 5 seconds. I have seen code from other sites and don't see why it isn't working. Anyone notice what is wrong?
Update for comment:
I've updated the fiddle here to have exactly what you want. If you can't use calc on the list items and since you have a set width of 1000px, you can hardcode the widths in by doing this: width: (1000px - 192px) / 2, which would be width: 202px
Original answer:
If you will always have 4 menu items, set width: 25% (100% / 4) on each #list-nav li. Here's an updated fiddle
I also set the margin and padding on the li elements to 0.
Is this what you are looking for?
I am working on a project that is rather time sensitive. The task is to make a micro site that users can access through their smartphones, where they will be able to access a number of movies. They will scan a QR code (I know they are dead, I didn't plan the campaign). and land on this site. I am not a fontender, but know my way around html + css and I have been able to find a few things around the internet, but now I've come to a dead end. I am optimizing the site for max-width 640px with a 100% scalable width down to min-width of 320px. I've gotten it all working quite well on my test site, implemented fonts etc. but I run into a problem when I am trying to place the div #textbox inside the #sunny div, on top of the #image div. I have managed to center the #textbox, but I can't get it to align vertically and "stay" vertically aligned no matter what size screen the user views the page at.
Here is my code and css:
HTML:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<img id="logo" src="images/logo.png">
</div>
<div id="sunny">
<div id="image">
<img src="images/1.jpg">
</div>
<div id="textbox">
<p>Jacket Name</p>
See Details
</div>
</div>
</div>
</body>
</html>
And here is the CSS:
#font-face { font-family: FuturaStdBook; src: url('../fonts/FuturaStd-Book.otf'); }
#font-face { font-family: FuturaStdBook; font-weight: bold; src: url('../fonts/FuturaStd-Bold.otf'); }
#container
{
background: #fff;
font-family: FuturaStdBook, Georgia, "Times New Roman", Times, serif;
max-width:640px;
min-width:320px;
margin:0 auto;
}
#header
{
padding: 20px;
}
#logo
{
width:33%;
display:block;
margin:auto;
}
#sunny
{
width: 100%;
max-width:640px;
min-width:320px;
float:left;
position:relative;
}
#textbox {
background-color:white;
width:33%;
left:33%;
top:30px;
min-width: 70px;
height:50px;
text-align: center;
z-index:1;
position: absolute;
text-transform:uppercase;
padding-top:10px;
padding-bottom:10px;
color:#a3a3a3;
}
#textbox p {
font-size:14px;
line-height:0;
}
#textbox a {
font-size:12px;
color:#666666;
}
#image {
width:100%
position: absolute;
}
#image img{
width:100%;
height: auto;
}
N.B: Please bare in mind that I need to repeat the code, and have like 7 or 8 "identical" areas under each other, so the CSS have to be applicable to this design.
Hope someone is able to help me out :)
Seems like its a case of using too many divs. What you need to do is to place your elements in a div with position:relative, and then position the elements themselves as position:absolute and go about positioning them as you'd like.
I want to create a horizontal scrolling image panel that consists of large images with a max height of 800px. When the browser is resized I want the entire selection of images to get smaller/bigger according to the size of the browser window. I want the top of the images to hang 200px at the top with a 30px margin at the left (when page is loaded) and 30px at the bottom.
I am really new to this so any help whatsoever would be greatly appreciated
What is the most efficient way to do this?
Many thanks in adavnce
The HTML looks like this so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dean Pauley — Recent work</title>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="infoleft">
<ul>
<li>Dean Pauley</li>
<li>Graphic Design</li>
</ul>
</div>
<div id="inforight">
<ul>
<li>Information</li>
</ul>
</div>
<div id="images">
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
</div>
</body>
</html>
The css:
#charset "UTF-8";
/* CSS Document */
body {
font-family: 'Questrial', sans-serif;
}
#infoleft {
position:fixed;
top:20px;
left:0px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#infoleft ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#infoleft ul li {
display: inline;
padding: 30px;
}
#inforight {
position:fixed;
top:20px;
right:30px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#inforight ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#images {
position:absolute;
left:20px;
bottom:30px;
top:200px;
width:25000px;
height:800px;
padding-top:100px;
padding-bottom:30px;
}
img {
padding:10px;
}
a {
text-decoration:none; color:#000;
}
a:hover {
color:#0080ff;
}
I would change the image-related size measurements to % rather than px. That way the size of your images, paddings, margins, etc. will change with the size of the browser window although the proportions will stay the same.
example: img {width:80%; height:60%; etc.}