|
CSS - <span> And De-linking A Link
Hi all
I am trying to take a link's ability to link away from a link by converting it to normal text ie, I am working on pagination for my blog and the navigation looks like this << Prev | 1-5 | 6-10 | Next>> its all done in php that i got from a book, but anyway, the script references a span class="inactive" so that when you are viewing 1-5 both the << Prev and 1-5 links are grayed out, since there is page previous to the page that displays 1-5 there is no need for that to be a link, nor is there a need for 1-5 to be a link since we are already there what i need is the style that would remove the linking property of those links and i got no ideas, Im bad in php and even worse in css Thanks in advance Similar TutorialsHi, first of all i'm a bit new to this, but not a Compleet noob. pls be kind Ok, so my issue is i have a type of image gallery made with spans. I have the span tags enclosed by the <a href> tag. Spans are floating. The reason for this is that I want to have the border change colors on hover, wherever the pointer might be located in the span. It works great in firefox and IE8, but i just discovered this morning, much to my dismay, that it doesn't work in IE7 or below. of course it was the person i'm making the web page for that pointed this out, go figure. The problem is that eventhough IE shows that it is a link, when clicking on the image, nothing happens. text works find, the area around image and text works fine, just not the image. I tried searching google for a couple hours and could not find a fix that didn't involve javascript. I'm trying to avoid JS as much as possible, and so far all has gone well. Ok down to the nitty gritty. I stripped down the html so that it just shows one of the spans, so if you drop the code into notepad and save as htm you can play with it. css link is complete to my hosted css file. honestly im not sure why im using that doc-type, i don't completely unerstand the mechanics, i just thought for no sound reason at all that it would be better than html doc type. xhtml 1.0 validates and css validates as 2.1. Code:
<?xml version="1.1" encoding="utf-8"?>
<!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" xml:lang="en">
<head>
<title>Bella Luna Gifts for the Soul - Wands</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.bellalunagifts.net/main.css" />
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;}
#menu ul {text-align:left;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 12px/16px arial, "lucida console", sans-serif; padding: 3px 2px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-container">
<div id="content">
<a href="http://www.bellalunagifts.net/rose_quartz_healing_wand.htm">
<span class="thumbnailleft"><img class="image" src="products/tn/rose_quartz_healing_wand.gif"
alt="Rose Quartz Healing Wand" width="150" /><br/><br/>Rose Quartz Healing Wand<br /></span></a>
</div>
</div>
</body>
</html>
If you just wanna glance at the css affecting the span and image, here it is. Code:
.thumbnail {
float: left;
width: 150px;
height: 210px;
margin: 0 20px 15px 0px;
padding: 5px;
text-align: center;
border-style: ridge;
border-color: #3333FF;
text-decoration:none;
}
a {text-decoration: none;color: #000000;}
a:link .image {border-style: none;}
a:active .image {border-style: none;}
a:hover .thumbnailleft {
border-color: #00CCFF;}
a:hover .thumbnail {
border-color: #00CCFF;}
a:visited {text-decoration: none;color: #000000;}
a:visited .image {border-style: none;}
and i dont know why my docs are .htm instead of html.....long time ago i had a reason that may or may not have been valid but i should probably change to .html, yeah? well the link to the page im working on is http://www.bellalunagifts.net/wands.htm this is the last immediate piece of foundation code that i need to figure out to start rolling out the rest of the website. this is the first time i've posted for help, i really do try to figure out stuff on my own, but am ready to throw my head through the screen right now. and hell, if i'm goin about this in a silly way, pls tell me. i always welcome criticism. any help would be much much appreciated. i'm gonna keep trying to figure this out, but i'm hoping that one of you already knows what i'm doing wrong. i know my css code is probably redundant in places, but for now i'm just working on getting things to work. thx in advance for any reply. When clicking on the image in code below the link is not working in IE (6.0), works fine in FF and OP. The odd thing is that in IE when you right-click the image you can open the link by selecting "Open link" or "Open link in new window". So the link is there for IE as well, but not working when clicking on the image. Why is it so. Workaround needed... Any fix for this without having to remove my SPAN tags? The HTML also validates without any errors. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <TITLE>Link over image is not working in IE. (Tested in IE 6.0)</TITLE> </head> <body> <div> <br><br> <span style="display:block; width:200px; background-color:gray;"> <a href="image-link-bug.htm" style="text-decoration:none;"> <span style="cursor:pointer; display:block; text-align:left; padding:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" width="40px" height="40px" alt=""> </span> <span style="display:block; color:white; font-family:arial, sans-serif;"> When you click on the image to the left the link does not work in IE 6.0. If you click on this text it works fine. Why is that. It works great in FF and OP though.<br><br> Is there a fix for this without having to remove my SPAN tags?<br><br> NOTE: If you right-click on the image in IE and select Open link, or Open link in new window it works, also in IE.<br><br> For me this looks like a bug in IE.<br><br> I'm looking for a fix/workaround to make it work, and yes, with the span tags :-)<br><br> And please, do not bother about the other code here, e.g. the input at the end of page etc. </span> </span> </a> </span> </div> <br><br> Name:<input type=text size=30 value=""> </body></html> Hi I'm struggeling with the following: I have some span elements inside a td. If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td). Why does that happen and is there a way to make the td to autogrow to fit all the span's inside? Se example code below Code: <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;"> <tr> <td style="background-color:gray; text-align:center; border:1px solid black;"> <span style="margin-right:20px;">First</span> <span style="margin-right:20px;">1</span> <span style="margin-right:20px;">2</span> <span style="margin-right:20px; background-color:orange; padding:10px;">3</span> <span style="margin-right:20px;">4</span> <span style="margin-right:20px;">5</span> <span style="">Last</span> </td> </tr> </table> ******* UPDATE ******* I found this link today: http://css-discuss.incutio.com/?page=FormattingContexts which says (among other things): ************************* Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up. Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it. ************************* So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above? Is there any working workarounds for this...? 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, I am currently trying to produce a website using CSS style sheets. I have used 'span' to position and align blocks of text on the page. All looks well, but when I try and validate the page I get an error message that says the <p> and <ol> tags cannot be used within <span> tags. Can anyone suggest anyway round this? Many thanks x Hi, Code: <tr><td colspan="2" height="5"></td></tr> <tr><td width="30%" align="right">City</td><td>This is supposed to be some content</td></tr> How do I imitate structure of the table above. In the example below the text between <span> if too long ends up on new line below <label> How do I make sure that it stay on right side? Code: <div><label>City</label><span>This is supposed to be some content when too long appears below span not below label</span></div> Thank you. hi, i have a chunk of dynamic text coming in. it can have html links in it. so something like: 'blah blah blah <a href="site">link text</a> blah blah' im trying to stylize the dynamic text with CSS. i can get the font size and everything to work but i can't get the link text to behave like i want it to. here's what i have: PHP Code: //the css class .articleDesc { font-family: verdana, arial, geneva, sans serif; font-size: 12px; font-weight: none; text-decoration: none; color: #000000; } //trying to make all links red, doesn't work a.articleDesc { color: #FF0000; } //php print '<span class="articleDesc">' . $dynText . '</span>'; the links just come out default, ie. blue and purple... anyone know what's wrong here? Hello, Well this is a very simple question ... how can Iset the width of a span from CSS? Basically I tried setting the span with from CSS however the span size remained wrapped to the text inside rather then taking the width I desire. I check some interent forums, and found out that if I set the float:left the width is taken, but my span is no longer is place! is there a way to set the span width without having to set thr float:left option? thanks and regards, Sim085 Why is this? Code: <div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'> <span style='color:#888888;font-weight:bold;font-size:10px;'> RECENT BLOGS </span> </div> different than this? Code: <div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'> <span style='color:#888888;font-weight:bold;font-size:10px;'>RECENT BLOGS</span> </div> Why is IE7 adding its own padding when i don't add a nl between the span and the content within the span? It's the display:block issue that also happens with images. But I just can't understand why IE7 would add spacing there, the 2 above are almost identical. I'm a novice with CSS and HTML so the following may seem elementary to most of you. I'm a retail vitamin store owner with a website, (URL address blocked: See forum rules) . We do very well with our store front and are getting better and better with our online discount vitamin store. Our web master has programmed our site so we can easily insert new products. This is done in the <body>. Recently I've wanted to add some spice with color and formatting . At first I was doing this with something like <FONT FACE="Verdana, Helvetica, Arial" size="4" color="006600">. But now as I get into CSS and double checking all code with W3.org, it doesn't like this approach. Now I'm trying <span id="enzymatic" class="prod_description"> in the <body> with span#enzymatic p { color: green; } span#enzymatic h4{ color: blue; } etc. in a CSS definition file. It all works well, but W3.org still doesn't like where I've inserted the code. If you go to our page: (URL address blocked: See forum rules)=country-life-seniority-multivitamin You will get among other "errors" the following message: <h4>Seniority ™ Multi-Vitamin Capsules </h4> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Any hints as to what basic rules I'm breaking? Be kind. Many thanks, healthyphil I'm wondering is is it possible to have a <div> tag where a left <span> can stick to the left and a right <span> to stick to the right. What I'm looking for is .... ============================================ =[blah blah] (lot of spaces here) [blah blah]= ============================================ Code:
div.divTop
{
margin: 0px;
padding: 8px 0px;
width: 600px;
color: #000000;
font-weight: normal;
font-family: verdana;
font-size: 10pt;
font-style: normal;
text-indent: 20px;
}
span.spanTitle1
{
font-size: 16pt;
}
span.spanTitle2
{
font-size: 10pt;
}
[code]
[code]
<div class="divTop">
<span class="spanTitle1">blah blah1</span>
<span class="spanTitle2">blah blah2<img src="....."></span>
</div>
Edit: Can't make the ASCII text work here..... Hi everyone. I would like to change the first letter of an h2 tag thats NOT in a span in the following chunk of code Code: <h2> <span class="subtleHeader">Saskatoon, Regina and Edmonton's</span><br> WEB DESIGN EXPERTS </h2> So in this example I want to change the W. yes I can change the dom, but I'm very very lazy and have this DOM structure in many places and was wondering if there was a css way to do it. Thanks I am trying to make tooltips, using PHP code inside <span>. Is there possibility to control the position in <style>, to avoid possibility for the box (tooltip), not to be completely visible, I mean, when the word that has to be described is at the right bottom of the window, box will change it's position and will be placed at the upper and left position. The box would have to be placed at the position it can have to be readable. I am creating a page where I will list OS names, and when I mouse over the name I would like to display the versions in the database for the corresponding name. The problem I am having is that I'm trying to use span to display the versions but I keep getting a document.all.menu1.style is null or not an object. Here is my code. I don't seewhere it's not working since I got this code from a tutorial and the tutorial code works just fine. <STYLE TYPE="text/css"> #menu1 { display : none } A:link {color:black; text-decoration:none} A:hover {color:blue; text-decoration:underline} </STYLE> <td bgcolor="#DCEBEB"> <SPAN onMouseOver="document.all.menu1.style.display = 'block'" onMouseOut="document.all.menu1.style.display = 'block'"> <img src="../../images/plus.gif">AIX<br> </SPAN> <SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'"> <img src="../../images/minus.gif"><a href="http://www.test.com">Testing 1</a><br> <img src="../../images/minus.gif"><a href="http://www.yahoo.com">Testing 2</a><br> <img src="../../images/minus.gif"><a href="http://www.cnn.com">Testing 3</a> </SPAN></td> If I have the following: <span id="span1"></span> <span id="span2"></span> If I set the width of span1, I want to have span2 adjust it's width to be the same automaticly. Something dynamic or a variable. For example in simple terms. span1.width = 150px; alert(span2); would show 150px also. Hope that make sense. Thanks Let's take a look shall we? my website See the white part in the middle? How can I make that run all the way down to the bottom of the browser? As it is now, I have to set a height for that specific class in the stylesheet, only because firefox says so. If I dont, that part of the page just stays up top, so i now have it set @ height: 400px (i think). I've seen other websites where the top and bottom of the page, the body touches the very margin of the browser window. See this page for example ok, i know that because span is a inline element width cant be applied to it, and a lot of people suggest DIV my problem is that div wont work, because of its auto-break thing.... it being a block element and all... so, how would i apply a width of something like 100px to the span elements in code like this?... Code: <div class="infocontainer"> <span class="infobox">Publisher: <?php print $publisher; ?></span> <span class="infobox">Developer: <?php print $developer; ?></span> <span class="infobox">System: <?php print $system; ?></span> <span class="infobox">Gen <?php print $genre; ?></span> </div> Hi, there. I've created a simple 2-column list using a <span> to justify items I want in the right column to the right edge of the containing <div>... everything is working fine in Firefox, but have just noticed that Internet Explorer is punching all the spans down one line. I thought spans were purely inline, so this is a little confusing! Here's the CSS I'm using: Code:
#300px-LIST {
width:300px;
margin:0px auto;
text-align:left;
padding:0;
}
.right {
float: right;
}
...and the HTML: Code: <div id="300px-LIST"> LINE 1 LEFT<span class="right">LINE 1 RIGHT</span><br /> LINE 2 LEFT<span class="right">LINE 2 RIGHT</span><br /> LINE 3 LEFT<span class="right">LINE 3 RIGHT</span><br /> </div> Any pointers gratefully received! can someone explain why a specific CSS works in IE but not Mozzila? This is the Page and its the word "button" directly below the logo. Code:
.Page_Title {font-size: 13px;
color: #999;
font-weight: bold;
padding-left: 25px;
background-color: #eeeeee;
}
Any ideas? Thanks. |
|||||||