|
CSS - Changing Lightweight Gallery Layout...
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 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 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 I have an existing two column layout that uses a 175px left border to create the column. This layout is terrible. It creates all kinds of problems in Firefox. I just need to make it more simple. I know there are better ways to create a 2col layout, if some of CSS experts here could help, I'd be grateful. Also, all divs have to stay in their place in the code. The page is here 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 I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? Hi, I am currently learning CSS and javascript and I'm trying to make a simple photogallery box containing photo's(horizontally). Here is my code: Code:
<script language="JavaScript" src="person.js" type='text/javascript'></script>
<style type="text/css">
body {background-color:#900;}
.box {position:relative;
top:200px;
left:200px;
width:500px;
border:2px;
border-color:green;
background-color:blue;
overflow:hidden;
}
.photo{
margin-top:5%;
margin-left:10%;
margin-right:10%;
}
img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="box">
<div class="photo">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>
</div>
</body>
Here are my problems: below the box i am trying to get a little box with buttons to the left and right. In the box the photo's must go horizontally next to each other and if there is no spice it must dissapear at the side box so i can press the buttons left or right to get the photo's in the middle. But now the 3 photo's are horizontally and the next is on a new line instead of in going away at the side of the box. Can anyone give me some advice and tips please thnx! I've got a photo gallery loaded and working well but I would like to load the first photo of the gallery without the user having to click the thumbnail. Right now the photo holder is blank until the user clicks the first one. Any help is greatly appreciated. Steve a.gallery, a.gallery:visited { display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; } a.slidea {background:url(../img/index/tlc1.jpg);} a.slideb {background:url(../img/index/tlc2.jpg);} a.slidec {background:url(../img/index/tlc3.jpg);} a.slided {background:url(../img/index/lc4.jpg);} a.slidee {background:url(../img/index/lc5.jpg);} a.slidef {background:url(../img/index/lc6.jpg);} a.slideg {background:url(../img/index/lc7.jpg);} a.slideh {background:url(../img/index/lc8.jpg);} a.slidei {background:url(../img/index/lc9.jpg);} a.slidej {background:url(../img/index/lc10.jpg);} a.gallery em, a.gallery span {display:none;} a.gallery:hover {border:1px solid #fff;} a.slidea em {background:url(../img/index/lc1.gif) 5px 5px no-repeat;} a.slideb em {background:url(../img/index/lc2.gif) 5px 5px no-repeat;} a.slidec em {background:url(../img/index/lc3.jpg) 5px 5px no-repeat;} a.slided em {background:url(../img/index/lc4.jpg) 5px 5px no-repeat;} a.slidee em {background:url(../img/index/lc5.jpg) 5px 5px no-repeat;} a.slidef em {background:url(../img/index/lc6.jpg) 5px 5px no-repeat;} a.slideg em {background:url(../img/index/lc7.jpg) 5px 5px no-repeat;} a.slideh em {background:url(../img/index/lc8.jpg) 5px 5px no-repeat;} a.slidei em {background:url(../img/index/lc9.jpg) 5px 5px no-repeat;} a.slidej em {background:url(../img/index/lc10.jpg) 5px 5px no-repeat;} /* styling for gallery */ #container_right { float:left; width:100%; height:300px; position:relative; background-color:#839BAE; background-image: } #container_right img { border:0; } #container_right .thumbs { width:170px; position:absolute; right:32px; top:6px; } #container_right a.gallery:hover span { display:block; position:absolute; width:402px; height:50px; top:260px; left:-520px; padding:5px; font-style:italic; color:#fff; z-index:100; } #container_right a.gallery:hover span:first-line { font-style:normal; font-weight:bold; font-size:1.1em; color:#CCCCCC; } #container_right a.gallery:active, #container_right a.gallery:focus { border:1px solid #000; } #container_right a.gallery:active em, #container_right a.gallery:focus em { display:block; position:absolute; width:510px; height:275px; top:1px; left:-525px; padding:5px; color:#000; z-index:50; } I have no idea what I'm doing incorrectly but I cannot get the gallery to display in the center of my page, it keeps going to the right. It is also bumped down a little so it isn't as far up as it could be. You can see it HERE I am wanting to do a photo gallery section like http://www.passionforpaintings.com/...rtists/overview. The problem is it is in html and I been looking for css gallery tutorials and can not find anything like this. Could anyone give me some help or point me in the right direction please? Many thanks in advance. Over the past few days I've pulled my hair out trying to fix this. I've changed the size of the container and resized the gallery. In IE8, it drops the gallery under the left-hand size text. Every other browser it appears fine but IE it does not. You can see he wowrelief (dot) com/ev css: (URL address blocked: See forum /index_files/style.css I need to finish this for a class and I don't know how to fix it and I'm beyond frustrated. help? 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 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 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 in the middle of building a site. I have a gallery page with a pop up j-query gallery. perisandcorr.com/mona/gallery.html It works in IE7 and IE8 but not in IE6. Any suggestions. Another problem I have is with the navigation on the left. The margins between each button is larger in IE6 and IE7 than I want them to be they are fine in the latest versions of Safari, Firefox and Opera (on a Mac). Also in IE6 the rollover doesn't work. Any help much apreciated. Thanks in advance. 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, 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 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>
Hey all, I've got a photo gallery here. In IE7 The list just drops below the box on the right, whereas in FF it breaks where it should and moves down. I can't figure out what's going on. Here's the CSS for the gallery: Code:
#galleryList {
width:100%;
margin:15px 5px;
}
* html #galleryList {
margin-right:-5px;
}
#galleryList li {
float:left;
width:150px;
height:150px;
padding:5px;
margin:5px;
border:1px solid;
border-color:#777 #aaa #aaa #777;
background:#dedede;
}
* html #galleryList li {
margin:2px;
}
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 |
|||||||