Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Images 50% bigger, can't create a footer and are my images too big?

    Hi,
    I am working on redesigning my portfolio site but have run into a few problems.

    JQuery Fancybox
    1.) I have a page that shows web ads I have done. 300 x 250 web ads are displayed in the Fancybox window alright, but when I get to my other web ads (728 x 90 or bigger) they are 50% bigger than what they should be. I am not familiar with JQuery at all other than what I copied onto my site for the Fancy Box feature so I don't know how to fix this. I have tried saving the web ads at different image qualities thinking that might be the problem, and even saved them at smaller sizes but they still didn't show up properly.

    Footer Doesn't Work
    2.) I want to add a footer at the bottom of my entire site that stays in one spot but will adjust its position based on how long the page is. I tried doing this with some code from CSS Tricks but I a) couldn't get the footer where I wanted it and b) the min-height value would disable a majority of the links for my portfolio pieces on my print ads page. I basically want a footer at the bottom of the site that can show my contact info and possibly some social media icons that link to my social media pages.

    Loading Pieces in Fancy Box is Slow
    3.) I just put my in progress portfolio site update online to see how it runs and came to find out that a lot of the images on the print ads page load fairly slowly. I read an article and several other posts saying the maximum size you want images you are loading onto a web page is 200KB. Granted not all of the images on the print ads page are close to 200KB but loading them in general seems slow considering what I read. Is this more an image quality/resolution issue?

    I really appreciate any feedback I can get. One thing I was unable to figure out before posting my code is how to read the validation errors for markup and css. It gave me quite a few errors just for the index page of my in progress portfolio site which I didn't understand so if anyone could point me in the right direction to some documentation on how to understand this I would greatly appreciate it.

    Also please let me know if I need to provide anything else aside from what I have already posted and if I need to tweak my posting in any way to make things easier for people to reply.

    Thanks.


    Garrett L Brzozowski | Print Ads
    Garrett L Brzozowski | Web Ads


    PRINT ADS CODE

    Code:
    <!DOCTYPE html PUBLIC
        "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <html>
            <head>
                <title>Garrett L Brzozowski | Print Ads</title>
                <link href="style.css" type="text/css" rel="stylesheet" />
                
                <!-- Add jQuery library -->
    	<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
    
    	<!-- Add fancyBox main JS and CSS files -->
    	<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
    	<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
    
    	<script type="text/javascript">
    		$(document).ready(function() {
    			/*
    			 *  Simple image gallery. Uses default settings
    			 */
    
    			$('.fancybox').fancybox();
    
    			/*
    			 *  Different effects
    			 */
    
    			// Change title type, overlay closing speed
    			$(".fancybox-effects-a").fancybox({
    				helpers: {
    					title : {
    						type : 'outside'
    					},
    					overlay : {
    						speedOut : 0
    					}
    				}
    			});
    
    			// Disable opening and closing animations, change title type
    			$(".fancybox-effects-b").fancybox({
    				openEffect  : 'none',
    				closeEffect	: 'none',
    
    				helpers : {
    					title : {
    						type : 'over'
    					}
    				}
    			});
    
    			// Set custom style, close if clicked, change title type and overlay color
    			$(".fancybox-effects-c").fancybox({
    				wrapCSS    : 'fancybox-custom',
    				closeClick : true,
    
    				openEffect : 'none',
    
    				helpers : {
    					title : {
    						type : 'inside'
    					},
    					overlay : {
    						css : {
    							'background' : 'rgba(238,238,238,0.85)'
    						}
    					}
    				}
    			});
    
    			// Remove padding, set opening and closing animations, close if clicked and disable overlay
    			$(".fancybox-effects-d").fancybox({
    				padding: 0,
    
    				openEffect : 'elastic',
    				openSpeed  : 150,
    
    				closeEffect : 'elastic',
    				closeSpeed  : 150,
    
    				closeClick : true,
    
    				helpers : {
    					overlay : null
    				}
    			});
    
    			/*
    			 *  Button helper. Disable animations, hide close button, change title type and content
    			 */
    
    			$('.fancybox-buttons').fancybox({
    				openEffect  : 'none',
    				closeEffect : 'none',
    
    				prevEffect : 'none',
    				nextEffect : 'none',
    
    				closeBtn  : false,
    
    				helpers : {
    					title : {
    						type : 'inside'
    					},
    					buttons	: {}
    				},
    
    				afterLoad : function() {
    					this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
    				}
    			});
    
    
    			/*
    			 *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
    			 */
    
    			$('.fancybox-thumbs').fancybox({
    				prevEffect : 'none',
    				nextEffect : 'none',
    
    				closeBtn  : false,
    				arrows    : false,
    				nextClick : true,
    
    				helpers : {
    					thumbs : {
    						width  : 50,
    						height : 50
    					}
    				}
    			});
    
    			/*
    			 *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
    			*/
    			$('.fancybox-media')
    				.attr('rel', 'media-gallery')
    				.fancybox({
    					openEffect : 'none',
    					closeEffect : 'none',
    					prevEffect : 'none',
    					nextEffect : 'none',
    
    					arrows : false,
    					helpers : {
    						media : {},
    						buttons : {}
    					}
    				});
    
    			/*
    			 *  Open manually
    			 */
    
    			$("#fancybox-manual-a").click(function() {
    				$.fancybox.open('1_b.jpg');
    			});
    
    			$("#fancybox-manual-b").click(function() {
    				$.fancybox.open({
    					href : 'iframe.html',
    					type : 'iframe',
    					padding : 5
    				});
    			});
    
    			$("#fancybox-manual-c").click(function() {
    				$.fancybox.open([
    					{
    						href : '1_b.jpg',
    						title : 'My title'
    					}, {
    						href : '2_b.jpg',
    						title : '2nd title'
    					}, {
    						href : '3_b.jpg'
    					}
    				], {
    					helpers : {
    						thumbs : {
    							width: 75,
    							height: 50
    						}
    					}
    				});
    			});
    
    
    		});
    	</script>
    	<style type="text/css">
    		.fancybox-custom .fancybox-skin {
    			box-shadow: 0 0 50px #222;
    		}
    
    		body {
    			max-width: 1150px;
    			margin: 0 auto;
    		}
    	</style>
            </head>
            <body>
    <a href="index.html"><img src="Geometric Logo.png" class="logo"></a>
                    <nav>
    	<ul>
    		<li><a href="home.html">Home</a></li>
    		<li>
          <a href="">Work <span class="caret"></span></a>
    			<div>
    				<ul>
    					<li><a href="">Print Ads</a></li>
    					<li><a href="webads.html">Web Ads</a></li>
                                            <li><a href="collateral.html">Collateral Materials</a></li>
                                            <li><a hreft="promos.html">Promotional Materials</a></li>
    					<li><a href="school.html">School </a></li>
    				</ul>
    			</div>
    		</li>
    		<li>
                    <a href="contact.html">Contact <span class="caret"></span></a>
                            <div>
                                    <ul>
                                        <li><a href="https://www.linkedin.com/pub/garrett-brzozowski/37/6aa/643" target="_blank">LinkedIn</a></li>
                                        <li><a href="https://www.behance.net/garrettbdesigns" target="_blank">Behance</a></li>
                                        <li><a href="https://twitter.com/kerninglife" target="_blank">Twitter</a></li>
                                    </ul>
                            </div>
                    </li>
    </nav>      
    
    	<div id="wrapper">
                
    <p class="one"><a class="fancybox" href="Print Ads/ANYTIME.FITNESS.2013.03.jpg" data-fancybox-group="fancybox-effects-b" title="Lorem ipsum dolor sit amet">
    <img src="Thumbnails/ANYTIME.FITNESS.2013.03.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="two"><a class="fancybox" href="Print Ads/ANYTIME.FITNESS.2013.09.jpg" data-fancybox-group="fancybox-effects-b" title="Cras neque mi, semper leon">
    <img src="Thumbnails/ANYTIME.FITNESS.2013.09.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="three"><a class="fancybox" href="Print Ads/ARBOR.CAR.WASH.2013.10.jpg" data-fancybox-group="fancybox-effects-b" title="Etiam quis mi eu elit temp">
    <img src="Thumbnails/ARBOR.CAR.WASH.2013.10.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="four"><a class="fancybox" href="Print Ads/BASTROP.RIVER.CO.2013.05.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/BASTROP.RIVER.CO.2013.05.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="five"><a class="fancybox" href="Print Ads/BASTROP.RIVER.CO.2013.07.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/BASTROP.RIVER.CO.2013.07.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="six"><a class="fancybox" href="Print Ads/CHANCES.R.2014.06.jpg" data-fancybox-group="fancybox-effects-b" title="Lorem ipsum dolor sit amet">
    <img src="Thumbnails/CHANCES.R.2014.06.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="seven"><a class="fancybox" href="Print Ads/DWI-420.DUDE.2013.09.jpg" data-fancybox-group="fancybox-effects-b" title="Etiam quis mi eu elit temp">
    <img src="Thumbnails/DWI-420.DUDE.2013.09.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="eight"><a class="fancybox" href="Print Ads/HARPERS.2013.01.jpg" data-fancybox-group="fancybox-effects-b" title="Cras neque mi, semper leon">
    <img src="Thumbnails/HARPERS.2013.01.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="nine"><a class="fancybox" href="Print Ads/HAVEN.2013.04.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/HAVEN.2013.04.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="ten"><a class="fancybox" href="Print Ads/HAVEN.2013.11.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/HAVEN.2013.11.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="eleven"><a class="fancybox" href="Print Ads/METROPOLITAN.APT.2013.04.jpg" data-fancybox-group="fancybox-effects-b" title="Lorem ipsum dolor sit amet">
    <img src="Thumbnails/METROPOLITAN.APT.2013.04.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="twelve"><a class="fancybox" href="Print Ads/NEW.WORLD.DELI.2012.09.jpg" data-fancybox-group="fancybox-effects-b" title="Etiam quis mi eu elit temp">
    <img src="Thumbnails/NEW.WORLD.DELI.2012.09.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="thirteen"><a class="fancybox" href="Print Ads/NEWWORLDDELI.2013.04.jpg" data-fancybox-group="fancybox-effects-b" title="Cras neque mi, semper leon">
    <img src="Thumbnails/NEWWORLDDELI.2013.04.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="fourteen"><a class="fancybox" href="Print Ads/OUTLAW.BOOTS.AND.ECLECTIC.EMPORIUM.2014.05.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/OUTLAW.BOOTS.AND.ECLECTIC.EMPORIUM.2014.05.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="fifteen"><a class="fancybox" href="Print Ads/POST.ROAD.2013.04.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/POST.ROAD.2013.04.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="sixteen"><a class="fancybox" href="Print Ads/QUEST.ATX.2014.03.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/QUEST.ATX.2014.03.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="seventeen"><a class="fancybox" href="Print Ads/QUEST.ATX.2014.04.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/QUEST.ATX.2014.04.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="eighteen"><a class="fancybox" href="Print Ads/SINNERS.SAINTS.SHAKE.2013.07.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/SINNERS.SAINTS.SHAKE.2013.07.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="nineteen"><a class="fancybox" href="Print Ads/SINNERS.SAINTS.WAFFLE.2013.07.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/SINNERS.SAINTS.WAFFLE.2013.07.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="twenty"><a class="fancybox" href="Print Ads/SPANKYS.2013.10.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/SPANKYS.2013.10.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="twentyone"><a class="fancybox" href="Print Ads/TEXAS.SKI.RANCH.2013.07.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/TEXAS.SKI.RANCH.2013.07.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="twentytwo"><a class="fancybox" href="Print Ads/TSR.2013.11.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/TSR.2013.11.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="twentythree"><a class="fancybox" href="Print Ads/TEXAS.STATE.TUBE.AUS.2014.04.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/TEXAS.STATE.TUBE.AUS.2014.04.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="twentyfour"><a class="fancybox" href="Print Ads/TEXAS.STATE.TUBE.AUS.2014.05.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/TEXAS.STATE.TUBE.AUS.2014.05.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="twentyfive"><a class="fancybox" href="Print Ads/THE_DEN.2014.02.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/THE_DEN.2014.02.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="twentysix"><a class="fancybox" href="Print Ads/TX.STATE.POLO.CLUB.2013.09.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/TX.STATE.POLO.CLUB.2013.09.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="twentyseven"><a class="fancybox" href="Print Ads/BOBCAT.VAPOR.2014.04.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/BOBCAT.VAPOR.2014.04.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    
    <p class="twentyeight"><a class="fancybox" href="Print Ads/BOBCAT.VAPOR.2014.06.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/BOBCAT.VAPOR.2014.06.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    <p class="twentynine"><a class="fancybox" href="Print Ads/VODKA.STREET.2013.06.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/VODKA.STREET.2013.06.THUMB.jpg" class="opacity" alt="" /></a></p>
    
    <p class="thirty"><a class="fancybox" href="Print Ads/XCAP.ARTIS.2014.01.jpg" data-fancybox-group="fancybox-effects-b" title="Sed vel sapien vel sem uno">
    <img src="Thumbnails/XCAP.ARTIS.2014.01.THUMB.jpg" class="opacity" alt="" /></a></p>
    
            </div>
    </div>
            </body>
        </html>

  • #2
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright so seeing as I have not gotten any feedback at all, can someone at least help me figure out how to properly place a header on my site? If anything that is the one thing I really want to come out of this post if anything. Any help or opinions would be GREATLY appreciated.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •