|
CSS - Rotating Text
I've looked at w3schools and in my HTML book but I can't find a way to rotate text using CSS. Basically what I want to to is show text rotated 90 degrees CCW. I have made graphics for this in the past, but I'm trying to build super light pages.
Can this be done? Thanks! Hope Similar TutorialsHello everyone, I am working on a new site and would like to know if there is a way to rotate background images within a table using CSS ? My apologies in advance for needing to post without validated code. I am using zen cart with a template and am not clever enough to fix the css and html errors that were flagged by W3C. I am not sure my problem has a solution, but it seems to me it should, so please keep the laughter to a dull roar When arriving on my site, the rotating banner (stripviewer) loads underneath the banner that should be to the left of it, before finally jumping into its proper place after a few moments. I am only guessing it is a css issue, for all I know it could be a javascript issue, and I know even less about that. Any help appreciated. Thanks. I posted my link here, but it appears the new poster rule prevents me including a link with bbc code. www . gemni - gems . com Greetings, and thank you for your help. I have a css which spec's a background image in the styles.css: #mainmenu { clear:both; padding-bottom:5px; margin-top:22px; margin-left:18px; margin-right:24px; background-image: url(images/mainmenubg.jpg); background-repeat: no-repeat; background-position:right top; text-align:left; } I am working in drupal. The image mainmenubg.jpg serves as the background for the site. My question is, is there any method (script or whatever) to have different images serve as the background so that as the user clicks thru the site, a different background appears. I realize that if I do this in static html, it would be fairly easy but this is one of the inflexibilities of drupal. Any help would be appreciated. Thanks! Pradhan 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. 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. 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>. Is it possible to have text run around a div positioned with absolute positioning? 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. 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? 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 I'm having a problem with the way one of my divs is being displayed in IE. An example of the page can be found he http://www.rit.edu/~jmw9523/help/ My problem is with the "Marketing literature" menu. There are supposed to be six menu item divs that consist of an arrow div and a description div. The description is only being displayed on the last menu item div in IE, and i can't figure out why. It looks fine in mozilla. the code for the div is as follows: Code: <div id="menuSecondary"> <div id="secondaryHead" class="menuSecondaryHead">Marketing literature</div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(1, 'red');" onmouseout="rolloutArrow(1, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow1"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Creating marketing collateral that is less expensive and more effective: Nine steps</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(2, 'red');" onmouseout="rolloutArrow(2, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow2"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Creative Design and Editorial</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(3, 'red');" onmouseout="rolloutArrow(3, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow3"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemSelected">Services</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(4, 'red');" onmouseout="rolloutArrow(4, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow4"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Custom Publications</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(5, 'red');" onmouseout="rolloutArrow(5, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow5"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Worldwide Language Services</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(6, 'red');" onmouseout="rolloutArrow(6, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow6"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Beyond Paper: Electronic Collateral</div> </a> </div> </div> the css for the div elements are as follows: Code: .menuSecondaryArrow
{
float: left;
clear: left;
width: 5px;
height: 10px;
}
.menuSecondaryArrow IMG
{
border: 0px;
}
.menuSecondaryItemDesc
{
float: left;
clear: none;
position: relative;
left: 5px;
width: 150px;
top: -1px;
}
.menuSecondaryItemSelected
{
float: left;
clear: none;
position: relative;
left: 5px;
width: 150px;
top: -1px;
}
.menuSecondaryHead
{
position: relative;
left: 10px;
font-weight: bold;
font-size: 11px;
line-height: 12px;
color: white;
}
.menuSecondaryHead A:hover
{
color: black;
text-decoration: none;
}
.menuSecondaryHead A
{
color: white;
text-decoration: none;
}
.menuSecondarySpacer
{
height: 7px;
line-height: 7px;
float: none;
clear: both;
}
.menuSecondaryItem
{
width: 170px;
position: relative;
display: inline;
}
.menuSecondaryItem a:hover
{
color: white;
text-decoration: none;
}
.menuSecondaryItem a
{
color: black;
text-decoration: none;
}
.menuSecondaryItemSpacer
{
float: left;
clear: none;
width: 5px;
}
I'm hoping there is something obvious i am missing. Thanks for your help. Hello Again, My new site design for www.everything.ie is finally coming together mostly due to the great help I've been getting here. The next little problem I need help with is this. Have a look here first: http://www.grahamvard.com/everything.html Look at the headings for the catagories (grey background with red writing). I'm trying to replicate them on my test site but can't quite get it right. Look here to see my attempts: http://www.eveythingfree.buildtolea...fieds/index.php It's basically alright but I want to make the grey headings boxes bigger so they occupy almost the full width of the 3 columns just like in the example page. Because this part of the page is controled by a php script which generates the text and layout, the only thing I can alter is the style sheet in this case the heading font, .cfmaincat Here's the piece of the .css that controls the heading: Code: .cfmaincat {
FONT-SIZE: 11px;
COLOR: #cc0000;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
background-color: #e9e9e9;
width: 100%;
height: 100%;
}
I can't work out what I need to change to fix this, I really hope some of you can. I'm sure it's fairly straightforward, I just don't know what to do. I tried increasing the padding but because the length of words of the heading vary, so too do the grey boxes generated this way. I need them to be all the same size, like in the design example. Many Thanks, Robert I have a problem... I have text in a div class "schedule" which is dragged in dynamically. Basically all the headers are in span tags with the style "font-weight:bold" on them. I want to hide all the non-bold text, ie all the text in the div class .schedule that doesn't have a <span> tag around it. Any ideas? Basially theres quite a large extent of whitespace above the text in IE7. Works fine in FF. http://www.beta-designz.co.uk/manicgaming/ CSS: Code: #wwd
{
width:550px;
height:auto;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
padding:6px;
}
HTML: Code: <div id="wwd"> <h3>This Is What I do!</h3> <span class="style1">I design sites for individuals and small businesses that are visually unique, well built, and easily manageable. A site we can all be proud of and a site your visitors will find interesting and effective!</span></div> Help would be great, regards, J. |
|||||||