|
CSS - Automatically Refreshed Image, Each With Its Own Hyperlink?
I have page that automatically changes the images in a container via css. Does anyone know if its possible for each image to have a different hyperlink?
Would have done this in Flash but, IT Security is not on board with that yet. Any suggestions? Similar TutorialsHi can any one suggest a solution to my problem. I have all my a tags as - a{border-bottom: thin #0066FF solid;text-decoration:none;padding-bottom: 2px} and my img tag as img {border-bottom: none} However I have 4 images in 1 div that just wont accept it. So it must be precedence right. But theres no selector after it that would cause the issue so I've ruled that out. So I tried a more deeper selector. #rightside img/#rightside a img/#rightside img a/ They didn't work. So in frustration I added a class to the 4 images a tag and then tried .info/.info img/.info a img/.info img a/ Still no joy. I then moved the class to the img tag in desperation and tried - .info/img .info Still no joy. I tried all these with the below css - {border-bottom: none} {border-bottom: thin #FFF solid} {border-bottom: 0px} {border-bottom: transparent} {border: none} {border: thin #FFF solid} {border: 0px} {border: transparent} I know it's not precedence because there is 1 image after these in a different p tag that takes effect.ie: no border. It's not a selector on the same tag as there is no border on the tag. I then drop kicked my computer across the room and decided to ask for help. Any one got any ideas? The code looks similar to this - <div id="new-image"> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> </div> the css is - #new-image {text-align: center;width:180px;margin:-10px 0px 13px 15px} .info {border-bottom: none} The a tag css is above this in the css code. Cheers in advance Jazajay hey all, i have a strange problem... When the page opens the footer appears on top of the page content but if i refresh the page it goes to the bottom as expected?? really wierd can someone please help me with this? here is the page lin to see what i mean page with the problem and here is a link to me css css page Any ideas would be great. I am using firefox Thanks RF hi there, i'm using code from http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/P10/ for my menubar, the problem is when i refresh the page the menubar is on it stops working. help please! hi im using a CSS drop down menu, when my browser is refreshed it becomes disabled/stopsworking. im using IE browser. i got the css drop down list script from the web. can someone help me please! Hi i have a css code as below, Code:
.profile a:link, a:active, a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #3B6D06;
text-decoration: none;
}
.profile a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
color: #DE6200;
}
and I am using it as Code: <a href='http://domain.com' class=profile>text</a> but it is not applying css settings on the hyperlink. can anyon help please? thanks hello friends, please tell me how can i specify a hyperlink, active, hover and visited attribute in body { } for example i have the following css BODY { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #F2F2F2; font-family: Arial; font-size: 11px; color: #000000; text-align: left; } now i want to specify the default hyperlink with active, hover and visited attribute within body. Thx. Hay gys !..... I'm confusing of this, i want to give the anchor from css class, and give hyper link inside the anchor,so how can i achieve this ? pls help ! Thanks solved. The width spreads across the whole page, i only want it to be as long as the content in the div. How can i solve this? Code: <style type="text/css">
.three {
display:block;
width:auto;
height:100px;
position:relative;
border:1px solid black;
}
.three a {
width:100%;
height:100%;
position:absolute;
}
</style>
Code: echo "<div class='three'><a href='two'></a>test</div>"; Hi I am looking for stylesheet method where I can give a image and a hyperlink for that image inside a stylesheet.. Kindly post ur suggestions to my email adddress godwinsharmila@yahoo.com Thanks in advance.. Regards Sharmila Hi All, First time here on the CSS part of Dev Shed. I attempted laying out my page entirely with css for the first time and I have got a question. I have got dymanica content loading into the content DIV of my page. The amount of content varies from one senario to another. So how do I automatically reposition my footer DIV so that it is always at the bottom on my page no matter how much downwards my content DIV adjusts. Thanks guys. Hello, so basically I've got these side bar graphic things I want to put on the edges of my main content table to make it look nice. The problem is I can't seem to figure out how to make them resize their height automatically depending on the length of the main content table, which is slightly different on every page. Since URLs are blocked I guess I have no choice but to just include the code here, ugh. Code:
...
<div id="page-container">
<div id="headerer">
</div>
<div id="header">
</div>
<div id="navpanel">
<img src="images/interface/gorglogowidth.jpg" width="270" height="269" border="0" /><br />
<div id="tvbg">
<div id="main-nav">
<dt id="news"><a href="index.php">news</a></dt>
<dt id="episodes"><a href="episodes.html">episodes</a></dt>
<dt id="universialinfo"><a href="universialinfo.html">universialinfo</a></dt>
<dt id="music"><a href="music.html">music</a></dt>
<dt id="contact"><a href="contact.html">contact</a></dt>
</div></div></div>
<div id="sidebar-b">
<img src="images/interface/panelright.jpg" width="17" border="0" />
<img src="images/interface/bottomrightcorner.jpg" />
</div>
<div id="sidebar-a">
<img src="images/interface/panelleft.jpg" />
<img src="images/interface/bottomleftcorner.jpg" width="28"/>
</div>
<div id="content">
<span class="titletext">Episode 1: The Greatest Planet in Existence</span><br />
<a href="episodes/episode1high.html" target="_blank">High Quality (595MB)</a>
<br />
<a href="episodes/episode1low.html" target="_blank">Low Quality (85MB)</a>
<br /><br />
<span class="titletext">Episode 2: Savory Dark Truffle</span><br />
<a href="episodes/episode2high.html" target="_blank">High Quality (597MB)</a>
<br />
<a href="episodes/episode2medium.html" target="_blank">Medium Quality (264MB)</a>
<br />
<br />
<span class="titletext">Episode 3: Spoon the Pretty Bad</span><br />
<a href="episodes/episode3medium.html" target="_blank">Medium Quality (146MB)</a>
<br />
<a href="episodes/episode3flashhigh.html" target="_blank">High Quality FLASH FORMAT(Recomended)</a>
</div>
<div id="panelbottom">
<img src="images/interface/bottommiddle.jpg" width="300" height="28" /> </div>
Anyway, the two images, "panel left", and "panel right" (contained in the DIVs "sidebar-a" and "sidebar-b", respectively) go wayyy down, as their native resolution is very large and I was initially hoping to simply be able to scale them down to to match the height of the main content page The CSS file is as follows: Code:
...
#page-container {
width: 800px;
margin: auto;
text-align: left;
}
/* Main Navigation */
#tvbg {
background:url(../images/interface/navtvlonger.jpg)
}
#main-nav {
padding-top: 50px;
margin-left: 32px;
height: 356px;
width: 150px;
}
#header {
height: 188px;
background: #696969
url(../images/interface/episodesheader.jpg);
width: 530px;
float: right;
}
#sidebar-a {
float: left;
width: 28px;
}
#sidebar-b {
float: right;
margin-left: 155px;
width: 17px;
}
#navpanel {
float: left;
}
#content {
margin-right: 17px;
margin-left: 268px;
line-height: 18px;
background: #696969;
}
#content .padding {
padding: 25px;
}
Thanks! I have a page that has a bunch of thumbnails on it and using css to format those images, i've added a margin to both sides for spacing. The class is applied to the href and set to have the img as a descendant. When the page renders in FF, there is no problem. But when it renders in IE, i get the nice little hyperlink underline where the margin is between two thumbnails. Any help would be great. HTML <a href="hometour/defiancemo/P9010045.jpg" class="thumbs" target="_blank"> <img src="hometour/defiancemo/thumbs/P9010045.jpg" alt="" /> </a> CSS a.thumbs img {margin: 0px 5px 10px 5px;text-decoration: none;color: #019934} I've got my normal navigation links styled using the standard a:link, a:hover etc etc. I want to include an image on one of my pages which links to a download, because the style applies to all 'a hrefs' the properties for my text links are assigned to the image (for instance a border is given). Is there a way to assign a different class to the image hyperlinks? Cheers. On my page I have 2 different hyperlink styles, one for my menu and one for any hyperlink in the content. One is under #menu in my stylesheet and the other under #content. With FF everything looks great, but when I open my site in IE6, the hyperlink styles seem to combine. Any ideas? I have this website that i am using CSS for much of the styles. I have used hotspot hyperlinks in parts of the images. Now there is the blue line that a link in html normally has around the entire div the hotspot is in. If clicked its the purple colour that a clicked (visited) hyperlink has. The link to the page in question is itxtme.com/still_lime/os_z_b.html This only occurs in IE, it is not occuring in Opera. All the other links are working correctly. All source is in the webpage (view/source code) Kind regards how i can work around this! Scott Hi all For accessibility reasons I use "em" in my CSS instead of "px", "pt" etc., so the users of all general browsers can scale my websites. But during implementing the page I use "px" because it's easier and I don't have to calculate the relative "em" values all the time. As soon as I finish the implementation process, I go over all the "px" values and calculate the to "em" values. Now my question: is there maybe a Firefox plugin that helps me doing this? Sometimes it's annoying to find out the font-size of the parent element so I can calculate the correct "em" value... A tool like the "Layout" view of the Firebug plugin which would display everything in "em" instead of "px" would be great... anyone knows such a thingie? :-) Thanks a lot for help, Josh Experimenting with layouts.... How do I get the right-hand DIVs (content = 'two') to automatically stretch down to the same height as the left-hand DIVs (as table cells would): Code:
<HTML>
<HEAD>
<STYLE>
.frame {
margin-left : 5%;
width : 90%;
font-size : 1em;
text-align : center;
}
.header {
width : 800;
border : 0.05em dashed black;
text-align : center;
}
.header1, .header2, .header3 {
float : left;
margin : 1px;
vertical-align : center;
font-size : 0.8em;
position : relative;
border : 0.05em red solid;
}
.header1 {
text-align : right;
width : 750;
}
.header2 {
text-align : center;
width : 40;
}
.clear {
clear : both;
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="frame">
<DIV CLASS="header">
<DIV CLASS="header1">One<BR>One Again</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One<BR>One Again</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
</DIV>
</DIV>
</BODY>
</HTML>
|
|||||||