|
CSS - Make <li> Labels Clickable In An <ol>
This seems so simple, yet my hour of searching has yeilded nothing!!
I simply want to make the numbers that appear for each <li> to be clickable. I tried moving the ,a> tags outside the <li>, but that doesn't work. I tried (to no avail) in CSS: li a {list-style-position:inside; } ans: ol li a {list-style-position:inside; } also i added a property that enabled me to click anwhere to the right of the number across the whole page, but I forgot now what that was. In the simplest illustration, I would like to be able to click on the no. 1 from the HTML code below. <ol> <li><a href="#a1" /></li> </ol> Similar TutorialsSo I have a picture gallery/menu thing and I'm TRYING to make the list item actually clickable but I don't know how. It's probably easier to show you so on this page, I want the graphic that says 'click me!' to actually be a working link like you would expect from a menu item. http://www.thespinzone.com/temp/devcss.php Of course you can view the source to see the code but... The relevant css is: Code:
#container {position:relative; width:204px; height:530px; margin:0px auto 0 auto; border:0px solid #aaa;
background-image:url(portmenubg1.jpg) left no-repeat;}
#container ul {width:204px; height:530px; padding:0; margin:0px; list-style-type:none; float:right;}
#container li {float:left;}
#container a.gallery span {position:absolute; width:1px; height:1px; top:1px; left:5px; overflow:hidden;
background:#4C697B;}
container a.slideb, #container a.slideb:visited {background:url(pb.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:34px 0px 24px 42px; text-align:left; cursor:default;}
#container a.slidec, #container a.slidec:visited {background:url(pc.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:20px 2px 22px 4px; text-align:left; cursor:default;}
#container a.slided, #container a.slided:visited {background:url(pd.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 80px; text-align:left; cursor:default;}
#container a.slidee, #container a.slidee:visited {background:url(pe.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 8px; text-align:left; cursor:default;}
#container a.slidef, #container a.slidef:visited {background:url(pf.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 46px; text-align:left; cursor:default;}
#container a.gallery,slideb:hover {height:54px; width:120px;}
#container a.slideb:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidec:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slided:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidee:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidef:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.gallery:hover span {position:absolute; width:300px; height:200px; top:10px; left:204px; color:#000; background:#fff;}
#container a.gallery:hover img {border:1px solid #000; float:left; margin-right:5px;}
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
and the html is: Code: <div id="container"> <ul> <li><a class="gallery slideb" href="#nogo"><span><img src="pb1.jpg" alt="clickme" title="B" /></span></a></li> <li><a class="gallery slidec" href="#nogo"><span><img src="pc2.jpg" alt="clickme" title="C" /></span></a></li> <li><a class="gallery slided" href="#nogo"><span><img src="pd1.jpg" alt="clickme" title="D" /></span></a></li> <li><a class="gallery slidee" href="#nogo"><span><img src="pe1.jpg" alt="clickme" title="E" /></span></a></li> <li><a class="gallery slidef" href="#nogo"><span><img src="pf1.jpg" alt="clickme" title="F" /></span></a></li> </ul> </div> I'm trying to make a small box that is entirely clickable with text inside that is not underlined. Could someone explain to me why this code does not work, and what I need to do to fix it? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: helvetica;
padding: 30px;
}
.box {
width: 250px;
height: 75px;
padding: 40px 10px 10px 25px;
background: #FFCE4E url('images/gradient_bg.jpg') repeat-x;
border-radius: 5px;
border: 1px solid #E8A935;
}
.box h3 {
font-size: 19px;
color: #333;
padding-bottom: 5px;
}
.box p {
font-size: 14px;
color: #CC0000;
font-style: italic;
}
a .box {
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">
<div class="box">
<h3>Main text goes right here.</h3>
<p>Smaller italicized text goes here.</p>
</div>
</a>
</body>
</html>
Hi, I have labels that aren't displaying properly in IE. I have used similar code in many parts of the site without problem. Please see this page in IE6. The label contents don't display If I move the labels outside of the content div it does display... Code: <div id="content"> <div id="tempcontent"> <div id='confirmation'> <p><label>Email address:</label>james@got.com<br></p> <p><label>Duration of stay:</label>2 day(s)<br></p> <p><label>Number of guests:</label>4<br></p> <p><label>Arrival date:</label>2007-01-03 00:00:00<br></p> <p><label>Departure date:</label>2007-01-05 00:00:00<br></p> </div> Code:
#content {
position:relative;
background-color:#ffffff; /* dcba72 */
margin-top: -1em;
#tempcontent {
margin: 4em 4em;
}
#confirmation {
margin: 2em 8em;
border: 1px solid #781351;
padding: 1em 3em;
}
label
{
width: 15em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
color:black;
}
Does anyone know what's going on? [note: I created a new thread as my example has shifted a bit ... it was 'white-space and checkboxes'] The site http://www.thedancegypsy.com/test/checkBoxes.shtml contains two rows of checkboxes that are *supposed* to (a) indent any wrapped lines, and (b) keep each label with the corresponding checkbox when it does so. The only difference(s) in the *sources* for the two rows a - in the first, the html for each checkBox is written on a separate line, but in the second they are separated by only a space. - box ids were different to allow for html validity check. Each paragraph has the form: <p style = "margin-left: 2in; text-indent: -1in;">...(labels) .. </p> Each label/checkbox has the form: <label for="boxA2"><input type="checkbox" id="boxA2" > Combo A</label> Alas, on my IE brower (5.2 for mac on mac os 10.3), when changing screen sizes * the first row manages to keep each label with the corresponding checkbox -- but fails to indent. * the second row indents (reasonably well) but totally fails to keep the checkboxes with the labels. Any ideas???? Notes: This test started with an attempt to get a similar line of checkboxes to render correctly on a windows IE environment...] All lines are now handwritten, rather than the javascript coded lines I had in my earlier example... separation is now via non-breaking space rather than nowrap spans. If duplicate ids are allowed, the result is the same Im trying to write a better office backend. My client does alot of mailings and would like to print an avery 5163(this is not set in stone) form with addresses and send in the mail. Right Now: 1. Generate List. (I wrote the web-app that does this). 2. Copy it from the generated webpage. 3. Pastes it to M$ Word. 4. Adjust any formatting issues. 5. Print the list. What I'd like to do is 1. Generate List. (I wrote the web-app that does this). 2. Print the list.(The page would be formatted with CSS to achieve proper scale and dimension) Does anyone know where I would go to even get started on accomplishing this task? I don't know how to get my radiobuttons, defined as, Code: <div id="options">
<fieldset id="fset">
<legend>Pick car</legend>
<label for="id_gm">
<input type="radio" value="gm" id="id_gm">gm</label>
<label for="id_vw">
<input type="radio" value="vw" id="id_vw">vw</label>
</fieldset>
</div>
lined up so they a Floated to the left; Each choice (radiobutton and its label) on its own row; With the radiobutton prior to its label; and With the radiobutton and its label aligned horizontally. Would be grateful for your help. Hi all! I'm wondering for quite a while now... when you put text or a label next to a radiobutton, it never lines up nicely. The (label) text is always a bit lower then the radiobutton. A common solution to this is using tables. But I don't want to use this "hack". I've also tried CSS margins and padding, but these don't seem to help. Is there any elegant way out there to get the text nicely lined up with a radiobutton? Thanks! Hi I'm trying to get the labels of my form to appear above their input boxes and for the input boxes themselves to be side by side (basically a horizontal login form) I've used the label tag in my form after doing some research which looks like: Code: <form> <label for="email">Email</label> <br /> <input type="text" name="email" /> <label for="password">Password</label> <br /> <input type="text" name="password" /> </form> In my CSS I have a label property defined as: Code: label {
display:inline-block;
}
But the outcome is this: Could anyone please shed some light on my problem? Thank you This will be tough, but I'm confident CSS can handle exactly what I need. I want to print onto labels. Actually, they're return address labels (1.75" by 0.5") to be specific. How do I set up a layout with the following specifications? Quote: Sheet Size: 8.5" x 11" (standard sheet of paper) Dimensions: 1.75" x 0.5" (dimensions of each label) Spacing Between Labels: Vertical Spacing 0", Horizontal Spacing 0.28125", Vertical Pitch 0.5", Horizontal Pitch 2.03125" Margins: Top 0.5", Bottom 0.5", Left 0.33", Right 0.33" Can someone give me a starting point and I'll try to figure it out? I'm lost on it. Thanks Hi, I am trying to find a way to print address labels from a web page. The page will either be ASP or ASP.NET. Is it possible to get enough control over the print layout to create consistent labels? The browser will be IE6 and the printer will be printing onto standard address labels that you buy for this sort of thing. If it is possible, could someone please point me in the right direction, I am stumped. Thanks, Matt I'm having some trouble formatting the radio button label text size (as well as the button size). my CSS class is Code:
.style_xxs_normal {
font-family: Arial;
font-size: xx-small;
font-weight: 400;
}
my radio buttons are Code: <tr><td width='100%' align='left'><input type='radio' name='answer' class='style_xxs_normal' value='1'> Answer 1</td></tr> <tr><td width='100%' align='left'><input type='radio' name='answer' class='style_xxs_normal' value='2'> Answer 2</td></tr> Thanks for any suggestions. Hi, I am having trouble clearing labels and fields. I have set up my labels to float left and my fields to float left. When i have more than one set of label and field, they do not align underneath each other. Please could someone suggest the best way to clear the label and field so the next row will display correctly? Thanks Hey! I got some issues in IE8 (not checked IE7,6) When I press the "send" button and the form validates, the bottom 2 labels and a checkbox move down about 15px. I think it has to do with my positioning of the calendar icons above and the error messages, havent been able to fix it tho. http://www.borgweb.se/cvh/boka_rum.php is the address. The site is in swedish so bare with me, I think you will understand what I mean once you submit the form. If I then press ctrl-a or select everything with the mouse, the labels go back to their original position. Any ideas of what can sort this is welcome! Thanks! Hello there, I Have a radiobutton with a label beside it. It only isn't aligned that nicely. The radiobutton it self is a few pixels heigher then the label it self. Now i have partitialy fixed this by using float: left on the radiobutton(s) itself. But it doesn't work in all browsers. Is there some kind of standard way to fix this? Thx in advance. Hi I have the following div code for a linked-image <div id="banner"> <a href="/"><img src="/images/header1.jpg"></a> </div> the css for banner is as follow #banner {width : 960px; height : 100px; left : 0; top : 0; position:absolute} but this image is not clickable. I checked the source code for this page and it does show the linked image but the image is not clickable. can anybody shed some light on this? I have coded an image to be clickable, but its not clickable. Code: <div class="quicknav"> <div class="wrapper"> <div class="livesupport"> <a href="http://google.com"><img src="images/phone.png"></a> </div></div></div> CSS code Code:
.livesupport {
position: absolute;
top:15px;
right:-5px;
padding:1px 0 0 0;}
.quicknav {
width: 100%;
height: 0px;
background: #fff;
border-bottom: 1px solid #c8c8c8; }
.quicknav a { color:#9a9a9a; }
.quicknav a:hover { color:#343434; }
.wrapper {
position: relative;
width:977px;
margin: 0 auto; }
Thanks in advance!! I have a page that displays a bunch of products for my site and when viewed in FireFox and Chrome everything is great. When viewed in IE or Opera however, the products are displayed correctly but are not clickable. I can't seem to figure out why IE and Opera don't see the anchor tag. I had set it to display as block and set height and width to 100% so that the entire square that the products are displayed is clickable (the product images are all different sizes). Since IE didn't see it I set some conditional stuff to simply add the link to the product images themselves and that does seem to work (although not how I'd like it to) but this solution doesn't really work since Opera doesn't work and doesn't recognize the IE conditional statements. Here's the code for the individual products, obviously it's being repeated a bunch of times when the page is actually viewed. Also, yes I used a table in there but I was having a bitch of a time getting the image to center both horzontally and vertically so I broke down and just used the table cell for it. If somebody feels up to helping me re-write it to center using just divs, I'm all for it. Code: <div class="product_cell"> <table width="187px" height="190px" style="position:absolute; top:0; left:0;"><tr> <td height="100%" width="100%" align="center" valign="middle"> <!-- FOR NON-IE BROWSERS--> <![if !IE]> <div class="product_link"> <a href="proddisp.php?id=<?=$row['id']; ?>" style="display:block;width:100%;height:100%;"></a> </div> <![endif]> <!-- END FOR NON-IE BROWSERS--> <!-- FOR IE Part1--><!--[if IE]><a href="proddisp.php?id=<?=$row['id']; ?>"><![endif]--> <img src="http://www.skullcrow.com/images/products/<?=$row['id'].'_m.gif'; ?>" alt="<?=$row['name']; ?> - <?=$row['subname']; ?> - t-shirt" border="0" /> <!-- FOR IE Part2--><!--[if IE]></a><![endif]--> </td></tr></table> <img src="http://www.skullcrow.com/images/frame_bg/prodframe_left_<?=$row['bgcolor']; ?>.jpg" width="11px" height="190px" style="float:left; border:0;" /> <img src="http://www.skullcrow.com/images/frame_bg/prodframe_center_<?=$row['bgcolor']; ?>.jpg" width="162px" height="190px" style="float:left; border:0;" /> <img src="http://www.skullcrow.com/images/frame_bg/prodframe_right_<?=$row['bgcolor']; ?>.jpg" width="14px" height="190px" style="float:left; border:0;" /> </div> <!-- END PRODUCT_CELL --> And from the stylesheet... Code: .product_cell {height:190px;width:187px;padding:0;margin:0;border:0;position:relative;overflow:hidden;}
.product_link {position:absolute;top:0;left:0;width:100%;height:100%;z-index:500;}
The page I'm working on is located he http://www.skullcrow.com/index_imp.php Thanks for any help. Hi, Here is my website: http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14 I noticed that when I moved my thumbnail box at the bottom up by 40px, I could no longer click on the thumbnails until I clicked on the very bottom. It seems the thumbnails are on a layer below the main image, and when I hover over the website, you can see the box that appears to sit on top of thumbnails that stop them from being clicked. Code: http://i46.tinypic.com/2z7o2hg.jpg Can someone explain to me how I can get my thumbnails to be clickable again? Is there a common cause of non-clickable text? I mean that on the suckerfish style menus I can't click on text in the link items. I thought it was a z-indexing issue but apparently not. I have encountered this problem many times now and am not sure how to fix it. Hello all. I have the following code: 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" lang="en">
<head>
<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#base {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
background: #c0c0c0; } /* end #base */
#main_block {
margin: auto;
text-align: left;
width: 955px; } /* end #main_block */
#main_content, #main_content_2c, #main_content_3c {
background: #ffffff;
border-left: 1px solid #575757;
border-right: 1px solid #575757; }
#top_main_content { padding-top: 1em; }
#top_main_content ul {
float: left;
padding: 0;
margin: 0;
list-style-type: none;
border-top: 1px solid #f1f1f1; } /* end #top_main_content ul */
#top_main_content ul li {
text-align: right;
border-bottom: 1px solid #f1f1f1; } /* end #top_main_content ul li */
#top_main_content ul li a {
line-height: 26px;
display: block;
color: #686868;
width: 266px; } /* end #top_main_content ul li a */
.indent { margin-right: 1.5em; }
#top_main_content #rotating {
z-index: 0;
float: right;
width: 687px;
height: 242px;
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #f1f1f1; } /* end #top_main_content img */
#top_main_content #rotating p, #top_main_content #rotating h1 { margin: 2em 0 0 2em; }
#sidemenu12,
#sidemenu11,
#sidemenu13,
#sidemenu14,
#sidemenu15,
#sidemenu16,
#sidemenu17,
#sidemenu18,
#sidemenu22 {
width: 687px;
height: 242px;
font-weight: bold;
overflow: hidden;
position: absolute;
visibility: visible; }
</style>
</head>
<body>
<div id="base">
<div id="main_block">
<div id="main_content">
<div id="top_main_content">
<ul>
<li><a id="sidemenu11_link" href="#"><span class="indent">Link 1</span></a></li>
<li><a id="sidemenu22_link" href="#"><span class="indent">Link 2</span></a></li>
<li><a id="sidemenu12_link" href="#"><span class="indent">Link 3</span></a></li>
<li><a id="sidemenu13_link" href="#"><span class="indent">Link 4</span></a></li>
<li><a id="sidemenu14_link" href="#"><span class="indent">Link 5</span></a></li>
<li><a id="sidemenu15_link" href="#"><span class="indent">Link 6</span></a></li>
<li><a id="sidemenu16_link" href="#"><span class="indent">Link 7</span></a></li>
<li><a id="sidemenu18_link" href="#"><span class="indent">Link 8</span></a></li>
<li><a id="sidemenu17_link" href="#"><span class="indent">Link 9</span></a></li>
</ul>
<div id="rotating">
<div id="default_div"><p>Default</p></div>
<div id="sidemenu11"><p>Section 1</p></div>
<div id="sidemenu12"><p>Section 2</p></div>
<div id="sidemenu13"><p>Section 3</p></div>
<div id="sidemenu14"><p>Section 4</p></div>
<div id="sidemenu15"><p>Section 5</p></div>
<div id="sidemenu16"><p>Section 6</p></div>
<div id="sidemenu17">
<p>Section 7 - A<br />
<a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p>Section 7 - B<br />
<a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
<a href="#">Link 3</a></p>
</div>
<div id="sidemenu18"><p>Section 8</p></div>
<div id="sidemenu22"><p>Section 9</p></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Which if you look at it in a browser looks rather messy but I have javascript that hides and shows things. But my question is why aren't the links clickable in Firefox. They are in IE7, IE6, and Opera but not Firefox or Safari. I know that if I remove position: absolute from the last set of styles that it will work but then everything isn't stacked on top of each other. |
|||||||