|
CSS - Css Question: The Blinking Text
how can i make a blinking text in the css file? as i make a text decoration, i didn't blink! my browser was ie 6 already...
Similar TutorialsI will try to explain as simple as I can: I have rollover drop down menus, made with <DIV>'s. Showing and hiding them with JavaScript/CSS, usual stuff... While opening and closing menus, and hovering the menu items, table's bkg images are kind of "blinking". I am using CSS to put bkg image to a cell Code: background-image:url(/burakueda/images/bg_gifs/down_end.gif); . I realized that, browser tries to download bkg images everytime I open a pulldown menu, or hover a menu item. I have other images in same page, inserted with <IMG> tag, they don't have any problem. Anyone knows anything about this? Thanks in advance for any help This is my rendition of Claire Campbell's "Vertical Buttons". Why is my text "Quick Links" not centered in IE? All the other text is centered? Thanks in advance. 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" >
<style type="text/css">
#quikcontainer
{
position: absolute;
top: 120px;
left: 30px;
height: 650px;
width: 143px;
background: white;
border: orange 2px solid;
margin: 0 auto;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
color: #1E599F;
}
ul#quiklist
{
text-align: center;
color: #1E599F;
list-style: none;
padding: 0;
margin: 0 auto;
width: 100%;
}
ul#quiklist li
{
display: block;
margin: 0;
padding: 0;
}
ul#quiklist li a
{
display: block;
width: 100%;
padding: 0.5em 1em 0.5em 1em;
color: #1E599F;
text-decoration: none;
background: white;
}
#quikcontainer>ul#quiklist li a { width: auto; }
ul#quiklist li a:hover, ul#quiklist li#active a:hover
{
color: white;
background: #1E599F;
border-color: orange;
border-bottom: 2px solid;
border-top: 2px solid;
}
</style>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div id="quikcontainer">
<p><strong>Quick Links</strong></p>
<ul id="quiklist">
<li id="active"><a href="#" target="_blank">Aaaaaaa A-A</a></li>
<li><a href="#" target="_blank">AA Aaaa aa Aaaaaa Aaaaaaaa</a></li>
<li><a href="#">Aaaaaaa A-A Aaaaaaa</a></li>
<li><a href="#">Aaa A-A Aaaa</a></li>
<li><a href="#">Aaaaaa A-A Aaaaaa Aaaaaaa</a></li>
</ul>
</div>
</body>
</html>
I want some text aligned left, then some text aligned center, then some more text aligned right all on the same line. Should I use tables, divs, or is there a better way? Thanks I have: td.a1 { background-color: white; color: #003399; width: 120px; height: 30px; font-family: "MS Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center; } how do I alter so I can hyperlink the text spanned by the above so that no usual underlines, change of color etc. occur when the text is hovered, clicked. The below added to the css above doesn't work... link text-decoration: none; visited text-decoration: none; active text-decoration: none; hover text-decoration: none ie: td.d0 { background-color: white; color: #003399; width: 120px; height: 30px; font-family: "MS Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center; link text-decoration: none; visited text-decoration: none; active text-decoration: none; hover text-decoration: none } doesn't stop the underlining, change of color etc. Hello everyone, I am trying to layout a small "table-like" system. I am running into problems formatting the text properly to fit in my design. Here is a link to my current progress: http://www.suicidenote.net/csshelp/test.html Here is a link to my css: http://www.suicidenote.net/csshelp/default.css I would be very pleased if anyone has any sugestions on how to make the text to vertically fit in the div. I would rather use css as I want a variety of pages to follow the style sheet, as well as database integration Thanks, Case Hi all, I've got an div set up for images, which just has a style of padding-right 15px; . Now, I've got a text div with a style of padding-right 5px; . Whenever I put that div in after the image div, the text appears below the image. Can anyone tell me how to make it so the text appears next to the image (on the right)? Cheers. Greetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code:
...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}
#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}
Thanks for any advice. 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 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. 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 Hi, I have three <div> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="container" style="width:500px;height:700px;background-color:green;">
<div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div>
<div id="three" style="float:right;width:100px;background-color:red;">three </div>
<div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
</div>
</BODY>
</HTML>
I noticed when I increased the % width of my <div two> it goes below my <div three> I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior? 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> how can i center a div in the center of a page, but within that div align every thing to the right. It seems simple but I can't get it to fly. i am having a small issue with font size in browsers. i am using smarty template engine to create websites, i have originally created the html pages using css after slicing in photoshop. the pages look similar with respect to font sizes in all browsers when i integrate this html page into smarty i am using a copy of a template in smarty to create a website, so this copy also has a css file, i have commented most of the code in this css file which is in the smarty folder and i have used my css code which i initially created. the problem i am facing is with firefox only and all other browsers work fine only in firefox the text for h1, h2, p, ul li, a... etc are all appearing 1px smaller in size when compared to all other browsers i have tried using !important and inline styles however only firefox is displaying the text in the entire page 1px smaller compared to all other browsers which is not consistant. i have the following in the css file * { margin: 0; padding: 0; border: 0; } body { background: #ffffff; font: normal 12px Arial, Helvetica, sans-serif; margin: 0; padding: 0; } please advice. any help will be greatly appreciated. thanks. OK .. I have 5 layers surrounding each one of my menu links .. the layer over-laps another layer with the main content in. Now if you look here you will see what i mean .... http://www.geocities.com/jezman2002/index.html You can see four of the layers but the top one i need to be black AFTER it crosses the line !!!! Do u see what i mean I just wondered if there was any easy way to do this ??? -Thanks- If you would be so kind as to visit www.footbagfreaks.com, you will see a sample site using css. On the main navigation, I am curious about something. What establishes the height of each nav element? They are all uniform. What I would like to do is this, which I hope I can explain. I would like to have a set dimension for each nav element, lets us just say each to be 30px high, by 150px wide. I would like to specify the area, 30 x 150 have a rectangular trans. gif as its background and the initial color of the bg would be the same as the trans. gif. On a mouseover, the bg color would change, and thus would show the the new color through the portion of the trans gif which is transparent. Basically, the same effect as on the logo on the top left of the page. If someone can help me with this, I'd appreciate it so much. I am currently working on a site: www.wirelessguy.net I am trying to get it so that when links are clicked, the pages load in the middle white section. I don't have the links made yet, but I've been messing with it with text only. I made the site template in a php file, then I include that file on all my pages that I create. How can I get pages to load in the middle section of the site? |
|||||||