Jump to content

MrPD

Members
 View Profile  See their activity

  • Posts

    4

  • Joined

  • Last visited

MrPD's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. MrPD
    I have come up with some options I will ask some questions later Thanks,
  2. MrPD
    Thanks for the responses es131245 I don't think I explained what I was trying to do correctly. What I want to do is to have the big picture popup in a predefined place (space) on the web page everytime like say over the smaller ones just like in the picture below. When I test this on a laptop with say a resolution of 1024x768 with firefox it looks like this And IE looks like this At a resolution of 800x600 it is even worse, I know most don't use 800x600 but just trying to make it as compatible as I can. I do have another CSS code it is alittle different, it uses a mouse over technique. When moving the mouse over the small pictures the big picture pops up below the small pictures in the same spot and never changes regardless of different resolutions or browsers. I have tested this mouse over code with different browsers and resolution and with the code the way it is the big picture is perfectly centered and just below the smaller pictures everytime but I can't figure out how to use this and apply it to the CSS click on picture code. I really would rather use the click on picture for pop up and close but just can't figure the centering part out. I put the mouse over code below for you to see and see if I messed it up and maybe I just got lucky with a glitch or something. <style type="text/css">.gallerycontainer{position: relative;}.thumbnail img{border: 1px solid white;margin: 0 3px 3px 0;}.thumbnail:hover{background-color: transparent;}.thumbnail:hover img{border: 1px solid black;}.thumbnail span{position: absolute;background-color: none;padding: 2px;left: -1000px;border: 1px none;visibility: hidden;color: black;text-decoration: none;top: 250px;}.thumbnail span img{border-width: 1;padding: 1px;}.thumbnail:hover span{visibility: visible;top: 20;top:100%;left:50%;margin-left:-320px;z-index: 50;} </style> So back to my original problem, is it possible to have the CSS code that is the click on the small picture and have it pop up in one spot all the time or is that not possible due to the difference between how the browsers handle things like I have read? Again, I have been trying to figure out how to do this for awhile now, so do you have a suggestion? I thank you for taking the time to try and help me.
  3. MrPD
    wow thanks, that works for centering horizontal (left to right). I gues with all of my searching I was confussing myself with all of the things I was finding. I have another dumb question which is probably simple for your guys here but is there any way to center the big popup picture verticly (top to bottom) no matter what the browser is or screen resoltion? Or is that set with the top:-240px. Or is there anyway to make the pop up in a fixed place everytime (centered left tor right and top to bottom) at a certain place in the page relitive to the small pictures? I am trying to understand how to do these things. Thank you again for your help!
  4. MrPD
    I am new to CSS and am learning my way but I put together a basic popup picture view that when you click on a smaller picture it pops up the bigger picture and then you click on the bigger picture to close the bigger picture. I am havin a problem of it not looking correct in different browsers and in different screew rolutions. I have looked online and tried to solve this on my own but have not come up with the fix. I would like the big picture to pop up in the center (like shown in the picture) and also to be centered no matter what the browser is or screen resoltion. Can someone please help me out? Thanks, Pictures of how it looks and of the big picture centered for my screen (sorry I used the flower pictures from here just as reference to show how it looks) <html><head><style type="text/css">#popupcss a:focus:hover#popupcss {position:relative; width: 150px;margin:200px;}#popupcss a img {border: 1px solid #FFF;margin: 0 3px 3px 0;}#popupcss a:hover img {border: 1px solid black;}#popupcss a:focus {color:#fff;}#popupcss a span {display: none;}#popupcss a:active span,#popupcss a:focus span {display: block; position: absolute; top: 200px;left:398px;width: 50px;}</style></head><body><br><div id="popupcss" class="cfix" align="center"><table class="acttbl" align="center" border="1" cellpadding="1" width="64%"><tbody><tr align="center"><td><a href="#n"><img src="http://www.w3schools.com/css/klematis_big.jpg" border="0" height="159px" width="213px"><span><img src="http://www.w3schools.com/css/klematis_big.jpg" alt="" height="480" width="640"></span></a><a href="#n"><img src="http://www.w3schools.com/css/klematis2_big.jpg" border="0" height="159px" width="213px"><span><img src="http://www.w3schools.com/css/klematis2_big.jpg" alt="" height="480" width="640"></span></a><a href="#n"><img src="http://www.w3schools.com/css/klematis3_big.jpg" border="0" height="159px" width="213px"><span><img src="http://www.w3schools.com/css/klematis3_big.jpg" alt="" height="480" width="640"></span></a><a href="#n"><img src="http://www.w3schools.com/css/klematis4_big.jpg" border="0" height="159px" width="213px"><span><img src="http://www.w3schools.com/css/klematis4_big.jpg" alt="" height="480" width="640"></span></a><a href="#n"><img src="http://www.w3schools.com/css/klematis4_big.jpg" border="0" height="159px" width="213px"><span><img src="http://www.w3schools.com/css/klematis4_big.jpg" alt="" height="480" width="640"></span></a><a href="#n"><img src="http://www.w3schools.com/css/klematis3_big.jpg" border="0" height="159px" width="213px"><span><img src="http://www.w3schools.com/css/klematis3_big.jpg" alt="" height="480" width="640"></span></a><a href="#n"><img src="http://www.w3schools.com/css/klematis2_big.jpg" border="0" height="159px" width="213px"><span><img src="http://www.w3schools.com/css/klematis2_big.jpg" alt="" height="480" width="640"></span></a><a href="#n"><img src="http://www.w3schools.com/css/klematis_big.jpg" border="0" height="159px" width="213px"><span><img src="http://www.w3schools.com/css/klematis_big.jpg" alt="" height="480" width="640"></span></a><a href="#n"><img src="http://www.w3schools.com/css/klematis4_big.jpg" border="0" height="159px" width="213px"><span><img src="http://www.w3schools.com/css/klematis4_big.jpg" alt="" height="480" width="640"></span></a></td></tr></tbody></table></div><p></p><p></p></body></html>
×
×
  • Create New...