|
CSS - Produce Code/html Elements Based On Class
Question: If I assign an image a particular class (in this case, "photography", which I also use to align and add a border to the photo), can I have it display a bit of code as well. I'd like to be able to print a hyperlink to a script that will return EXIF data (which I have and works) to elements marked with that class?
Example: Code: .photography {
border: 5px solid #333333;
text-align: center;
}
.....
<img class="photography" src="whatever.jpg" />
would display whatever.jpg in a centered 5px box with a link that says "click here for EXIF data", which, on the backend, looks like this: Code: <a href="java script:exifWindow('exif/readexif.php?path=whatever.jpg')">click here for EXIF data</a>
Similar TutorialsColleagues, I seem to be having an issue on a page I am developing, where I am using CSS to position many of my elements. I have a banner at the top, and then have used absolute positioning of a couple of flash movies, a graphic and a javascript menu. I have used Xara Webstyle for creating the JS-based Menu. The problem I am experiencing, is that these are positioned in the order I mentioned, from the top to the middle of the page. I also then have some CSS positioned items below the menu. This menu is a tiered, or flyout menu of sorts, and when it drops down is should overlap the absolutely positioned items in the bottom of the page, but those items are overlapping the menu, I assume, because they are absolutely positioned. What I would like is to make the bottom items "go to the background" so to speak, so the javascripted menus writes over them. Is there some setting I am missing that would allow these bottom elements to be in background, so to speak, so that the menu drops will be on top?? Thanks for your help, in advance. Kork Is there a way of changing a parent class based on a child class like. ../[class=child]{ } This way i can change a parent class if it has this child Any ideas? Hi all, Not exactly sure where this post truely belongs (CSS, HTML, JS forums) but firt trying this forum. I'm trying to create a simple expandable link but the link jumps up and down when expands/collapses. The code attached, any ideas any one. Code demonstrates the problem so please save it as .html and view it. -- Thanks. Code:
<style type="text/css">
.faq_hidden
{
visibility: hidden;
}
.faq_shown
{
visibility: visible;
}
</style>
<script type="text/javascript">
function showReview(n)
{
document.getElementById(n+'_r').className = 'faq_hidden';
document.getElementById(n+'_f').className = 'faq_shown';
}
function hideReview(n)
{
document.getElementById(n+'_f').className = 'faq_hidden';
document.getElementById(n+'_r').className = 'faq_shown';
}
</script>
<div id="r1_r" class="faq_shown">
<a onclick="showReview('r1'); return false;" href="#">
<div>
Completing the questions 1
</div>
</a>
</div>
<div class="faq_hidden" id="r1_f">
<a onclick="hideReview('r1'); return false;" href="#">
<div>
Completing the questions
</div>
</a>
<p>
Completing the questionnaire should take 8 - 10 minutes of your time.
Be honest, answer as you would normally behave and act, in response to
the statements and questions.
</p>
</div>
Hi, everybody I'm trying to attached the CSS code you see below to the HTML/PHP code all the way at the bottom. I have tried renaming the ID to Class and replacing navigation with menu1 but no luck. How would I go about attaching this piece of CSS to the code below? Code:
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:37px; background:#fff url(button1.gif); position:relative; border:0px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:right; height:37px; line-height:37px; color:#aaa; text-decoration:none; font-size:13px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}
How do I attach the above CSS to the HTML/PHP piece below? PHP Code: <div id="navigation"> <?php if ( function_exists( 'wp_nav_menu' ) ) { // Added in 3.0 ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'dropmenu', 'container' => '', 'container_id' => '', 'fallback_cb' => 'revert_wp_menu_page' )); ?> <?php } else { ?> <ul id="dropmenu"> <li id="<?php if (is_home()) { ?>home<?php } else { ?>page_item<?php } ?>"><a href="<?php bloginfo('url'); ?>" title="Home">Home</a></li> <?php $header_page_navigation = get_theme_option('header_page_navigation'); if($header_page_navigation == '') { ?> <?php wp_list_pages('title_li=&depth=1&sort_column=menu_order'); ?> <?php } else { ?> <?php wp_list_pages('exclude='. $header_page_navigation . '&' . 'title_li=' . '&' . 'depth=' . '1' . '&' . 'sort_column=menu_order'); ?> <?php } ?> </ul><!-- DROPMENU PAGE END --> <?php } ?> <div class="clearfix"></div> </div><!-- NAVIGATION END --> How are you supposed to use the class="someCssStyle" attribute format inside of an struts html tag? I tried just putting it in, but the jsp page won't compile: <html:text property="ssn" class="textfield2" /> where textfield2 is a valid style attribute in my included css file. Surely there is a way to specify this so that the taglib will render the proper output. I'm not having any luck googling for an answer. Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Using the following example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
How could I make <div class="code"> replace HTML code to it's text equivalent? Like, < to <? Is there any CSS way to do it? And if not, how could I possibly go about doing it? I know I am making a mistake asking for help on a late Friday evening, but still hope... I have a website which has several "positions" and inside each position are several "modules". The positions are just where they are located on the page, and the modules are just small blocks of HTML that display something within a given position. I wish to use multiple CSS files to vary the location of the positions and also either arrange the modules horizontally or vertically. My question relates to arranging the modules within a given position. My original plan was to create a DIV with a unique ID for each position. I would then include each module within another DIV with an associated class. Something like: Code: <BODY> <DIV id="position1"> <DIV class="class1">a bunch of HTML</DIV> <DIV class="class2">a bunch of HTML</DIV> </DIV> <DIV id="position2"> <DIV class="class2">a bunch of HTML</DIV> <DIV class="class3">a bunch of HTML</DIV> </DIV> </BODY> I am now thinking I shouldn't rap my modules in a DIV tag, but instead use a LI tag. The DIV tags around the positions would remain as with my original approach. Something like: Code: <BODY> <DIV id="position1"> <UL> <LI class="class1">a bunch of HTML</LI> <LI class="class2">a bunch of HTML</LI> </UL> </DIV> <DIV id="position2"> <UL> <LI class="class2">a bunch of HTML</LI> <LI class="class3">a bunch of HTML</LI> </UL> </DIV> </BODY> Can anyone give me recommendations on which approach would be best. My server side modifications will not be too much, and I would like to do it before creating the CSS cause I am not very good at that (to me) complicated CSS stuff. Thanks!!! Hey guys, Im having problems cleaning up my HTML and replacing it by CSS code. <td width="65" height="1" style="vertical-align: top" align="left" bgcolor="#F0F0F0"> The html table code above is what I've been trying to change to CSS. Please help Sorry for the lousy title, can't come up with better wording.... What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one. Thanks... I'm making a webpage for myself, and am coding to current Transitional XHTML and CSS standards. I'm using Firefox 0.9.2 for viewing the page. The problem I'm having is with adding a class to a <td> element and getting it to work correctly in IE 6. The CSS class I'm using for the <td> element is as follows: Code: .w3type{color: black; background-color: #FFCE6B;}
Code: .w3type:hover{color: white; background-color: red; background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right;}
I add this class to a <td> tag: Code: <td class="w3type"> and when i view it in FF, the text and background work correctly, changing color and adding a little image to the right when I hover my mouse over it. The problem is that when I go to view the code in action with IE 6, neither the background nor the image will appear on hover. Is this a problem with IE, or my code? If you want to see the code on my site, here's the link. The css formatting in question is on the lower left corner of the page (the W3C webbadges). Thanks for any help Hello, I have the following css css Code: Original - css Code ul#menulist{ position:relative; top:0px; list-style-type:none; margin:0; padding:0; } ul#menulist li{ background-color:#717100; display:inline; margin:0; padding:0 10px; border:0; height:30px; } ul#menulist li a{ text-decoration:none; margin:0; padding:0; border:0; }
A gap is appearing between <li> elements in Opera and FF but not in IE. You can check it here Which is the correct behaviour? How do I remove the gaps between <li> elements in a valid way. Thank you. I'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. If you view the below pages side by side on Firefox and IE, the following occur (in order of importance): - the top main box is pushed below where the left boxes end - the upper-right drop-down stuff is totally off in the weeds (Chrome also looks like IE) - "Recipes" tab isn't borderless on the bottom edge - left boxes are the wrong size and push "Clear List" out of bounds - search button is off in relation to search box mcrackan.com/recipes/csstest.htm mcrackan.com/recipes/css/default.css (Sorry about the non-links. I'm apparently not allowed to post click-able links yet.) Can anyone point me in the right direction for whatever I'm doing wrong? - Dinah I'm currently customizing a theme for a Drupal site and am having a bit of an issue with background images on some content. I have 1 class and an HTML element that I'm trying to apply the style to. I have a non-repeating background applied to the title class which is positioned to the left of the area. The second is a background I'm attempting to tile across the x-axis of the h2 element. This second background does not show while the first one is showing. Is there a way around this? I'm assuming that because it's the same element, I won't be able to get away with this and will have to find another solution. Here is my HTML Code: <h2 class="title"><a href="/drupal/node/1">Welcome to the Caustic Guild!</a></h2> CSS Code:
#mcol .title {
background: url(/drupal/themes/caustic/images/icon_post.gif) no-repeat 0px 2px;
}
#mcol h2{
background: url(/drupal/themes/caustic/images/mcol_head.jpg) repeat-x;
margin: 0px 0px 0px 0px;
padding: 2px 0px 6px 35px;
font-size: 180%;
letter-spacing: -1px;
text-align: left;
border: 3px solid #78788a;
}
Hi guys, I don't know if this is possible.. I have a table with position: fixed and width: 100% height: 100% so it covers the entire screen. There is text behind it, you can see through the table and there is text back there. My problem is you can't click on anything in the background, behind the table. You can't select the text and you can't click the links because the table is blocking them. So my question is it possible to click through the table element on the links in the background and stuff? http://perfbase.com/beta/tablesector/v7/ I tried setting the middle td to visibility: hidden and display: none but that didn't work. I tried javascript events but click, mousedown, mouseover, none of them work for the text in the background. Thanks a lot! |
|||||||