Search the Community
Showing results for tags 'span'.
Found 6 results
-
2 out of 3 is good! Now for the remaining change of behavior. For several years, a bit of code has produced a pop-up box containing a footnote or reference when a link was hovered. It still works, but now if the pop-up box overlaps an image, the text avoids the image below. You can see problem if you paste the attached code into the Try It Editor at http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_mountain and hover on 'paradigm'. Something in <style> needs to be changed (apparently to keep up with bug fixes in html), but I can't find it. It seems to me that z=1 should make the presence of an image at z=0 irrelevant. It used to! (Immediate edit: I didn't see the attachment, so I changed the file from RTF to plain text and reattached...) Still no attachment visible, and it keeps saying 'No file chosen', so in case it means it, here is what the attachment would have said: --------------------------------------------------------------- <!DOCTYPE html><html> <style> a span { display : none ; } /* Author or dagger: blue, no underline */ a.n { color : blue ; text-decoration : none ; } /* Hover to display Reference or Note in popup box */ a.n:hover span { position : relative ; top : 0px ; /* Place box 1 line below anchor */ right : 10px ; /* Keep edge of box on screen */ display : block ; z-index : 1 ; color : black ; text-decoration : none ; font-size : .90em ; background-color: #ffd ; text-indent : 0 ; outline : 2px solid blue ; padding : 3px ; } .fl { float : left ; margin : 4px 16px 4px 0px; } </style> <body> <h2>Spectacular Mountain</h2> <figure> <img class="fl" src="pic_mountain.jpg" alt="Mountain View" style="width:50%"> <figcaption style="color:brown;">Continually syndicate client-centered resources vis-a-vis covalent <a class="n">paradigms<span> In lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue</span></a>. Energistically repurpose out-of-the-box total linkage after frictionless e-commerce. Dramatically reinvent vertical supply chains without B2C best practices. </figcaption></figure> <p>Phosfluorescently benchmark high standards in imperatives after strategic catalysts for change. Rapidiously enable user friendly initiatives via state of the art action items. Monotonectally cultivate end-to-end markets and 24/365 users. </p> </body> </html>
-
Hello Everyone,I'm a total novice with CSS, but I'm trying to learn. I'm trying to place an image with a caption into a paragraph. I did some Googling and found http://www.corelangs.com/css/box/caption.html. I pretty much copy and pasted an example from this website with a few changes. Everything seemed to work fine, until I tried to align the image to the right of a paragraph with a width of 800px. Here is the css: .imageholder {position: relative; width: 260px; border:thin solid black} .imageholder .caption {position: absolute; width: 260px; bottom: 0px; left: 0px; color: #000000; background: #ffffff; text-align:center; font-size:11pt; font-family:'Palatino Linotype', serif; opacity:0.8; border:thin solid black} and the html: <h2>Glenwood Sunday Market</h2><p><span class="imageholder" style="float:right;"><img src="glenwood.jpg" width="100%" style=:margin:0; padding:0; position:relative; left:-20"> <span class="caption">Natasha and Scott at the Glenwood Market </span></span>Blah blah blah etc etc</p> When I used the code as written at corelangs.com, with a <div> element for "imageholder", the image and caption looked fine, but the <div> element destroyed the paragraph formatting, and the paragraph spread to fill the width of the page, with the image at the far right. I tried using <span> instead of <div> since it is an inline element, and the positioning was fine, but the image was always offset by about 20px right of the <span> frame. I've attached a screen cap with borders added for clarity. What is the right way to do this? Should I be using <div class="imagegolder"> or <span class="imageholder">? Thanks, Adam
-
Hello once again, i will do this one short, since i feel stupid asking about it, but its a must since i cannot remember, and might be a rookie question -.-'... anyhow, here is my css: .chat_div_bottom_global_friend_list_button a:hover { text-decoration:none; color:#CDCDCD; background-color:#900; } .chat_div_bottom_global_friend_list_button a:link,a:visited,a:active { text-decoration:none; color:#CDCDCD; } here is my html: <span class='chat_div_bottom_global_chat_rooms_button'> Chat Room (Public)</span> <span class='chat_div_bottom_global_friend_list_button'> <a href='#'>Friend list (0)</a></span> now the question, i have a background to the link, but i would like that background, to cover the whole span if possible, any ideas? X)... [PICTURE ATTACHED]
-
Hey, everyone.. :DI want to ask something about classes..Can you tell me the difference between p class, span class, and other classes?Thx before
-
hy to aaaaavery one out there, help!!!! :Shock:I have been learning HTML on this site for over almost three-four weeks I am in HTML basics..at HTML layout,so aaplease can somebody tell me what is this: id=" " attribute it's value it's use in layout and beside that.and these <div> and <span> &<div id="container" (<<<<<<<<what's this) style="width:500px"> (a line from the example given in HTML layout)
-
Hi forum, I've been struggling with an annoying bug in IE7. You can see in the pictures how the nav it's correctly displayed in any friendly browser and in that spooky thing called IE7. I've put a red border around the <li> elements so you can see what's the problem in IE7, hope you can find me to find the solution to it. Chrome IE7As you can see the <li> elements are being extended to the right and overlapping the <span> element in the right. Here's my HTML and CSS for reference HTML <div class="category-image"><img src="images/PipelineImage.jpg" alt="main-pic-development" width="700" height="264"/><ul class="subnav"><span class="left-yell-corner"></span> <li class="yell-bg"><a href="#">Pipeline</a></li> <span class="right-yell-corner"></span><span class="left-blue-corner"></span> <li class="blue-bg"><a href="#">TDD Opportunities</a></li> <span class="right-blue-corner"></span><span class="left-blue-corner"></span> <li class="blue-bg"><a href="#">Technologies</a></li> <span class="right-blue-corner"></span><span class="left-blue-corner"></span> <li class="blue-bg"><a href="#">Publications</a></li> <span class="right-blue-corner"></span></ul></div> CSS .category-image {width:100%;position: relative;float: left;margin-top:20px;margin-bottom: 30px;}[/b][b]ul.subnav {display: block;float: left;width: auto;margin-left: 60px;margin-right: auto;margin-top: -38px;position: relative;}[/b][b]ul.subnav li {display: inline;width: auto;text-decoration: none;list-style-type: none;font-family: Arial, sans-serif;font-size: 15px;font-weight: lighter;border: 1px solid red;}[/b][b]ul.subnav li a{display: block;float: left;text-decoration: none;margin-top: 10px;height: 20px;padding: 0 10px;color: white;position: relative;}[/b][b]ul.subnav li.yell-bg {float: left;list-style-type: none;background: url(../../images/subnav-yellow-pattern.png) repeat-x;height: 55px;}[/b][b]ul.subnav span.left-yell-corner {float: left;display: block;width:9px;height: 55px;background: url(../../images/subnav-yellowcorner-left.png) no-repeat 0 0;}[/b][b]ul.subnav span.right-yell-corner {float: left;display: block;width:9px;height: 55px;background: url(../../images/subnav-yellowcorner-right.png) no-repeat 0 0;margin-right: 2px;}[/b][b]ul.subnav li.blue-bg {float: left;list-style-type: none;background: url(../../images/subnav-blue-pattern.png) repeat-x 0 3px;display: block;height: 38px;padding-top: 1px;position: relative;}[/b][b]ul.subnav span.left-blue-corner {float: left;display: block;width:8px;height: 38px;background: url(../../images/subnav-bluecorner-left.png) no-repeat 0 3px;}[/b][b]ul.subnav span.right-blue-corner {float: left;display: block;position: relative;width:8px;height: 38px;background: url(../../images/subnav-bluecorner-right.png) no-repeat 0 3px;margin-right: 4px;}[/b][b] Thank you very much in advance, hope you can help me guys.
