CSS - How To Have An Image In Middle Of Text (wrapped)
This is what i want and it just doesn't work:
Quote: TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT IMG TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT Hmm hopefully you get what i'm saying cause it really looks bad here so i have something like this: Code: <p>text ...... <div .. ><img...>/<div> text text </p> The text loses the formatting... Thanks. Similar TutorialsThanks for taking the time to read my question. I have a tree menu on my page www.pierced.ca/pierced-events.htm that has long text in it. I have wrapped the text so that the page does not stretch and look bad. I am wondering how to move the wrapped text to the right so that it does not write over the dotted line. I would also like to extend the dotted line downward (I guess that would be another image) Thanks for your help. Brad CSS file: .dtree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; white-space: normal; } .dtree img { border: 0px; vertical-align: middle; } .dtree a { color: #999999; text-decoration: none; } .dtree a.node, .dtree a.nodeSel { white-space: normal; padding: 1px 2px 1px 2px; } .dtree a.node:hover, .dtree a.nodeSel:hover { color: #333; text-decoration: underline; } .dtree a.nodeSel { background-color: #c0d2ec; } .dtree .clip { overflow: hidden; } I'm not that familiar with css yet...so this might be a stupid question. I'm creating this website for my department. on the index page, there are several lists of links. between the links there is line spacing. but some link name is too long it got wrapped under. the wrapped under text also have line spacing. this makes the viewer feels that there are 2 links instead of one. how can i make the wrapped under text go right under without the line spacing? here is the link if you wanna see how it looks like now. http://www.scienceevents.uwaterloo.ca/ for example under the first left hand side menu, international year of astronmy is one link. but it looks like 2 links. how can i make them move together? this is the css for the primary nav Code: #primary_navigation { background:url(../images/primary_navigation_bg.jpg) no-repeat; /* This controls the background image on the home page. */ width:960px; height:200px; margin-top:20px; font-size:0.75em; clear:both; } #primary_navigation ul { list-style:none; margin-left:-20px; height:110px; } #primary_navigation ul li { line-height:2.0em; margin-right:5px; } The HTML (the div is colored for convenience) 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" xml:lang="en" lang="en"> <head><title>afdad</title></head> <style> div { background: red; } </style> <body> <div><img src="lilo.gif" /></div> </body> </html> As shown by IE6.0/Win As shown by Firefox/Win and Opera/Win Notice how a small sliver of the div appears just under the image when viewed in FF or Opera. I actually prefer IE in this case. What causes this extra gap and how do I get rid of it? Hey, Here is an example of code for one of my links where I attempted to align the link "Entry Form" to the middle of the image, what am I doing wrong? Code: <p class="NavigationOption" id="Nav_Entry" line-height=32px text-align=middle><img src="../links/entryform.jpg" border=0></img> <a class="NavigationLink" id="NavLink_Entry" href="<?= ptpr; ?>members/index.php"><font color= #555555>Entry Form</a></p> ok. Ive been trying to use CSS to style my page instead of tables. but I cant get stuff to line up right. basically I have a div spanning the whole width of a css box. inside that div I have 3 sections, one for left-aligned text, one for center aligned text and one for right aligned text. what I want is to display on the far left a left arrow image (for use as a button) and the word 'Previous'. then in the middle of the div, center aligned, I want to display the words 'select a different draw' and on the right hand side, right aligned I want the word 'Next' followed by my right arrow. EASY PEASY I thought. Well it has taken me an hour to realise that I have to set my parent element to position: relative for the left middle and right elements to use absolute without going to the very top of the page. so at least I now have them along in a line. What I have found is that the the text on the left and right is vertically aligned to the BOTTOM edge of the image and the text in the middle has been vertically aligned to the TOP of the image despite all 4 css classes being defined as vertical-align: middle; please tell me where I am going wrong, I'm loosing my marbles here! --html: Code: <div id="width-100"> <div id="third-left"> <img src="images/arrowleft.png" alt="foo"/> Previous </div> <div id="third-middle"> Select a different draw </div> <div id="third-right"> Next <img src="images/arrowright.png" alt="foo"/> </div> </div> --css: Code: #third-left { width: 30%; text-align: left; vertical-align: middle; } #third-middle { position: absolute; top: 0px; margin: 0 35% 0 35%; width: 30%; vertical-align: middle; text-align: center; } #third-right { position: absolute; top: 0px; right: 0px; width: 30%; text-align: right; vertical-align: middle; } #width-100 { width: 100%; position: relative; vertical-align: middle; background: white; } any thoughts? Thanks, Ben Normally when I want to vertically align some text to the middle of a div I use line-height: 40px; and vertical-align: middle; However that only seems to work on single lines of text because with multiple lines of text the line height of each line means there is a large gap between the text rather than centreing the whole lot vertically. How do I get around this? I thought something like the following would work but it doesn't. <div style="line-height: 60px; vertical-align: middle;"> <span style="line-height: normal;">line1<br />line 2</span></div> 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> I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image. I can do the following and it works: Code: .icon {vertical-align: middle;} <a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a> Header Goes Here However, if I wrap H1 tags around "Header Goes Here" the text drops below the image. Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable. Is there any way to make it so the H1 Hi, I want to repeat a background image (actually, its just a colour) from 50% of the page. i.e. I want one side of my site to be of blue background (the left 50%) and the other side to be of grey background (the right 50%). | Blue | Grey | | Blue | Grey | | Blue | Grey | | Blue | Grey | So let's say the background of my site is blue all over. Code: <body> <div id='greybg'> </div> </body> But the particular div is set to something like: Code: #greybg { background-image: url("../images/body/greylong.gif"); background-repeat: repeat-x; background-position: 50% 0%; } This code doesn't work though. The repeat-x property makes it repeat all throughout, whereas what I want is for the image to repeat STARTING FROM 50% of the middle of the page (i.e. the second 50% column of the page). Any way I can achieve this? TIA i want to have organized game boxes. the way i want it organized is for the image to be on the left, and the text to the right of the image. however, i want the image to be in the vertical middle of the div and the text to also be in the vertical middle. the problem with what i have now is that the image is always at the top of the game box div and so is the text. ALSO, i want the WHOLE GAMEBOX to act as an <a>, and not just the image and the game title. is that possible? Code: if ($a == 2) { echo " <div class='gamebox clearboth floatleft halfwidth'>"; $a = 0; } else { echo " <div class='gamebox floatleft halfwidth'>"; } $a++; $game['desc'] = str_replace("'", "'", $game['desc']); $game['desc'] = "<span class='gdesc'>".$game['desc']."</span>"; $link = get_game_link("id="._sp($game['id'])); echo "<a href='".$link."' class='gamelink'>"; // display game echo " <div class='floatleft'> <img src='[imgdir]".$game['nameid'].".png' alt='Play ".$game['name']. "' title='Play ".$game['name']."' class='gamethumb' /> </div> <div class='floatleft wordwrap' style='width:75%'> <h3 class='nomargins'><a href='".$link."' class='gamelink'>".$game['name']."</a></h3>"; $rating = round($game['rating']/2); echo " <img class='nomargins' style='border: 0px' src='[themedir]/ratings/".$rating."stars.gif' alt='".$game['name']." Rating' />"; echo " <p class='nomargins'>".html_entity_decode($game['desc'], ENT_QUOTES); if (theme_is_admin()) { echo "<small>"; echo theme_admin_link("Manage Games", "darklink", "games", "manage"); echo " - "; echo theme_admin_link("Edit This Game", "darklink", "games", "editgame-form", "id=".$game['id']); echo "</small>"; } echo " </p> </div> </a> </div>"; Hi everyone, I have a problem I'm trying to overcome with displaying an image next to the text in a table cell. I've set the table cell to valign=middle and this achieves the layout I want (hopefully this demonstration will look right..) Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here PICTUREHERE PICTUREHERE So the text and the picture are laid out along the middle of the cell. However as soon as the text gets too big for the cell (or the cell gets smaller) this happens: Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here, but when it's longer PICTUREHERE PICTUREHERE the remainder comes here I knew this to be because the img is still an inline element in the cell. I tried to solve the problem by making the img float:left, but the following happens, even if the valign=middle property is set in the cell: Code: PICTUREHERE The text goes here, but when it's longer PICTUREHERE the remainder comes here PICTUREHERE PICTUREHERE PICTUREHERE Is it possible to achieve the top layout. If it is can someone help me please (it's probably staring me in the face) Thank you in advance Andy i've tried variations of inline/block display, and anything else i could think of...i want an orange border around the L and R divs, but all i get is a 2px border with no content, and the L and R floated on top of the border...plz shed some light on what i'm doing wrong Code: <style type="text/css"> div { background: #E7E7E7; border:1px solid #CCCCCC; } div#l { float:left; } div#r { float:right; } </style> </head> <body> <div style="margin:auto;width:1000px;text-align:center;border:2px solid ORANGE"> <div id="l"> L </div> <div id="r"> R </div> </div> </body> 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 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? 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. 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. |