|
CSS - Image Underline Of Text Width Being Set To The Text Length, Rather Than 100%
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. Similar TutorialsLet say you have this: <a href="#"> <img src="some.gif" alt=""> Some text </a> I want to have underline for the text on hover, but not for image. How do I do that for the above A IMG text? I want both the IMG and text within the A tag. Would appreciate a solution that worked in at least: IE, FF, OP, NE, Safari For me it is working in IE and OP but not in the gecko browsers.... FF, NE Regards hi, i would like the underline of my top level links to be as wide as the naviagtion box, it is currently only streching to the end of the text itself PHP Code: <ul> <li><a href="?action=abouUs">about us</a> <ul> <li><a href="?action=press">press</a></li> <li><a href="?action=tellFriend">tell a friend</a></li> <li><a href="?action=feedback">feedback</a></li> </ul> </li> <li><a href="?action=new">fitting room</a></li> <li><a href="?action=offers">best sellers</a></li> <li><a href="?action=col">useful info</a> <ul> <li><a href="?action=pay">payment options</a></li> <li><a href="?action=delCharge">delivery charges</a></li> <li><a href="?action=retPol">returns policy</a></li> </ul> </li> </ul> PHP Code: /* LEFT NAV */ #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } #leftNav a { border-bottom: 1px solid #000; text-decoration: none; width: 120px; } #leftNav ul li ul a { border-bottom: none; } #leftNav ul { list-style: none; margin: 0; padding: 10px 0 0 10px; display: block; border: none; } #leftNav ul li { margin: 0; padding: 0 0 10px 0; width: 110px; font-size: 14px; font-weight: bold; } #leftNav ul li ul { margin: 0; padding: 5px 0 0 10px; } #leftNav ul li ul li { margin: 0; padding: 0; list-style: none; font-size: 12px; font-weight: 300; width: 95px; } /* END OF NAV */ thanks for your help Hello I'm trying to figure this out. I want different color on the text-decoration overline and underline then the text. I know it's possible but how? It works if i change it into border but that's not the case. Here's a picture to give you the idea. Please help Thanks in advance Since i can't link url here's the link for the picture i41.tinypic.com/29bvd1.png Not sure if I'm missing something or if there's a hack for FF (and possibly other browsers), but on hover, text-decoration:underline doesn't seem to work in FF. Here's the HTML: Code: <div class="prod_container"> <div class="leftprods"> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_ta.gif" style="border:0;" alt="Time and Attendance" /><div class="prod_text">Time and Attendance</div></a></div><div> </div> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_devkit.gif" style="border:0" alt="Development Kits" /><div class="prod_text">Development Kits</div></a></div> </div> <div class="rightprods"> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_access.gif" style="border:0" alt="Access Control" /><div class="prod_text">Access Control</div></a></div><div> </div> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_finger.gif" style="border:0" alt="Fingerprint Readers" /><div class="prod_text">Fingerprint Readers</div></a></div> </div> </div> Here's the CSS: Code:
.leftprods { text-align:left; float:left; }
.leftprods a{ text-decoration:none; color:green; }
.rightprods { text-align:left; float:right; }
.rightprods a{ text-decoration:none; color:green; }
.prod_text { font-size:16px; color:green; font-weight:bold; padding-bottom:5px; }
.prod_container a:hover { text-decoration:underline; }
Thanks. Hi, I am trying to make a link's text black with a blue underline. Is this possible? Here is my code, which produces black text with a black underline: Code: .link{ text-align:left;
color:#000000;
font-size:14.5pt;
font-family:times new roman,serif;
font-weight:normal;
text-decoration:underline color:#09328a; }
Hi Folks, I've implemented a custom underline for all text links using background properties, but have found that my linked transparent PNG images are now affected with the underline as well. I've tried correcting this by applying background-image:none; to the affected PNGs -- I even used !important;. No luck. I also saw some mention of using the display:block; property to correct a similar problem. No luck. Suggestions? Thanks in advance! P.S. I was all set to post a link to a live example, but it seems new users can't post links? Hopefully the above description will suffice. I'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. A left floating text box that text wraps around the top, right and bottom is not rendering at the same size in all browsers (IE and Firefox are my main test platforms). The page was going pretty well, thanks to some help I have already received, but I hit a snag on this. Please take a look at the test page below. TEST PAGE The relevant style code follows: Code:
.textboxleft
{
background: #3E5C92;
font: normal 0.8em/140% arial, helvetica, sans-serif;
margin: 10px;
width: 160px;
border: 1px solid #E4E7F5;
float: left;
overflow: hidden;
padding: 0.5em;
}
.textboxleft p
{
color: #000000;
}
ul li
{
color: #E0E0F6;
font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}
Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information. If there is something I can alter in the CSS to make the box 160px wide (or whatever I decide on) in all browsers, please let me know. I am very new at this and have only gotten this far with the help of people like you. Thank you, Grump PS: you will also notice another thread concerning the bulleted list problem you see. It bumps into the text box and doesn't look good. Please excuse any redundancy, but these are 2 different problems, I think. Hi, I am creating a site with drop down menus, done purely in CSS. If I don't set the 'width' parameter for 'ul' element then in IE7, Firefox and Opera the menu appears fine. In IE6 however the menu just stacks vertically unless I set the width parameter. The reason I don't want to set width is because I would like the top level menu items to just be the length of the text as in IE7 etc. One item is particularly longer than the others and so wastes space. The code for this element: Code:
#menu ul {
list-style: none;
margin: 0;
padding: 0;
/*change for IE6*/
/*width: 7em;*/
/*stops going onto two lines but then just becomes hidden*/
/*white-space: nowrap;*/
/*
width: auto;
min-width: 40px;
*/
float: left;
}
Is there any way to set the width to be that of the text contained? IE7, Firefox and Opera seem to do this automatically. After extensive searching I have tried auto width, floating in different ways, setting min-width as well as setting no-wrap but no joy. Is there a way to do this, or will I need to configure a set width to make it backwards compatible? Thanks. I must be missing something really simple... but it seems that setting style ="text-align:center; width:300px" or anything equivalent doesn't work (for me). I don't find anything that says they can't be used together, but when I do, my div is suddenly left-aligned. I have tried placing the two items in a single division and also nesting divisions with one attribute in each... Nothing seems to work: <div style="text-align:center; border: 7px red ridge; height:300px; width:300px;"> fails; Take out the width: div style="text-align:center; border: 7px red ridge; height:300px; "> and it centers just fine. (at least netscape and safari both have this result) any ideas? (I must be blind) this should be simple, but im just not finding my answer. im trying to figure out how to evenly spread several links across a fixed width. i could manually set the padding or margins for each link, but i figure there has to be a way to do it in css automagically. 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> i want to fit in my 'Did you know?' panel beside my ad, but i'm having a lot of trouble... the ad is 468x60. here is the panel: Code: <div class='ocontentsection panelmargins floatleft' style='margin-left:8px; height:101px; width:167px;'>
<h2 class='aligncenter' style='text-indent:0;'>
Did you know?
</h2>
<div class='contenttext' style='font-size:9px;'>
<p class='nomargins'>
<?php
$tips = array(
"The formula generating your VIPortals Score is:
<strong>Games Played * 2 + Votes Casted * 3 + Comments Added * 4 + (Games Played + Votes Casted + Comments Added) * 5</strong>",
"The money awarded to the winners of every contest comes from the <strong>advertisers</strong> who are paying us to place their ads here."
);
$rand_index = round(rand(0, count($tips) - 1));
echo $tips[$rand_index];
?>
</p>
</div>
</div>
look here in the middle of the page i want the text to fit inside the box too :S is there a better way of doing this? as you can see, i had to set a bunch of widths and stuff... thanks. What I'm trying to do is create a menu for an AJAX function in which my content will slide. I don't know need help with the AJAX portion. Where I'm having my trouble is that I want to display four items at a time and then hide the other content to the right of this. When someone would click the button it would slide to left and display the next four elements. I have my four elements and have set a width for them. I am floating these elements left to get them to line up next to each other and I'm using overflow:hidden to hide the content you don't set. What I'm doing wrong is with the width portion. Code: #rightnav {
margin-top:14px;
background-image:url(../images/loader.gif);
background-position:center center;
background-repeat:no-repeat;
width:282px;
overflow:hidden;
}
#rightnav hr {
color:white;
background-color:white;
height:1px;
border:none;
width: 250px;
margin: 7px auto ;
}
#rightnav, #wslist, #rslist, #wtlist {
height:306px;
float:left;
}
#wslist {
background-color:#336699;
}
.list {
width:282px;
float:left;
}
HTML as follows:
<div id="rightnav">
<div id="rightbox">
<div id="wslist">
<div id="video">
Word on the Street: <span id="linkIntro">[ <a id="introVid" href="#">Play intro video</a> ]</span>
</div>
<hr />
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Why is my family so screwed up?</p>
<p id="vidSub">What to do when families fight</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This my second Title</p>
<p id="vidSub">A video on titles</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This is my third title</p>
<p id="vidSub">Yay for subtitles, esp ESL</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Four titles are great though</p>
<p id="vidSub">I am full of English SDH</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">I am the outcast of the group</p>
<p id="vidSub">Mah.. nobody loves me</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="clearfix"><!--clear--></div>
</div>
</div>
</div>
What I've noticed if I don't put the width property in the div floats to the left as desired. But when I put the width property in and use overflow it just knocks it down below it. Any suggestions? Hi. Lets say I've a div with width:300px and then there're some user generated content (Example: aaaaaaaaaa.....) that was so long without any whitespace that exceed the lenght of the div. Right now that word gone pass the right border of my div. Is there a way to style it so the word will not pass the right border and actually moved to the next line? I was thinking about changing the div as display table but maybe I don't want to do that and not sure if that will do it as well. The reason I don't want to use display as table because it's not compatiable to older browser. Is there any way to prevent this type of behaviour? Thanks. 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 have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want 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! |
|||||||