|
CSS - Overlaping Text
http://www.gaminghybrid.com/games/loztp/review
As you see there are screenshots in the boxes. While, when the boxes float to the right, some of the text floats inside the border... Why would this be so? Anyway to fix? Thanks a bunch! Similar TutorialsI want to implement margin notes with CSS. I want small notes in the margin which are vertically aligned with the lines in the main content box. The problem is when the notes are longer or there are many of them - THEY OVERLAP! [or at least i did not find any solution so they do not]. If the note is long [compared to the content] i would like something like that: Code:
very long | See NOTE in the margin, for this short line.
margin note |
is here and |
it should be |
rendered ok |
|
second note | Here it continues, so there is a plenty of
in margin | empty space above this paragraph - this is
| because we do not want margin notes to overlap.
I have been trying to find a solution myself and google the net, but unsuccesfully. There is a page about the problem at URL where you can find what i mean. Nevertheless at the bottom of the page they just say that the notes may overlap and give no solution to the problem. Unitl now i have tried tricks with float [but IE does not support clear: very well], with negative margins, and with display:table-xxx. The latest one is a solution to some extend, but you must enclose your text in several divs to let it work. I would like the solution with clean html code, so ideally one could do something like: Code: <p> <div class="note">here is the text of the note</div>See NOTE in the margin, for this short line. </p> or maybe [dt for notes, dd for text - looks strange, but quite ok for my pages] Code: <dl class="text_with_notes"> <dt>here is the text of the note</dt> <dd>See NOTE in the margin, for this short line. </dd> .... </dl> I would prefer clean CSS solution [no tables], but the must is that it works in most browsers [Mozzila, Opera, IE, Netscape>ver4 at least]. Thank you very much for any ideas in advance ... I will test any new idea, I need just a hint. I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. 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. can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text. 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, Howdo you get text and and image on the same line. I want text and 2 images on the same line but the image appears on the next line like a <br> has been entered. There is plenty of room for all data.Each has its own <div>. Based on the questions I see being asked and answered here, I'm concerned many of you will laugh at my ignorance, but here goes anyway. I want to know how to use CSS on just a little text. For example, let's say I want to render One-Two-Three-BOOM as text on a Web page, except that what I really want is for the BOOM part to be in a larger font and bold-faced. Can that be done using CSS? Can I select the BOOM part in Front Page 2003 and impose a CSS style to those four letters and only those four? Everything I try, based on the CSS file I'm using, results in applying the new style to all of the text within a whole paragraph. I want to be able to apply the style to just a little text at a time. As another example, I want to render the following two lines Johnny G. Doe 123 West South Street in such a way that, using CSS to control everything, I can get the second line to appear in a smaller font. I can get it to work if there's a <p> between the two lines, but not if I want to separate them with a <br>. I'm not asking whether it's a good idea to use CSS this way, I'm just asking how to do it. I will try to attach a file to this thread that shows the first several lines of the CSS file I'm using, in case that makes a difference. If this doesn't work, please let me know. Thanks. --Johnny Hmm, This is a problem that has plagued me for a while, but just recently decided to find a solution. Basically I like to single out words for empasis on certain pages. Well with EM that's fine. However on a new website I'm coding I need to do (TYPE 1 FONT) (TYPE 2 FONT) (TYPE 3 FONT). All are different decorations. Is there a way to create a tag for each word? Thanks. Is it possible to have text run around a div positioned with absolute positioning? I'm having trouble with a page I'm working on- I posted here a few weeks ago with something sort of similar. This time, though, I'm at a loss, I've tried several different things but nothing worked. http://www.geocities.com/nny555/eup/newschedule.html As you can see, the div where the content is, the text is stretching right through the div. Is there any way to fix this? I'm trying to do a layout like this: wink zone. net / ap.jpg I know how to do the header part of it but the end of the image of the person and the text parts are bit harder. Could you give me some help? I guess the best way to do this is use floats? Hi all , How do I take away the scollbar at the bottom and the text rather being wraped in the div. css Code: Original - css Code <style> .textfill { height:300px; overflow:auto; position:relative; width:550px; left:100px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } </style>
html Code: Original - html Code <div class="textfill"> <table> <tr> <td> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </td> </tr> <tr> <td> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </td> </tr> <tr> <td> ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc </td> </tr> <tr> <td> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </td> </tr> <tr> <td> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </td> </tr> <tr> <td> ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc </td> </tr> <td> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </td> </tr> <tr> <td> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </td> </tr> <tr> <td> ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc </td> </tr> </table> </div> <div class="textfill"> <table> <tr> <td> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </td> </tr> <tr> <td> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </td> </tr> <tr> <td> ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc </td> </tr> <tr> <td> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </td> </tr> <tr> <td> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </td> </tr> <tr> <td> ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc </td> </tr> <td> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </td> </tr> <tr> <td> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </td> </tr> <tr> <td> ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc </td> </tr> </table> </div> I had an idea for a cool effect, combining JavaScript and CSS, for lists. Three elements are visible at a time, the top being slightly "squished" (smaller height of font) and the bottom one the same, but only the middle has a full height. Arrows move the viewed element up and down. Anyway, I was wondering basically if there was a way of "squishing" text so that the height can be reduced, not the overall size. Any ideas? Thanks Ive just finished building my site and ive implemented a text only alternative. I have not used CSS deliberately as i am unsure whether this, in some cases, is not supported by certain browsers. Reason i ask is because i want to specify font size as a % rather than px or pt so that end users can change the view to text "small" or "large" Would i be better off doing this in the html or by attaching a CSS? Thanks in advance, cuban Hi there, I am having trouble making a nimage appear on the top of some text. I have a transperent image, but the text is appearing ontop... I need the image to appear on top. This is the code: Code:
<table cellspacing="0" cellpadding="0" align="center" border="0">
<tbody>
<tr>
<td style="BACKGROUND-IMAGE: url(img/template/bg_one.jpg); WIDTH: 357px; " align="center">
<div style="position: relative; z-index: 1000; BACKGROUND-POSITION: right bottom; BACKGROUND-IMAGE: url(img/template/image_to_appear_on_top.gif); WIDTH: 357px; height: 275px; BACKGROUND-REPEAT: no-repeat;"> <table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td valign="top" align="center">
<div style="z-index:-900;">
<p>test text </p>
<p>test text </p>
<p>test text </p>
<p>test text </p>
<p>test text </p>
<p>test text </p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Any ideas what I have wrong? Instead of text in a line, I am hoping to grab some records from database and scatter them around the page diagonally. I can't (or don't want to) do it as images because the database records change all the time and I would want to have the page reflect the current database records. I don't think it is possible but though would it that on table to see if someone knows how to implement diagonal text in html. Thanks!! |
|||||||