Thu, 2012-02-23 08:12
I have a website. Go me. I had help creating it from this forum when I created it about a year ago... and by help, one of your own really went out of his way to help me out with it and I was very thankful.
I am however finally getting around to finishing a couple things (got a job, quit a job, 2 family members died... a lot was going on).
I am trying to put together a tutorials section, but when I start adding images to link to fancybox iframes, my site keeps resizing the images to the size of the background. Has anyone seen this before, and is there a way to override the CSS for image sizes?
Thanks ahead of time. I am uploading the working files now...
http://webspace.ringling.edu/~dsmith/tut.html
Let me know what code you need.
Thu, 2012-02-23 08:24
#1
I remember now. It was
I remember now. It was Verschwindende that helped me before.
So kind, yet so hard to pronounce.
Fri, 2012-02-24 09:47
#2
:)
Any ideas?
Sat, 2012-02-25 22:52
#3
Here is the code for my html
Here is the code for my html page and css if that helps.
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>The Art and Animation of Daniel Smith</title> <link rel="Stylesheet" href="scripts/dimind.css" media="all" /> <!--[if IE 6]> <link rel="stylesheet" href="scripts/ie.css" type="text/css" /> <![endif]--> <script src="scripts/jquery-1.5.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>'); </script> <script type="text/javascript" src="scripts/fancy/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="scripts/fancy/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="scripts/fancy/fancybox/jquery.fancybox-1.3.4.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { /* * Examples - images */ $("a[rel=tutorials]").fancybox({ 'padding' : '1', 'transitionIn' : 'fade', 'transitionOut' : 'fade', 'titlePosition' : 'over', 'overlayOpacity' : '0.5', 'overlayColor' : '#000000', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } }); $(document).ready(function(){ $(".extLink").fancybox({ 'padding': '1', 'width' : 800, 'height' : '75%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' }); }); }); </script> </head> <body> <div id="wrapper"> <div id="content"> <h1><a href="/"> <img src="images/DiMind_tDM.png" alt="DiMind: The Digital Mind" /></a></h1> <h2> <img src="images/The_art_and_animation_of_Daniel_Smith.png" alt="The art and animation of Daniel Smith" /></h2> <ul id="nav"> <li id="Animation"><a> <img src="images/dd0_animation.png" alt="Galleries" width="94" height="88" /></a> <ul> <li><a href="demoreel.html"> <img src="images/dd_demoreel.png" alt="Illustration" /></a></li> <li><a href="animation.html"> <img src="images/dd_animation.png" alt="Concept Design" /></a></li> <li><a href="stills.html"> <img src="images/dd_stills.png" alt="Photography" /></a></li> </ul> </li> <li id="Galleries"><a> <img src="images/dd0_galleries.png" alt="Galleries" width="83" height="88" /></a> <ul> <li><a href="illustration.html"> <img src="images/dd_illustration.png" alt="Illustration" /></a></li> <li><a href="concept.html"> <img src="images/dd_concept_design.png" alt="Concept Design" /></a></li> <li><a href="photo.html"> <img src="images/dd_photography.png" alt="Photography" /></a></li> <li><a href="graphic.html"> <img src="images/dd_g_design.png" alt="Animation" /></a></li> </ul> </li> <li id="Profile"><a> <img src="images/dd0_profile.png" alt="Profile" width="60" height="88" /></a> <ul> <li><a href="about_me.html"> <img src="images/dd_about_me.png" alt="About Me" /></a></li> <li><a href="resume.html"> <img src="images/dd_resume.png" alt="Resume" /></a></li> </ul> </li> <li id="Resources"><a> <img src="images/dd0_Resources.png" alt="Resources" width="91" height="88" /></a> <ul> <li><a href="textures.html"> <img src="images/dd_free_textures.png" alt="Free Textures" /></a></li> <li><a href="tutorials.html"> <img src="images/dd_tutorials.png" alt="Tutorials" /></a></li> <li><a href="links.html"> <img src="images/dd_links.png" alt="Links" /></a></li> <li><a href="store.html"> <img src="images/dd_store.png" alt="Store" /></a></li> </ul> </li> <li id="Contact"><a href="contact.html"> <img src="images/dd0_contact.png" alt="Contact" width="77" height="88" /></a></li> <li id="Blog"><a href="http://dimind.blogspot.com/"> <img src="images/dd0_blog.png" alt="Blog" width="50" height="88" /></a></li> <li id="Facebook"><a href="http://www.facebook.com/#!/profile.php?id=82800710" target=”_blank”> <img src="images/facebook.png" alt="Facebook" width="63" height="88" /></a></li> <li id="LinkedIn"><a href="http://www.linkedin.com/pub/daniel-smith/5/649/824" target=”_blank”> <img src="images/linkedin.png" alt="LinkedIn" width="31" height="88" /></a></li> </ul> <div id="slideShow"> <div id="tutorialsInfo"> <div id="tutorialsText"> <img src="images/dd0_animation.png" alt="Galleries" width="94" height="88" /><br><br> <p>All photos and/or other images in this website are the property of the respective copyright holder(<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" />. No image or video may be copied, reproduced, transmitted or stored in any form, manner or by any method including but not limited to print, computer image, flash component, video, streaming and/or animation, for any/all commercial purposes except for strictly academic (archival) purposes and/or personal enjoyment. Publication and redistribution is expressly prohibited without prior written consent.</p> <p>Copyright Daniel Smith 2004-2011. All rights reserved.</p> <a class="extLink" href="http://dimind.net"> <img src="tutorials/images/INT_LPicnic_THM.jpg" /><br><!-- Link text can go here --></a><br><br> <p>All photos and/or other images in this website are the property of the respective copyright holder(<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" />. No image or video may be copied, reproduced, transmitted or stored in any form, manner or by any method including but not limited to print, computer image, flash component, video, streaming and/or animation, for any/all commercial purposes except for strictly academic (archival) purposes and/or personal enjoyment. Publication and redistribution is expressly prohibited without prior written consent.</p> <p>Copyright Daniel Smith 2004-2011. All rights reserved.</p> <a rel="images" href="images/news/LAWeekly_Sex.jpg" title="Mosh"><img alt="" src="images/news/NEWS_LA_Weekly_Sex_THM.jpg" /></a><br> <strong>COVER GIRL: LA Weekly's "The Sex Issue" - Feb 9th - Feb 15th</strong><br><br> <p>All photos and/or other images in this website are the property of the respective copyright holder(<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" />. No image or video may be copied, reproduced, transmitted or stored in any form, manner or by any method including but not limited to print, computer image, flash component, video, streaming and/or animation, for any/all commercial purposes except for strictly academic (archival) purposes and/or personal enjoyment. Publication and redistribution is expressly prohibited without prior written consent.</p> <p>Copyright Daniel Smith 2004-2011. All rights reserved.</p> <p>All photos and/or other images in this website are the property of the respective copyright holder(<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" />. No image or video may be copied, reproduced, transmitted or stored in any form, manner or by any method including but not limited to print, computer image, flash component, video, streaming and/or animation, for any/all commercial purposes except for strictly academic (archival) purposes and/or personal enjoyment. Publication and redistribution is expressly prohibited without prior written consent.</p> <p>Copyright Daniel Smith 2004-2011. All rights reserved.</p> <p>All photos and/or other images in this website are the property of the respective copyright holder(<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" />. No image or video may be copied, reproduced, transmitted or stored in any form, manner or by any method including but not limited to print, computer image, flash component, video, streaming and/or animation, for any/all commercial purposes except for strictly academic (archival) purposes and/or personal enjoyment. Publication and redistribution is expressly prohibited without prior written consent.</p> <p>Copyright Daniel Smith 2004-2011. All rights reserved.</p> <p>All photos and/or other images in this website are the property of the respective copyright holder(<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" />. No image or video may be copied, reproduced, transmitted or stored in any form, manner or by any method including but not limited to print, computer image, flash component, video, streaming and/or animation, for any/all commercial purposes except for strictly academic (archival) purposes and/or personal enjoyment. Publication and redistribution is expressly prohibited without prior written consent.</p> <p>Copyright Daniel Smith 2004-2011. All rights reserved.</p> <p>All photos and/or other images in this website are the property of the respective copyright holder(<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" />. No image or video may be copied, reproduced, transmitted or stored in any form, manner or by any method including but not limited to print, computer image, flash component, video, streaming and/or animation, for any/all commercial purposes except for strictly academic (archival) purposes and/or personal enjoyment. Publication and redistribution is expressly prohibited without prior written consent.</p> <p>Copyright Daniel Smith 2004-2011. All rights reserved.</p> <p>All photos and/or other images in this website are the property of the respective copyright holder(<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" />. No image or video may be copied, reproduced, transmitted or stored in any form, manner or by any method including but not limited to print, computer image, flash component, video, streaming and/or animation, for any/all commercial purposes except for strictly academic (archival) purposes and/or personal enjoyment. Publication and redistribution is expressly prohibited without prior written consent.</p> <p>Copyright Daniel Smith 2004-2011. All rights reserved.</p> <p>All photos and/or other images in this website are the property of the respective copyright holder(<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" />. No image or video may be copied, reproduced, transmitted or stored in any form, manner or by any method including but not limited to print, computer image, flash component, video, streaming and/or animation, for any/all commercial purposes except for strictly academic (archival) purposes and/or personal enjoyment. Publication and redistribution is expressly prohibited without prior written consent.</p> <p>Copyright Daniel Smith 2004-2011. All rights reserved.</p> </div> </div> </div> <div id="footer"> <p><span id="version">v. 3.0</span>The content provided within this site is for personal use only. Publication and redistribution is expressly prohibited without prior written consent.</p> <p id="copyright"><a href="copyright.html"><span>To see the full copyright notice, please click here.</span></a></p> <p>© 2004-2011 Daniel A. Smith. All rights reserved.</p> </div> </div> </div> </body> </html>
CSS
html, body { color: #000000; height: 100%; margin: 0; padding: 0; width: 100%; } body { background: #464541 url(../images/BG_Dark_Left.png) repeat-y fixed top left; } h1 { color: transparent; float: left; margin: 0 0 0 2px; padding-left: 26px; } h1 a { color: transparent; } h1 img { border: none; display: block; } h2 { height: 45px; margin: 0; overflow: hidden; padding: 0; position: absolute; right: 0; top: 0; } h2 img { display: inline; } h3 { color: #fff; margin: 0; padding: .5em 0 0 0; text-align: center; } A:link {text-decoration: none; color: white; border: transparent;} A:visited {text-decoration: none; color: white; } A:active {text-decoration: none; color: white; } A:hover {text-decoration: none; color: white; } img {border: transparent; } #wrapper { background: transparent url(../images/BG_Dark_Right.png) repeat-y fixed top right; border: 0; min-height: 100%; width: 100%; } #slideShow, #main { background: url(../images/slideshowBG.png) no-repeat left top; margin: -58px auto 0 auto; overflow: hidden; padding: 0 26px 0 16px; position: relative; } #main { background: url(../images/533.png) repeat-y left top; color: #fff; height: 533px; margin-left: 16px; position: relative; } #store { height: 531px; margin-top: 1px; overflow: auto; width: 930px; } #contentHead { background: url(../images/BG.png) repeat-y left top; margin: -58px auto 0 -4px; } #slideShow img { display: block; height: 529px !important; width: 943px !important; } #fadeshow1 ,#animationInfo { border: solid 1px #fff; height: 529px; overflow: hidden; width: 943px; z-index: 0; } #animationInfo { background: url(../images/BG_Animation.jpg); position: relative; } #animationText { left: 80px; height: 520px; overflow: auto; position: absolute; width: 780px; top: 16px; } #animationText p { font-family: Verdana, Sans-Serif; font-size: .7em; color: white; margin: 0; padding: 0 .3em .8em 0; } #fadeshow1 ,#tutorialsInfo { border: solid 1px #fff; height: 529px; overflow: hidden; width: 943px; z-index: 0; } #tutorialsInfo { background: url(../tutorials/BG/BG_Tut.jpg); position: relative; } #tutorialsText { left: 520px; height: 510px; overflow: auto; position: absolute; width: 420px; top: 10px; } #tutorialsText p { color: white; font-family: Verdana, Sans-Serif; font-size: .75em; margin: 0; padding: 0 .3em .8em 0; } #fadeshow1 ,#copyrightInfo { border: solid 1px #fff; height: 529px; overflow: hidden; width: 943px; z-index: 0; } #copyrightInfo { background: url(../images/BG_Copyright.jpg); position: relative; } #copyrightText { left: 466px; height: 362px; overflow: auto; position: absolute; width: 380px; top: 130px; } #copyrightText p { font-family: Verdana, Sans-Serif; font-size: .75em; margin: 0; padding: 0 .3em .8em 0; } #fadeshow1 ,#demoInfo { border: solid 1px #fff; height: 529px; overflow: hidden; width: 943px; z-index: 0;} #demoText { left: 30px; height: 362px; color: white; overflow: auto; position: absolute; width: 436px; top: 40px; } #demoText p { font-family: Verdana, Sans-Serif; font-size: .8em; color: #000000; margin: 0; padding: 0 .1em .8em 0; } #demoInfo{ background: url(../images/BG_animation.jpg); position: relative; } #fadeshow1 ,#aboutInfo { border: solid 1px #fff; height: 529px; overflow: hidden; width: 943px; z-index: 0;} #aboutText { left: 30px; height: 362px; color: white; overflow: auto; position: absolute; width: 336px; top: 40px; } #aboutText p { font-family: Verdana, Sans-Serif; font-size: .8em; color: #000000; margin: 0; padding: 0 .1em .8em 0; } #aboutInfo{ background: url(../images/BG_About.jpg); position: relative; } #fadeshow1 ,#resumeInfo { border: solid 1px #fff; height: 529px; overflow: hidden; width: 943px; z-index: 0;} #resumeText { left: 30px; height: 362px; color: black; overflow: auto; position: absolute; width: 436px; top: 40px; } #resumeText p { font-family: Verdana, Sans-Serif; font-size: .8em; color: black; margin: 0; padding: 0 .1em .8em 0; } #resumeInfo{ background: url(../images/BG_Resume.jpg); position: relative; } #fadeshow1 ,#contactInfo { border: solid 1px #fff; height: 529px; overflow: hidden; width: 943px; z-index: 0;} #contactText { left: 30px; height: 462px; color: white; overflow: auto; position: absolute; width: 436px; top: 40px; } #contactText p { font-family: Verdana, Sans-Serif; font-size: .8em; color: #cccccc; margin: 0; padding: 0 .1em .8em 0; } #contactInfo{ background: url(../images/BG_Contact.jpg); position: relative; } .ie #slideShow, .ff3 #slideShow { margin-top: -56px; } #nav { color: transparent; height: 112px; margin: 0 0 0 279px; padding: 45px 0 0 10px; width: 695px; } #nav img { border: none; } .ff3 #nav, .ie #nav { padding-top: 43px; } #nav li { display: block; float: left; height: 44px; line-height: 44px; list-style: none; position: relative; } #nav li a { display: block; position: relative; } #nav li a img { display: block; position: absolute; } #nav li a:hover img, #nav > li:hover > a > img { top: -44px; } #nav li ul { background: #e0e0e0 url(../images/dropdownShadow.png) no-repeat 0 0; border: solid 1px #0a0a0a; margin: 0; padding: 0; position: absolute; top: 38px; left: -9999px; width: 152px; z-index: 40; } #nav li ul li { border-bottom: solid 1px #c3c3c3; height: 27px; margin: 0 6px; width: 140px; } #nav li ul li:last-child { border: none; } #nav li ul a { background: none; display: block; height: 27px; padding: 0; position: relative; width: 100%; } #nav li ul a img { display: block; position: absolute; top: 0; } #nav li ul a:hover img { top: -27px; } #nav li ul a.last { border: none; } #nav a { color: transparent; display: block; height: 44px; overflow: hidden; text-decoration: none; width: 100%; } #nav li:hover ul { left: auto; } li#Animation { width: 104px; } li#Galleries { width: 98px; } li#Profile { width: 74px; } li#Resources { width: 100px; } li#Contact { width: 88px; } li#Store { width: 66px; } li#Blog { width: 60px; } li#Facebook { float: right; margin-right: 4px; width: 63px; } li#LinkedIn { float: right; width: 31px; } li#nav li:hover { background-position: 0 -44px; } #content { background: url(../images/contentBG.png) no-repeat 10px top; margin: 0 auto; padding: 0 0 0 26px; position: relative; width: 1000px; } #footer { background: url(../images/footer.png) no-repeat 21px top; height: 59px; margin: 0 auto; position: relative; width: 1000px; } #footer p { display: none; } p#copyright { display: block; height: 12px; left: 232px; padding: 0; position: absolute; top: 4px; width: 254px; } p#copyright a { display: block; height: 100%; width: 100%; } p#copyright a span { display: none; } p { padding: 1em; }
Sat, 2012-02-25 23:08
#4
Weekends
Keep in mind we're entering the weekend; it may take a bit longer for a helpful response.
cheers,
gary
Tue, 2012-02-28 00:09
#5
Any ideas? I am hoping it is
Any ideas?
I am hoping it is just an easy fix that I am not seeing.
Tue, 2012-02-28 00:49
#6
Why do you have
Why do you have this?
#slideShow img {
display: block;
height: 529px !important;
width: 943px !important;
}
cheers,
gary
Tue, 2012-02-28 01:38
#7
That is for my main page. If
That is for my main page. If you check out www.dimind.net the first rotating image is the slideshow. That is in there for the rotating image and the BG image size.
I have it in the other pages, and it has not affected the images posted. Only in this new one.
Tue, 2012-02-28 06:14
#8
So, get rid of the height and
So, get rid of the height and widths anyway. I see no difference. It definitely fixes the problem page, and doesn't appear to affect the other.
cheers,
gary
Tue, 2012-02-28 23:32
#9
Is there any way to override
Is there any way to override that code within the css section pertinent to the tutorials page or html of the page itself rather than changing a piece of code that effects every page?
Thanks again for the help,
-d
Wed, 2012-02-29 05:07
#10
???
You can make the selector more specific. Why can you not follow my suggestion?
cheers,
gary
Wed, 2012-02-29 05:37
#11
I gave it a shot and it looks
I gave it a shot and it looks like everything is good. I am just nervous when editing something that will affect a large amount of pages for one small problem. Also, the person who helped me with the CSS wrote in "important!" next to those notes, so I thought it might be... important.
Thanks for the help and here is to hoping my internet doesn't explode for going with such a daring move!