|
CSS - Image Links - Styleing Wont Work
edit: the sites @ www.tomaustin.dsl.pipex.com/webdev
Ive been doing some googling and cant find out how it works how do i apply attributes like a:link, a: hover to an image I had some like Code:
image a:hover, a:link, a:active, a:visited {
border: etc..
}
this does not work..it comes up with the horrid blue and purple backgrounds how do i do it? tom: ) Similar TutorialsI have the following coding <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>CSS Sample Page</title></head> <body> <table style="width: 765px; height: 426px;"> </table><div style="text-align: center;"><!-- First Row contains banner and tagline--></div><table style="width: 765px; height: 426px;"> <tbody> <tr> <td style="text-align: center;" width="50%"><font size="7">Web News</font></td> <!-- spacer cell --> <td> </td> <td style="font-weight: bold; text-align: left;">"The latest in up-to-the-minute Web news,discussion, techniques, and <br>trends"</td> </tr> <!-- Second Row contains headline--> <tr> <td colspan="3"> <h1 align="center"><br></h1><h1 align="center">Web Developers Embrace CSS</h1> </td> </tr> <!-- Third Row contains sub-head --> <tr style="font-family: Helvetica,Arial,sans-serif;"> <td colspan="3"><h2 style="text-align: center;">Simple syntax, powerful design tool</h2> </td> </tr> <!-- Fourth row contains article columns --> <tr valign="top"> <td> <p class="copy"><span style="font-variant: small-caps;"> Cascading Style Sheets (CSS)</span> is a style language for the web. It uses common printing and display terminology to allow HTML and XML authors control over the way web pages look.</p> <p>Although designed in 1996, CSS is just now becoming a useable style language because of a lack of support from the major browsers. IE 5.5 for the Macintosh, released in 1999, is the first browser to completely support the CSS1 specification. Support varies across browsers, but both Netscape 6 and IE 5 for the Windows platforms offer more complete (but still not perfect) CSS support.</p> </td> <!-- Spacer cell --><td> </td> <td> <p> Style sheets accomplish the separation of content and style that is integral to the open nature of data on the web. Currently, web page code mixes both document structure information and browser-based display properties, limiting the cross-platform compatibility of the content.</p> <p>With style sheets, the display properties are separate from the content. This accommodates the diverse variety of devices that are becoming available to browse the web. Whether you come to a web site with a Palm Pilot, PCS phone, or Windows CE device, the server can supply a style sheet that matches your display device. CSS2 supports a variety of media devices, including print, that allows content providers to single-source their data.</p> </td> </tr> </tbody> </table> </body></html> all works so far but the problem I am having is adding specific div tags to the H2 elements. DIV class="subhead"> Simple syntax,powerful @Code in Nl 2nd:design tool</DIV> if i try to add this style rule i get the above text show up in the browser and it wont align centrally. also the cascading style sheets wont show up as small caps. can anyone help me Im sorry to ask here but know of nowhere else to ask, can someone please advice me or forward me to somewhere that can help please? thanks I am regreting taking this course so bad...Thanks alot for your help in my last problem, Im onto assignment 2 now and dont have the slightest clue what to do. The instructions are so unclear, and nowhere anywhere on the internet does it give a straight forward example of how to do a CSS. I am starting with a blank page, using text pad link to a strict html. I dont know where to start and what to type. I am trying all the codes such as <h1> to put in my title and it wont work! I got it to change color with the body color property but thats as much as I can do. Can anyone give me some pointers on how to put heading and writing in my page, why wont it work? Is there a difference between this and when I put my markup in WYSIWYG? All I need to start is to put in my title Christinas cat page... What does a stndard layout look like that will be easy for me to understand? tyvm Im using this to make an onscroll effect Code:
table.left {border-collapse:collapse;
float:left;
margin-left:10px;
margin-right:10px;
background:#8f8f8f;
padding:5px;
color:#000000;
font-family:Verdana;
text-decoration:none;
}
td {padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;}
td.bg:hover {
background:url(images/yellow.png);
padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;
}
And the links don't format with the typical css markup Code:
a:active {color:#000000;
font-family:Verdana;
text-decoration:none;}
a:link {color:#000000;
font-family:Verdana;
text-decoration:none;}
a:hover {color:#000000;
font-family:Verdana;
text-decoration:none;}
Ive tried a couple different things like making td.bg:link, td.bg:active with the specifications->no luck Note:this is in IE Nevermind...I just figured it out..used a link class and set the visited attribute Hello everybody! Im am now designing a webpage with a pull-upmenu. The menu can be seen he http://www.fidelin.se/ucon/index.php The problem in IE7 is that the dropup-items will disappear when you move the mouse over them. Any suggestions on how to solve this? See the code in the post below. I have not constructed the menu myself, as you might see. Thanks in advance Johan I am trying to get a Table Style layout using only DIVs and CSS and every combination I could find doesn't seem to work when it involves being dynamic. Statically, it works fine. In the image I attached, "1" is the final result I am trying to get. The Red and Blue boxes at the top and bottom will always have a static height of about 25px, but I want the Green in the center to be dynamic, to take up the rest of the space not occupied by the Red and Blue boxes. In example "2", if I set the green to 100% height, it will just flow outside the parent container. And if I don't set a height, as seen in example 3, it will just be a small bar and the bottom Blue box will just move on up with it. Using a table would be easy since I can easily create that basic structure that would always work, but I'm trying to make something in all DIV and CSS and the past many months, I found no solution! Anyone got any ideas that isn't Javascript based? Thanks! hi, i have a small website i need to make for a school project. Ever since i added the CSS MENU the sidebar just appears half in the middle of the site and no matter what i do, i cannot get it to the right edge. I have tried margin-right but it does nothing, even if i put it at 5. Its 5 closer away from some strange margin almost in the center of the screen HTML::::::::::::::::::::::::::::::::::::::::::::::::::: </head> <body class="about"> <div id="page-container"> <! header---------------------------------------------------------------> <div id="header"> <h1><img src="images/headings/heading.gif" width="700" height="76" alt="Enlighten Designs" border="0" /></h1> <ul id="navigation"> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Take a tour</span></a></li> <li><a href="#"><span>About us</span></a></li> <li><a href="#"><span>Contact us</span></a></li> </ul> <p><h1><br>Thermal IR - What is it? </h1></p> </div> <! SIDEBAR A---------------------------------------------------------------> <div id="sidebar"> <p>Sidebar, work please, Please work!</p> </div> <! CONTENT---------------------------------------------------------------> <div id="content"> <div class="padding"> </div> </div> <! COPY RIGHT---------------------------------------------------------------> <div id="copyright"> </div> </div> </body> </html> CSS::::::::::::::::::::::::::::::::::::::::: MENU START///////////////////////////////// #navigation a { color: #000; background: ##00E5EE url(left-tab.gif) left top no-repeat; text-decoration: none; padding-left: 10px } #navigation a span { background: url(right-tab.gif) right top no-repeat; padding-right: 10px } #navigation a, #navigation a span { display: block; float: left } /* Hide from IE5-Mac \*/ #navigation a, #navigation a span { float: none } /* End hide */ #navigation a:hover { color: #fff; background: #781351 url(left-tab-hover.gif) left top no-repeat; padding-left: 10px } #navigation a:hover span { background: url(right-tab-hover.gif) right top no-repeat; padding-right: 10px } #navigation ul { list-style: none; padding: 0; margin: 0; } #navigation li { float: left; margin: 0 1em; } //////////////////////////////////////////MENU END #page-container { width: 760px; margin: auto; background: #c9c9d9; } body { font-family: Verdana; } html, body { margin: 0; padding: 0; color: black; } body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; background: #ffffff; } .hidden { display: none; } #header { margin: left; height: 250px; background: #c9c9d9; border-top: 1px solid #efefef; } #sidebar { top: 200px; float: right; width: 170px; padding: 5px; line-height: 18px; background: #AAAAAA; border: solid 2px black; } #sidebar .padding { padding: 25px; } #content { margin-right: 240px; line-height: 18px; background: #c9c9d9; } #content .padding { padding: 25px; } #copyright { margin-left: 25px; background: #c9c9d9; } h1 { margin: 0; padding: 0; float: right; margin-top: 57px; padding-right: 31px; } #content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; } Hi all, I am trying to do something that I think is trivial, but just cannot seem to get this to work in IE! I am trying to draw an IFRAME that contains a gray background that contains a document that has a white background. The result is supposed to make the scrolling document in the IFRAME look like a white piece of paper with a gray border of 8 pixels. This works perfectly in Safari and Firefox, but no matter what I try, I cannot figure out how to get this to work in IE (IE8 specifically). Here is the code: PHP Code: <iframe name='monkey' src='poopy.html' scrolling='auto' frameborder='0' style='background-color:gray;width:500px;height:150px;'></iframe> And the document in the IFRAME is trivial PHP Code: <div style='padding:8px;border:1px solid black;background-color:white;'> This is a bunch of txt THis is a bunch of txt ... (repeat this text a bunch so you have a scrollbar) </div> As far as I can tell, IE implements the background-color attribute for IFRAMES, but it seems to ignore the color - either that or its whacked-out box model requires some kinda bizarre workaround that I cannot find. Thanks in advance for the help. -- Jon Hey all, So i have two files my html file: Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<a href="#">this is a test</a>
</body>
</html>
And my css file: Code:
a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}
except that the styles don't work on the links. If i put the styles in <style> tags in the html head it works, but in a seperate file they don't, can someone help me? thanks! - legit Edit, whoops sorry, I had the wrong name for my css file Hi -- I am in the process of redesigning my website with CSS. And as I was preparing to upload it and test it (looked/worked great in NVU), I found that half of my links do not work. And ... I am a new user, so I can't post links. Gah. To be more clear, I have a menu container and a "whiteboard" container I write most of my content in. All the links in the menu container work perfectly. However, in the whiteboard, it's hit and miss. Strip out the css, and they all work, so it is the css. Try as I might, I can't figure what the problem is. Part of My CSS follows: Code: #menutop {
position: absolute;
width: 247px;
height: 74px;
background: url("menutop.gif") top left;
background-repeat: no-repeat;
top: 269px;
left: 46px;
}
div#menucontainer {
position: absolute;
width: 200px;
height:1080;
background: url("menucontainer.gif");
background-repeat: repeat-y;
padding-left: 15px;
padding-right: 50px;
top: 340px;
left: 46px;
}
#menubottom {
position: absolute;
width: 247px;
height:26;
background: url("menubottom.gif");
background-repeat: no-repeat;
top: 1420px;
left: 46px;
}
#contact {
padding-left: 20px;
}
div#whiteboard {
position: absolute;
width: 530;
background-color: white;
left: 310px;
top: 300px;
padding-bottom: 20px;
border-style: dashed;
border-color: #4080CA;
z-index=100;
}
p
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
align: left;
color: #000000;
}
h1, h2, h3
{
font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;
color: #130139;
padding-left: 20px;
padding-right: 20px;
align: center;
z-index=100;
}
li {
padding-bottom: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
width: 450px;
}
A:link {
background: #E8E8E8;
font-variant: small-caps;
font-family: Arial, Helvetica, sans-serif;
font-color: #061C5E;
font-size: 16px;
font-weight: bold;
}
On my page, it's basically: <div id="whiteboard"> <p><a href="http://www.resafantasyarts.com/wanderingstar/WS1.zip">BOOK ONE</a> </p></div> Any help would be greatly appreciated! Hi. I am thinking my two problems are related! Here are my two problems: My top nav bar links don't work in Firefox and the design breaks in IE7. Any help would be much appreciated! I have validated it, and I know the slider and video don't validate, but I still have these problems even when I take those out. Thanks so much for any help you can provide! christthesavior.org Thank you!!! Hello, Im using a separate style.css file to define everything through the site... ive put in this code: Code: .sideheadline {font-family:Verdana,Sans-serif; font-weight:bold; color:#FFFFFF; background-color: #003366;
background-image: url(images/bg.gif); background-repeat:repeat; background-attachment:fixed; font-size:10px; }
and connected to this line: Code: print "<tr class='sideheadline'><td>Look at the rest too</td></tr>"; But nomatter what i try the image wont show, i tried several images and theyre loadable from the urlbar... so the image works Now i went to w3schools and tested with the online editor... there this exact code works, but then when i copy it to my site it wont! Im using dreamweaver for a editor... Is there a fix? I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas? http://www.rhizaowns.com/holly/index.php My website works in safari, but not in IE or firefox. My question is, how do I get my links to match up in the other browsers? Hi all, This is probably simple, but I can't get it working for some reason. At http://www.bartlett-family.net/chri...ett/index2.html I want the 8 image links below the "Quote of the moment" to be centered between the vertical lines. I'd appreciate help. CSS is here and the class in "centerinline". I am converting my news system from tables to pure CSS. So far its going great, and I'm almost complete except for one problem; Each post has a category, and the category image is displayed in each post using "background-image" in CSS. Although it somehow comes back in the background of each link within the <div> (in Firefox). I have attached an image of what I'm talking about. Here's the html (simplified): Code: <div class="games"> <div class="newstoryinfo"> <h2>Topic goes here</h2> </div> text text text text text text text text text text text text text text text text text text text text text and so on... </div> Here's the CSS Code:
.news {
background-image: url("/img/topics/1.gif");
background-color: transparent;
background-repeat: no-repeat;
border: 1px solid black;
padding: 10px;
}
.news div {
text-align: justify;
margin-left: 1ex;
margin-bottom: 10px;
padding-left: 60px;
padding-right: 5%;
line-height: 1.6em;
}
.newstoryinfo {
padding-top: 5px;
color: #888;
font-size: 11px;
font-family: "Lucida Grande", Verdana, Geneva, Lucida, Helvetica, sans-serif;
}
Can someone please tell me how to make links in the "text text text.." area display with a white/transparent background? Thank you! Hi all, I am having difficulty with the background for an image link. I have the following: 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>Test page</title>
<style type="text/css">
a:hover { color: #FFFFFF; background: #0000ff; text-decoration: none; }
a:hover img { background: none; }
.box { background: #00ff00; padding: 1em; }
.box img { border: 0; }
</style>
</head>
<body>
<div class="box">
<p><a href="#"><img src="images/a1a8aa6a43.jpg" alt="" /></a></p>
<p><a href="#">Text link</a></p>
</div>
</body>
</html>
I have a global style for links that change the background color and the color of the text. However, this also changes the background color of an image link which makes it look odd. I attempted to fix this with Code: a:hover img { background: none; }
But this does not fix the issue. Any thoughts? I am using XHTML strict because the CMS I am using forces me to an XHTML stylesheet. Also, this is just a snippet of the code of the actual page but the bug is present in this snippet. |
|||||||