SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image resizing to browser size css/jquery

    Hello,

    I'm using jquery and the cycle plugin to cycle through a few images on my homepage inside a container.When i load the website at any browser size, it seems to do the proper thing. The problems arise when i try to make the browser bigger or smaller after that, it does funky things to the images. If you begin to scale the browser when the first image is displayed, it also seems to scale properly for that first image, but goes haywire after that. It pretty much does it in all browsers and i can't seem to figure out if it's something im not setting properly within css or if it have something to do with jquery and the cycle plugin.

    here's the website thus far:

    www dot beaucoupla dot com

    this is my first time writing code

    Code CSS:
    @charset "utf-8";
    /* CSS Document */
     
    #mainWrapper {
    	/*
    	background:#000 right top no-repeat; 
    	min-width:1000px;
    	min-height:775px;
    	border:0px;
    	background-color:#000; */
    	padding: 0 0 0 1px;
    	margin:0;
    	top:0;
    	left:0;
    	width:100%;
    }
     
    .mainbar { 
    	position:absolute;
    	top:0px;
    	left:0px;
    	display:none;
    	visibility:hidden;
    	width:78%;
    	min-height:100%;
    	height:auto;
    	/*This works for IE7
    	min-height:775px;
    	height:775px;*/ 
    	border-right: #FFF solid medium;
    }
     
    #imagelist {
    	left:0;
    	position:absolute;
    	display:block;
    	visibility:visible;
    	/* width:auto; static size */
    }
     
    #imagelist img {
    	display:block;
    }
     
    #imagelist img.first {
    	display:block;
    }
     
    .theimage {
    	position:absolute;
    	left:0;
    	width:100%;
    	/* Adding this works for IE7 */
    	/* height:775px; */
    	border-right: solid #FFF medium;
    }
     
     
    #podcast {
    	/*right:303px; */
    	position:absolute;
    	top:0px;
    	left:0px;
    	height:100%;
    }
     
     
    .about_info p {
    	font-size:1.1em;
     
    }
     
    .contact_info, .about_info, .news_info {
    	position:relative;
    	margin-top:4em;
    	margin-left:10%;
    	width:78%;
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:1.3em;
    	color:#FFF;
    	height:100%;
    }
     
    .contact_info #title, .about_info #title, .news_info #title {
    	font-size:1.75em;
    	padding-bottom:1.5em;
    	color:#1ac089;
    	color:#03c5d1;
    }
    .contact_info .heading {
    	color:#c04141;
    	font-size:1.2em;
    }
     
    .contact_info .mail {
    	text-decoration:underline;
    }
     
    .contact_info a:hover {
    	color:blue;
    	text-decoration:underline;
    }
     
    .news_info .heading {
    	color:#c04141;
    }
     
     
     
    body {
    	/*width:1400px;
    	height:775px;*/
    	padding:0;	
    	margin:0;
    	border:0;
    	background-color:#000;
    }
     
     
     
    #share td {
    	padding-left:0.5em;
    }
     
     
    #share {
    	margin-left:1.4em;
    	margin-top:0;
    	border-top:0;
    	/* padding-top:5; */
    	font-size:0.65em;	
    }
     
    .sidebar {
    	position:relative;
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	margin-left:78%;
    	margin-top:1em;
    	font-size:2em;
    	color:#FFF;
    }
     
     
    ul {
    	border:0;
    	margin:2px;
    	text-decoration:none;
    }
     
    li {
    	list-style:none;
    }
     
    a {
    	text-decoration:none;
    	color:#FFF;
    }
     
    a.home:hover {
    	color:#bc7bd4;
    }
     
    a.news:hover {
    	color:#7bd488
    }
     
    a.podcast:hover {
    	color:#d47b88;
    }
     
    a.blog:hover {
    	color:#d4cb7b;
    }
     
    a.about:hover {
    	color:#7bd4c6;
    }
     
    a.contact:hover {
    	color:#d4a37b;
    }
     
    a.twitter:hover {
    	color:#33ccff;
    }
     
    a.myspace:hover {
    	color:#999;
    }
     
    a.facebook:hover {
    	color:#5b61d5;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi jtodap. Welcome to SitePoint!

    Yeah, the site is badly broken in my Firefox browser. There's a very small height set on those images (19px) which isn't helping at all. It's probably inserted by the Javascript.

    Frankly, I's suggest looking at some different scripts. These two in particular are very reliable:

    http://www.buildinternet.com/project...ed/default.php

    http://growmedia.ca/blog/2009/10/14/...-aspect-ratio/

    http://www.search-this.com/2008/06/1...ground-images/

    http://www.ajaxblender.com/bgstretch...nd-plugin.html

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, most of that page is absolutely positioned and you should never use AP for the structure of a website. It will always fail when you try and test different screen sizes, etc. There is just no flow to it . It can be broken easily. AP should be used for small design details and other small parts of a website.

    Your code is also error prone and bug prone. I'd recommend st arting from sc ratch and rework it to floats instead
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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