|
CSS - Placing Image Relative To Text
OK here is my setup. I have a 3rd party search on my page, the script produces results and the only edit I have access to is the css...(and the actual script ) not the <div> layout of the results page.
The script generates a block and then an alt block for the search results with an image floating beside the text (if there is one available) My first problem was the amount of output text varies but does have a maximum.....I have fixed this by specifying the height of the result block to contain it. My real problem is the sizes of my thumbnail images vary and this allows my text to flow all around it if the image height doesn't fill the area as you can see in my screenshot. edit: apparently I can't post images but here is a link to the image http://img.photobucket.com/albums/v288/schmooot/various%20posted/sample.gif here is my css pertaining to the section Code:
.result_image { float: left; display: block; }
.result_image img { margin-top: 5px; border: 1px solid #EF3013; max-height: 75px; max-width: 75px; }
.result_block { margin-top: 0px; margin-bottom: 0px; background: #BBBBBB; border: 1px solid #000000; height: 100px;}
.result_altblock { margin-top: 0px; margin-bottom: 0px; background: #DDDDDD; border: 1px solid #000000; height: 100px;}
I would like the text to stay 80px from the left of the box always.....regardless of what size the image is. I attempted to force it by specifying the image width to be 75px and it did work but then it force resized my images to fit and some of them need to retain the aspect. I made them retain their aspect ratio by using the max-width and max-height attributes but now some images don't have the height to fill the space So really how do I make the 'block' containing the image to always be the same height of the text beside it (or just to always be 100px)...or force the text 'block' to stay with an 80px left margin. The image is within the text block as you can see in the output source below so I can't just add a margin to the block...also I cannot edit the actual <div> output as I do not have access to the place it is defined... but here it is for reference Code: <div class="result_altblock"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b> <a href="link">Title</a></div> <div class="description">Description</div> <div class="infoline"></div> </div> <div class="result_block"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b> <a href="link">Title</a></div> <div class="description">Description</div> <div class="infoline"></div> </div> Similar TutorialsHi, I have centered a table horizontally and vertically. To do this I put a table inside a table. so i don't want to use absolute positioning, as the position would change if the window size changes... My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"... The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore... If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore... Here you can see the code i used for both example 1 and example 2: example 1: <html> <head> <title>relative problem - example 1</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table border=1> <tr> <td width="640" height="480"> <div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> example 2: <html> <head> <title>relative problem - example 2</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <table border=1> <tr> <td width="640" height="480"> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> thx for letting me know... Hello everyone, I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT? Thank you for your replies, Tomas Is there a way to define a text style where a dash and a space is automatically inserted after the text? If I want this: Subtitle and then content To look like this: Subtitle - and then content How can I do that? Thanks How does one go about placing an image in a paragraph in CSS? I cannot seem to complete this. doug I have a larger 22" in screen when I designthe layout of my site. When I viewed it on a small 15" screen the back ground image is making the page scroll horizontially. Here are some sites that fit well on a small screen. What can I do to fix this? http://www.beakable.com/ http://www.gazelletouch.com/ http://www.gummisig.com/ My web site: http://markallen.us I am having trouble with placing an image on my page and having that image repeat itself all the way down the page. Code: <div id=left> ........ content ...</div> <div id="image">this is where i want the image</div> <div id="content">content here</div> Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code Code:
#left {
position: absolute;
left: 0px;
width: 215px;
background-color: #efefef;
border: 1px dotted #ccc;
}
#image1 {
background-image: url("http://mydomain.com/image.jpg")
background-repeat: repeat-y;
width: 15px;
margin-left: 215px;
}
#center {
margin-left: 260px;
margin-right: 0px;
overflow: hidden;
}
The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page Cheers I wish to place a small image with a caption by its side in the middle of a div. What would be the better approach, (i)to put the two in a div and use absolute positioning or (ii)to use margins to position the two. Either way seems to work but I am looking for an approach that would be considered correct by a professional web developer. All help would be greatly appreciated. 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">
<head>
<style type="text/css">
body
{ text-align: center;
min-width: 1044px;
margin: 0px;
padding: 0px;
font-family: arial;
}
#wrapper
{ position: relative;
text-align: left;
width: 1044px;
height: 100%;
margin: 0px auto;
}
#top-header-block
{ width: 1010px;
height: 170px;
background-color: cyan;
}
#top-header-block img
{ height: auto;
width: auto;
}
#logo
{ float: left;
}
/*------------------------------------------*/
#inner-div
{ height: auto;
width: auto;
position: absolute;
left: 567px;
top: 41px;
}
#inner-div img
{ float: left;
}
#inner-div p
{ float: left;
margin-top: 3px;
margin-left: 5px;
color: #0d2474;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
/*------------Alternative to above-------------*/
#img-B
{ float: left;
margin-left: 315px;
margin-top: 40px;
}
#top-header-block p
{ float: left;
margin-top: 43px;
margin-left: 5px;
color: #0d2474;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
/*------------------------------------------*/
</style>
</head>
<body>
<div id="wrapper">
<div id="top-header-block">
<a href="#">
<img id="logo" src=""
alt="" width="248" height="65"/></a>
<div id="inner-div">
<a href="#">
<img src=""
alt="" width="66" height="20" /></a>
<p>: 0 items</p>
</div>
<!-------------Alternative to above-------------------------------->
<a href="#">
<img id="img-B" src=""
alt="" width="66" height="20" /></a>
<p>: 0 items</p>
<!----------------------------------------------------------------------->
</div>
</div>
</body>
</html>
Hi, Is there a relatively simple way to place an image over the main background of a site, on the right of the main design? For example, see how the Keller Williams logo is on the right, over the background he http://www.groundedgroup.com/client...Interface3.html Ideally, I want to make it happen he http://www.groundedgroup.com/clients/NWR/ It would be great if the image was always just a little bit to the right of the main design, like shown above. Any ideas? Thanks. I 'think' style sheets are the answer to my problem. Now I cannot webdesign and so everything is a mishmash but I saw this accordion image viewer made in AJAX for free and wanted to put it on my site, but I need to position it in an exact position on my webpage. How do I do this please? Accordion: http://www [dot] ajaxcrawler [dot] com/2008/01/image-menu-using-moo-tools [dot] html My webpage: http [colon] // lovelago.googlepages [dot] com/test7a.html CSS: http [colon] // lovelago.googlepages [dot] com/main.css Also, I only need a really trim version of this CSS, as it came with the webpage that had the accordion and has all of its 'own style' that I do not need. Thanks to anybody! note to admin: I'm not a spammer, thanks. I have a blog and I want to put my text inside a border/wrapper. So I've made the border and sliced it up into 3 parts: top middle and bottom. I want to place the text content within the middle of this graphic and so I figure I need to make the sliced images as a background using css and then type whatever I want over it. So I did this but dont know what Im doing wrong: Code:
<style type="text/css">
top {background: url('/images/t1.gif') ;}
middle {background: url('/images/t2.gif') ;}
bottom {background: url('/images/t3.gif') ;}
</style>
<div class="top" id="top"></div>
<div class="mid" id="mid">
<div class="content" id="content">Content Goes Here</div>
</div>
<div class="bottom" id="bottom"></div>
Any help is appreciated. JH I want to create a div that goes right under an input, I can get it to look fine in FF but not IE using absolute positioning. Is there anyway I can position the new div relative to the input rather relative to containers around it? I'm a bit confused why text in a relatively positioned div, following a floating div, would not align flush along the left edge of the div. My understanding was that the float would remove the div from the flow of the page, thus not affecting the relative div. But the mere presence of the floated div forces an indent of the text in the relative div. What gives? Example hi, did some searching but couldn't find the answer i'm looking for. if i have an image on a page, how can i position a layer relative to the image, ie: top left corner of the image... do i place the image in a div tag, or can i somehow get its x,y position? thanks Im just wondering defining a background image in css. I know I can use relative and absolute addresses, but Is the url background-image: url('img.gif'); relative to the CSS or to the page and is it different for each browser. Hello, I've almost got this css image gallery done for my website, but I can't seem to get the main image to be positioned where the gallery thumbnails are. The main image seems to be only position-able from the top of the page. I'm trying to get the image to line up with the top of the first thumbnail image, the thumbnails being arranged in a column to the left of the main image. The page where you can view this is: WWW OLDFOUNDRY DOT COM - I'm a new user, and am not allowed to post links yet. You'll see the gallery in the new product called "Bugatti Test" That link is on the left hand side of the page. And I'll place the code in the next post, Thank you for any ideas, Jason I'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work. I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing. I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach. Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image. Essentially, my code is something like this: CSS: Code:
td#CONTENTDISPLAY
{
width: 100%;
height: 100%;
text-align: left;
vertical-align: top;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
div#CONTENTBANNER
{
position: relative;
height: 100%;
padding: 0 0 0 0;
}
img.CONTENTIMG
{
position: absolute;
height: 100%;
}
HTML: Code:
...
<td id="CONTENTDISPLAY">
<div id="CONTENTBANNER">
<img class="CONTENTIMG" />
</div>
</td>
...
Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning. Can anyone help point me in the right direction? Thanks! - skubik Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> 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(!) 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 |
|||||||