|
CSS - Please Help.. How To Limit Words In Box Appear On Links...?
Hi guys,
I'm working on a website here : >spacescientific.com when mouse pointer go on links in website, an yellow (ajax/java>I'm not sure!) box opening and show intro of article. now I want to limit number of words (for example to 20 words) on this window . to explain what I mean: >spacescientific.com/spacescientific.jpg how can I do that. any idea??? Can anyone help me about this pleaseee. this is really really important to me thank you Similar TutorialsSimple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
I've tried every thing possible to make the words spread out in Firefox (I don't know about IE6 or 7): Display: block; text-align: left; left: 0px... It doesn't work. PHP Code: <ul> <li style=""> <a href="http://www.....com/Merchant2/merchant.mvc" onmouseover="<?php //changeImages('index_10', 'images/index_10-over.gif'); return true;?>" onmouseout="<?php //changeImages('index_10', 'images/index_10.gif'); return true;?>"><span style="position: relative; left: 0px; text-align: left; background-color: #eeeeee; border: 1px solid #000000; width: 30px; height: 10px; display: block; padding: 10px 100px 10px 100px; font-family: Verdana, Arial, Times New Roman; text-decoration: none; font-weight: bold; font-size: 16px; color: #000000;">Online Store<?php //<img NAME="index_10" SRC="images/index_10.gif" WIDTH=167 HEIGHT=33 BORDER=0 ALT="Online Store">?></span> </a> </li> </ul> I have a series of horizontal radio buttons which are generated dynamically from a database record set. There are 3 sets on 3 different rows. The problem is the labels for the buttons are not the same length so when the page is generated the radio buttons do not line up neatly, vertically. Is there a way of getting a CSS style to put a tab at the end of a word so that the next radio button lines up. Or alternatively is there an even easier way to do this. The obvious solution is to nest a two column table with fixed length column and have this repeat, rather than a single row. But there may be a more elegant method. I've got some words that I need to show up in the margin. However, take the words and rotate them 90 degrees. That's how I need it to show up. Right now, I'm using an image and it's coming out like crap on some browsers and find on others. Is there any way to do this with css? I am trying to write a Header line for a <div> like this: This -tab- is \t a \\t tabular........line........of.........text + "\t" + used as a header. The good book says you can use \t but that doesn't work. ( I should say I can't make it work) I don't want to use a gazillion tags. Thanks for your help in advance. R P I was just wondering if there is an option in CSS to set a word limit? -bpatrol I have some code like this: Code:
<a href="">My Link is Long</a>
<a href="">My Link is Longer Than Yours</a>
The second link is coming at the end of a line and is breaking to the next line in the middle. Is there a way to force the entire <a> tag to go to the next line if it wont all fit on the current line? something like Code:
a {
behavior-when-getting-split-lines: do-not-split;
}
Hi I'm in the middle of creating a web forum, and I've run into a little 'snafu'. Forum replys have a fixed width design so when words are used that are greater than width of the design, 500px, the word actually expands the design. All I want is for the word to stop at 500px and begin on a newline. A picture can always explain it better: Code: <table class='forum_block'> <thead> <th>mikeymike</th> </thead> <tbody> <tr> <td class='post_text' colspan='2'>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggg</td> </tr> <tr> <td class='post_date' colspan='2'>1280199359</td> </tr> </tbody> <tfoot> <tr> <td colspan='2'><a href='?edit=51'><button><img src='/_images/icons/comment_edit.png' />Edit</button></a> <a href='?post_form=17'><button><img src='/_images/icons/comment.png' />Post reply</button></a> <a href='?post_form=17,quote=51'><button><img src='/_images/icons/comment_add.png' />Quote</button></a> </td> </tr> </tfoot> </table> Code:
.forum_block {
font-family: verdana, Arial, Helvetica, sans-serif;
width: 99%;
margin: 10px auto;
}
.forum_block th {
background: #b7cade;
font-weight: bold;
color: #fffefe;
padding: 0.5em;
}
.forum_block td {
background: #efeeee;
border: solid 2px #efeeee;
padding: 0.5em;
}
.forum_block td textarea, .forum_block td input {
background: #efeeee;
width: 510px;
}
.forum_block tfoot td {
background: #b7cade;
border: none;
color: #fffefe;
font-weight: bold;
padding: 0.5em;
}
.forum_block .post_text {
font-family: Georgia, "Times New Roman", Times, serif;
}
.forum_block .post_date {
font-size: 0.7em;
text-align: right;
font-style: italic;
}
Hi! My styles have become somewhat intermittent. Seem to be randomly showing some styles and not others. I was thinking it might be because the css file is getting quite large. Is there a particular limit for the size of an external file or the number of lines in it? I'm linking 2 serperate stylesheets - one is 13kb (777 lines), the other is 9kb (350 lines). thanks, I am trying to build a website and am having problems limiting the width. I need it to go a little something like this ....I need the page width to be limited to 800 pixels so the contents stops on that ?boundary Is there any way to limit how large a font can become in firefox and internet explorer? Hi all, I've created a template in CSS and divs, but when someone puts a word like this_is_a_template - with no spaces in it, it breaks the left nav. Is there any way of making sure words break once they get to the width of the leftnav, even when they don't have spaces in them? Cheers. It seems I get one or the other, but not all. Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like Code: <input type="image" src="..." and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much? I have what seemed to be a simple idea but is turning out to bother me. In my style sheet i want to put a base url followed by a user id Link looks like this Code: http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id= Now in my html i have this Code: <table><tr><td >My name<td >Job position<td >606959150</tr> The last td that has the number in it i want to add to the end of the url posted above i cannot figure our what to put in the css to use as the main link and i want to add another td behind the last one with the number in it with the entirelink which should look like this Code: <a target="_blank" href="http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id=606959150">Link</a> I have to use this for multiple people each one using a unique ID# is there a simple way to do this, the reasoning behind this is that the main link changes once every few months, instead of changing all links i would like to be able to just change the one in the css file and be done with it. i hope i am explaining it correctly. Thanks ahead of time for any help u can provide My first post Website:www.freewebs.com/weareamazing I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help! Hi, I have CSS document like so: Code: div.menu A:link {
definitions
}
div.menu A:visited {
definitions
}
div.menu A:active {
definitions
}
div.menu A:hover {
definitions
}
And in my HTML document Code: <div class="menu"> Links are then put in here </div> But only the first Link effect works, how come? I tried Google, got few results I were looking for, I know that the Link effects has to be in certain order, and in these websites I found they were in different order tried both but no luck Thanks alot! I was messing around with <ul><li> type nav links, and had some issues with the bullet images I made were too large, so I made it as a background image for the <li> but <li> backgrounds didn't seem to work so well on IE. My question is this, why does everyone use <ul><li> to make their nav links when you can use less code just using <a>'s within a <div>? Here's my code example (bullet.jpg not included, it's just a 30px square I made in photoshop) Code: <html>
<head>
<style type="text/css">
#links li {
text-indent:40px;
list-style-type:none;
}
#links a {
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
#links2 a {
text-indent:40px;
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links2 a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
</style>
</head>
<body>
<div id="links">
<ul>
<li><a href="#">links</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
<div id="links2">
<a href="#">links</a>
<a href="#">link 2</a>
<a href="#">three</a>
</div>
</div>
</body>
</html>
I want to have a hover effect on the links of my page. I'm using an attached stylesheet to define it. Here is the section defining the links: Code:
a:link {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
a:visited {
color: red;
text-decoration: none;
}
a:active {
color: red;
text-decoration: underline;
}
Normal links appear red and is not underlined. When the cursor hovers over a normal link, it appears blue and is underlined. However, visited links do not 'behave' as normal links. They appear red and are not underlined. When hovered over, they do not change color or get underlined. I want visited links to act the same. They only way I could get them to act the same was to do the following: Code:
a.general:link {
color: red;
text-decoration: none;
}
a.general:visited {
color: red;
}
a.general:hover {
color: blue;
text-decoration: underline;
}
a.general:active {
color: red;
text-decoration: underline;
}
This is the only rules IE will obey. But every link need to be defined as instances of class "general". Is there a better way of handling this? |
|||||||