By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,624 Members | 2,179 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,624 IT Pros & Developers. It's quick & easy.

CSS Thumbnails and headers overlaping. Float Issue? [VIDEO LINK]

P: 54
WARNING VIDEO TAKES A WHILE TO LOAD
http://screencast.com/t/BWQ6DNtsM

I really don't know how to fix this other than putting another div. But I dont'
exactly want to do that for every page. random div's everywhere

Is there any other way?

Also I'm trying to get a scaled thumbnail of the orginal picture WHILE maintaining the size of the css box.. Is that possible? Or do I have to scale it in Photoshop and make a separate image =\

You guys must hate me:(

*HTML*
Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <head>
  7. <title>James Mann - Media</title>
  8. <link rel="stylesheet" href="styles.css" type="text/css">
  9. <meta http-equiv="content-type" 
  10.         content="text/html;charset=utf-8" />
  11.     <meta http-equiv="Content-Style-Type" content="text/css" />
  12. <style type="text/css">
  13. <!--
  14. body {
  15.     background-color: #9cad32;
  16. }
  17. -->
  18. </style></head>
  19.  
  20. <body>
  21. <div id="topbar">
  22.     <div id="buttonconatiner">
  23.       <div id="buttons">
  24.  
  25.         <ul>
  26.           <li><a href="http://pdhtdev.johnabbott.qc.ca/students/2010/james_mann/portfolio/index.htm">Home</a></li>
  27.             <li class="selected"><a href="media.htm">Media</a></li>
  28.             <li><a href="websites.htm">Websites</a></li>
  29.             <li><a href="#">Projects</a></li>
  30.             <li><a href="#">About Me</a></li>
  31.           </ul>
  32.         </div>
  33.     <meta name="keywords" content="Music, Digital, Internet, CSS, HTML, Profile, Design, Web, Photoshop, Dreamweaver, Flash" />
  34. <meta name="description" content="A website where I showcase the latest and greatest work that I've made. Music, Digital Art, Websites, It's all here.
  35. " />
  36. </div>
  37. </div>
  38.  
  39. <div id="wrapper">
  40. <div id="container">
  41. <div id="banner">
  42. <a href="#"></a>
  43. </div>
  44.  
  45.  
  46. <div id="flashtop">
  47. <script type="text/javascript" src="flashobject.js"></script>
  48.               <div id="flashban" style="width: 700px; height: 150px"></div>
  49.  
  50.       <script type="text/javascript" language="javascript">
  51.                 var fo = new FlashObject("flashbanner2.swf", "flashban", "700", "150", "7", "#000000, true");
  52.                 fo.addParam("allowScriptAccess", "sameDomain");
  53.                 fo.addParam("quality", "high");
  54.                 fo.addParam("scale", "noscale");
  55.                 fo.addParam("loop", "false");
  56.                 fo.addParam("wmode", "transparent");
  57.                 fo.write("flashban");
  58.               </script>
  59.  
  60.     </div>
  61.  
  62.  
  63. <div id="content">
  64. <h1>Digital Artwork</h1>
  65. <p align="center" class="bigz">I made these using Adobe Photoshop CS3, some of them are old but I think they're still kool.
  66.  
  67. <ul class="gallery">
  68.                 <li><a href="media/art/DJGloCoverFlow.gif" title=">Dj GloStix - Proxy Album Art" target="_blank"><img src="media/art/DJGloCoverFlow.gif" alt=">Dj GloStix - Proxy Album Art" width="210" height="150" border="0"><span>Dj GloStix - Proxy Album Art</span></a></li>
  69.  
  70.                 <li><a href="media/art/HotRikkuSig2.gif" title="Rikku Forum Signature" target="_blank"> <img src="media/art/HotRikkuSig2.gif" alt="Rikku Forum Signature" width="210" height="150" border="0"><span>Rikku Forum Signature</span></a></li>
  71.       </ul>
  72.       </p>
  73. <h2>Music</h2>
  74. <p align="center" class="bigz">Coming Soon.</p>
  75.  
  76. <h2>Flash</h2>
  77. <p align="center" class="bigz">Coming Soon.</p>
  78.  
  79.  
  80. </div>
  81. </div>
  82.  
  83. <div id="footer">
  84. &copy; <a href="mailto:jwm@videotron.ca">James Mann</a>, 2008, Montreal
  85. </div>
  86. </div>
  87.  
  88. </div>
  89.  
  90. </body>
  91. </html>
  92.  
*CSS*
Expand|Select|Wrap|Line Numbers
  1.  
  2. html,body {
  3.     margin:0;
  4.     padding:0;
  5. }
  6.  
  7. a:visited {
  8.     color:#CC9900;
  9.     text-decoration:none;
  10. }
  11.  
  12. a:hover {
  13.     text-decoration:underline;
  14. }
  15.  
  16. a {
  17.     color:#CC9900;
  18.     text-decoration:none;
  19. }
  20.  
  21. p {
  22.     line-height:17px;
  23.     padding-left:10px;
  24.     padding-right: 10px;
  25. }
  26.  
  27. .bigz:first-letter {
  28.     font-size:150%;
  29.     line-height:0.8;
  30. }
  31.  
  32. #container {
  33.     width: 700px;
  34.     font-family: serif;
  35.     font-size:14px;
  36.     color: #222222;
  37.     margin:0 auto;
  38.     border-left:solid 1px #333333;
  39.     border-right:solid 1px #333333;
  40.     overflow:hidden;
  41.  
  42. }
  43.  
  44. #wrapper {
  45.     width:750px;
  46.     margin:0 auto;
  47.     background-image: url(images/repeat-y-back.gif);
  48.     background-repeat:repeat-y;
  49.     overflow:hidden;
  50. }
  51.  
  52. body {
  53.     text-align: center;
  54. }
  55.  
  56. #banner {
  57.     width: 700px;
  58.     height: 150px;
  59.     text-align:center;
  60.     background-image: url(images/JamesBanner.gif);
  61. }
  62.  
  63. h1 {
  64.     color:#ffffff;
  65.     display: block;
  66.     width: 700px;
  67.     padding-left:0px;
  68.     padding-right:0px;
  69.     padding-bottom:3px;
  70.     padding-top:3px;
  71.     margin-top:0px;
  72.     margin-bottom:5px;
  73.     border-top: solid 1px black;
  74.     border-bottom: solid 1px black;
  75.     background-color: #666666;
  76.     background-image: url(images/heading.gif);
  77.     font-size:16px;
  78.     text-align:center;
  79.     font-family: Verdana;
  80.     font-style:italic;
  81.     height:19px;
  82.     float:none;
  83. }
  84.  
  85. h2 {
  86.     position:relative;
  87.     color:#ffffff;
  88.     display: block;
  89.     width: 700px;
  90.     padding-left:0px;
  91.     padding-right:0px;
  92.     padding-bottom:3px;
  93.     padding-top:3px;
  94.     margin-top:35px;
  95.     margin-bottom:5px;
  96.     border-top: solid 1px black;
  97.     border-bottom: solid 1px black;
  98.     background-color: #666666;
  99.     background-image: url(images/heading.gif);
  100.     font-size:16px;
  101.     text-align:center;
  102.     font-family: Verdana;
  103.     font-style:italic;
  104.     height:19px;
  105.     float:inherit;
  106. }
  107.  
  108. #content {
  109.     width: 700px;
  110.     text-align:left;
  111.     overflow:hidden;
  112. }
  113.  
  114. #content1 {
  115.     padding-left:10px;
  116.     padding-right: 10px;
  117.     width: 680px;
  118.     text-align:left;
  119.     overflow:hidden;
  120. }
  121.  
  122. #footer {
  123.     margin:0 auto;
  124.     margin-top:0px;
  125.     width:750px;
  126.     height:50px;
  127.     background-image: url(images/footer.gif);
  128.     color: #CC9900;
  129.     font-style:italic;
  130.     font-size:12px;
  131.     font-family: Arial;
  132.     font-variant:small-caps;
  133.     margin-top:10px;
  134.     float:inherit;
  135. }
  136.  
  137. /*NAVIGATION*/
  138.  
  139. #topbar {
  140.     width:100%;
  141.     height:30px;
  142.     font-family:Verdana;
  143.     font-variant:small-caps;
  144.     text-decoration:underline;
  145.     font-style:italic;
  146.     background-color:#353535;
  147.     background-image: url(images/button3.gif);
  148.     overflow:hidden;
  149. }
  150.  
  151. #buttonconatiner {
  152.     width:700px;
  153.     height:30px;
  154.     margin:0 auto;
  155.     overflow:hidden;
  156. }
  157.  
  158. #buttons {
  159.     margin:0 auto;
  160.     height:30px;
  161.     width:700px;
  162.     text-align:center;
  163.     overflow:hidden;
  164. }
  165.  
  166. #buttons ul {
  167.     height:30px;
  168.     float:none;
  169.     clear:both;
  170.     padding:0px;
  171.     margin-top:0px;
  172.     margin-bottom:0px;
  173.     margin-left:0px;
  174.     margin-right:0px;
  175.     overflow:hidden;
  176. }
  177.  
  178. #buttons li {
  179.     padding-top:3px;
  180.     padding-bottom:0px;
  181.     padding-left:0px;
  182.     padding-right:0px;
  183.     height:30px;
  184.     width:140px;
  185.     text-align:center;
  186.     list-style-type: none;
  187.     float:left;
  188.     display:block;
  189.     overflow:hidden;
  190. }
  191.  
  192. .selected, .selected a {
  193.     color:#e1a902;
  194.     overflow:hidden;
  195.     background-repeat:repeat-x;
  196.     }
  197.  
  198. #buttons li:hover {
  199.     background-image: url(images/button3sel.gif);
  200.     height:30px;
  201.     width:140px;
  202.     text-decoration:underline;
  203.     overflow:hidden;
  204. }
  205.  
  206. ul a,a:visited,a:focus {
  207.     color:#ffffff;
  208.     text-decoration:none;
  209. }
  210.  
  211.  
  212.  
  213. li {
  214.     text-decoration:none;
  215. }
  216.  
  217. /*FLASH BANNER*/    
  218. #flashtop {
  219.     position:absolute;
  220.     width: 700px;
  221.     height:150px;
  222.     top:30px;
  223.     z-index:99;
  224. }
  225.  
  226. #flashban {
  227.     position: absolute;
  228.     width: 700px;
  229.     height:150px;
  230.     top:0px;
  231.     z-index:99;
  232. }
  233.  
  234. /* THUMBNAIL PREVIEWZZZ!*/
  235.  
  236. ul.gallery{
  237.     list-style-type: none;
  238.     margin-bottom: 20px;
  239.     position:relative;
  240. }
  241.  
  242. ul.gallery li{
  243.     width: 216px;
  244.     margin: 5px;
  245.     border: 1px solid #CCCCCC;
  246.     background-color: #FFFFFF;
  247.     text-align: center;
  248.     float:left;
  249. }
  250.  
  251. ul.gallery li a {
  252.     border: 3px solid #FFFFFF;
  253.     text-decoration: none;
  254.     display:block;
  255.     height: 170px;
  256.     width: 210px;
  257. }
  258.  
  259.  
  260. ul.gallery li a:hover{
  261.     border-top-color: #CCCCCC;
  262.     border-right-color: #CCCCCC;
  263.     border-bottom-color: #CCCCCC;
  264.     border-left-color: #CCCCCC;
  265.     background-color: #CCCCCC;
  266.  
  267. }
  268.  
  269.  ul.gallery span{
  270.     color: #666666;
  271.     background-color: #FFFFFF;
  272.     float: left;
  273.     width: 204px;
  274.     text-align: center;
  275.     padding: 2px;
  276.     font-size: 10px;
  277.     margin-top: 3px;
  278. }
  279.  
  280.  ul.gallery a:hover span{
  281.     background-color: #CCCCCC;
  282. }
  283.  
  284.  
Mar 11 '08 #1
Share this Question
Share on Google+
27 Replies


nomad
Expert 100+
P: 664
Depend on how many pages you have I would use two diffent templates.
That way if you have any changes for one template you can and every page that is related to that template will change. You can use your .css file for that as well.


nomad
Mar 11 '08 #2

P: 54
So you say make a seperate css sheet just for this page and maybe other pages that contain gallerys? yea that makes sense. I think I'll do that :)

But it still doesn't solve my problem =[

Oh and is there a way I can preview the img without stretching to the boxs wdith and height?
Mar 11 '08 #3

P: 54
Bump. Any updates? anyone?
Mar 12 '08 #4

P: 54
You're probably avoiding me on purpose :(
Mar 13 '08 #5

P: 54
Come on guys, I need your help :(
Mar 15 '08 #6

drhowarddrfine
Expert 5K+
P: 7,435
I don't know why you aren't getting responses except it's a lot of code. My excuse is workload and too lazy to go to my Windows box so I can see the flash. **sigh**, I guess I'll do this tomorrow. I'm so tired. **sigh** ;)
Mar 15 '08 #7

Markus
Expert 5K+
P: 6,050
You're probably avoiding me on purpose :(
That's abit immature, isnt it?
Mar 15 '08 #8

P: 47
I wish I could help you out, but I'm fairly new to this myself.

But, concerning the thumbnail and everything. I had always thought you did need to make a separate image for it. Yet again, I may definitely be wrong.
Mar 15 '08 #9

P: 54
I don't know why you aren't getting responses except it's a lot of code. My excuse is workload and too lazy to go to my Windows box so I can see the flash. **sigh**, I guess I'll do this tomorrow. I'm so tired. **sigh** ;)
Thank you man. I seriously appreciate it :)
Mar 15 '08 #10

P: 54
That's abit immature, isnt it?
Does it sound like I'm 37 years old or something on the video >.>
puting n00b in your name could be considered immature also.
Please don't flame my thread unless it's constructive. Thank you.
Mar 15 '08 #11

drhowarddrfine
Expert 5K+
P: 7,435
Just to let you know I looked at that video. I thought the video WAS the site. I'll look into this after dinner.
Mar 15 '08 #12

drhowarddrfine
Expert 5K+
P: 7,435
<meta> is only allowed in the <head>. Move them there.

Remove "language=Javascript". No such thing or deprecated.

<p> cannot contain <ul>. Move the ending </p> up to the end of that <p>

<img> tags end with /> in xhtml.
Mar 15 '08 #13

drhowarddrfine
Expert 5K+
P: 7,435
In ul.gallery, add overflow:auto;

I feel bad. The fix was easy but I thought your video link, above, was the actual page you were trying to fix and thought there was a lot more work involved.
Mar 15 '08 #14

P: 54
In ul.gallery, add overflow:auto;

I feel bad. The fix was easy but I thought your video link, above, was the actual page you were trying to fix and thought there was a lot more work involved.
Omg, I thought was gonna be complicated.
Thank you sooo much!

Also, Is there anyway I can make a scaled preview/thumbnail of the original image without changing the actual size of the css box or making a separate thumbnail one.
Mar 16 '08 #15

drhowarddrfine
Expert 5K+
P: 7,435
Yes, but how would you use it? Do you mean a thumbnail that expands on hover or something to click on to expand or what? Some can be done with CSS, some with javascript.
Mar 16 '08 #16

P: 54
Yes, but how would you use it? Do you mean a thumbnail that expands on hover or something to click on to expand or what? Some can be done with CSS, some with javascript.
No no, nothing fancy. If you look at my thumbnails you'll see that they're stretched versions of the original pictures that they link to. I'm just asking for something that would show the preview of that image but scaled version so it's not stretched like replace empty space with just white... Because I don't exactly want to make a seperate scaled thumbnail version of each image I put up. maybe like a script that takes the link of the original image and displays it scaled to the dimensions.

I don't know if that's possible =\
I'm no master at this stuff.
Mar 16 '08 #17

drhowarddrfine
Expert 5K+
P: 7,435
The sizes of the images are fixed in your html attributes for those images. If you look at the <img> tags, inside there is a height and width set. Changing that will change the sizes but they will be fixed at whatever you set them to.

Those sizes can be, and are supposed to be, in your CSS. If they are in CSS, then little tricks with hovering can be done. Otherwise, the only way to change the values is with javascript or by hand.

If you want to use javascript, you need to ask on that board.
Mar 16 '08 #18

P: 54
The sizes of the images are fixed in your html attributes for those images. If you look at the <img> tags, inside there is a height and width set. Changing that will change the sizes but they will be fixed at whatever you set them to.

Those sizes can be, and are supposed to be, in your CSS. If they are in CSS, then little tricks with hovering can be done. Otherwise, the only way to change the values is with javascript or by hand.

If you want to use javascript, you need to ask on that board.
Ohhhh Now I get it!
*slaps face*
I'm an idiot xD

I have 1 more quick question related to the thumbnails.
I now have:




I'm trying to get this.




I added this:
*HTML*
Expand|Select|Wrap|Line Numbers
  1. <li class="wide"><a href="media/art/HotRikkuSig2.gif" title="Rikku Forum Signature" target="_blank"> <img src="media/art/HotRikkuSig2.gif" alt="Rikku Forum Signature" width="207" height="65" border="0"/><span>Rikku Forum Signature</span></a></li>
and

*CSS*
Expand|Select|Wrap|Line Numbers
  1. .wide {
  2.     margin-top:50px;
  3.     text-align:center;
  4. }
  5.  
  6.  

Is it even possible? xD
I hate to keep bugging you guys on these little details. But I appreciate very much.

:)
Mar 17 '08 #19

drhowarddrfine
Expert 5K+
P: 7,435
See if adding 'vertical-align:baseline' or 'middle' to .wide does it.
Mar 17 '08 #20

P: 54
See if adding 'vertical-align:baseline' or 'middle' to .wide does it.
Nope, unfortunately either of them don't work :(
I never knew about the vertical-alignment thing though.
Learnt something anyway :)
Mar 17 '08 #21

P: 54
Meh oh well, I just put some </br> 's before the image and it made it go down...
Any other way? xD
Mar 18 '08 #22

P: 54
I think I need to state a height so the vertical alignment will work,
Mar 20 '08 #23

P: 54
hello >.>
I wonder why it's not working =\
Mar 22 '08 #24

P: 9
hi,

apply your wide class to anchor tag as well...
because many a times classes applied outside the anchor tag doesnt get applied...
so try it out...
may be you'll get..
Mar 22 '08 #25

P: 54
I don't even have Anchor tags yet... Your telling me to put one for .wide?

or to put it related to the div it's in?
Mar 22 '08 #26

P: 9
I don't even have Anchor tags yet... Your telling me to put one for .wide?

or to put it related to the div it's in?
u have posted this code
am talking about this

*HTML*
Code: ( text )

1.
<li class="wide"><a href="media/art/HotRikkuSig2.gif" title="Rikku Forum Signature" target="_blank"> <img src="media/art/HotRikkuSig2.gif" alt="Rikku Forum Signature" width="207" height="65" border="0"/><span>Rikku Forum Signature</span></a></li>



and

*CSS*
Code: ( text )

1.
.wide {
2.
margin-top:50px;
3.
text-align:center;
4.
}




Is it even possible? xD
I hate to keep bugging you guys on these little details. But I appreciate very much.

:)
Mar 24 '08 #27

P: 54
Oh I think I know what you mean... You want me to apply the class to the img instead of the list item?
Mar 24 '08 #28

Post your reply

Sign in to post your reply or Sign up for a free account.