|
CSS - 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.beaucoupla.com this is my first time writing code so please any help would be appreciated! Code:
@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;
}
Similar TutorialsHi, Here's the site I'm working with: http://www.cjfusion.com I want to get that image centered on the browser window and then depending on how big the viewers screen is, the browser will cover up the left and the right. I hope that makes sense. I almost want it to be fluid, but I'm unsure how to do that. Ask questions if this doesnt make sense. Its hard to explain. -CJ So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B Trying to use jQuery UI aqccordions for a simple news widget on a site. I have created my widget and everything works and looks great but when I click a widget the containing div resizes and makes the whole page bump down a bit. I dont want to use any hard coded dimesnsions that are longer than the box since it would lose its effect. I need to keep the whole div able to resize whith the screen reolution. Code: <div id="newsAccordion" class="ui-accordion ui-widget ui-helper-reset"> <h3 style="line-height:0.3;" class="accordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" id="accordionTitle1"> <span class="widgetHeadline">Add news article 1 here</span> </h3> <div class="accordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="accordionContent1" style="padding: 2px 5px;" > <span>News article 1 content</span> </div> <h3 style="line-height:0.3;" class="accordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" id="accordionTitle1"> <span class="widgetHeadline">Add news article 2 here</span> </h3> <div class="accordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="accordionContent2" style="padding: 2px 5px;"> <span class="rightJustifiedAccordion">News article 2 content here</span> </div> <h3 style="line-height:0.3;" class="accordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" id="accordionTitle1"><span class="widgetHeadline">News article 3</span></h3> <div class="accordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="accordionContent2" style="padding: 2px 5px;"> <span>News article 3 content here</span> </div> </div> Thanks in advance, Jim Hi, I've been trying for a while to get to grips with this css lark, but i find some of it really confusing, not being able to make sites that look the same in all browsers without using tables. So here I arrive at my latest problem. I have made a static site, where resizing the browser doesn't adjust the size of the content. In my logic this ought to mean that scroll bars should appear when the content is bigger than the window, but oh no, everything is just hidden! Am I missing a vital trick here? The code: Code: <div class="title"> <img src="face.jpg" alt="Picture" width="75" height="75" /> <img src="title.jpg" alt="Title" width="300" height="88" /> </div> CSS: Code: .title {
position: fixed;
left: 10px;
top: 15px;
width: 375px;
height: auto;
}
Just to clarify: When, with the code above, the browser is resized to be small than the width of the div, I expect scroll bars to appear to be able to see the content, but currently it is just hidden. Can anyone help me? Thanks in advance hello guys,, I was wondering how to make a webpage take the full browser size and not over flow or be smaller than the browser window also atleast 800 x 600 thnx for ur time.. HMV So I've got a page on which a menu exists (or will) that is a certain width, I believe 854px. Now I know that this isn't the best idea, but I'm following someone's specific orders so meh. Now, my problem is that I want the page to resize according to the browser size and fill the page, so if the browser size is 1054 then I want the background image at the top to run the entire width of the page, and the menu, I'd want to center. Now if the browser is 854px or wider, then the page looks fine, but when the browser is anything less, then the menu, because it is a specific width, expands as it should as well as centers itself forcing a horizontal scroll bar, but the rest of the page is acting like it is ONLY 854px and therefore it cuts off and is now no longer centered with the menu. It must be possible to do, right? Here's a link to the page I'm using for debugging purposes http://www.agentjeff.com/headerv10.html In my web docs, in FF, the text size can be adjusted in the browser, but not in IE. Why would this be? I'm using points to define font size by the way. I am having few html pages with external CSS used. Now when i want to change the brower text using View->Text size, its not allowing. Yes, i can change the font size in my CSS but I dont want all should see in the same font. Few people viewing those pages may not like that font. So, Can any body help me to find out how to change the text size of an html page having CSS. Hi, is there any way to achieve this effect (pseudocode) with CSS? if (image width > 100) add property width="100" to all img tags ie. i want to make all images larger than 100 pixels scale down I am a novice at web authoring. I am working a jQuery slide show. I would like to make this slide show automatically resize to fit the browser window. But the show is contained in a div element which requires a fixed size in pixels. When I try to substitute percentages for pixel values, the images no longer appear. Please advise if there is a way to accomplish this resizing. Due to a prohibition against posting URLs for new user accounts, I can't provide a link to the slide show I am trying to resize, or a link to an example of the resizing behavior which I would like to emulate. Hey all, I have a couple of related questions. First off, is there a way to automatically resize a div or any other element to be the size of the background image. Basically I am trying to do all my images in the stylesheet to allow for easy skinning. I've been doing stuff like: Code: #myDiv {
background:url(graphics/cat.jpg);
height:75px;
width:75px;}
But manually setting the height and width gets really tedious after a dozen or so images. And a related question: manually setting the size of a div doesn't seem to work if I have display set to inline. I get divs that are zero width and zero height. But when I remove that line it works fine, except that I'd rather they be inline elements for positioning purposes. Thanks in advance. I need to add a background picture to my web form. I want that the picture should be dynamically resized to the client area of the browser, when the page loads How to do it using CSS? Hi I am trying to learn how to design and develop a website that has consistent behavior across browsers, browser window size and screen resolution. What are the industry best practices for designing and developing such websites. Your help is appreciated Thanks I've had an issue in the past where the background image creeps, or hangs, when resizing the window. To explain what I mean, check out this page: http://ridersresto.com/ this is the background image: http://ridersresto.com/images/main_bg.gif when you slowly resize the image, you will notice the background image on both sides of the page closing and opening a 1px gap. here is the CSS for the BG image: Code: body {
margin: 0;
padding: 0;
background-color: #131313;
color: white;
background-image: url(http://ridersresto.com/images/main_bg.gif);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: top center;
}
.frame {
margin: 0 auto 0 auto;
padding: 0;
width: 778px;
background-color: #000000;
color: white;
}
Code: <body> <div class="frame"> </div> </body> Is there a more efficient way of accomplishing this effect? Hi I am designing a page in which I want to include a background image that is anchored to the bottom right of the screen. I have managed to do this, the only problem I am having is that due to the image being a big one (dimensions) when the user's screen is of a lower resolution such as 800 x 600, the image takes over most of the page's background which is distracting from the main content. My idea is to have the image resize based on the user's screen resolution. Is this a feasible solution and if yes, how can it be achieved? Thanks Well, not exactly an image map, more like links on an image. You'll have to excuse some of my ignorance, I only started with CSS a little over a week ago...so you can imagine. I found this neat little trick and wanted to implement it on my site. I'm undertaking a redesign of our companies old site...which was terrible. I figured it would be a fine time to learn CSS. The idea here is that there are about 50 points on this map that are links to pdf files, we decided that it would be nice to be able to see little thumbnails and some basic info on each point without opening the pdf. The site does this just fine, but unfortunately won't work in anything lower than 1280x1024. I can't just resize the images because then the links will be messed up as they're posisioned by the pixel. I have no idea what to do to get this to work, it may just be a lost cause. If someone tells me to forget it, and it's just not going to work...I can live. It's really just a neat thing I wanted to see work, it's not crucial. Any ideas at all would be great, at the very least I might learn something Oh...here's the site: http://www.sanitaryengineer.co.medina.oh.us/gis/test.html Thanks a million Hello. How do you stretch a background-image so its height and width are equal to its parent? hey all..got a wierd one..well to me anyway ! hope someone can tell me what im doing wrong !! i have code like this Code:
#banner img {
height: 15em;
width: 25em;
margin: 0.5em;
}
to manage the size of an image but i want to add another image to the page and i can't the css can be found here and the page im working on can be found here if anyone has any ideas that wouldbe marvelous... thanks RF Hello, not entirely sure how to go about this, but I'm using Dreamweaver CS5 and I'm working on my home page. The way I have it set up is I have a "sidebar" to the left, then a large "main_image" to the right of that which begins my "container" div followed by some "body_copy" below that. Everything looks good when the window is in a max size. The problem arrises whenever I resize my window the main_image moves to below the sidebar and everything just seems to shift down... The main_image is set to relative so the body_copy text can form properly under it. Is there any way to have the image remain stationary despite window size? Thanks for your help!! Hi, I hope someone can help. I have a blog with a fluid design (as best I can) layout. Images are floated in the main post, with width and height specified as a %. Quite often when I first load a page with an image, the image is very small and anchored to the top left of a box (defined by a border) that is the correct dimensions. When I resize the window containing the blog, the images fill out the defined box and everything is fine. Can anyone help me avoid the erratic behavior when I first open a blog page? I'm using IE7 and IE8 and see the same thing in both browsers. I'd post the URL for the blog so anyone interested in helping could see what I mean, but as a relatively new member here, I am not allowed to do so. Thx in advance for any help that can offered. Bill |
|||||||