|
CSS - Css/div To Place Text On An Image While Graying Out The Background Image
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? Similar TutorialsFigured 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 need the text "world leaders in spirometry" to be on the same base line as the text in the logo image for Vitalograph to the left of it. This is what I want it to look like image link This is what does look like web page link Here is the CSS css link How can I get abosolute vertical placement of the text best for firefox and IE? I know I could put the tage into the logo as one image, but for SEO I would like to have the text there if possible. Thanks! 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 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! Hello. I am trying to center the text in my right column menu found at http://www.invisionshosting.com/v2/terms_of_service.php If you take a look, you will see that the h2 (title bar) as well as each button has the text positioned at the top, and I need the text positioned in the center. I have tried padding-top: 5px; to position the text to the center, but just as I thought it would do, it moves the background down as well, causing a gap to form between each element. I need each button, including the title, to remain with a tight fit as it is now while positioning the text in the center. The CSS I am using is as follows: Code: #menu_right {
width: 200px;
color: #702208;
font-family: Arial, verdana, san-serif;
list-style: none;
padding: 0 0 0 2px;
margin: 0;
font-size: 11px;
}
#menu_right h2 {
color:#ffffff;
background-image: url(../images/right_column_header.png);
background-repeat: no-repeat;
width: 200px;
height: 28px;
text-indent: 10px;
}
#menu_right ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 200px; /* Main Menu Item widths */
}
.button_main_1 { /* For Rest State */
background-image:url(../images/right_column_button_off.jpg);
background-repeat: no-repeat;
width: 200px;
height: 28px;
color: #ffe7b8;
text-indent: 30px;
font-size: 13px;
}
.button_main_1 ul li {
position: relative;
}
.button_main_1 a { /* For Rest State */
width: 200px;
height: 28px;
display: block;
color: #236a9d;
text-decoration: none;
}
.button_main_1 a:hover { /* For Rest State */
background-image:url(../images/right_column_button_over.jpg);
background-repeat: no-repeat;
width: 200px;
height: 28px;
display: block;
color: #ffffff;
text-decoration: none;
}
The HTML is as follows: Code: <div id="menu_right"> <h2 class="menu_left">Title</h2> <ul class="button_main_1"> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> </ul> </div> I took over a website from a graphic designer. Needless to say, everything including all the text was a graphic. Now having said that I have an about page that is just that. I have taken that graphic and yes I know I should probably break it up but. So what I have done is take all or almost all of the text off of the graphic, the problem is, the customer can't change the text on their about page because of it being a graphic. Now I can set the graphic as a background image or a single image on a page. And what I need to do is float text over the image. Here is the image And here is the new image So how would I do the same with the text only using real text? Right now I have the image in a table and the text right justified. I'm sure there is a better way. I am making this table area and I want the table to have a image as a background to give it more of a nice detail to it but I can't figure out how to get it to work for the table. Thank you. When a user has the text display options set to big, the text gets out of the box. Does anybody have an idea to fix this or any alternative I can use so that this doesnt happen? I know its not the best design or css implementation but its my first css website: http://aplistia.com/unitedTours/UnitedTours.php (look at the white box surrounding the links: home, reserve, contact etc in the left side of the website.) the css is he http://aplistia.com/unitedTours/booksite.css I can make my menu using ul/li elements with either a background image with text in the li or I can just create an image with text in it and having alt text. Is there a difference in regards to search engines and is there any other reason that I would want to have actual text with a background img on the li? The reason that I would want to use images with the text built into them is that the text will no be resized and I can use a specific font. Hi, I am making a site and it is important the text is always positioned over the background image in the same place. I have managed to do this. When I zoom out the text stays in the correct position however when I zoom in (as if I am looking on a smaller screen) the text re positions to the edge of the browser. How can I keep the text in the same position on all monitors? Here is what I have so far (I am very new to css): #content { text-align: left; width: 1060px; padding: 0px 30px 0px 30px; margin-left: auto; margin-right: auto; } Thanks Cameron Hi All, It has been 20 years since I last wrote a program and CSS wasn't even thought of then so I need a little help. I wish to place a text area/box with a background I can put text on top of in my html. Any image should work. I wish the text area/box to start 15% from the left edge and cover 70% of the screen width and be as high as the image. I would like the image to automatically re-size to take care of different screen resolutions. I would like to have no scroll bars on the text area/box and I would like the text to be fixed so it cannot be changed by someone typing in the text area/box. However for future reference I would like to know how to turn the scroll bars on so the text scrolls but the image stays fixed. I have included the html I thought would work but doesn't. Any help would be greatly appreciated, Thanks, **** Roose <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > <html> <head> <meta http-equiv="Content-Type"" content="text/html; charset=UTF-8"> <meta name="revisit-after" content="7 days"> <meta content="MSHTML 6.00.5730.13" name="GENERATOR" > <title>TestBox</title> <style tyle=text/css> txta { width: 735px; background-image: url(new.jpg); border: 1px solid #781351; height: 80px; padding: 1px; position: absolute; left:15%; } </style> </head> <body> <div id="txta"> <textarea name="t1" width "735px" height: "85px"> </div> </body> </html> 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>
I'm trying to go through examples out there and get a handle on stretching background images with an opacity text box overlaying the image. I have it working in IE7, IE6, and Firefox 2.0.0.16 with one weird little thing. In Firefox only, if I have the page designated as the home page or I hit refresh, the background image doesn't appear - just a completely white page. If I have it as a link or highlight the url itself and hit enter, the background appears. Any ideas? It's pretty hideous - it's a test, but here's the url: http://www.mahec.net/default3.aspx Here's the code: Code: <%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; color: #fff;}
a { color: #fff; }
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {
position:relative;
width:90%;
padding:25px 25px 25px 25px;
z-index:1;
background-color:#ffffff;
color:#000000;
opacity:0.6;
filter: alpha(opacity=60);
}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="http://flounder2.mahec.net/images/rhodo.jpg" alt="my 2 cats" id="bg" />
<div id="content">
<h1>Faking a Stretched Background Image</h1>
<h2>Across the Whole Page</h2>
<p><a href="/od/css3/f/blfaqbgsize.htm">Learn how to stretch a background image.</a></p>
<p>paragraph text</p>
</div>
</form>
</body>
</html>
Hey as the topic title says, can I put a background-image on a text input so that it shows in safari? I can't figure it out and can't find anything using google. Anyone have any experience with this? Thanks Hi All, Here's my issue... I have decided to try an all css-based layout which will incorporate: 1. a background image (770px wide) that repeats on the y axis in the BODY tag 2. a background image that will not repeat in a DIV tag that is slightly less wide (750px) than the BODY tag's background image The background image in the BODY will repeat on the y axis and provide a backdrop and edges that extend beyond and below the background image contained in the DIV tag which will also contain the main content/text for the site. [ Note: The background-image in the DIV tag is 631px in height. ] The problem is as follows: Since I do not have enough text to extend the content DIV to the height of the background image and/or beyond, the background image is not being fully displayed; the top and bottom of the background image is being cut off and the image as a whole is being pushed upward at the same time. To see the problem: http://publictrust.ca/css/default.htm The css is as follows: body { font-family: Verdana, Arial, Helvetica, sans-serif; color: #260D0D; font-size: 0.8em; background-color: #260D0D; margin: 0px; padding: 0px; background-image: url(../images/body-bg.jpg); background-repeat: repeat-y; background-position: center center; } #divHeader { margin: 0px; width: 750px; color: #260D0D; } #divMain { background-color: #EDCCA1; background-image: url(../images/container-bg.jpg); background-repeat: no-repeat; background-position: center center; width: 750px; color: #260D0D; } #divFooter { text-align: center; font-size: 0.7em; margin: 25px 0 0 0; } #divHeader, #divMain, #divFooter { width:750px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; color: #260D0D; } #leftMenu { float:left; margin:130px 0 0 5px; padding: 0px; width:150px; } #divMainContent { float:right; width:500px; margin: 150px 5px 50px 5px; border-top: 1px solid #260D0D; } The css file can be downloaded at: http://publictrust.ca/css/css/template_css2.css Caveat: the solution must work in IE and mozilla/netscape AND when I add more text to the main content area, the DIV must stretch downwards to accommodate the extra text *without* changing the height of the divHeader & divFooter. Thanks in Advance, mne I have the following code in my style sheet: body { background: url('../../docks/images/dock2_fade.jpg') no-repeat fixed center 35%; } which displays correctly. However, the pages using this style sheet are displayed in a frame and when I scroll the page any text blurs until it is unreadable. If I display the pages outside of the frame then it all works perfectly. Can any one shed any light as to why this is happening? Jeni Hello, I'm trying to create an list menu like the one in attached image and I have 2 problems. 1. In IE 6,IE 7 the list is ordered verticaly and not horizontaly (in Opera and FF it is ok) 2. I need to align the text on the bottom of the list like inattached image. Here is what I manage to do till now : http://www.sibiul.net/test/list-align.php Anyone knows what I must do ? 10x Is it possible to use CSS to place one image over the top of the other? For what I mean go he celticblues dot com/test/test.html I could do the same thing via photoshop, but I want to do it with CSS as I have several to do and I am not sure of the relative sizes yet and don't want to keep redoing the photoshop thing. Ed Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! I know that there must be some way to do this without having to use absolute positioning, but what I need to be able to do is lay down an image on a page (in my case its a center column image that's floated left next to a navigation area). Then I need to be able to create an addressable area, probably a div, over that image with variable images I read from a database. Best way to imagine this is to draw your typical header rectangle at the top, left navbar on the left, then a square area in the middle next to the navbar. Thats my central area. Now draw a rectangle inside the square at the bottom about 1/5th the size of the total square. Inside this rectange I want to place three images side by side and rotate them. How can CSS be used to overlay one image in this case, with another, or, more correctly, one <div> over another <div>? Thanks for your help!! |
|||||||