|
CSS - Fixed Image/resolution Detection
Hey there! New to code, sort of flying blind but learning a lot as I go along.
I'm also kind of shooting for the stars with my design decisions. I was wondering if anyone here has any idea how to mimic the rotating image on Blizzard's website. (As I cannot post the URL, I assume everyone can figure out how to get to Blizzard Entertainment's website easy enough). If you zoom in and out on it, it remains static even as the pieces around it resize over it (this also happens at smaller resolutions). I would desperately like to know how to get it to lock flush against the side of the window like that. Additionally, you'll notice that it doesn't pop a scrollbar onto the window until you shrink the window smaller than the central content. I guess a bigger question is, is this even something achievable in CSS? Do I have to delve into Flash or Javascript to do it, and if so, does anyone know how? Thank you so much in advance! Similar TutorialsI have a web page with three columns. The column on the right is the menu column which i want to keep in a certain position even when the user scrolls down. I know how to do this using css, but the problem is that if the resolution changes so does the position of the column. Is there a way to fix the position only from the top of the browser window and use the center column (or container that holds the 3 columns) for the horizontal alignment? Thanks in advance 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 Hello. So I have this situation (on the right): h t t p : / / img339.imageshack.us/img339/6958/1stb.png and when I change my browser resolution, I get this (on the right): h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text. Thanks in advance for any suggestions and tips. I'm attempting to use the Declaration of Independence as the background for my site. It is much longer than wide, but I want to display all of it. So I want the background to stop scrolling when the bottom of the image is reached at the bottom of the browser window while still allowing content to scroll on top of it. I have seen this done with a completely fixed background, but not with a partially scrolling background. Does anyone know how, or even if, this can be done? Need to know if it is possible to specify alt text for a fixed background image. background-image:url(cssback.gif); background-repeat:no-repeat; background-position:50px 355px; Any insight as to whether or not this is possible would be greatly appreciated. Hey everyone, im having a problem. I am trying to get a picture fixed at the bottom of the screen and am stuck. Do i do it as a footer or do i do something else? Can anyone help me please cheers. Hi All, I'm trying to add an image that will remain fixed on the screen, and I'm having a hard time positioning it using CSS. I already have a background image for the body (which is tiled), and this image needs to sit above that image, but below the rest of the content. Here's my code as it stands now: CSS: Code: @charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-image: url(../assets/images/space_2_background.jpg);
background-repeat: repeat;
margin: 0;
background-attachment: fixed;
}
.oneColElsCtrHdr #sirius2 {
background-image: url(../assets/images/sirius_2.png);
background-repeat: no-repeat;
position: fixed;
padding-top: 123px;
padding-left: 743px;
}
.oneColElsCtrHdr #container {
width: 58em;
border: 1px solid #000000;
text-align: left;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 30px;
padding-bottom: 30px;
}
.oneColElsCtrHdr #header {
background-image: url(../assets/images/header_background.png);
background-repeat: no-repeat;
height: 73px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 20px;
}
.oneColElsCtrHdr #header h1 {
margin: 0;
}
.oneColElsCtrHdr #logo {
padding-top: 15px;
padding-left: 3px;
}
.oneColElsCtrHdr #mainContent {
background-image: url(../assets/images/page_1_background.png);
background-repeat: no-repeat;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
padding-top: 0px;
height: 520px;
}
.oneColElsCtrHdr #footer {
background-image: url(../assets/images/footer_background.png);
background-repeat: no-repeat;
height: 244px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
.oneColElsCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sphere Nine Media</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body class="oneColElsCtrHdr"> <div id="sirius2"></div> <div id="container"> <div id="header"> <div id="logo"><img src="assets/images/sphere_nine_logo_v9.0.1(website).png" alt="Sphere Nine Media Logo" width="191" height="37" /></div> <!-- end #header --></div> <div id="mainContent"> <!-- end #mainContent --> </div> <div id="footer"> <!-- end #footer --></div> <!-- end #container --></div> </body> </html> The code specific to this image is in bold red . I've tried coding this image both as a straight image and a background image, and I've gone through numerous iterations of changing positioning/padding/margin values, to no avail. The current code is the only variation I've happened upon that actually renders the image on the screen - you can see it live at http://www.spherenine.com/. Please let me know if this can be done using my current approach, or if there's a better way to accomplish it. I'll be happy to provide additional info if necessary. Thanks in advance. Sam Hi all, Okay, so I've got a page with a central column which has a drop-shadow and a background image... The obvious problem is that the repeated background image doesn't always line-up with the background image in the dropshadow. Plus, The backround image changes position whenever the page is resized. So I was looking here, to see if I could find the code to center the background image in the screen, and make it a fixed position, but even then, when you resize the page, the background image seems to move with it. Does anyone know how to fix a background image so that it will stay aligned with the central content/dropshadow of the page? Thanks. Hello all i am having trouble with getting a layer to stay put when i school down the page. This is my code: Code:
#Layer1 {
position:absolute;
width:64px;
height:73px;
z-index:1;
left: 0px;
top: 101px;
}
<div id="Layer1">
<div align="left"><img src="images/gun.gif" width="58" height="73" /></div>
</div>
Everytime i scroll down the image goes with it. I need it stay where i put it without moving at all. If anyone could help then that would be great David I'm pretty new to using CSS so please be gentle I'm trying to hack (develop is to lofty a word at this point) this tableless page and get the bg image to stick to the right/top corner of the "content" div. IE6 renders it pretty well but Firefox (my preferred browser) is horrendous. The image size is 400x392. Any thoughts or a good reference on this would be greaty appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css"> #container { width: 760px; width: 780px; width: 760px; border: 1px solid gray; margin: 10px; margin-left: auto; margin-right: auto; padding: 10px; } #banner { padding: 5px; margin-bottom: 5px; background-color: rgb(213, 219, 225); } #content { padding: 5px; margin-left: 215px; background-color: gray; background-attachment: fixed; background-image: url(images/bg_run.jpg); background-repeat: no-repeat; height: 400px; background-position: right top; } #sidebar-a { float: left; width: 200px; \width: 210px; w\idth: 200px; margin: 0; margin-right: 5px; padding: 5px; background-color: rgb(235, 235, 235); } #footer { clear: both; padding: 5px; margin-top: 5px; background-color: rgb(213, 219, 225); } </style> </head> <body> <div id="container"> <div id="banner">Banner</div> <div id="sidebar-a">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </body> </html> I really need a code. It is for a Multiple Fixed Floating Images at specific margins Fixed is very important. AKA. Scrolls with page. margins are img1 - left: 40px top: 40px img2 - left 56px top: 300px; Thank You Very Much. -Please Help! --nick11682 How can I fix a Div a set distance below another Div without a set height? Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. I have a page dien all in css that is all set for 800x600 resolution. Does any one know how I can detect larger screen size/resolutions and center the entire page for these instances thanks JT Hello all! Is there a way to set a resolution % for a certain type of resolution size and any above that resolution to another specific % For example I want it to be: 1024x 768 : width : 90%; and anything higher than 1024x 768 to be 80% since 90% on a resolution higher than 1024 for my navigation is just too make of a banner. Please help/advice. Regards, Kingofqueens. I've just recently started using CSS, and unlike tables, I have no clue how the heck to autostretch the layout. Could someone to tell me how to make my page "adapt" to different resolutions for CSS? I don't want to have to make seperate styles for each resolution, is there a simple property and value that I can just insert somewhere with the position property? thanks (sorry i posted this again, I just felt the other post was not clear) Hello, whats your opinion and experience? Wich is the best way to serve diferent css depending on resolution? Using media like this and serve several diferent stylesheets? <link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 321px) and (max-width: 768px)"> or using this: @import url("tablet.css") screen and (min-width:321px) and (max-width:768px); And is it posible and good or bad idea to have one .css file with diferent css depending on resolution. Is it better to detect resolucion with only javascript? Thanks, appreciate help as I am very stressed and have so many things to fix urgently. Hi All, I have a fixed div which I am using as a footer in my application. here is the screen shot of my page please have a look first so u will understand what i am talking about. http://img192.yfrog.com/img192/5572/1280x768.gif Problem is that if I browse the application on 1024 x 768 pixels it works great but when i change the resolution up to 1280 x 800 pixels the image inside the div change its position. I want this to appear same on every resolution...any suggestions or workaround. the CSS code is below Code:
#footer
{
position: fixed;
top: auto;
left: auto;
width: auto;
}
here is the HTML Code:
<html>
<head id="Head1" runat="server">
<link href="../App_Themes/style.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"> </script>
<title></title>
<style type="text/css">
.style1
{
width: 800px; background-color:White
}
.style2
{
height: 391px;
}
.style3
{
text-align: right;
}
</style>
</head>
<body bgcolor="#d7d7d7">
<form runat="server">
<div id="content" style="margin: auto; border: thin solid #C0C0C0; padding: 0px 0px 0px 0px; width: 820px; height: 595px"
align="center">
<table align="center" class="style1">
<tr>
<td style="font-family: 'Times New Roman', Times, serif; font-size: small; color: #FF0000;"
class="style3">
<asp:ContentPlaceHolder ID="StatusBar" runat="server">
</asp:ContentPlaceHolder>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/appHeader.png" />
</td>
</tr>
<tr>
<td class="style2" align="left" valign="top">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<%--<td style="background-color: #FF9933; height: 15px;">
</td>--%>
</tr>
</table>
<div id="footer">
</div>
<%-- <table align="center" class="style1">
<tr>
<td>
<div id="footer">
<img src="../images/footer.png" alt=""/>
</div>
</td>
</tr>
</table>
--%> </div>
</form>
</body>
</html>
I want a table below the container div and want to place my footer div inside that table and on every resolution it should come up the same...i did try but its not working...help need I am in the process of designing a website and I have dual monitors at home, one is using 1024x768, and other is using 1280x1024 resolution. The website I have designed, off course looks different from one resolution to the other. One the less resolution monitor, the site looks big (my masthead is 750x200 and the whole page is approximately 770x900), however, on the high resolution, the site looks tiny. on 1200 wide resolution my page width is only 770, so there is white (in my case blue) space both sides making it look not so good. Because of the above reason, the site looks big on one monitor and very tiny on the other. I am sure there would be lots of people out there with those two kinds of resolutions (I am mostly concerned about these two resolutions). I wonder how do people deal with this when they are designing a website? Could one find out the resolution of the monitor ahead of time (before displaying the page) and have different css/images be loaded based on the monitor it is being viewed? Is there a concept of floating site -- what I mean by that is if there is a concept of site automatically changing appearance based on screen resolution? Thanks!!! |
|||||||