|
CSS - Need Help With Layout Of An Image Gallery Script
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 Similar TutorialsI 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, I am very inexperienced with web-editing. I want to use lightweight-image-gallery-with-thumbnails (its first option when googling this) but would like to edit it a bit. I have played around with the code a bit but don't get it to work as I want. I am trying to get the main image at the top and the thumbnail gallery below it, as it is now the thumbnails are to the left of the image to be shown: there is some nifty javascript for this also but the the css code is: <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> Any help would be most appreciated... Thanks Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom 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 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>
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 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'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 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 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. 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! 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 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 Want To Have It To Where I Can Use A Header Image At The Top, Then 2 Images for The Right And Left, And A Bottom Image. So Its Like A Box. But The Left And Right Need To Be Able To Repeat If The Text In The Middle Is Too Long. Any Help Would Be Appreciated! Thanks! ---- Heres My Code, it Works Until I Put To Many <BR> Tags And Make It To Long, It Messes Up The Left And Right Images CSS:: Quote: <style type="text/css"> .outerx2{ width:670px; margin-left:379px; border:0px solid #000; background:#D9D9CD url(left.png) repeat-y left top; padding-left:20px; } .innerx2{ background:#D9D9CD url(right.png) repeat-y right top; padding:1em 1em 1em 0; } /* mac hide \*/ * html .innerx2{height:10%} /* force "layout" in IE */ .outerx2 p{padding:0 10px;margin:0 0 1em 0} </style> Index.php:: PHP Code: <?php include'css.css'; echo'<Center><img src="top.png"></Center>'; echo'<div class="outerx2"> <div class="innerx2"> <p>This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: </p> <p>This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: </p> <p>This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: </p> </div> </div>'; echo'<Center><img src="bottom2.png"></Center>'; ?> Hi, I need to create a object like in the attached image (worldmap.gif). The image itself in not hot, just the text;s above it. When the user hovers over the text, two things should happen: 1- The corresponding image should swap with a darker version (Attached: img_continent_africa.gif etc) 2- and a dropdown menu should appear as shown in worldmap.gif. My question is: How should I approach this from a css layout perespective. How do I position the over-state images. thanks, Zain Hi guys I guess most of you know about 960.gs http://960.gs/ It is a tool I love, and I guess I won't leave for long time. I've begun doing a new layout, and now I'm facing a little problem. How can I put an image over the 960.gs layout? and to make everything crossbrowser, to validate, etc.? Look: my work + original image Thanks a lot in advance, Hi, I'm developing a childrens story website, and ran into a problem with the layout in Firefox. Everything worked perfectly on my local server, but after I uploaded it to my hosting account I came across a strange problem. When I first go to the homepage everything looks, and works, fine. And if I refresh the page a few times, it still all looks fine. But if I click on the "Home" link a few times the whole layout breaks on every 3rd or 4th click of the home button. You can see the design at http://develDOTstephenhmDOTcom/bedtime/index.php. (Sorry for the link, but it's my first post and I can't add urls yet) This problem doesn't exist in IE7, just Firefox as far as I can tell. I know the rest of the sites layout is a bit messed up in IE7 at the moment, as I haven't gotten around to adding the IE7 only css info yet. I'm sure it's a stupid error on my part, but I was hoping somebody could point me in the right direction. Thanks a lot in advance to anyone who can help. For the image rollovers the basic html for each one is: <a class="happylarry" href="happylarry.php"> <div class="image_text"> Happy is an Irish Leprechaun who lives in the left-hand pocket of your child.<br /><br />And of course his real name is not 'Happy'. His real name is 'Larry'. But Larry Leprechaun is such a happy little fellow, and he gets up to so much mischief, that all of his friends and family call him 'Happy Larry'. </div> </a> and the relevant css is: a.happylarry { display: block; float: left; min-width: 222px; width: auto!important; width: 222px; height: 524px; background: url('images/happylarry.png') no-repeat 0 0; text-align: center; margin-right:13px; text-decoration:none; } a.happylarry:hover { background-position: 0px -524px; } .image_text{ color:#FFFFFF; max-width:180px; margin-left:25px; *margin-left:0px; margin-top:250px; text-align:left; font-size:12px; font-family: Arial, Helvetica, sans-serif; } CSS back ground image isn't showing at all. Tried everything, googled, flipped through CSS books, moved the image into different directories, drank more tea and finally flipped Help! Site link : http://weary.me.uk/MT/ Code: * { margin:0; padding:0; }
BODY { background-color:#FFFFFF;
font-size:12px;
}
#header { background-color:#FFFFFF;
padding:0px; }
#left {
float:left;
width:18%;
padding:0%;
margin-left:1%;
margin-top:0%;
}
#right {
background-image: url(right_background.jpg);
background-repeat: no-repeat;
margin-right: 20px;
width: 220px;
border:1px solid #d2d7e4;
float:right;
width:20%;
margin-right:0%;
margin-top:0%;
padding:0px;
}
#center {
margin-right:30%;
margin-left:14%;
padding-left:10%;
background-color:#FFFFFF;
}
#footer { clear:both;
background-color:#FFFFFF;
padding:8px; }
Hi: I need a simple code for displaying two things side by side. I want to attach an image of what I need to do, but I can't figure out how to attach images. Basically, to describe the image, I need to have an unordered list on the left and a graphic on the right. These need to be between to blocks of text (above and below). I would prefer not to use tables. I am assuming there is a simple way to do that using <div> and <span> and floats, but I can't figure it out. Can someone please help. Thanks. Hi, I have a background image that I want to incorporate into the header div of a fixed width layout. The header is of a gradient style - on the left it is a solid color and as you move along towards the right it fades to white. The image is 981x76. If I bring it into Gimp, I can scale it to 1920 x 76 and it looks the same. I would like to be able to do that in a div tag, with the image as a background. I would like the image to scale horizontally just like I can do using Gimp. Is this possible? Basically, I want the browser to manage the scaling of the image. |
|||||||