|
CSS - Links As Headings Problems
The site in question... http://cbo4edu.org/newSite/index.html
I know this is probably a very simple fix but I've tried everything I could think of so I now have to rely on the Dev Shed community. Can someone please tell me why theh3 tag in the center column is underlined? I only want this heading to be underlined when someone hovers over it. C Similar TutorialsIs it possible to set link styles that are defined inside of a heading tag... for example, h1 a:link{bleh} h1 a:visited{bleh} h1 a:hover{bleh} I tried it... but it doesn't want to go, I'm thinking I might have to think of another solution Hi I'm putting together help documentation for an application and I would like the structure of the document to have all headings and sub headings to be dynamically numbered, for example: 1. Main 1.1. Sub1 1.2. Sub2 2. Main 2.1 Sub1 etc I've read about the pseudo class :before, but understand that this isn't supported by Explorer, or else I could use: BODY { counter-reset: chapter; /* Create a chapter counter scope */ font-family:Arial, Helvetica, sans-serif; } H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Add 1 to chapter */ } H1 { counter-reset: section; /* Set section to 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; } Could anyone help with any suggestions as to how I could do this please? Thanks Sophie I have a really weird problem with links and CSS. I have develop a design that can stretch in order to make room for content. Then i pull some text, and, at the bottom, there is a footer nav bar. Now, if the content i put on the page is not too long (i mean, the main content area is not stretching itself below the viewable area of the screen), then the links work as a charm, but, as soon as you put some more content, then the links stop working. I would be glad to share the source code with anyone (i am not posting it here to avoid boring), but you can take a first glimpse at http://partyingout.net/dev_zone/ I have tested it on almost any mac os x and suse linux browser and the glitch is there (in some cases, like OmniWeb. the links are not working at all). I know it is something i have done wrong, but i can spot it, and, i googling it for most than two days (and once again, i know it is me not knowing how to search). Can someone give me a hand? Best regards. 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'm having trouble aligning headings in CSS. I've tried creating a class like this - Code:
.rightalign {
text-align:right;
}
and applying it like this - Code: <h1> <span class="rightalign" /> Heading </span> </h1> but it doesn't work, any help? Thank you. Hi I am making a website where i have a main heading on all pages' start. I want to control its looks with CSS, i have an external CSS that controls links and body text etc. i have tried in external CSS Code: H2 {
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFCC99;
}
and on pages i use <h2> heading is here </h2> but it doesnt make any difference and the main heading is also shown as the normal text of page body according to stylesheet. Please shed some light on this... thanks Is this a display glitch or is it meant to be like this... for example, let's say you have a picture in a div that had text floating to one side. If the text beside the picture doesn't fill the space the heading will be displayed inline beside the floating picture, even if it's in it's own containing div... EDIT: I've found a general fix for this using <div style="clear:both;"> but it's a PITA, and I think I'm doing something improperly. Maybe I'm misunderstanding the use of a floating frame... but, I can't help but think it's a possible display error with the different browsers Good Day, Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem? Best, Colin Hi, I have a realy strange problem that I'm hoping someone can shed some light on. I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor. <a href=""><h2>Some text</h2></a> Using firebug I saw that the html gets duplicated like so: <a href=""></a> <h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places! <a href=""></a> and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>. In the stylesheet the anchor has display:block; Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before! Thanks. 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 am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
Hi, If I have the following CSS: body { margin: 0px; padding: 0px; } a:link, a:visited { color: #F36706; text-decoration: none; } a:hover, a:active { color: #F36706; text-decoration: underline overline; } #siteDimention { width: 758px; margin-left: auto; margin-right: auto; padding: 0px; } How come the links in my page aren't changing from the normal blue/purple ones? I am not sure if these links count as navigation or not, so not sure if I should be using the UL element for semantic correctness? <div id="footer_bottom" class="bold"> <a href="sitemap.php" title="Sitemap">Sitemap</a> | <a href="accessibility.php" title="Accessibility Options">Accessibility Options</a> | <a href="http://validator.w3.org/check?uri=referer;verbose=1" rel="external" title="Validate XHTML">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external" title="Validate CSS formatting">CSS Valid</a> </div> My first post Website:www.freewebs.com/weareamazing I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help! question is about CSS and links. I can get underline effect, background change, etc by using .a but i need to have more than one sort of link in my page, e.g. menu links cannot have the same effect as links in the main text. How do i set up more than two link effects? I want to have a hover effect on the links of my page. I'm using an attached stylesheet to define it. Here is the section defining the links: Code:
a:link {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
a:visited {
color: red;
text-decoration: none;
}
a:active {
color: red;
text-decoration: underline;
}
Normal links appear red and is not underlined. When the cursor hovers over a normal link, it appears blue and is underlined. However, visited links do not 'behave' as normal links. They appear red and are not underlined. When hovered over, they do not change color or get underlined. I want visited links to act the same. They only way I could get them to act the same was to do the following: Code:
a.general:link {
color: red;
text-decoration: none;
}
a.general:visited {
color: red;
}
a.general:hover {
color: blue;
text-decoration: underline;
}
a.general:active {
color: red;
text-decoration: underline;
}
This is the only rules IE will obey. But every link need to be defined as instances of class "general". Is there a better way of handling this? I have set up a CSS file for a website I am building, however, when I click on the links which work correctly (at first) it goes to the desired place, if I go "back" the link turns to a larger italic font. Look here for example. http://www.burrellprolabs.com/newsite.htm if you click on one of the body copy links under "latestNEWS" then go back you will see what I mean. here is my css style for that particular part: .bodycopy { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #575757; text-decoration: none; line-height: 13px; } .bodycopy a:link { color: #BF0000; text-decoration: none; } .bodycopy a:active { color: #BF0000; text-decoration: none; } .bodycopy a:visited { color: #BF0000; text-decoration: none; } .bodycopy a:hover { color: #969696; text-decoration: underline; I'm currently working on a website for college, but I've run into an issue I can't work out. I can't seem to get rid of the default purple box that appears around my links. The HTML: Code: <div id="homelink"><a href="index.html"></a></div> The CSS: Code: #homelink{
position:absolute;
width:53px;
height:17px;
margin-top:25px;
margin-left:70px;
z-index:10;
}
#homelink a{
display:block;
background-image:url(images/links/home.png);
background-repeat:no-repeat;
width:53px;
height:17px;
}
#homelink a:hover{
display:block;
background-image:url(images/links/homehover.png);
width:53px;
height:17px;
}
As you can see, I use a background image for the div and no text for the link. Clicking the background image works fine and takes me to the homepage, however I get the default visited and active link border around it. Is there any way to solve this so that no border appears? |
|||||||