|
CSS - Links Not Displaying As Block After Clicking On Them
Hi there!
I'm having troubles with link formatting on my website. They sidebar links display fine until the user clicks on one of them. After that, when returning to the original page, the links display "too short" as if they are no longer displaying as block elements. Here's some of the relevant HMTL: Code: <ul class="sidelinks"> <li><a href="http://www.mozilla.com/en-US/firefox/" title="Firefox download page">Firefox Browser</a></li> <li><a href="http://www.zonealarm.com/store/content/company/products/znalm/freeDownload.jsp" title="ZoneAlarm download page">ZoneAlarm Firewall</a></li> <li><a href="http://www.safer-networking.org/" title="Spybot download page">Spybot Search and Destroy</a></li> <li><a href="http://www.lavasoftusa.com/products/ad_aware_free.php">Adaware</a></li> <li><a href="http://www.avast.com/eng/download-avast-home.html" title="Avast download page">Avast Antivirus</a></li> </ul> And here is the CSS: Code:
.sidelinks li a {
color:#f90;
border-bottom:1px dotted #666;
display:block;
text-decoration:none;
width:80%;
padding:8px 6px;
margin:0;
}
.sidelinks a:visited {
color:#f90;
border-bottom:1px dotted #666;
display:block;
text-decoration:none;
width:15%;
padding:8px 6px;
margin:0;
}
.sidelinks a:hover {
color:#fff;
background:#f90;
}
.sidelinks li {
font:110% Arial;
margin:0;
}
ul {
margin:0;
}
#sidebar ul, #bestofdthek ul {
list-style-type:none;
}
Can anyone help? Thanks so much for looking! Gary Similar TutorialsHi, I guess this is a fairly easy one to sort out. I have a main menu of 5 links which i want to highlight when you mouse over the area. At the moment I have coded the menu in a table which I know is not so great, but its the only way I can get the background image to display across the whole of the <div> and this only works in FF, in IE6 you have to mouse over the link text itself before the highlighting will appear. I just want to know the "correct" way to code this so that when the mouse hovers over the line the link is on the highlighting will appear. Take a look at www.webwizedezignz. co . uk to see what its like at the moment. Cheers in advance I want to create a css menu where a chunk or block is highlighted on mouse over but inside that block are individual hyperlinks that are also highlighted on mouse over. Here's the catch, I can't use any doctype tags like this one <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> because it makes the rest of my page look like junk. The top nav on this page is exactly what I want to do. http://www.smashingmagazine.com/tag/showcases/ I have been trying in vain to get div elements on a page to behave how i want them to. I have a list of items, in the middle of which i need to display some tablular information witha picture along side it. This i have managed to acieve fine, but i can't get the next <li> to start below these 2, it starts alongside and the wraps underneath. I have tried everything. Can anyone help? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- #wrapper{ font-family:Verdana, Arial, Helvetica, sans-serif; margin-left: 20px; width: 550px; font-size: 12px; line-height: 22px; letter-spacing: 0.5px; color: #666666; } #topimg { margin: 20px 0; padding-bottom: 20px; border-bottom: 1px dotted #CCCCCC; text-align:left; display:block; } #secondimg { margin: 0 0 0 20px; text-align:left; display:block; } #bodyimg{ padding: 20px 0px 20px 20px; float:left; display:block; } #listtable{ padding-top: 20px; padding-bottom: 20px; float:left; font-size: 10px; letter-spacing: 0.5px; color: #891C46; list-style-type: none; line-height:18px; } #listtable li{ margin: 1px; padding: 1px; } #listtable div { margin: 1px; padding: 1px; background-color: #F7F7F7; } --> </style> <title>Carlton</title> </head> <body> <div id="wrapper"> <div id="topimg"> <img src="/carlton-newsite/img/planandbuy/planandbuy.gif" width="173" height="33"> </div> <div id="secondimg"> <img src="/carlton-newsite/img/planandbuy/thebasics.gif" width="133" height="23"> </div> <ul> <li>Cinema Advertising is available in weekly blocks starting on Fridays.</li> <li>It is possible to buy <em> guaranteed admissions</em> by TV region, <em> follow specific films</em> or <em> nominate individual screens</em>. </li> <li>The minimum time unit available is 5 seconds. Prices differ based on commercial length with indeces using 30” as a base: </li> <div id="listtable"> <table width="200" border="0" cellspacing="0" cellpadding="0" class="nobullet"> <tr> <td width="105"> <li> <div>5”</div> </li> <li>10”</li> <li> <div>20”</div> </li> <li>30”</li> <li> <div>40”</div> </li> <li>45”</li> <li> <div>50”</div> </li> <li>60”</li> <li> <div>90”</div> </li> </td> <td width="95"> <li> <div>.3”</div> </li> <li>.5”</li> <li> <div>.8”</div> </li> <li>.1.00”</li> <li> <div>.1.33”</div> </li> <li>.1.50”</li> <li> <div>.1.67”</div> </li> <li>.2.00”</li> <li> <div>.3.00”</div> </li> </td> </tr> </table> </div> <div id="bodyimg"> <img src="/carlton-newsite/img/digital_adver/satelite.jpg" width="220" height="182"> </div> <li>Cinema commercials are shown on 35mm film, it is easy to get your TV ad transferred by our production department. </li> <li>Lead times from booking to getting on screen are 3 weeks, although CSA’s <em> Early Booking Incentive</em> guarantees extra value if you can book your campaign 6 weeks in advance of start date. </li> <li>Cinema Advertising Association <em> cinema buying guidelines</em> ensure your campaign meets industry agreed standards. </li> </ul> </div> </body> </html> Hey, I've run into some trouble with a menu. Below is my CSS: css Code: Original - css Code #menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; } #menu ul li{ float: left; margin: 0 5px; } #menu ul li a{ color: #CCC; display: block; font-size: 0.75em; text-decoration: none; height: 28px; line-height: 28px; }
#menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; }
As you can see, this is a horizontal menu using an unordered list with its list items floated left. I would have used inline on the list items as I prefer it to floating in this scenario, but the links within those list items are displayed as blocks so as to allow me to properly align a background image (not included) in links of a certain class - and block elements don't go inside inline ones nicely. This is just fine in modern browsers. However, IE6 displays the links at 100% width (whereas other browsers contain the link text nicely), which ends up displaying the horizontal menu as a vertical list. I'd rather avoid assigning a width to each menu item (that does fix the problem, but it's messy and harder to update). That's the only fix I've come up with. Please let me know if you need any further information - otherwise, thank you in advance for any assistance! I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block. Here is an example (not my site): http://rmideas.com/menus/menutest/NavToBar.htm The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'. How can I get this to work properly in both FF and IE? and I have overlapping problems, some code overlaps in one browser but looks fine in another. Hi All, I've created the below style sheet for links on my site, but MS IE won't display the classes properly! In the first class "navlink" it displays ok except for the last cell in a table of 5 columns where no styling is applied! The second class "sidelink" is used to style side navigation links within div tags on a page, but the links appear as hyperlinks with no styling except color and the background highlight on hover does not expand to 100% of the containing div! only around the text. link to page: Click here Does anyone know what's up with this? as it all displays fine in Mozilla but not Ms IE. Thanks PHP Addict Code:
A.sidenav:LINK {
color:#FFFFFF;
font-variant: small-caps;
font-size: 85%;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
A.sidenav:VISITED {
color: #FFFFFF;
}
A.sidenav:HOVER {
color: #FFF6BF;
background-color:#00158C;
text-decoration: none;
}
A.sidenav:ACTIVE {
color: #FFF6BF;
}
I give up. *falls over* So.. I'm dabbling in CSS. I have a general idea of how it's used and all that good stuff... I'm just having some massive issues with some of the coding. Issues that I should not be having. I'm attempting to change the color of links, visited, active, hover and otherwise. But here's where it gets strange. I get the links to change color. But... they won't all change. My code was initially more complex, but with this problem I've hacked it down to this incase there was some non working bit of text somewhere that was making something not parse properly... Code:
A:link { color:#2A2C8B; }
A:visited { color:#1D1D2D; }
A:active { color:white; }
A:hover { color:#7A7CBB; }
In this example, visited, active and hover work beautifully. Link, on the other hand, is the same old boring color as usual. So in a fit of desperation, i alter my coding as follows: Code:
A:visited { color:#1D1D2D; }
A:link { color:#2A2C8B; }
A:active { color:white; }
A:hover { color:#7A7CBB; }
now the visited link does not work, and the bottom three do. Why? why? *cry* here's the entierity of my style sheet, if anybody wants it. Code: <style type="text/css">
A:link { color:#2A2C8B; }
A:active { color:white; }
A:visited { color:#1D1D2D; }
A:hover { color:#7A7CBB; }
body {
Font-variant: Arial;
color: #111128;
font-size: small;
background: #6C5165;
background-image: url(swirlstar2.jpg);
background-repeat: repeat;
background-attachment: fixed;
margin-left: 10%; margin-right: 10%;
h1 { margin-left: -8%; }
h2,h3,h4,h5,h6 { margin-left: -4%; }
}
</style>
I am aware that there may well be an error or five in the body section... but I honestly havn't done alot of work there yet. my main concern is getting the links to work properly. And yes, I've tried snipping out the body tags and like leaving the link stuff there and it doesn't work. I've checked this in both Firefox and IE. My editor is notepad. Help? It's really appreciated... thank you. Here's a quicky before the weekend (FINALLY!!!)... Is there a way to detect if a user clicks on a bullet (or the entire LI tag)? I have this list, but I would like the browser to react differently when clicking on the LI text vs. the LI bullet icon. I've read about putting the icon in background and then moving the text, and this seems to work except for a bug concerning text wrapping... so please don't suggest that... I might be dreaming here... but the forums are usually very resourceful so why not!! Thanx a ton. Olografix Simple 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 got this odd border appearing around my link when I click on it and after it's been clicked on until I click elsewhere on the page (or if I click on it again to fold accordion). I'm not sure whether this falls under CSS or JavaScript as it's an accordion list through jQuery. I've tried adding border: none; and that did nothing. Any help greatly appreciated! Hi all. I'm experiencing a strange error. I have a central content div acting as a wrapper for content to sit central to the page. The start of my CSS file is as follows: Code:
*
{
padding: 0;
margin: 0;
}
html
{
height: 100%;
margin: 0 0 1px 0;
}
body
{
height: 100%;
text-align: center;
}
#wrapper
{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 750px;
margin: 0 auto;
text-align: left;
padding: 200px 0 50px 0 !important;
padding: 200px 0 0 0;
}
Now, whenever I click to the right of this central wrapper div in Firefox, the whole of the content is selected. Anybody know why this is or how I can stop it? http://warcraftpress.com/theme/theme.html I'm trying to have #footer be pushed down instead of the menu lapping over it. Basically, I want the menu to push it down, but it just overlays it. Thanks Hi Guys, I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet. Like this (. is the li): . Here is My Div Content I want it to be like this: . Here is My Div Content Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure). Here is my markup. <ul> <li> <div class="dragHandle"> </div> </li> </ul> DragHandle class is as follows .dragHandle { width: 20px; height: 25px; background-image: url(/styles/icons/selectarrow.JPG); background-position: center; background-repeat: no-repeat; cursor: move; } I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td. I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td. I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's. i coudnt find the forum search feature...? but anyone help with wht i am doing wrong? much appreciated Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so <span style="background-color:#336699; width:100px"></span> Now why wouldnt that work and is there a better way to do what im trying to achieve? In the attached gif, you should be able to see exactly what I mean, if I don't explain it well enough. I have a containing block, #content_main, defined as such: Code: #content_main
{
margin-left: 170px;
padding: .5cm .25cm 50px;
}
Headers (h1, h2, h3, etc) are used inside #content_main and are defined like this: Code: h1, h2, h3, h4, h5, h6
{
font-family: georgia, serif;
border-bottom: 1px solid #009;
}
If you look at the attached gif, you'll see the problem. The top one is what happens. It extends the border-bottom to the width of the containing block, even though it places the text correctly. The second one "Something Else" is what I want it to look like. I edited that with Fireworks. Since it renders the same in Firefox and IE, I figure it's my code that's wrong. Any thoughts? MPEDrummer Hi guys, can you give me some tips to centering a block (<div>) of code? I would like it centered vertically and horizontally and I would also like the background of the element centered (so the whole thing). text-align doesn't work, it only centers the text, not the element. Thanks, Josh Hi guys I was just wondering why cant i see these two <b></b> "blocks" on each side of my <UL> block in ie6 but in Firefox i can? Screenshot of situation: here is my code for the <b> blocks: PHP Code: .navbar b.lefty { display:block; position:absolute; z-index:604; height:100%; width:20px; top:0px; left:-20px; padding:0; margin:0; background-color:#ffffff; } .navbar b.righty { display:block; position:absolute; z-index:604; height:100%; width:20px; top:0px; left:136px; padding:0; margin:0; background-color:#ffffff; } Here is my code for the <UL> block: PHP Code: .navbar :hover ul { z-index:604; width:136px; top:40px; left:0px; padding:0; margin:0; background-color:#333333; text-align:left;} Now here is my HTML: PHP Code: <ul> <b class="lefty">d</b> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <b class="righty">d</b> </ul> I have this CSS for my "globalNav" class: .globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px} .globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block} This is my code for globalNav: <div class="globalNav"> <a href="#">Global 1</a> <a href="#">Global 2</a> <a href="#">Global 3</a> <a href="#">Global 4</a> <a href="#">Global 5</a> <a href="#">Global 6</a> </div> For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work? I have a div block which contains links on the left, it is using absolute positioning, I want to have the contents div block on the right, I want it 20 pixels away from the right border and 20 pixels away from the left div block, so if I resize my left div block, my right div block is always 20 pixels ahead of it. The code is included below: Code: <div style="position:absolute; top:20; left:20; width:200; height:200; z-index:1; padding:3px; border: #0000FF 1px solid; background-color:#FFFFFF;"> <div align="left">- <a href="#1">News</a></div> <div align="left">- <a href="#3">FAQ</a></div> <div align="left">- <a href="#2">ABC</a></div> <div align="left">- <a href="#6">Forums</a></div> <div align="left">- <a href="#7">Contact</a></div> </div> <div style="position:absolute; top:20; left:235; right:20; z-index:1; padding:3px; border: #0000FF 1px solid; background-color:#FFFFFF;"> <div align="left">Caption</div> <div align="left">bla bla bla This is the right side. </div> </div> |
|||||||