Forum Moderators: not2easy
<a href="http://www.URL HERE" target="_blank">
<img src="http://www.THUMBNAIL URL.jpg" width="330" height="248" border="0" alt="SOMETHING" />
</a>
But on using this, I lose the styling around the image. The CSS sheet uses -
/* General layout */
body {background:#e0e0e0; color:#303030; font:76% tahoma, verdana, sans-serif; margin:0; padding:15px 0 0;}
#container {background:#fff; margin:0 auto 20px; padding:5px 20px 20px; width:730px;}
/* Site title */
#logo {margin:15px 0 0;}
#logo h1 a {border:none; color:#505050;}
#logo h1 a:hover {border:none; color:#303030; text-decoration:none;}
#logo p {font-size:1.3em; color:#505050; margin:0 0 20px 0;}
/* Tags */
a {border-bottom:1px dotted #505050; color:#303030; text-decoration:none;}
a:hover {border-bottom:1px solid #505050; color:#303030; text-decoration:none;}
a img {border:0;}
h1 {font-size:2.2em; font-weight:400; margin:0 0 5px; padding:0;}
h2 {font-size:1.8em; font-weight:400; margin:0 0 12px;}
h3 {font-size:1.4em; font-weight:400; margin:0 0 10px;}
p {line-height:1.5em; margin:0 0 15px; text-align:left;}
ul,ol {margin:0 0 15px 15px; padding:0;}
li {margin:0 0 3px 0;}
/* Toptabs menu */
#toptabs {font-size:.8em; margin:10px auto -13px; width:760px;}
#toptabs p {color:gray; text-align:right;}
.toptab {background:#f0f0f0 url(images/corner2.gif) top right no-repeat; border-bottom:1px solid #e0e0e0; color:gray; margin:0 0 0 4px; padding:4px 5px 3px; text-decoration:none;}
.toptab:hover {background:#fafafa url(images/corner2.gif) top right no-repeat; border-bottom:1px solid #eaeaea; color:#505050; text-decoration:none;}
.activetoptab {background:#fff url(images/corner2.gif) top right no-repeat; border-bottom:1px solid #fff; color:#505050; margin:0 0 0 4px; padding:4px 5px 3px; text-decoration:none;}
.activetoptab:hover {border-bottom:1px solid #fff; text-decoration:none;}
/* Navitabs menu */
#navitabs {clear:both;}
.navitab {background:#e0e0e0 url(images/corner.gif) top right no-repeat; border-bottom:1px solid #fff; border-left:1px solid #fff; font-size:1.1em; margin:0 0 4px; padding:4px 8px; text-decoration:none;}
.navitab:hover {background:#d0d0d0 url(images/corner.gif) top right no-repeat; border-bottom:1px solid #fff; text-decoration:none;}
.activenavitab {background:#505050 url(images/corner.gif) top right no-repeat; color:#fff; font-size:1.1em; margin:0 0 5px; padding:4px 8px 5px; text-decoration:none;}
.activenavitab:hover {color:#fff; text-decoration:none;}
/* Header description area */
#desc {background:#505050 url(images/front.jpg) bottom left repeat-y; clear:both; color:#fff; /* height:200px; */ margin:5px 0 15px; padding:0 0 5px 0;}
#desc p {font-size:1em; line-height:1.3em; padding:0 0 0 15px; width:290px;}
#desc h2 {color:#fff; padding:15px 15px 0;}
#desc a {border-color:#fff; color:#fff; text-decoration:none;}
/* Main content */
#main {border-right:1px solid #d8d8d8; float:left; margin:0; padding:0 15px 0 0; width:550px;}
/* Sidebar */
#sidebar {float:right; width:150px;}
#sidebar p {font-size:0.9em; line-height:1.3em; margin:0 0 15px;}
#sidebar ul {margin:0 0 15px 0; padding:0;}
#sidebar li {list-style:none;}
ul.sidelink li {list-style:none; margin:0 0 3px; padding:0;}
ul.sidelink li a{background:#f0f0f0 url(images/corner.gif) top right no-repeat; border:none; display:block; margin:5px 10px 5px 0; padding:3px 4px 3px 8px; text-align:left; width:140px;}
ul.sidelink li a:hover {background:#e0e0e0 url(images/corner.gif) top right no-repeat; border:none; text-decoration:none;}
/* Footer */
#footer {background:#fff; border-top:1px solid #d8d8d8; clear:both; margin:0; padding:0;}
#footer a {color:gray;}
#footer a:hover {color:#303030;}
#footer p {color:gray; font-size:1.1em; line-height:1.3em; margin:15px 0 0; padding:0;}
/* Additional classes */
.photo {background-color:#f0f0f0; border:1px solid #d8d8d8; margin:0 0 15px; padding:2px;}
.timestamp {font-size:1.2em; color:#606060; margin:-12px 0 12px 0;}
.right {margin:-8px 0 8px 0; text-align:right;}
.block {background:#f0f0f0; padding:10px;}
.hide {display:none;}
Could someone please tell me the code to link the thumbnail image to open the larger image in its own window, ideally with a 'close' command but I'd be grateful for whatever I can get thanks!
Stephen
I lose the styling around the image
Linking stylesheets: see CSS / Include CSS in the body? [webmasterworld.com]
target="_blank"Please, reconsider doing what is known as "Breaking the back button"
<snip/>
Could someone please tell me the code to link the thumbnail image to open the larger image in its own window, ideally with a 'close' command
See Jakob Nielsen's Alertbox, May 30, 1999: [useit.com...]
Although over eight years old, it's still relevant
Surfers who fully able to navigate teh interwebs know how to open new tabs and/or windows themselves
Others (e.g novices and/or the blind) can, all too easily and unnecessarily, get lost/bamboozled when landing on such pages
<a <img class="photo" href="images/mainmap.jpg" target="_blank">
<img src="images/map.jpg" width="134" height="104" border="50" alt="something" /></a>
or
<a class="photo" href="images/mainmap.jpg" target="_blank">
<img src="images/map.jpg" width="134" height="104" border="50" alt="something" /></a>
but while each of these work as a link, they don't put the nice little border around the image
The line <link rel="stylesheet" type="text/css" href="main.css" media="screen,projection" /> is in the head
Anyone like to help with the coding please?
Stephen
What I use is something like:
<a class="thumb" onclick="return
startView('http://www.example.com/large.jpg','600','400','Title')" href="/large.jpg">
<img height="150" width="100" alt="Title" src="/small.jpg"/>
<br/>
Description
</a>
var view = null;
function startView(file,width,height,title) {
if (view) {
if (!view.closed) {
view.close();
}
}
view=window.open("","SlideWindow",'width='+width+',height='+height+',resizable=0');
view.document.open();
view.document.write('<html><title>'+title+'</title>');
view.document.write('<body onclick=\"window.close();\" background=\"'+file+'\"> ');
view.document.write('</b'+'ody></h'+'tml>');
view.document.close();
return false;
}
This has a graceful degradation to allow those without javascript to see the image just as well and use back to come back to your original page.
<a class=img class="photo" onclick="return startView('images/breakfastT.jpg','600','400','Title')"
href="images/loungeT.jpg"> <img height="150" width="100" alt="Title" src="/small.jpg"/> <br/> Description </a>
but its still not happening? I want to style it using what I think is the photo class which puts a border around it, but this as well as the link is proving very difficult for me an old html table user
Could you correct the code please?
This is based on your wish to have a pop-up window to show the large image.
There are many examples out there but they might well be overwhelming to understand so I've quickly done an example and build it up step-by-step so it's easy to follow what's going on.
So grab a browser and follow along (just do not take IE, it'll mess with your head due to its bugs) I'll fix the problems IE has at the very end. This is not just for my sanity, but also to both prevent feeding unneeded code that covers up for bugs of the past to the future IE8 and to make it move along faster (it's really faster to ignore IE and fix them later)
So let's grab a couple of images of and resize them to
1.jpg: 600x400
1t.jpg: 150x100
2.jpg: 600x400
2t.jpg: 150x100
If you don't want the 3x2 aspect ratio (this is what high end (d)SLR cameras produce vs. the 4x3 aspect ratio of consumer cameras), crop it for now and fix it later (it's not that hard but slightly different)
Let's start with the layout of the thumbnails and forget the pop-up for now (we'll ad them back in later on)
We'll start with a small html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>title</h1>
</div>
<div id="content">
<a class="thumb" href="1.jpg">
<img alt="Title" src="1t.jpg" />
<span>Description image 1</span>
</a>
<a class="thumb" href="2.jpg">
<img alt="Title" src="2t.jpg" />
<span>Description image 2 is really long so it
will wrap beyond what we have space for</span>
</a>
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</div>
</body>
</html>
This is a basic page that won't render all that nice, let's however focus on the thumbnails:
We want to remove the border and give them their size:
.thumb img {
width: 150px;
height: 100px;
border:0;
}
Let's also remove the text decoration and that blue color:
.thumb {
text-decoration: none;
color: #333;
}
To get the thumbs in a box one next to the other, we make them display as a block (an <a> is inline), and float them left as well as give them a border.
.thumb {
display: block;
float: left;
border: 1px solid #333;
}
Here you see that the image itself is also inline (it sits on the text line), so lets correct that:
.thumb img {
display:block;
}
Still the text makes the boxes way too wide to be of use:
.thumb {
width: 150px;
}
Now that box is squeezing the image, so we add some padding to the box:
.thumb {
padding: 5px;
}
Still the boxes are touching, we need to give them some space:
.thumb {
margin: 10px;
}
We'd like some more space between the image and the text:
.thumb img {
margin-bottom: 5px;
}
That footer is sitting in an awkward position there isn't it. Of course we want it to sit under the thumbs, not next to the last one if it finds space there.
But let's first do some layout of the page itself. We'd like some margin left and right; We'd like the footer and header to be dark background and white letters; the content have some light gray, and the boxes of the thumbnails white.
body {
margin: 0 50px; /*50px margins left and right*/
}
#header, #footer {
background-color: #333;
color: white;
}
#content {
background-color: #ccc;
}
#thumb {
background-color: white;
}
Hey where's the #content with it's light gray ?
Well: it's collapsing as it is supposed to. It has no content that is not floated and hence it collapses completely. To stop this we need to add something that isn't floated.
We add a <br> below the images in content div in the html and allow us to target it specifically:
<br class="clear" />
.clear {
clear:both;
}
Since this last has potential position issues where that <br> goes, let's sync where our code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 0 50px; /*50px margins left and right*/
}
#header, #footer {
background-color: #333;
color: white;
}
#content {
background-color: #ccc;
}
.thumb img {
width: 150px;
height: 100px;
border:0;
display:block;
margin-bottom: 5px;
}
.thumb {
display: block;
float: left;
border: 1px solid #333;
text-decoration: none;
color: #333;
width: 150px;
padding: 5px;
margin: 10px;
background-color: white;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>title</h1>
</div>
<div id="content">
<a class="thumb" href="1.jpg">
<img alt="Title" src="1t.jpg" />
<span>Description image 1</span>
</a>
<a class="thumb" href="2.jpg">
<img alt="Title" src="2t.jpg" />
<span>Description image 2 is really long so it
will wrap beyond what we have space for</span>
</a>
<br class="clear" />
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</div>
</body>
</html>
The header, footer and content might use some padding to make them look a bit nicer:
#content {
padding: 5px;
}
#header, #footer {
padding: 5px 10px;
}
now while this looks nice, if we add more images each with a different length of description, they'll start to mess with the lines as the float that goes onto the next line might not clear all of the previous one, but just go low enough to fix on the line (try it to see what goes on)
To fix it, either we can manhandle them with giving hose we want on a new line to have a clear property (actually we can give them the clear class we already have), or we can make them equal height:
.thumb {
height: 150px;
}
As expected this is creating trouble with the long text, I'd suggest a dual solution: stop it from going out of bounds of the box and make the font a bit smaller.
To stop it from going out of bounds we need to set a height, the easiest its to temporary add a background to the span and see where it goes.
.thumb span {
font: normal 10pt sans-serif;
background-color: red; /*temp*/
overflow: hidden;
height: 45px;
}
Hmm not exactly what we had in mind is it ?
it seems to have a line height that's unmatched with the font size, isn;t obeying the height ...
Well a <span> is an inline element. It needs to be a block to do what we want to happen.
.thumb span {
display:block;
}
Nice!
Now we can do away with the temp red color.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 0 50px; /*50px margins left and right*/
}
#header, #footer {
background-color: #333;
color: white;
padding: 5px 10px;
}
#content {
background-color: #ccc;
padding: 5px;
}
.thumb img {
width: 150px;
height: 100px;
border:0;
display:block;
margin-bottom: 5px;
}
.thumb {
display: block;
float: left;
border: 1px solid #333;
text-decoration: none;
color: #333;
width: 150px;
height: 150px;
padding: 5px;
margin: 10px;
background-color: white;
}
.clear {
clear:both;
}
.thumb span {
display:block;
font: normal 10pt sans-serif;
overflow: hidden;
height: 45px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>title</h1>
</div>
<div id="content">
<a class="thumb" href="1.jpg">
<img alt="Title" src="1t.jpg" />
<span>Description image 1</span>
</a>
<a class="thumb" href="2.jpg">
<img alt="Title" src="2t.jpg" />
<span>Description image 2 is really long so it
will wrap beyond what we have space for</span>
</a>
<br class="clear" />
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</div>
</body>
</html>
Seems like a good moment to check if the Firefox I've been using isn't using any bugs or features not found in other standards compliant browsers and test it in safari and opera to be sure.
No surprises found.
So we could test it now in IE7:
Uh-oh it's cutting off the content background after about one line of text height. Still we have that stretch element near the bottom so it should stretch the content. There are two solutions to this: either we add content after the <br> that needs to be rendered (e.g. a ) but then the #content becomes a line height longer than needed, or we could just try to give it "hasLayout" by applying zoom:1 to it (it's a IE specific tag, that gives this property to IE)
It's also make the font slightly bigger not allowing 3 lines of text.
Adding it in a conditional comment will do the trick.
A quick check in IE6 shows it has exactly the same problems, so we can do both in one go:
<!--[if lte IE 7]>
<style type="text/css">
#content {
zoom:1;
}
.thumb span {
font-size:75%;
}
</style>
<![endif]-->
The 75% was a bit of trial and error to get it more or less the same.
[for the record: opera renders it slightly small than safari and firefox on my mac, but the difference is very small so I let it slide]
So this concludes the step where we do the layout of the thumbs themselves
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 0 50px; /*50px margins left and right*/
}
#header, #footer {
background-color: #333;
color: white;
padding: 5px 10px;
}
#content {
background-color: #ccc;
padding: 5px;
}
.thumb img {
width: 150px;
height: 100px;
border:0;
display:block;
margin-bottom: 5px;
}
.thumb {
display: block;
float: left;
border: 1px solid #333;
text-decoration: none;
color: #333;
width: 150px;
height: 150px;
padding: 5px;
margin: 10px;
background-color: white;
}
.clear {
clear:both;
}
.thumb span {
display:block;
font: normal 10pt sans-serif;
overflow: hidden;
height: 45px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#content {
zoom:1;
}
.thumb span {
font-size:75%;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>title</h1>
</div>
<div id="content">
<a class="thumb" href="1.jpg">
<img alt="Title" src="1t.jpg" />
<span>Description image 1</span>
</a>
<a class="thumb" href="2.jpg">
<img alt="Title" src="2t.jpg" />
<span>Description image 2 is really long so it
will wrap beyond what we have space for</span>
</a>
<br class="clear" />
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</div>
</body>
</html>
Next we need to add the code to make the pop-up windows and do the layout of them (next post, gotta run now.)
Thanks so much for this! I look forward to the next post but will probably have to ask for further help in it, sorry :-(
It'll be generated on the fly, but nothing stops us from having it to be at least valid html and working properly. Since windows have their own close button, I like to make the entire window act like a close button to allow the user to get the away easily. But of course you could make the window larger and add a close button underneath it if you want that.
The size of the window itself will be controlled by javascript so we need not to worry about that just yet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TITLE</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background: #fff url(1.jpg) no-repeat center center;
}
</style>
</head>
<body onclick="window.close();">
</body>
</html>
It's not going to close if you click in most browsers as they implement a protection that scripts cannot close windows that were not opened by scripts
The 100% height is needed to make it all the window clickable.
So now we need to add this code in the script to let it create this.
I'm far from an expert in javascript, and am sure it can be significantly improved (e.g. removing the need for a fully qualified URL should be quite possible)
First we add the call to the script in the html:
<a class="thumb" href="1.jpg" onclick="return
startView('http://www.example.com/1.jpg','600','400','Title')">
Note that it means the thumbnail is reference one in the <img> and twice the large one in the <a> (once in the href (for those without javascript) and once in the onclick (for those with javascript)).
The script:
<script type="text/JavaScript">
<!--
var view = null;
function startView(file,width,height,title) {
if (view) {
if (!view.closed) {
view.close();
}
}
view=window.open("","SlideWindow",'width='+width+',height='+heig
ht+',resizable=0');
view.document.open();
view.document.write('<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1
.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">');
view.document.write('<html xmlns=\"http://www.w3.org/1999/xhtml\
">');
view.document.write(' <head>');
view.document.write(' <title>'+title+'</title>');
view.document.write(' <style type=\"text/css\">');
view.document.write(' * {');
view.document.write(' margin:0;');
view.document.write(' padding:0;');
view.document.write(' }');
view.document.write(' html, body {');
view.document.write(' height:100%;');
view.document.write(' width:100%;');
view.document.write(' }');
view.document.write(' body {');
view.document.write(' background: #fff url('+file+') no-r
epeat center center;');
view.document.write(' }');
view.document.write(' </style>');
view.document.write(' </head>');
view.document.write(' <body onclick=\"window.close();\">');
view.document.write(' </body>');
view.document.write('</html>');
view.document.close();
return false;
}
-->
</script>
Putting it all together:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 0 50px; /*50px margins left and right*/
}
#header, #footer {
background-color: #333;
color: white;
padding: 5px 10px;
}
#content {
background-color: #ccc;
padding: 5px;
}
.thumb img {
width: 150px;
height: 100px;
border:0;
display:block;
margin-bottom: 5px;
}
.thumb {
display: block;
float: left;
border: 1px solid #333;
text-decoration: none;
color: #333;
width: 150px;
height: 150px;
padding: 5px;
margin: 10px;
background-color: white;
}
.clear {
clear:both;
}
.thumb span {
display:block;
font: normal 10pt sans-serif;
overflow: hidden;
height: 45px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#content {
zoom:1;
}
.thumb span {
font-size:75%;
}
</style>
<![endif]-->
<script type="text/JavaScript">
<!--
var view = null;
function startView(file,width,height,title) {
if (view) {
if (!view.closed) {
view.close();
}
}
view=window.open("","SlideWindow",'width='+width+',height='+heig
ht+',resizable=0');
view.document.open();
view.document.write('<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1
.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">');
view.document.write('<html xmlns=\"http://www.w3.org/1999/xhtml\
">');
view.document.write(' <head>');
view.document.write(' <title>'+title+'</title>');
view.document.write(' <style type=\"text/css\">');
view.document.write(' * {');
view.document.write(' margin:0;');
view.document.write(' padding:0;');
view.document.write(' }');
view.document.write(' html, body {');
view.document.write(' height:100%;');
view.document.write(' width:100%;');
view.document.write(' }');
view.document.write(' body {');
view.document.write(' background: #fff url('+file+') no-r
epeat center center;');
view.document.write(' }');
view.document.write(' </style>');
view.document.write(' </head>');
view.document.write(' <body onclick=\"window.close();\">');
view.document.write(' </body>');
view.document.write('</html>');
view.document.close();
return false;
}
-->
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>title</h1>
</div>
<div id="content">
<a class="thumb" href="1.jpg" onclick="return
startView('http://www.example.com/1.jpg','600','400','Title')">
<img alt="Title" src="1t.jpg" />
<span>Description image 1</span>
</a>
<a class="thumb" herf="2.jpg" onclick="return
startView('http://www.example.com/2.jpg','600','400','Title')">
<img alt="Title" src="2t.jpg" />
<span>Description image 2 is really long so it
will wrap beyond what we have space for</span>
</a>
<br class="clear" />
</div>
<div id="footer">
<p>footer goes here</p>
</div>
</div>
</body>
</html>
[edited by: swa66 at 12:42 pm (utc) on Nov. 17, 2008]
Do I add this to the CSS style sheet or the html doc?
Basically your html and CSS need to go hand-in-hand. For easy posting I use the CSS inside the html file in the step-by-step examples. But in production use it's far better to use separate files as the CSS then can stay cached in the browser instead of being transferred for every page.
The reason for giving it in an step-by-step approach is to allow you (and al members out here) to understand it better and to redo it on your (their) own situation as needed.
To me the thought process of how to get there is far more important than the result itself.
* { margin: 0; padding: 0; } body { margin: 0 50px; /*50px margins left and right*/ } #header, #footer { background-color: #333; color: white; padding: 5px 10px; } #content { background-color: #ccc; padding: 5px; } .thumb img { width: 150px; height: 100px; border:0; display:block; margin-bottom: 5px; } .thumb { display: block; float: left; border: 1px solid #333; text-decoration: none; color: #333; width: 150px; height: 150px; padding: 5px; margin: 10px; background-color: white; } .clear { clear:both; } .thumb span { display:block; font: normal 10pt sans-serif; overflow: hidden; height: 45px; }
to the sylesheet and then added the following to the head
<title>untitled</title> <style type="text/css"> * { margin: 0; padding: 0; } body { margin: 0 50px; /*50px margins left and right*/ } #header, #footer { background-color: #333; color: white; padding: 5px 10px; } #content { background-color: #ccc; padding: 5px; } .thumb img { width: 150px; height: 100px; border:0; display:block; margin-bottom: 5px; } .thumb { display: block; float: left; border: 1px solid #333; text-decoration: none; color: #333; width: 150px; height: 150px; padding: 5px; margin: 10px; background-color: white; } .clear { clear:both; } .thumb span { display:block; font: normal 10pt sans-serif; overflow: hidden; height: 45px; } </style> <!--[if lte IE 7]> <style type="text/css"> #content { zoom:1; } .thumb span { font-size:75%; } </style> <![endif]--> <script type="text/JavaScript"> <!-- var view = null; function startView(file,width,height,title) { if (view) { if (!view.closed) { view.close(); } } view=window.open("","SlideWindow",'width='+width+',height='+heig ht+',resizable=0'); view.document.open(); view.document.write('<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1 .0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">'); view.document.write('<html xmlns=\"http://www.w3.org/1999/xhtml\ ">'); view.document.write(' <head>'); view.document.write(' <title>'+title+'</title>'); view.document.write(' <style type=\"text/css\">'); view.document.write(' * {'); view.document.write(' margin:0;'); view.document.write(' padding:0;'); view.document.write(' }'); view.document.write(' html, body {'); view.document.write(' height:100%;'); view.document.write(' width:100%;'); view.document.write(' }'); view.document.write(' body {'); view.document.write(' background: #fff url('+file+') no-r epeat center center;'); view.document.write(' }'); view.document.write(' </style>'); view.document.write(' </head>'); view.document.write(' <body onclick=\"window.close();\">'); view.document.write(' </body>'); view.document.write('</html>'); view.document.close(); return false; } --> </script>
and to the body added
<div id="wrapper"> <div id="header"> <h1>title</h1> </div> <div id="content"> <a class="thumb" href="1.jpg" onclick="return startView('http://www.example.com/1.jpg','600','400','Title')"> <img alt="Title" src="1t.jpg" /> <span>Description image 1</span> </a> <a class="thumb" herf="2.jpg" onclick="return startView('http://www.example.com/2.jpg','600','400','Title')"> <img alt="Title" src="2t.jpg" /> <span>Description image 2 is really long so it will wrap beyond what we have space for</span> </a> <br class="clear" /> </div> <div id="footer"> <p>footer goes here</p> </div> </div>
but its just turned into a mess
+heig ht+
+height+
CSS can be added to a separate file and linked from the headers
CSS can also be added in the html inside a <style> tag in the header
There is no need to do both at the same time.
Also note that you need to change the example.com to a real domainname, but I suppose you're doing that on your own.
My intend however was to get you to folow along from the start and slowly each and show a few things, not for you to jump to the last page in the book and see "who did it" :(
I have the image re-sizing worked out but the image positioning is obscuring the text in the link tag I am using the image for.
I am not sure that your guide will solve my problem but I am following it step by step so that I can get a much better understanding of what is going on and hopefully solve the problem myself.
I have just joined this forum so I could say a BIG thank you and I'm sure that there are many others reading this that will feel the same.
stephenc - Could I heartily recommend that you use notepad not wordpad to avoid spurious hidden formatting characters in your code that could affect the outcome of your page.
There are lots of free/open source html/css editors out there that are really superb such as editplus.
There is a really good discussion on this here
<snip>
Personally I'm developing Rails applications and I use RadRails as a plug in for Aptana Studio.
Aptana Studio is very bloated for simple stuff like this but totally awesome for Ruby on Rails development and java and the likes.
Notepad2 is also a pretty reasonable alternative but Wordpad is going to give you nothing but headaches for this.
HTH
Thanks again all for the totally awesome posts.
James
[edited by: swa66 at 6:54 pm (utc) on Nov. 19, 2008]
[edit reason] Please check the linking policy in the forum charter. [/edit]
However, I'd be interested to have a look at the editors you've suggested and so thank you for this
Thanks also especially to swa66 for taking the time to try to help
Stephen
Textmate is the editor of choice for web developers on other platforms than windows. There is a Blogg on alternatives for Windows usage if you can find it.
editplus is another editor that seems to come highly recommended.
I know just how hard a mind shift it is to take on board a new way of doing things but persevere. It is worth it.
If it helps then then have a think about the following.
The old way of doing things that you are reffering to would mean that a site of say 50 pages would have to have the fonts, colours, styles etc... handled in each page.
That is a real headache if you want to say switch from Ariel to Verdanna for example.
Could you imagine how much work would be involved if you wanted to change to an almost completely new style for your site?
Using Style Sheets makes this job a thousand times easier.
I am still learning the basics of CSS but found the tutorial from Westciv (Google it) to be immensley helpful.
W3Schools also does a really good tutorial for CSS.
Start with the basics and work your way up. Try and understand how a style sheet links into your web site, then have a look at how the HTML tags can be styled using CSS.
Once you have got this sorted then come back here and have another go at following swa66 totally superb example.
This of course is just my opinion and others may well differ.
Good Luck
James
