 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 400
|
 Posted: Fri Apr 25, 2008 4:14 pm code height does not work |
 |
|
|
I have this code and it is not working, so my images are not showing in the correct page size. Not sure why its not working. Here is the html
| Code: |
<!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"
xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 12.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bulls head gallery</title>
<link rel="stylesheet" type="text/css" href="style2.css" media="screen">
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
width: 750px;
height: 1000px;}
/*Add a height attribute and set to largest image's height to prevent overlaying*/
.thumbnail img{
border: 3px solid white;
padding: 1px;
margin: 0 2px 2px 2px;}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid maroon;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 3px;
left: -800px;
visibility: hidden;
border-color: black;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 3px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top:100px;
left: 200px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
<!--[if IE]>
<style type="text/css">
.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="centercontent">
<ul class="menu">
<li><a href="index.htm">Homepage</a></li>
<li><a href="mosaic1.htm">Mosaic 1</a></li>
<li><a href="mosaic2.htm">Mosaic 2</a></li>
<li><a href="paier.htm">Papier Mache</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="studio.htm">Studio</a></li>
<li><a href="workshops.htm">Workshops</a></li>
<li><a href="guestbook3.htm">Guest Book</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="contacts.htm">Contacts</a></li>
<li><a href="links.htm" style="border-right: 0;">Links</a></li>
</ul><br style="clear: left"/>
<div id="fullwidth" class="gallerycontainer">
<h1 class="iepara">The bull's head in progress
<img src="bigimages/bull2.gif" alt="moving bull" width="60" height="39">
<img class="floatright" alt="back button" src="images/button.gif" width="70" height="27"></h1>
<p>Scroll down and hover over thumbnail to view larger image.<a class="thumbnail" href="#thumb"><br>
<br><img src="thumbs/bulls1.jpg" width="60px" height="60px"
alt="small bulls head 1"><span>
<img src="bigimages/paperbullbig.jpg" alt="image of paper bull"width="315" height="400"><br />
First of all the wire armature had to be made, <br>
then covered in paper.Unfortunately, I didn't <br>
take a photo of bull before it was covered in paper.<br>
Basically, the structure is built onto a wooden 'T'<br>
which is securely screwed to the wooden shield. </span></a>
<a class="thumbnail" href="#thumb"><img src="thumbs/bulls2.jpg" alt="small me looking at bull" width="60" height="60">
<span><img src="bigimages/lookatbullbig.jpg" alt="me looking at bull" width="420" height="312"><br>
I wasn't happy with those horns. I knew if I left them how they<br>
were I'd keep thinking of bicycle handle bars! You can see behind<br>
my head there a few pictures of bulls, its surprising how many<br>
different types of horns they have!</span></a><br>
<a class="thumbnail" href="#thumb"><img src="thumbs/bulls3.jpg" width="60px" height="60px"
alt="painted white bull"><span>
<img src="bigimages/paintedwhitebig.jpg" alt="painted white bull large"
width="321" height="400"><br>
The horns have been changed and the whole thing <br>
painted white. At this stage I had intended to paint it<br>
and leave it at that but I had another idea... </span></a>
<a class="thumbnail" href="#thumb"><img src="thumbs/bulls4.jpg" width="60px" height="60px"
alt="plaster bull small"><span>
<img src="bigimages/plasterbig.jpg" alt="plasterbull big"
width="420" height="301"><br>
I had decided to mosaic the whole thing. <br>
To strengthen the papier mache I covered the whole thing in <br>
Mod Roc (plaster bandages). This then gave a good surface for <br>
the tiles to adhere to. </span></a><br>
<a class="thumbnail" href="#thumb"><img src="thumbs/bulls5.jpg"
alt="putting on tiles small" width="60" height="60"><span>
<img src="bigimages/putontilesbig.jpg"alt="putting on tiles" width="400" height="296"><br>
So begins the process of putting on the tiles. I used a whole<br>
range of tiles, from the fairly cheap to the very expensive.<br>
I figured if I was going to spend this much time I should use <br>
quality materials.</span></a>
<a class="thumbnail" href="#thumb"><img src="thumbs/bulls6.jpg" width="60px" height="60px"
alt="finally finished"><span>
<img src="bigimages/finalbullbig.jpg" alt="finally finished big" width="450" height="329">
<br>So here it is, finally finished. I would say it took around 6 months <br>
to create. I would love to see it in a bar or restaurant. A Spanish <br>
Tapas bar perhaps. I could customise the shield with the bar or <br>
restaurant name. If you have any comments or would like further <br>
details do get in touch.</span></a></p>
</div>
</div>
<div id="footer">
<p>All material (Artwork/text) copyright Eyecatchingart Designs All Rights
Reserved 2004-2008</p>
</div>
</div>
</body>
</html>
|
the height that is not working is the height on the gallery container. I added a class to the fullwidth div but it is not accepting it. Appreciate any help iwth this |
|
sticks464
Joined: 31 Dec 2006
Posts: 993
|
| Posted: Fri Apr 25, 2008 7:31 pm |
|
|
|
| PM me with your email. I have a great code for what you are doing, there is a js file, css and xhtml plus images I can send you. |
|
sticks464
Joined: 31 Dec 2006
Posts: 993
|
| Posted: Fri Apr 25, 2008 8:59 pm |
|
|
|
Here's the css
| Code: |
@import url("menu.css");
html, body {background-color:#4a99d7;
font-family: Verdana, Georgia, Arial, sans-serif;
color:#555;
margin:0; padding:0; border:0;
}
body {font-size:100.1%;
}
#container {position:relative;max-width:1006px;
/* this is to force max width in IE5/6
width:expression(document.body.clientWidth > 1010? "1008px": "auto" ); */
min-width:1006px;
width:expression(document.body.clientWidth < 1011? "1008px": "auto" );
}
#header {position:relative; top:0px; left:0px; border:0;padding:0;margin:0;z-index:99;
}
#menublock {position:relative;
float:left;
top:-3px;
width:100%;
height:100%;
border:0;
margin:0;
color: #555;
background-color:#4a99d7;
font-weight:bold;
font-family: Verdana, Georgia, Arial, sans-serif;
text-align:center;
overflow:hidden;
}
#contentblock {position:relative;top:-3px;float:left;color:inherit;background-color:#fff;
}
#clearfooter {clear:both; height:110px;
}
#footer {position:relative;
text-align:center;
font-size:0.7em;
font-weight:bold;
list-style-type:none;
clear:both;
overflow:hidden;
color:#26f;
background-color:#fff;
}
#gallblock {position:relative;width:800px; height:460px; background:url('../images/modbackleft.jpg') no-repeat 70px 30px;
border:1px solid #fff; margin:0px auto 0 10px;font-size:0.8em;z-index:1;
}
/* The thumbnail block on the right */
#gallblock ul {width:198px; height:386px; padding:0; margin:5px 55px 5px 5px; list-style-type:none;
float:right;font-family:"comic sans ms", Arial, sans-serif;}
#gallblock li {float:left;}
#gallblock a.gallery, #gallblock a.gallery:visited {display:block; color:#000; text-decoration:none;
border:1px solid #000; margin:1px 2px 1px 2px; text-align:left; cursor:default;}
#gallblock a.gallery span {position:absolute; width:1px; height:1px; top:5px; left:5px; background:#fff; overflow:hidden;}
#gallblock a.gallery:hover {border:1px solid #fff;}
#gallblock a.gallery:hover img {border:1px solid #fff; float:left; margin-right:5px;}
/* #gallblock a.slideb:hover img, #gallblock a.slidei:hover img {float:right;} */
#gallblock a.gallery:hover span {position:absolute; width:373px; height:373px; top:30px; left:80px; color:#000; background:#fff;}
#gallblock a.slidea {background:url('../images/thumbs/xwing.jpg'); height:93px; width:60px;}
#gallblock a.slideb {background:url('../images/thumbs/eh101.jpg'); height:93px; width:60px}
#gallblock a.slidec {background:url('../images/thumbs/rh66.jpg'); height:93px; width:60px}
#gallblock a.slided {background:url('../images/thumbs/xv15.jpg'); height:60px; width:93px}
* html #gallblock a.slided {width:91px; w\idth:93px;}
#gallblock a.slidee {background:url('../images/thumbs/notar.jpg'); height:60px; width:93px}
#gallblock a.slidef {background:url('../images/thumbs/convert.jpg'); height:60px; width:93px}
* html #gallblock a.slidef {width:91px; w\idth:93px;}
#gallblock a.slideg {background:url('../images/thumbs/EC130.jpg'); height:60px; width:93px}
#gallblock a.slideh {background:url('../images/thumbs/EC145.jpg'); height:60px; width:93px}
#gallblock a.slidei {background:url('../images/thumbs/EC225.jpg'); height:60px; width:93px}
#gallblock a.slidej {background:url('../images/thumbs/masquitom80.jpg'); height:60px; width:93px}
#gallblock a.slidek {background:url('../images/thumbs/futurelynx.jpg'); height:60px; width:93px}
#gallblock a.slidel {background:url('../images/thumbs/gst300.jpg'); height:60px; width:93px}
#gallblock a.slidem {background:url('../images/thumbs/HBX-21.jpg'); height:60px; width:93px} |
Javascript (toggleopenclose.js)
| Code: |
// JavaScript Document
// Based on an idea by Thierry Koblentz - TJKDesign.com
// This script consists of two functions
// ------------------------------------------------------------------------
// The jsoff function writes styles to control the menu expand and contract
// so that browsers with javascript off see the full expanded menu
// ------------------------------------------------------------------------
// The switcher function toggles the menu levels open or closed
// ------------------------------------------------------------------------
function jsoff(layout){
var vstyle="<style type=\"text/css\">";
vstyle+="\n"+layout+"\n<"+"/style>";document.write(vstyle);
}
jsoff('.contract ul{display:none;}.expand ul{display:block;}');
function switcher(){
var subs,x,vBB,cell=0,vArr=new Array(),arg=switcher.arguments;
if(document.getElementsByTagName){for(subs=4;subs<arg.length;subs++){vBB=document.getElementsByTagName(arg[subs]);
for(x=0;x<vBB.length;x++){vArr[cell]=vBB[x];cell++;}}for(subs=0;subs<vArr.length;subs++){
if(vArr[subs].className){if(vArr[subs].id==arg[1]){if(arg[0]==1){
vArr[subs].className=(vArr[subs].className==arg[3])?arg[2]:arg[3];}else{vArr[subs].className=arg[2];}
}else if(arg[0]==1 && arg[1]=='none'){if(vArr[subs].className==arg[2] || vArr[subs].className==arg[3]){
vArr[subs].className=(vArr[subs].className==arg[3])?arg[2]:arg[3];}
}else if(vArr[subs].className==arg[2]){vArr[subs].className=arg[3];}}}}
} |
XHTML
| Code: |
<!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" xml:lang="en" lang="en">
<head>
<title>Hover Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="css/page.css" />
<script type="text/javascript" src="scripts/toggleopenclose.js"></script>
<!--[if gte IE 5]><style>#flymenu ul a {height: 1em;}</style><![endif]-->
<!--[if IE 5]><style>#flymenu li {margin-top: -3px;}</style><![endif]-->
<!-- Style for loading message -->
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menublock">
<div id="flymenu"></div>
</div>
<div id="contentblock">
<div id="gallblock">
<ul>
<li><a class="gallery slidea" href="#nogo"><span><img src="images/xwing.jpg" alt="X Wing" title="X Wing" />
<br />Sikorsky S72 X-Wing - 1987<br /> <br />This revolutionary rotor was designed to allow an aircraft to take off and and land vertically, yet fly like a conventional aeroplane with the rotor stopped. It was developed as part of rotor systems research for NASA.</span></a></li>
<li><a class="gallery slideb" href="#nogo"><span><img src="images/eh101.jpg" alt="EH-101" title="EH-101" />
<br />EH-101 - 1998<br /> <br />Medium-lift helicopter which is now in service with operators around the world. The EH101 is unique in being designed for maritime and other military missions. Its large payload and spacious cabin make it the most capable and versatile multi-role helicopters in its class.</span></a></li>
<li><a class="gallery slidec" href="#nogo"><span><img src="images/rh66.jpg" alt="RAH-66" title="RAH-66" />
<br />RAH-66 Comanche - 1986<br /> <br /> The sophisticated design allows it to dash to a speed of 175 knots, then cruise at a steady 165. It can execute snap turns in 4.5 seconds and fly sideways or backwards at an incredible 70 mph! It climbs at a rate of 1,418 feet per minute.</span></a></li>
<li><a class="gallery slided" href="#nogo"><span><img src="images/xv15.jpg" alt="XV15" title="XV15" />
<br />Bell XV-15 1979<br /> <br />The result of efforts begun in the early 1950s to produce an aircraft that could take off, land, and hover like a helicopter, but with the speed of an aeroplane. The rotor pylons tilt from vertical to horizontal to eliminate the speed barriers imposed on conventional helicopters.</span></a></li>
<li><a class="gallery slidee" href="#nogo"><span><img src="images/notar.jpg" alt="Notar" title="Notar" />
<br />Notar - 1999<br /> <br />This helicopter has no tail rotor which makes it much quieter than other helicopters. Without a tail rotor helicopters normally spin round in circles, so this one uses a fan to blow air in both directions and stop the spin.</span></a></li>
<li><a class="gallery slidef" href="#nogo"><span><img src="images/convert.jpg" alt="Bell Boeing 609" title="Bell Boeing 609" />
<br />Bell Boeing 609 - 2001<br /> <br />A 21st century aircraft that combines the takeoff, hover and landing qualities of a helicopter with the high speed, range and efficiency of a turboprop aircraft. When launched it claimed speeds twice as fast and ranges twice as far as previous helicopters</span></a></li>
<li><a class="gallery slideg" href="#nogo"><span><img src="images/EC130.jpg" alt="EC130" title="EC130" />
<br />EC130 - 2005 <br /> <br />A new generation light single engine helicopter that seats 7-8. Thanks to its great visibility, quietness, performance and safety, this flexible helicopter is particularly adapted to the needs of private users, as well as tourism and charter missions.</span></a></li>
<li><a class="gallery slideh" href="#nogo"><span><img src="images/EC145.jpg" alt="EC145" title="EC145" />
<br />EC145 - 2005<br /> <br /> With a wide range of certified optional equipment, the twin-engine EC145 can complete such demanding missions as air medical service, law enforcement operations, search and rescue, offshore transportation, or aerial work.</span></a></li>
<li><a class="gallery slidei" href="#nogo"><span><img src="images/EC225.jpg" alt="EC225" title="EC225" />
<br />EC225 - 2005<br /> <br /> Eurocopter's latest 11-tons transport development. A new five-bladed Spheriflex main rotor provides optimum reliability and lift performance. Powered by two turboshaft engines, it has a full anti-icing system. </span></a></li>
<li><a class="gallery slidej" href="#nogo"><span><img src="images/masquitom80.jpg" alt="Masquito M80" title="Masquito M80" />
<br />Masquito M80 - 200?<br /> <br />The M80 is so small compared to other helicopters people ask if it's a real one. The car, M80 and trailer could fit inside the Sikorsky! It was ready for the flight-test phase in 2002 but, due to problems with the UK CAA, very little progress has been made since then.</span></a></li>
<li><a class="gallery slidek" href="#nogo"><span><img src="images/futurelynx.jpg" alt="Future Lynx" title="Future Lynx" />
<br />Future Lynx - 200?<br /> <br />The government intends to invest £3 billion in rotorcraft requirements over the next 10 years. The Future Lynx will feature a new airframe, advanced avionics, new engines, and a service life of 25 years.</span></a></li>
<li><a class="gallery slidel" href="#nogo"><span><img src="images/gst300.jpg" alt="GST 300" title="GST 300" />
<br />GST 300 - 1996<br /> <br />Called a UAV (Uninhabited Aerial Vehicle) this is a small unmanned helicopter with a fully automatic control system. It is ideal for surveillance, patrol, environmental monitoring, agricultural and mapping tasks, and has been used for disaster response and special operations.</span></a></li>
<li><a class="gallery slidem" href="#nogo"><span><img src="images/HBX-21.jpg" alt="HBX21" title="HBX21" />
<br />HBX-21 Prototype<br /> <br />Contains 10 new patented devices to achieve improved lift and superb fuel economy. Should the engine or the transmission fail, the large rotor automatically goes into auto-rotation, providing lift and allowing the pilot to safely land the helicopter.</span></a></li>
</ul>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
|
Use what you need from these |
|
quartzy
Joined: 26 Dec 2007
Posts: 400
|
| Posted: Sat Apr 26, 2008 6:37 am re |
|
|
|
This code is really good, I would like to use it but what is the import menu.css? is that my menu that I have originally?
and there is a javascript error on line 1, I dont know how to fix that. That must be this:
function jsoff(layout){
it would be great if I could get it to work without this error. |
|
sticks464
Joined: 31 Dec 2006
Posts: 993
|
| Posted: Sat Apr 26, 2008 6:58 am |
|
|
|
The import menu.css was where I was importing your menu and left it as an example showing how to import a second css file without having to put a link in the head section. You can delete it.
You can delete the javascript file, it'only needed for a flyout menu that I had on the page, sorry about that. You can also delete the 2 conditional statements for IE5 for a flyout menu also.
I would just use the divs contentblock and gallblock from the css and xhtml and see how they work and then make changes to fit the design of your page and then incorporate them.
The only problem that I ran into was IE7 displays the gallery centered on the screen and FF displays it left. But this should be easy to fix and may not display this way after getting it into your design. |
|
quartzy
Joined: 26 Dec 2007
Posts: 400
|
| Posted: Sat Apr 26, 2008 7:07 am re |
|
|
|
| ok thats great will get to work on it. Thanks again |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
