|
CSS - Image Behind The Text + Fixed Image Position
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. Similar TutorialsHello 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 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. I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image. My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it. Please help. Code: <style type="text/css">
.toolbar_list ul { float: right; text-align: right; margin:10px;}
.toolbar_list li{list-style: none;display: inline;}
.toolbar_list a { float: none; width: 32px; height: 32px; }
div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}
.icon-32-delete { background-image: url(stdimages/icon-32/delete.png); }
.icon-32-save { background-image: url(stdimages/icon-32/save.png); }
.icon-32-new { background-image: url(stdimages/icon-32/new.png); }
.icon-48-module { background-image: url(stdimages/icon-48/module.png); }
</style>
</head><body>
<div class="toolbar_list">
<ul>
<li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
<li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
<li><a href="#" class="icon-32-new new" title="New">New</a></li>
</ul>
<div class="toolbarheader icon-48-module">Title</div>
</div>
Assume the following image (created in photoshop) represents a text and image layout on a web page. What would the CSS code look like to accomplish the layout. I would like to control the distance between the image and the text. The text (PREV, TITLE, NEXT) may change, but the positioning should be maintained. Greetings! I am trying to position a transparent gif at the bottom of a page, repeating on the x axis, so that text scrolls behind it. I have the gif fixed at the bottom of the page, but the text is still over top of it. I think I will need to create an element, position it at the bottom of the page, use the transparent gif for the background, and give it a z-index higher than zero, right? If so, I can't get it it to work! What I am currently doing: Code:
body{
background:transparent url('/flames.gif') center bottom fixed repeat-x;
}
I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's How can I fix a Div a set distance below another Div without a set height? Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) 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? 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 I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text 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> 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. 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! I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! 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 If you look at that page in IE6 you'll see the image with the woman is misaligned. It looks fine in FF and IE7. I'm not sure what I need to do to get it to align in IE6. This isn't my site design and frankly the CSS is a mess (too many css includes, etc), so I'm actually pretty lost as to how to fix this. Does it have something to do with the #leftcontent being absolute positioned? Hi, I have 2 divs. The first one is set to a specific width and height. The second one varies in size. The problem is that I need the second div to sit on top the first, and the page to position itself according to the first div. Here's an example:http://www.caillouette.com/testSite/index2.php The blank image will be white, but it's dark grey for demonstration purposes. here's the CSS: Code: .big_image{
z-index:9;
position:absolute;
left:0px;
top:0px;
margin: 5px 0x 0px 27px;
}
.big_image_blank{
z-index:0;
position:relative;
width:262px;
height:262px;
background-image: url(images/Uploads/Listings/blank.jpg);
margin: 5px 0x 0px 27px;
}
|
|||||||