Horizontal image scrolling with scalability - html

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.}

Related

Cannot remove default top margin of chrome browser

I am unable to remove default top margin after many attempts. Below is my html and css code. Please suggest where I am lacking?
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sample</title>
</head>
<body>
<div id="maincontainer">
<div id="header">
<h1>Sample</h1>
</div>
</div>
<div id="contents">
Body of page
</div>
</body>
</html>
CSS File
html, body
{
margin:0 auto;
padding:0;
border:0;
background:#fff;
font-family:Times New Roman;
font-size: 16px;
width:1024px;
}
#maincontainer
{
margin:0;
padding:5px;
}
#header
{
margin:0;
padding:0;
height:100px;
background:#8A0808;
text-align:left;
}
h1
{
margin:0;
padding:0 0 0 10px;
font-size: 60px;
font-weight:normal;
color:#fff;
}

padding: 5px; on the #maincontainer might be your issue. There's going to be 5px of white surrounding anything inside of the #maincontainer div.

CSS: Auto update font size

I have a nav bar. When the user makes their screen bigger I want my font size to auto adjust. I tried it with: li { font-size: 1.2vw; } It works if the page is refreshed after adjusting the screen. What would be the code for an auto update? I want my text to constantly change its size based on the window width.
<!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>Power</title>
<style type="text/css">
#page {
position:inherit;
display:block;
width:60%;
margin:auto;
min-width:1000px;
z-index:0;
}
#pageImg {
position:absolute;
width:60%;
min-width:1000px;
z-index:1;
}
#media (min-width: 1000px) {
#navBarImg {
top: 5vw;
}
#navBarLogoImg {
top: 5vw;
}
#navMenuPart1 {
top: 5vw;
left:60%;
}
}
#navBarImg {
position:absolute;
width:60%;
min-width:1000px;
top:50px;
z-index:2;
}
#navBarLogoImg {
position:absolute;
width:11.75%;
min-width:190px;
top:50px;
z-index:3;
}
#navMenuPart1{
position:absolute;
width:100%;
min-width:1000px;
left:20px;
top:50px;
z-index:3;
color: #FFFFFF;
}
li { font-size: 1.2vw; }
ul{ white-space: nowrap; }
.navMenuItems ul { list-style:none; text-align:center; padding:10px 0; }
.navMenuItems ul li { display:inline; padding:15px; letter-spacing:2px; }
.navMenuItems ul li a { text-decoration:none; color:#3a3a3a; }
.navMenuItems ul li a:hover {color:#F19433;}
</style>
</head>
<body>
<div id="page">
<img id="pageImg" src="../Navigation/backgroundImg.png" />
<div id="navBar">
<img id="navBarImg" src="../Navigation/navBarBGImg.png" />
<img id="navBarLogoImg" src="../Navigation/navLogoImg.png" />
</div>
<div id='navMenuPart1' class="navMenuItems">
<ul>
<li><a href='#'><span>Research</span></a></li>
<li><a href='#'><span>Team</span></a></li>
<li><a href='#'><span>News</span></a></li>
<li><a href='#'><span>Courses</span></a></li>
<li><a href='#'><span>Outreach</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
causeRepaintsOn = $("li");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
</script>
<header></header>
</div>
</body>
</html>

EDIT:
Here is a FIDDLE - you can resize the page and see that it is working.
See this css-tricks article:
This is a webkit bug (Chrome,Safari) and it doesn't occur on IE10+ and FF 19+
In that article the author gives a Jquery solution for webkit browsers:
To fix this issue (allow resizing without page refresh) you need to
cause a "repaint" on the element. I used jQuery and just fiddled with
each elements (irrelevant, in this case) z-index value, which triggers
the repaint.
causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
So your page will look something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
causeRepaintsOn = $("li");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
</script>
<header></header>
... etc etc..
</body>
</html>

Use,
font-size:1em;
or
font-size:100%; // based on body default declaration

If you have a css like this:
#body #mytext {
font-size: 50%;
}
you can dynamically resize in jQuery like this:
$(window).resize(function(){
$('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});

.NET/CSS Background Image wont go past bottom of browser window

I'm fairly experienced with .NET programming, usually with C#, though the controls I'm using for this project are VB. Usually I work with programming backend robust applications, but of course when I do a simple website for a friend is when I cant figure out the problem.
I'm using a VB master page for the site. The "wood" div is supposed to be a background image that repeats dynamically as far down as the page goes, but for some reason it only goes as far as the browser window height. The background-repeat:repeat-y doesnt seem to do anything, so I feel like the problem has to do with the CSS. Here's the master page:
<%# Master Language="VB" CodeFile="Normal.master.vb" Inherits="Normal" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>D&M Official Site</title>
<link runat="server" rel="stylesheet" type="text/css" href="Styles/Main.css" />
</head>
<body onload="MM_preloadImages('images/swaps/swap1.jpg','images/swaps/swap2.jpg','images/swaps/swap3.jpg')">
<div id="wood" >
<div id="mediaButtons">
</div>
<div id="wrapper">
<div id="logo"><asp:Image Height="200" runat="server" ImageUrl="~/images/logo.png" /></div>
<div id="menu"><img src="images/menu.jpg" width="560" height="373" border="0" usemap="#Map" id="Image1" />
<map name="Map" id="Map">
<area shape="poly" coords="43,266,49,296,59,279,68,290,83,294,87,295,95,297,97,298,95,299,99,298,103,299,105,297,114,320,131,343,143,358,141,368,152,369,152,356,157,360,156,355,158,354,159,354,160,354,163,351,167,350,189,365,195,353,173,333,168,315,161,290,157,271,152,247,147,240,159,206,162,193,161,157,161,139,150,110,130,100,117,91,118,84,126,75,129,52,122,39,108,37,92,49,91,61,94,71,94,93,76,103,62,116,53,134,42,188,48,255" href="Default.aspx" onmouseover="MM_swapImage('Image1','','images/swaps/swap1.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="223,24,244,37,252,48,245,62,239,72,247,83,261,100,270,108,273,158,273,203,271,232,259,241,254,278,252,308,259,330,268,344,255,351,241,360,229,367,217,366,207,349,198,310,197,249,181,243,172,210,169,179,170,158,171,141,182,112,190,96,201,94,211,83,205,59,208,36" href="tourdates.aspx" onmouseover="MM_swapImage('Image1','','images/swaps/swap2.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="309,35,328,38,338,51,335,66,329,77,329,90,355,100,364,133,368,154,357,207,353,223,349,255,341,295,338,332,335,343,340,360,334,369,324,352,317,337,301,333,286,343,273,351,272,341,284,330,283,311,285,289,285,241,281,209,277,179,275,143,275,112,296,103,303,91,303,75,297,65,299,46" href="media.aspx" onmouseover="MM_swapImage('Image1','','images/swaps/swap3.jpg',1)" onmouseout="MM_swapImgRestore()" />
</map>
</div>
</div>
<div id="Main">
<div style=" left:10px; position:relative; top:10px;">
<form id="MainForm" style="position:relative" runat="server">
<asp:contentplaceholder id="ContentPlaceHolder" runat="server"></asp:contentplaceholder>
</form>
</div>
</div>
</div>
</body>
</html>
Here's the CSS:
html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
height: 100%;
background-image: url(../Images/wallpaper.jpg);
}
#mediaButtons
{
position:relative;
text-align:center;
z-index:101;
padding-bottom:0;
margin-bottom:0;
}
#Main
{
position:relative;
background-color:#ffe4b5;
top:430px;
left:20px;
width:640px;
height:100%;
}
#wood
{
margin: 0;
padding: 0;
height:100%;
background-repeat:repeat-y;
background-image:url(../Images/wood.jpg);
z-index:1;
text-align: left;
width:695px;
margin-right:auto;
margin-left:auto;
background-position:center;
}
#wrapper
{
margin-top:0;
top:-20px;
text-align: left;
width: 695px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#logo
{
position:absolute;
left:-69px;
top:-27px;
width:200px;
height:200px;
z-index:100;
}
#menu
{
position:absolute;
left:62px;
top:35px;
width:560px;
height:373px;
z-index:2;
}
My CSS skills are pretty lacking, so sorry if this is a dumb problem :(

Probally due to the fact that you have
<%# Master Language="VB" CodeFile="Normal.master.vb" Inherits="Normal" %>
Before your DOCTYPE which cause the browser to display the page in quirks mode.

Scalable side scroll trouble

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.

How come my form input sometimes moves when I refresh the page?

On a page that I'm designing I have a form with one input of type text. Normally, this form and input render properly in my browser, Chrome, but occasionally, it renders about 20 pixels to the left of where it is supposed to be. When I refresh the page, it goes back to the original, correct place.
I have only tested in Chrome so far, so this isn't a cross-browser issue (it happens in the same browser). Is there anything wrong with my code below?
Here's my HTML code:
<!DOCTYPE htmls>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Test Site</title>
</head>
<body >
<div id="supercontainer" class="style1">
<img class="floater" src="top.jpg" alt="Top" />
<img class="floater" src="left.jpg" alt="Left" />
<div id="content">
<p id="theText">
Welcome. Please type a username.
</p>
<form id="prompt">
<div><input type="text" name="promptLine" autocomplete="off" id="promptLine" onkeypress="return submitenter(event);" value="% " /></div>
</form>
</div>
<img class="floater" src="right.jpg" alt="Right" />
<img class="floater" src="bottom.jpg" alt="Bottom" />
</div>
Here's my CSS code:
#supercontainer {
margin: 0 auto;
width: 900px;
display: block;
}
img.floater {
display: inline;
float: left;
}
#content {
background-color:black;
display: inline;
float: left;
padding-left:5px;
padding-right:5px;
min-height:458px;
max-height:458px;
min-width: 803px;
max-width: 803px;
color: lime;
}
#theText {
text-align:left;
margin-bottom:0;
margin-top:0;
line-height: 0.3;
font-family:"Courier New", Courier, monospace;
}
#prompt {
position: fixed;
top: 470px;
}
#promptLine {
width: 100%;
background-color: black;
color: lime;
border: none;
outline:none;
}

Try closing your BODY and HTML tags? Also, doctype "htmls"?