|
CSS - Beginner With Simple Image Gallery Problem ( I Think!)
hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked.
I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work. At the moment i have both elements working, although it produces two thumbnail images. How can i use this code whilst making only one thumbnail appear? <a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> </a> <a class="thumbnail" href="#thumb"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> <span><img src="images/cramps/medium size/cm1.jpg" /><br /> </span></a> sorry if this is vague, i will answer any questions the best i can, all help appreciated! Similar Tutorialsi am trying to use this very simple image gallery from cssplay stu nichols site "A permanent image click gallery with 'previous' / 'next' buttons" so i change the css to suit my images and create my own prev|next buttons but when i check it in a browser - i'm working with dreamweaver cs5 [trial] it dosn't show me the buttons i'm very new to css - and am bashing my head over this issue would appreciate any help - not sure if i need to put in my altered source code so i will Code: CSS #gallery {
width:500px;
height:500px;
margin:0 auto;
position:relative;
font-family:verdana, arial, sans-serif;
}
#gallery a.previous {display:block; height:40px; width:32px; background:url(click/previous.gif); position:absolute; left:0; top:560px;}
#gallery a.next {display:block; height:40px; width:32px; background:url(click/next.gif); position:absolute; right:0; top:560px;}
#gallery a b {display:none;}
#gallery #fullsize {
position:absolute;
left:0;
top:0;
height:550px;
width:500px;
overflow:hidden;
text-align:center;
}
#gallery #fullsize div {width:500px; height:600px; padding-top:10px; position:relative;}
#gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:0;}
#gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:8px;}
#gallery #fullsize div p {padding:5px 0; margin:0; font-size:10px; line-height:14px;}
Code: XHTML <div id="gallery"> <div id="fullsize"> <div id="pic1"> <img src="images/greyday/gd1.jpg" alt="grey day1" /> <a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a> <h3>1 | 10</h3> </div> <div id="pic2"> <img src="images/greyday/gd2.jpg" alt="grey day2" /> <a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"><b>Next</b></a> <h3>2 | 10</h3> </div> <div id="pic3"> <img src="images/greyday/gd3.jpg" alt="grey day3" /> <a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a> <h3>3 | 10</h3> </div> <div id="pic4"> <img src="images/greyday/gd4.jpg" alt="grey day4" /> <a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5"><b>Next</b></a> <h3>4 | 10</h3> </div> <div id="pic5"> <img src="images/greyday/gd5.jpg" alt="grey day5" /> <a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a> <h3>5 |10</h3> </div> <div id="pic6"> <img src="images/greyday/gd6.jpg" alt="grey day6" /> <a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a> <h3>6 | 10</h3> </div> <div id="pic7"> <img src="images/greyday/gd7.jpg" alt="grey day7" /> <a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a> <h3>7 | 10</h3> </div> <div id="pic8"> <img src="images/greyday/gd8.jpg" alt="grey day8" /> <a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a> <h3>8 | 10</h3> </div> <div id="pic9"> <img src="images/greyday/gd9.jpg" alt="grey day9" /> <a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a> <h3>9 | 10</h3> </div> <div id="pic10"> <img src="images/greyday/gd10.jpg" alt="grey day10" /> <a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1"><b>Next</b></a> <h3>10 | 10</h3> </div> </div> </div> i really would appreciate some help with this - thank you in advance I'm working on the navigation the navigation for an image gallery I'm working on, but have run into some problems. It works fine in Firefox and Safari, but doesn't work in IE6, IE7, and Opera, and I can't for the life of me figure out why. The previous link and next link appears when they hover over the right and left side of the picture. I think it might be a problem with z-index, and the two link pictures getting stuck under the image in the image gallery, but I'm not sure. Any and all help is appreciated. This is the code for the gallery, minus the two navigation pictures and the image for the gallery. 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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<style type="text/css" media="screen">
#test {
margin:0;
padding:0;
position:relative;
top:0;
left:0;
width:800px;
height:640px;
background-color: #000;
}
#nav{
position:absolute;
left:0;
top:0;
z-index:999;
width:100%;
height:100%;
}
#Next,#Prev{
position:absolute;
display:block;
width:50%;
height:100%;
outline:none;
top:0;
}
#Next{right:0;}
#Prev{left:0}
#Next:hover{
background:transparent url(next.gif) no-repeat 100% 30%;
}
#Prev:hover{
background:transparent url(prev.gif) no-repeat 0% 30%;
}
#image{
display:block;
}
</style>
</head>
<body>
<div id="test">
<div id="nav">
<a href="#" id="Prev"></a>
<a href="#" id="Next"></a>
</div>
<img id="image" src="grass.jpg" alt="image" />
</div>
</body>
</html>
I've been working in CSS, man, is it tiresome for a beginner! After much trail and error, I've come up with my first CSS page. Where I'm stuck, is in the area where all the text is. When I put more text into that page, none of the surrounding styles/boxes[?] adjust to the text format (also shown in a link below), and I can't seem to figure out how to center the entire page itself. Sorry, for the stupid questions, I'm a total novice, and can barely understand most of the CSS postings in this forum. Text extending instead of expanding layout: http://rafia.info/css/layers.bad.htm Thanks sincerely, rups27 Hi, If you look at the following page you will see there is a gap under the sidebar elements at the top. LINK HERE In FF its not there yet in IE it is, any ideas how i can remove it? Thanks, Mike Hi, I am pulling my hair out why the images are not visible on this page http://www.zahnarzt-oberland.de/Gmunden/Inhalte/test.htm It is based on this CSS gallery: http://www.cssplay.co.uk/menu/slide_show.html thank you in advance Raggi Hi all This is my first post so first of all Hello and i hope that i can help people and be helped. I am trying to create a Horizontal Image gallery which will scroll I have looked on the web but can't find any concrete answer to what i'm tryign to create. I did find a sort of answer but only displays text i include below, if you haveany ideas of ohow i do display images with a horizontal scroll please help Thank You Chaz P.s. I dunno if i have displayed the code correctly or if i'm meant to paste it in differently. Code: [code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<title>horizontally scrolling box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:#303;
}
#wrapper {
width:800px;
height:300px;
margin:100px auto 0;
background-image:url(images/eyes.gif);
}
#container {
width:700px;
height:300px;
overflow:auto;
}
#content {
width:800px;
height:300px;
color:#303
}
#content p {
margin:0;
padding:10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>
</div>
</div>
</body>
</html>
Hello, I have been having quite a bit of trouble using the Galleria js/jQuery plugin for my image gallery because of a lack of IE support. I have tried posting on their support pages numerous times with no response. The site can be found at http:jonathansakkos[dot]com/index-test.html. The main problem is that in IE (I have tested 7 & 8) the main image shifts to the right so that it is partly off screen. I have tried fiddling with the CSS file that comes with galleria, but cannot seem to fix this bug. That CSS file can be found he Code: .galleria-container{position:relative;overflow:hidden;background:#000;}
.galleria-container img{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;}
.galleria-stage{ position:absolute; top:10px; bottom:70px; left:10px; right:10px; overflow:hidden; margin: 0 auto 0 auto; }
.galleria-thumbnails-container{height:60px;bottom:0;position:absolute;left:10px;right:10px;z-index:2;}
.galleria-carousel
.galleria-thumbnails-list{margin-left:10px;margin-right:10px;} .galleria-thumbnails
.galleria-image{ height:60px; width:60px; background:#000; margin:0 5px 5px 0; border:1px solid #000; ; float:left; cursor:pointer; }
.galleria-counter{position:absolute;bottom:10px;left:10px;text-align:right;color:#fff;font:normal 11px/1 arial,sans-serif;z-index:2;}
.galleria-loader{background:#000;width:20px;height:20px;position:absolute;top:10px;right:10px;z-index:2;display:none;background:url(classic-loader.gif) no-repeat 2px 2px;}
.galleria-info{width:50%;top:15px;left:15px;z-index:2;position:absolute;}
.galleria-info-text{background-color:#000;background-color:rgba(0,0,0,.9);padding: 12px;display:none;}
.galleria-info-title{font:bold 12px/1.1 arial,sans-serif;margin:0;color:#fff;}
.galleria-info-description{font:italic 12px/1.4 georgia,serif;margin:0;color:#bbb;}
.galleria-info-title+.galleria-info-description{margin-top:7px;} .galleria-info-close{width:9px;height:9px;position:absolute;top:5px;right:5px;background-position:-753px -11px;opacity:.5;cursor:pointer;display:none;}
.galleria-info-link{background-position:-669px -5px;opacity:.8;position:absolute;width:20px;height:20px;cursor:pointer;background-color:#000;}
.galleria-info-link:hover, .galleria-info-close:hover{opacity:.5;} .galleria-image-nav{position:absolute;top:50%;margin-top:-15px;width:100%;height:31px;left:0;}
.galleria-image-nav-left, .galleria-image-nav-right{opacity:.7;cursor:pointer;width:16px;height:31px;position:absolute;left:10px;z-index:2;}
.galleria-image-nav-right{left:auto;right:10px;background-position:-300px 0;z-index:2;}
.galleria-image-nav-left:hover,
.galleria-image-nav-right:hover{opacity:.5;} .galleria-thumb-nav-left,
.galleria-thumb-nav-right{cursor:pointer;display:none;background-position:-495px 5px;position:absolute;left:0;top:0;height:40px;width:23px;z-index:3;opacity:.8;}
.galleria-thumb-nav-right{background-position:-578px 5px;border-right:none;right:0;left:auto;}
.galleria-thumbnails-container .disabled,
.galleria-thumbnails-container .disabled:hover{opacity:.2;cursor:default;}
.galleria-thumb-nav-left:hover, .galleria-thumb-nav-right:hover{opacity:1;background-color:#111;} .galleria-carousel
.galleria-thumb-nav-left,
.galleria-carousel .galleria-thumb-nav-right{display:block;} .galleria-thumb-nav-left,
.galleria-thumb-nav-right, .galleria-info-link, .galleria-info-close,
.galleria-image-nav-left,
.galleria-image-nav-right{background-image:url(classic-map.png);background-repeat:no-repeat;}
I realize that this code is tough to read and if there is a better way to post it please let me know and I will do that. Any help would be greatly appreciated! Thanks, Jonathan Hi there, This image gallery is working fine is Safari and Firefox, but has a problem in IE, but I just can figure it out! Here is the page: http://www.greatsouthmetals.com/image-gallery.html Please help! Thanks! I want an image gallery like this one: http://www.webreference.com/program...ples/twelve.htm only I want the thumbnails to appear in a single line, UNDER the image. There would be far fewer thumbnails so it would only be about 300px wide, but I want the image to appear above, and not to the left. I tried messing with the values but now I'm confused and I don't want to mess with values that don't need to be messed with Hi guys, I never wanna do anything simply... *sigh* Need some help again! I downloaded SPGM to use as a photo gallery. Love it. It's even valid XHTML 1.0 Strict! Ok, I've implemented it here . Instead of using the native CSS file that came with the script, I copied it all into my own CSS file. Well, not ALL of it, but most. That CSS file is here . Towards the bottom, you'll see the SPGM CSS section. Now I've already started adapting the script and layout to my site, but as you can imagine, it's not too easy, especially for an only moderately-knowledgeable CSS user like me. First thing I want to do it... 1. I want to move the entire table (the main table containing the 4 folder icons and text) over to the left so the left side of the table lines up only a pixel or two right of the line between the green and tan on the left. I can shift the whole table by adding margin-left: -something px; to TABLE.table-wrapper, but the folder icons actually disappear as if they go behind something! HUH? I think moving this to the left more will solve the problem in IE of the right nav links getting pushed down... Could be wrong, but it's ok in FF. If someone could start me off with this I'd very much appreciate it. Thanks, guys! Chris Hello. I am using a Gallery which I bought from ThemeForest. I am having trouble aligning the image to center. Check the second image, It's aligned to left by default. I tried through many css ways which isn't helping at all. Demo: digloud[dot]com/user_data/techkid/phoenix_gallery/ Any help is highly appreciated. Hello, I've almost got this css image gallery done for my website, but I can't seem to get the main image to be positioned where the gallery thumbnails are. The main image seems to be only position-able from the top of the page. I'm trying to get the image to line up with the top of the first thumbnail image, the thumbnails being arranged in a column to the left of the main image. The page where you can view this is: WWW OLDFOUNDRY DOT COM - I'm a new user, and am not allowed to post links yet. You'll see the gallery in the new product called "Bugatti Test" That link is on the left hand side of the page. And I'll place the code in the next post, Thank you for any ideas, Jason Hello everyone. You see, I wanted to use the close look up for images in gallery, something like sucker fish gallery have. On hover, image changes size and pop up bigger. I've used overflow, because not every image in gallery after resizing by server to 200px width will have 150px height. There is example image to illustrate that. And now... open it using IE, this is something to do with z-index I think. I really don't how to code it for IE. On Opera and FF it is probably looking as it should. Could anyone suggest something to solve this please ? I would be grateful. http://members.lycos.co.uk/milosz/www/new/ 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">
<head>
<title>Test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
ul { width: 400px; }
li { margin: 10px; position: relative; float: left; width: 100px; height: 75px; }
li a { border: 1px solid #3A3A3A; text-decoration: none; color: #EFEFEF; width: 100px; height: 75px; overflow: hidden; background: #3A3A3A; position: absolute; }
li a img { border: 0; }
li:hover a { position: absolute; width: 200px; height: 150px; left: -51px; top: -39px; border: 1px solid #3A3A3A; overflow: hidden; z-index: 2; }
li a:hover { z-index: 1; }
</style>
<!--[if lt IE 7]>
<style type="text/css">
/* Hovers everything now */
body { behavior:url("csshover.htc"); }
</style>
<![endif]-->
</head>
<body>
<br />
<br />
<br />
<ul>
<li><a href="#" target="_blank"><img src="1.png" alt="1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
</ul>
</body>
</html>
Excuse me my poor English. edit: I've changed link, and move files to safe server. They will stay there longer I think, and maybe somehow help others like me. HI Guys, I'm trying to create some CSS to contain an image gallery. A query runs which grabs all the images for a certain item/article. I then output the query as a loop, and it populates a div with images. It works pretty good, but if one image is bigger than the others, it throws off the alignment. How can I force each row of photos to be horizontally even? You can see the output results here http://details.at/photo_test.cfm <!--- Query ---> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style> #maindiv { padding:0 0 1em 2em; width:550px; float:left; } div.img { margin:3px; height:auto; width:auto; float:left; text-align:center; } </style> </head> <body> <DIV id="maindiv"> <H2>Photos</H2> <CFOUTPUT QUERY="photo_file_info"> <div class="img"> <a href="http://google.com" target=new> <img src="http://details.at/imagehost/classifieds/aircraft/139/s_#photo_file#"> </a> </div> </CFOUTPUT> </DIV> </body> </html> I am having a minor problem with a photo gallery on a site that I am working on. Here is a link: http://fieldspianos.com/new/store/p...em_number=14275 In all browsers except IE6, when a thumbnail is hovered over, the image is displayed larger in the preview box. In IE6, however, this occurs properly, but once you roll over an image more than once it will not display anymore. For example, if I roll over the 1st thumbnail, the image displays, then I roll over the 2nd thumbnail, the image displays, but if I roll over the 1st thumbnail again, nothing happens. Included below is my css and html. This was made without javascript and I would like to keep it that way if at all possible. HTML Code:
<div id="sitebody">
<div id="tabsheader">
<ul id="primary">
<li><?php print "<a href=\"information.php?item_number=" . $item_number . "\">"; ?>Information</a></li>
<li><?php print "<a href=\"description.php?item_number=" . $item_number . "\">"; ?>Description</a></li>
<li><span>Photo Gallery</span></li>
<li><?php print "<a href=\"video.php?item_number=" . $item_number . "\">"; ?>Video</a></li>
<li><?php print "<a href=\"moreinfo.php?item_number=" . $item_number . "\">"; ?>More Info...</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<h2>Photo Gallery</h2>
<p class="note">Hover over the photos below to see larger images.</p>
<br />
<div id="photogallery">
<div id="thumbnails">
<ul class="hoverbox">
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" class="preview" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS Code:
/*Photo Gallery*/
div#photogallery {
position: relative;
width: 662px;
border: 1px solid #000;
padding: 1px;
padding-bottom: 2px;
height: 404px;
}
div#thumbnails {
width: 243px;
}
div#thumbnails ul {
margin-left: 0px;
padding-left: 0px;
}
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: 2px;
left: 247px;
z-index: 1;
}
.hoverbox img
{
background-color: #FFFFFF;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 1px;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox img:hover
{
background-color: #000000;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox li
{
display: inline;
float: left;
margin: 1px;
}
.hoverbox .preview
{
border-color: #000;
width: 409px;
height: 399px;
}
I have an image gallery. Code for the whole thing I've set below.The main image display window is set w/ a fixed position w/ this CSS code: Quote: #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } I want to use it on dynamic php pages that have constantly changing content. I cannot w/ the fixed position. I need it to float correctly to the right of the thumb sidebar images. I've set it into my .tpl pages & it works well w/ no apparant css conflicts. But the main window is still fixed while the thumbs show wherever I place their code. Any ideas how I can float it all as a unit? Thanks, Gene PLEASE HELP ME I have an inline css tester that I built w/ help from W3Schools.com's CSS examples. > http://www.easysavannah.com/pmdinlinecsslinks.html Maybe this will help someone here. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Lightweight Image Gallery</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <style media="screen,projection" type="text/css"> /* general styling for this example */ * { margin: 0; padding: 0; } body { padding: 20px; } /* begin gallery styling */ #jgal { list-style: none; width: 200px; } #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } </style> <!--[if lt IE 8]> <style media="screen,projection" type="text/css"> #jgal li { filter: alpha(opacity=50); } #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } </style> <![endif]--> <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> <script type="text/javascript"> var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].style.backgroundRepeat = 'no-repeat'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); </script> </head> <body> <ul id="gallery"> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_1.jpg" alt="Josef & Erika 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/roland_ads_2.jpg" alt="Roland Ads"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_2.jpg" alt="CD Cover 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_1.jpg" alt="CD Cover 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_3.jpg" alt="Josef & Erika 3"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_2.jpg" alt="Josef & Erika 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/lktrd_poster1.jpg" alt="LKTRD Poster"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_4.jpg" alt="Josef & Erika 4"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/inside_1.jpg" alt="Inside Magazine"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/oceanen_4.jpg" alt="Oceanen"></li> </ul> <p style="clear: both; padding-top: 2em;">Link back to article: <a href="/kitchen/80/lightweight-image-gallery-with-thumbnails">Lightweight Image Gallery with Thumbnails</a>.</p> </body> </html>
So say I want to put a DIV over top and image, and say that DIV happens to be about 30px wide and 10px tall. I can easily do it with: <img src="image.gif" height="100" width="100"><div style="position:relative; top: -10px; left: -30px; z-index:5; display:inline">text</div> But doing so always creates a bit of space to the right of the image, as if the DIV were there, and not at it's new spot. Basically, it creates an extra space after the image that messes everything up for me. (This isn't caused because the DIV is actually larger than 30px. It's not. And I can move it much further to the left on the image.) How do I get a div over an image without getting that extra space after the image? I suppose I could have a div that contains both the image and the layered div, then position them absolutely inside it? Is this the best solution? *** EDIT: YOU CAN SEE AN EXAMPLE HE *** http://www.poweredpages.com/sample.php Thanks. *** UPDATE. Got the space to leave after placing it as absolute inside a relative DIV. Now I have vertical alignment discrepancies between IE and Firefox. There has to be an easier way! *** I'm in need of a method to change an image to different images in the same spot when the user hovers over their respective text links. So far I have only found methods that work with only 2 different images or they just change upon hovering over the image itself and not text located elsewhere. THanks. So I'm trying to put in a bg image using godaddy website tonight and its just not working for me.. I only want it to be in the main paragraph area.. I know html quite well but just a little css.. here is my coding so far.. All I've really added to the template is under body.. Not sure if it supposed to be under body or .sf_outer_wrapper: Code: /*********************************************************
**********************************************************
Folder: Theme315_Generic1
Name: Generic 1
Cat: Generic
**********************************************************
*********************************************************/
/*------------------------------------
GENERAL
------------------------------------*/
body {
background-image:url(images/bamboo1.jpg);
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
margin: auto;
}
.sf_outer_wrapper {
width: 1014px;
margin: 50px auto;
}
.sf_wrapper {
width: 1014px;
position: relative;
}
a {
color: #000;
}
a:hover {
color: #333;
}
a:visited {
color: #000;
}
.sf_extra10 {
display: none;
}
/* ------------------------------------
HEADER
------------------------------------ */
.sf_header_wrapper {
margin-top: 0px;
height: 133px;
}
.sf_main_header p, .sf_sub_header p { margin: 0; padding: 0; }
.sf_main_header {
padding-top: 25px;
text-align: left;
line-height: 0.9;
margin-left: 18px;
height: 40px;
overflow: hidden;
font-family: Arial, Helvetica, FreeSans, sans-serif;
font-size: 24px;
font-weight: bold;
}
.sf_sub_header {
text-align: left;
padding: 4px 0 30px 50px;
width: 450px;
height: 30px;
overflow: hidden;
font-family: Arial, Helvetica, FreeSans, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
/* ------------------------------------
NAVIGATION
------------------------------------ */
.sf_navigation_top { display: none; }
.sf_navigation {
clear: both;
height: auto;
width: 1014px;
}
.sf_navigation ul {
margin: 0 0;
height: auto !important; height: 1%;
padding-left: 0;
}
.sf_navigation ul:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
.sf_navigation ul {
list-style-type: none;
}
.sf_navigation ul li {
float: left;
width: auto !important;
width: 5px;
white-space: nowrap;
}
.sf_navigation ul li a {
height: 40px;
margin: 0 0 0 1px;
text-decoration: none;
display: block;
line-height: 28px;
padding: 0 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.sf_navigation ul li a:hover {
text-decoration: none;
color: #fff;
display: block;
}
.sf_subnavigation, .sf_subnavigation2 {
display:none;
}
/*------------------------------------
Dropdown
------------------------------------*/
#Nav1 iframe {
position: absolute;
/* account for the border */
left: -0.25em;
top: -0.25em;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
margin-left: 3px;
}
#Nav1,
#Nav1 ul { /* all lists */
list-style:none;
width:100%;
}
#Nav1 a {
display:block;
}
#Nav1 li { /* all list items */
float:left;
}
#Nav1 li ul { /* second-level lists */
position:absolute;
left:-999em;
width:130px;
margin:-4px 0 0 0;
border:solid 1px #929292;
background:#ffffff;
padding:3px 3px 0 3px;
z-index:1000;
}
#Nav1 li ul li{
margin:0;
padding:0;
background:none;
}
#Nav1 li ul li a{
background:#e8e8e8;
height:auto;
margin:0 0 3px 0;
width:120px;
padding:5px;
line-height:normal;
white-space:normal;
border:none;
}
#Nav1 li ul li a:hover{
background:#999999;
}
#Nav1 li:hover ul,
#Nav1 li.sfhover ul { /* lists nested under hovered list items */
left:auto;
}
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
/*------------------------------------
CONTENT
------------------------------------*/
.sf_pagetitle {
clear: both;
padding: 10px 0 0 20px;
text-align: left;
height: auto !important;
min-height: 30px;
font-family: Arial, Helvetica, FreeSans, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.sf_pagetitle h1 {
font-size:24px;
font-weight:normal;
margin:0;
}
.sf_content {
height: 300px;
padding: 20px 20px 0 20px;
margin: 0px;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: auto !important;
height: 200px;
min-height: 200px;
}
.sf_content:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
/*------------------------------------
FOOTER
------------------------------------*/
.sf_footer {
font-size: 13px;
padding: 25px 0 10px 20px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#F6F6F6;
}
/*------------------------------------
BANNER
------------------------------------*/
div.sf_banner {
margin-bottom: 35px;
padding-top: 50px;
text-align: center;
font-size: 13px;
}
div.sf_banner div#bannerLink {
padding-top: 10px;
}
/**
* Sticking flyout menu bug
*
* @bugfix
* @affected ie7
* @css-for ie7
* @valid yes
*/
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
Hi all, I've got an div set up for images, which just has a style of padding-right 15px; . Now, I've got a text div with a style of padding-right 5px; . Whenever I put that div in after the image div, the text appears below the image. Can anyone tell me how to make it so the text appears next to the image (on the right)? Cheers. |
|||||||