Hiding Photos

@scottyrobNov 22.2007

Hi there,
Anyone be able to help me out with this?
~~[url]~~http://merseyechoes.co.uk/photos.php[/url]

On that page is an image scroller which fades images in then out.. BUT Before the first four images are acctually show, it shows all of the images on the page!
Hmm

Any ideas on that?

Fet

to post a comment

CSS

10 Comments(s) _↴

@scottyrobauthorNov 22.2007 — #Working now!

@WebJoelNov 23.2007 — #-To heck with '[I]hiding images[/I]'... *I* want to know who keeps [U]hiding my left shoe[/U]... :eek:

Anyway, -glad you solved this [I]and[/I] provided a link. -I wanna see what you're up to. ?

@scottyrobauthorNov 23.2007 — #But if anyone does happen to wonder into this topic... How can i center the image? I asked in an earlier thread but these solutions didnt seem to want to work for this but they did for the rest!

Ive just used margin:30% on the image div, it works fine on my computer res, but dosent on anyone elses or in IE...

Another quick one, How can i move the image underneath the top image on www.merseyechoes.co.uk/news.php to the right of the screen ?

Fet

@CentauriNov 23.2007 — #To centre the rotating image in your first link, apply a width and auto margins to the container and not the image tag itself :

[CODE]#imageContainer {
 height:360px;
 width: 480px;
 margin: 0 auto;
 }
 
 #imageContainer img {
 display:none; 
 }[/CODE]

@CentauriNov 23.2007 — #To position the images, declare them both before the scroller div, floated left and right (there is no need to surround them in a div either). The scroller can then get auto side margins to centre it between the images. Using some semantics such as a heading <h2> and paragraphs <p> you can eliminate another div and unnecessary <br>s in the scroller as well :

[CODE]<img class="border5" src="./files/img/jan.jpg" alt="Jan" style=" float: left">
 <img class="border5" src="./files/img/nick.jpg" alt="Nick" style=" float: right">
 <div id="scroller" style="width: 50%; margin: 0 auto; padding: 1em 0">
 <h2>GIG GUIDE 1</h2>
 <p>Contact the Mersey Echoes for future dates in your area <br>
 NEW YEARS EVE -Jolly Farmer in Hurst,contact the venue for tickets</p>
 <hr>
 </div>[/CODE]

Note that the styles would be better of in your stylesheet.

@scottyrobauthorNov 23.2007 — #Ah thanks thats great! just what i needed there! ?

Two things : Any ideas why it dosent work in IE? (The photos page that is)

Secondly: Is there a way to have the nav bar on the news page under the images like the other pages?

I will move the CSS to an external stylesheet now.

Thanks

@CentauriNov 23.2007 — #On the photos page, IE doesn't seem to like the multiple images within the div when they are not positioned. Absolute positiong of the image works if the position is defined, and the container has a relative position as the image placement reference. Change the css to :

[CODE]#imageContainer {
 height:360px;
 width: 480px;
 margin: 0 auto;
 position: relative;
 }
 
 #imageContainer img {
 display:none;
 position: absolute;
 left: 0;
 top: 0; 
 }[/CODE]

@CentauriNov 23.2007 — #Also add

[CODE].footer {
 clear: both;
 }[/CODE]

to make the footer appear below any floated content.

By the way, just what is the .linklistspacer ul for ????

@scottyrobauthorNov 23.2007 — #Whayy that worked ? Thanks very much for all of that, much appreciated.. If you dont mind.....

How can i center the nav bar in IE? (It is centred in FF).. Thats the last thing! Honest :p

And the linklistspacer is all to do with my nav bar.. having it layed out as unordered lists then laying them out horizontally.. I got that off another site anyways! ?

@CentauriNov 23.2007 — #I think the .linklistspacer is what is causing the IE problem with the navbar. The whole footer section can be cleaned up a bit by getting rid of that ul and the navigation div, and replacing the copyright div with a <p> tag :

[CODE]<div class="footer">
 <ul class="linklist">
 <li><a href="index.php">Home</a></li>
 <li><a href="news.php">News</a></li>
 <li><a href="photos.php">Photos</a></li>
 <li><a href="soundbyte.php">SoundByte</a></li>
 <li><a href="guestbook.php?action=view_guestbook">Guestbook</a></li>
 <li><a href="contact.php?action=contact">Contact Us</a></li>
 </ul>
 <p id="copyright">Copyright ©2007. Site designed by <a href="http://www.srobinson.net">Srobinson.net</a>. All rights reserved.</p>
 <a href="http://validator.w3.org/check?uri=referer"><img class="a" src="http://www.srobinson.net/files/img/logo-w3c-html.png" alt="This site is W3C HTML 4.01 Strict Compliant"></a>
 <a href="http://jigsaw.w3.org/css-validator/check/referer"><img class="a" src="http://www.srobinson.net/files/img/logo-w3c-css.png" alt="This site is W3C CSS Compliant"></a>
 </div>[/CODE]

and the css changed slightly to :

[CODE]ul.linklist li 
 { 
 display: inline; 
 padding: 0 1.5em; 
 } 
 
 .footer {
 clear: both;
 padding: 1em 0 0.5em
 }[/CODE]

The change to the li is due to top and bottom padding being handled differently in some browsers on inline elements, and padding on the footer gives uniform spacing above and below the menu without <br>s.

The css stuff for .linklistspacer can also be removed.

Also in #CSS _↴

Cascading Menu, need to relocate on a page: Part 3 Repeat sections of html in css object Child <div> w/ z-index disappears when parent <div> is assigned a background color

Success!

Help @scottyrob spread the word by sharing this article on Twitter...

Tweet This

Hiding Photos

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Hiding Photos

10 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #CSS _↴