html - problemer med id der skal laves om til class - Udvikleren.dk

Tags: html css

Bruger #12606 @ 26.10.10 14:22

Jah, jeg synes jeg bliver ved med at løbe ind i nybegynder-problemer...(!)

Jeg har ladet mig inspirere af noget jQuery-kode
på nettet, hvor han bruger id til sine styles, men eftersom jeg skal bruge denne jQuery-kode flere gange på den samme side, så ville jeg meget gerne lave denne id om til en class...

men så er det som om koden ikke virker???

Selvom jeg både retter det i HTML'en 2 steder:
id: "slick-show" og
id: "slick-hide"

og

CSS'en 4 steder:
a#slick-show
a:hover#slick-show
a#slick-hide
a:hover#slick-hide)

Og det er selvom jeg enten
a) udskifter # med . i css'en
b) skriver det på denne måde:
#slick-show a
#slick-show a:hover
#slick-hide a
#slick-hide a:hover

Kan nogen hurtigt se, hvad jeg gør galt?
Siden kan ses her:
http://www.lineofdesign.dk/portefolio/feLandet.html

HTML (Ca. start linie 80 og slut linie 143)

Kode

<!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>Fe Landet</title>
<link href="portefolio.css" rel="stylesheet" type="text/css" />
<script src="jQuery.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper">

	<div id="header">
    	<div id="logo"><a href="index.htm"></a></div>
    	<div id="menu">
        	<a id="m1" href="">Typografi og Ombrydning</a>
        	<a id="m2" href="">Grafisk Design</a>
        	<a class="active" id="m3" href="billedbehandling.html">Billedbehandling</a>
        	<a id="m4" href="">Grafisk Workflow</a>
        </div>
        <div id="submenu">
        	<a href="moderJord.html">Moder Jord</a>
        	<a href="feLandet.html">Fe Landet</a>
        </div>
    </div><!--END: header-->

	<div class="modul_1">
    	<div id="overskrift">
        <h1>Fe Landet</h1>
        </div>
        
    	<div class="text_left">
        	<div class="intro">
        		<h2>Fakta :</h2>
    	        <p><span>Elementer :</span> Fritlægning med penneværktøj, Afmaskning, Filtre, Sammenkopiering, Billedmanipulering, Liquify, Blendingmodes.</p>
                <p><span>Programmer :</span> Photoshop</p>
			</div>
        </div>
    </div><!--END: modul_1-->
    


	<div class="modul_1">
       	<div class="img_left">
			<a target="_blank" href="img/billedbehandling/elver-blurred.jpg"><img src="img/billedbehandling/elver-blurredSmall.jpg" /></a>
        </div>
        
    	<div class="text_left">
        	<h2>Fe Landet</h2>
            <p>Som nævnt elsker jeg det eventyrsunivers man kan skabe i Photoshop, og her lod jeg et fe-eventyr få liv i en fortryllet skov.</p>
            <p>Ideen opstod egentligt af, at jeg ville lave et billede med en pige, som var ved at blive opslugt af naturen, og der skulle gro planter ud af hende og bo dyr på og i hende …</p>
            <p>Desværre havde jeg ikke det rette billedmateriale ved hånden, men i min søgen stødte jeg på en serie billeder af en smuk rødhåret pige i en grøn kjole – og det blev startskuddet for „Fe Landet“.</p>
        </div>
    </div><!--END: modul_1-->

	<div class="modul_2">
    	<div class="img_right">
			<a target="_blank" href="img/billedbehandling/elver-forrest.jpg"><img src="img/billedbehandling/elver-forrestSmall.jpg" /></a>
        </div>
        
    	<div class="text_left">
        	<h2>Skoven</h2>
            <p>Dette flotte foto af en grøn og frodig sommerskov har jeg brugt som baggrund og inspiration for det endelige billede.</p>
        </div>
    </div><!--END: modul_2-->
    
	<div class="modul_1">
       	<div class="img_left">
			<img src="img/billedbehandling/3in1Ferries.jpg" />
        </div>
        
    	<div class="text_left">
        	<h2>Fritlægning af pigen</h2>
            <p>Jeg har fritlagt pigen på 3 billeder.</p>
            <p>Ideen opstod egentligt af, at jeg ville lave et billede med en pige, som var ved at blive opslugt af naturen, og der skulle gro planter ud af hende og bo dyr på og i hende …</p>
            <p>Desværre havde jeg ikke det rette billedmateriale ved hånden, men i min søgen stødte jeg på en serie billeder af en smuk rødhåret pige i en grøn kjole – og det blev startskuddet for „Fe Landet“.</p>
        </div>
    </div><!--END: modul_1-->
    
    <h2 class="trigger"><a id="slick-show" href="#">Se fritlægning af pigen i detaljer</a></h2>
	<div id="slickbox"><!--START: TOGGLE-BOX-->

	<div class="modul_1">
    	<div class="img_left">
			<a target="_blank" href="img/billedbehandling/elver2.jpg"><img src="img/billedbehandling/elver2Small.jpg" /></a>
        </div>
        <div class="img_right">
			<a target="_blank" href="img/billedbehandling/elver2Frit.jpg"><img src="img/billedbehandling/elver2FritSmall.jpg" /></a>
        </div>
    </div><!--END: modul_1-->
    
	<div class="modul_1">
    	<div class="img_left">
			<a target="_blank" href="img/billedbehandling/elver3.jpg"><img src="img/billedbehandling/elver3Small.jpg" /></a>
        </div>
        <div class="img_right">
			<a target="_blank" href="img/billedbehandling/elver3Frit.jpg"><img src="img/billedbehandling/elver3FritSmall.jpg" /></a>
        </div>
    </div><!--END: modul_1-->

	<div class="modul_1">
    	<div class="img_left">
			<a target="_blank" href="img/billedbehandling/elver1.jpg"><img src="img/billedbehandling/elver1Small.jpg" /></a>
        </div>
        <div class="img_right">
			<a target="_blank" href="img/billedbehandling/elver1Frit.jpg"><img src="img/billedbehandling/elver1FritSmall.jpg" /></a>
        </div>
    </div><!--END: modul_1-->
    
    <div class="modul_1">
    	<div class="img_right">
			<img src="img/billedbehandling/elverHair1.jpg" />
        </div>
        
    	<div class="text_left">
        	<h2>Fritlægning af hår</h2>
            <p>Jeg lavede et justeringslag med Hue/Saturation, og skruede godt op for den grønne og den røde farve, for at øge kontrasten mellem hendes røde hår og de grønne farver omkring det.</p> 
            <p>Her ser I værdierne for den grønne farve og den røde havde en saturation på +60.</p>
            <p>Nedenunder ses forskellen i den grønne kanal før og efter justeringslaget.</p>
            <p>Og dernæst vises det afmaskede billede ved siden af masken i den grønne kanal.</p>
        </div>
    </div><!--END: modul_1-->
    
	<div class="modul_1">
    	<div class="img_left">
			<img src="img/billedbehandling/elverHair1Channel1.jpg" />
        </div>
        <div class="img_right">
			<img src="img/billedbehandling/elverHair1Channel2.jpg" />
        </div>
    </div><!--END: modul_1-->
    
	<div class="modul_1">
    	<div class="img_left">
			<img src="img/billedbehandling/elver.jpg" />
        </div>
        <div class="img_right">
			<img src="img/billedbehandling/elver-mask.jpg" />
        </div>
    </div><!--END: modul_1-->

        <h2 class="trigger"><a id="slick-hide" href="#">Luk for fritlægning af pigen</a></h2>
    </div><!--END: TOGGLE-BOX-->

    
    <div class="modul_2">
    	<div class="img_right">
			<img src="img/billedbehandling/wings-org.jpg" />
        </div>
        
    	<div class="text_left">
        	<h2>Vinger</h2>
            <p>Jeg fandt disse vinger på nettet.</p>
            <p>De er siden blevet afmasket, skaleret og roteret, så de kom til at passe til Feen.</p>
        </div>
    </div><!--END: modul_2-->
    
    <div class="modul_2">
    	<div class="img_left">
			<img src="img/billedbehandling/wings4.jpg" />
        </div>
        
    	<div class="text_right">
        	<h2>Vinger</h2>
            <ol>
            	<li>Den ene halvdel af vingerne er masket af og placeret på pigens kulderblade et sted, hvor det ser naturligt ud.</li>
            	<li>Der er lagt en kopi af vingerne, som er transformeret og ligger som en skygge ned af ryggen i multiply layer mode på 50% opacity.</li>
                <li>Det første engle lag er kopieret og lagt nedenunder. Det er tranformeret, så det ser ud til, at der er en sæt vinger, der sidder ved siden af og bagved det første sæt vinger på pigens ryg.</li>
                <li>Der er lagt et Hue/Saturation-justeringslag ovenpå med -21 i lightness.</li>
            </ol>
        </div>
    </div><!--END: modul_2-->
    
	<div class="modul_1">
    	<div class="img_left">
			<a target="_blank" href="img/billedbehandling/elver-paddehatte.jpg"><img src="img/billedbehandling/elver-paddehatte_small.jpg" /></a>
        </div>
        <div class="img_right">
			<img src="img/billedbehandling/elver-paddehatte-masked.jpg" />
        </div>
    </div><!--END: modul_1-->
    
	<div class="modul_1">
    	<div class="img_left">
			<a target="_blank" href="img/billedbehandling/elver-paddehat.jpg"><img src="img/billedbehandling/elver-paddehat_small.jpg" /></a>
        </div>
        <div class="img_right">
			<img src="img/billedbehandling/elver-paddehat-masked.jpg" />
        </div>
    </div><!--END: modul_1-->
    
	<div class="modul_1">
    	<div class="img_left">
			<a target="_blank" href="img/billedbehandling/elver-orange-blomst.jpg"><img src="img/billedbehandling/elver-orange-blomst_small.jpg" /></a>
        </div>
        <div class="img_right">
			<img src="img/billedbehandling/elver-orange-blomst-masked.jpg" />
        </div>
    </div><!--END: modul_1-->
    
	<div class="modul_1">
    	<div class="img_left">
			<a target="_blank" href="img/billedbehandling/elver-kogle.jpg"><img src="img/billedbehandling/elver-kogle_small.jpg" /></a>
        </div>
        <div class="img_right">
			<img src="img/billedbehandling/elver-kogle-masked.jpg" />
        </div>
    </div><!--END: modul_1-->

	<div class="modul_1">
    	<div class="img_left">
			<a target="_blank" href="img/billedbehandling/elver-flowers.jpg"><img src="img/billedbehandling/elver-flowers_small.jpg" /></a>
        </div>
        <div class="img_right">
			<img src="img/billedbehandling/elver-flowers-masked.jpg" />
        </div>
    </div><!--END: modul_1-->
    
	
    
    <div id="footer">
    	<div id="footer_left">
        <img src="grafik/portraet.gif" />
        	<address>Sandie Primdahl Sørensen<br />
            <span>mail:</span> sandiepsk@yahoo.dk<br />
            <span>tel:</span> 3117 6963</address>
        </div>
        <div id="footer_right">
        	<p>Jeg drømmer om at være en kreativ mediegrafiker, hvor illustration og grafisk design er en del af hverdagen. Jeg har til min store tilfredshed fået disse ønsker opfyldt til fulde i min praktik på Det Kongelige Bibliotek.</p>
        </div>
    </div><!--END: footer-->


</div><!--END: wrapper-->

<script>

      $(document).ready(function() {
       // hides the slickbox as soon as the DOM is ready
       // (a little sooner than page load)
        $('#slickbox').hide();
       // shows the slickbox on clicking the noted link  
        $('a#slick-show').click(function() {
          $('#slickbox').show('slow');
          return false;
        });
       // hides the slickbox on clicking the noted link  
        $('a#slick-hide').click(function() {
          $('#slickbox').hide('fast');
          return false;
        });
       
       // toggles the slickbox on clicking the noted link  
        $('a#slick-toggle').click(function() {
          $('#slickbox').toggle(400);
          return false;
        });
      });


</script>
</body>
</html>

CSS (Allernederst...)

Kode

@charset "utf-8";
/* CSS Document */



/*------------------------------------------------------------------------BASICS------------*/
*{
	margin: 0px;
	padding: 0px;
	}
img {
	border:none;
	}
body {
	background-color: #dddddd;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
		font-size: 12px;
	}	
#wrapper{
	margin: 0 auto;
	width:940px;
	}	
	
/*------------------------------------------------------------------------TYPOGRAFI------------*/
p{
	line-height:16px;
	margin: 7px 0;
	}
p a{
	color: #4f9300;
	}
h1{
	font-size:90px;
	color: #bbbbbb;
	font-weight:normal;
	font-family:TitilliumTitle12, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	}
h2{
	color:#4f9300;
	font-weight: normal;
	font-size:30px;
	line-height:30px;
	font-family:TitilliumMaps26L, Arial, Helvetica, sans-serif;
	}
/*.modul_1 h2, .modul_2 h2, .modul_3 h2{
	color:#4f9300;
	font-weight: normal;
	font-size:30px;
	font-family:TitilliumMaps26L, Arial, Helvetica, sans-serif;
	}
.modul_4 h2, .modul_5 h2, .modul_6 h2{
	color:#4f9300;
	font-weight: normal;
	font-size:30px;
	font-family:TitilliumMaps26L, Arial, Helvetica, sans-serif;
	}
*/ul {
	margin-left: 15px;}

li{
	margin-bottom: 5px;
	list-style: url(grafik/bullet.gif) outside;
}

	
/*------------------------------------------------------------------------HEADER------------*/
#header{
	background:transparent url(grafik/header.gif) left top no-repeat;
	height: 183px;
	margin-top:30px;
	}	
#logo a{
	height:50px;
	width: 145px;
	margin-left:85px;
	float:left;}
#menu{
	display: block;
	float:right;
	padding-top: 25px;
	padding-right: 30px;
	font-size:9px;
	text-transform: uppercase;
	}
/*-------------------------------------------------SUBMENU------------------------*/
#submenu{
	padding: 200px 30px 0 0;
	text-align:right;
	}
#submenu a{
	background-color:#a1d700;
	color: #17373c;
	padding: 1px 5px  0 5px;
	margin-left:15px;
	letter-spacing:130;
	font-size:9px;
	text-transform: uppercase;
	text-decoration: none;	
	}
#submenu a:hover{
	padding: 1px 5px  10px 5px;
	}
/*-------------------------------------------------MENU------------------------*/
a#active, #m1{
	border-bottom: 20px solid #17373c;
	}
a#active, #m2{
	border-bottom: 20px solid #2b6832;
	}
a.active#m3{
	border-bottom: 20px solid #4f9300;
	}
a#active, #m4{
	border-bottom: 20px solid #a1d700;
	}
/*-------------------------------------------------MENU------------FÆLLES------------*/
#menu a, menu a:link, menu a:visited, menu a:hover{
	color:#17373c;
	font-weight:bold;
	margin-left:15px;
	letter-spacing:130;
	text-decoration: none;	
	}
/*-------------------------------------------------MENU------------1------------*/
a#m1, a:link#m1{
	border-bottom: 10px solid #17373c;
		}
a:hover#m1{
	border-bottom: 20px solid #17373c;
	}
/*-------------------------------------------------MENU------------2------------*/
a#m2, a:link#m2{
	border-bottom: 10px solid #2b6832;
		}
a:hover#m2{
	border-bottom: 20px solid #2b6832;
	}
/*-------------------------------------------------MENU------------3------------*/
a#m3, a:link#m3{
	border-bottom: 10px solid #4f9300;
		}
a:hover#m3{
	border-bottom: 20px solid #4f9300;	
	}
/*-------------------------------------------------MENU------------4------------*/
a#m4, a:link#m4{
		border-bottom: 10px solid #a1d700;
		}
a:hover#m4{
		border-bottom: 20px solid #a1d700;
			}
/*------------------------------------------------------------------------MODULER------------*/
.modul_1, .modul_2{
	width: 940px;
	height: 470px;
	margin-bottom: 30px;
	}
.modul_1{/*---HVID BAGGRUND---*/
	background-color:#fff;
	color:#17373c;
	}
.modul_2{/*---BLÅ BAGGRUND---*/
	background-color:#17373c;
	color:#fff;
	}
/*-------------------------------------------------MODULER------------INTRO + OVERSKRIFT------------*/
.intro{
	padding:30px;
	background-color:#17373c;
	color:#fff;
	width:175px;
	height: 175px;
	overflow:hidden;
	}
.intro a, .intro a:visited{
	color: #a1d700;
	}
#overskrift{
	width: 447px;
	height: 270px;
	float:right;
	text-align:left;
	padding: 87px 30px 100px 0;
	}
/*-------------------------------------------------MODULER------------TEXT------------*/
.modul_1 .text_left, .modul_2 .text_left, .modul_1 .text_right, .modul_2 .text_right{
	padding: 100px;
	}	
.text_left, .text_right{
	width: 255px;
	height: 270px;
	text-align:left;
	}	
.text_left{
	float:left;
	}	
.text_right{
	float:right;
	}
/*-------------------------------------------------MODULER------------IMG------------*/
.img_right{
	float:right;
	}
.img_left{
	float:left;
	}
/*------------------------------------------------------------------------FOOTER------------*/
#footer{
	background-color:#FFF; 
	height: 64px;
	width: 940px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height: 12px;
	color: #17373c;
	padding-top:30px;
	margin-bottom:30px;
	}
#footer img {
	float: right;
	margin-left: 10px;
	margin-top:5px;
	}
#footer_left{
	width:470px;
	float:left;
	}
#footer_right{
	width:420px;
	text-align:left;
	float:right;
	padding-right: 30px;
	}
#footer_right p{
	font-size:10px;
	line-height: 12px;
		}
address{
	text-align:right;
	font-style:normal;
	}
span{
	font-weight:bold;
	text-transform:uppercase;}
address span{
	color: #2b6832;}
p span, li span{
	color: #a1d700;}	
	
/*------------------------------------------------------------------------TOGGLE------------*/

h2.trigger {


/*	background: #fff url(grafik/h2_trigger_a.gif) no-repeat 900px 10px;*/
	/*	height: 46px;
	line-height: 46px;*/
	width: 920px;
	/*	font-size: 2em;
	font-weight: normal;*/
/*	float: left;*/
	cursor:pointer;
	text-align:left;
}
a#slick-show{
	background: #fff url(grafik/h2_trigger_a.gif) no-repeat 900px 10px;
	cursor:pointer;
	text-align:left;
	width: 920px;
	padding: 10px 10px 10px 10px;
	margin-bottom:30px;
	color: #17373c;
	display: block;
	}
a:hover#slick-show{ 
	color: #a1d700;
	text-decoration:underline;
	background: #fff url(grafik/h2_trigger_a-hover.gif) no-repeat 900px 10px;
	}
a#slick-hide{
	background: #fff url(grafik/h2_trigger-minus_a.gif) no-repeat 900px 10px;
	cursor:pointer;
	text-align:left;
	width: 920px;
	padding: 10px 10px 10px 10px;
	margin-bottom:30px;
	color: #17373c;
	display: block;
	}
a:hover#slick-hide{ 
	color: #a1d700;
	text-decoration:underline;
	background: #fff url(grafik/h2_trigger-minus_a-hover.gif) no-repeat 900px 10px;
	}

2 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 1 karma

Sorter efter stemmer Sorter efter dato

Bruger #3143 @ 27.10.10 16:37

1.965

Koden ser ud til at virke som den skal. Den skjuler/viser en del af siden, når der klikkes på nogle links, og koden bruger ID'er. Prøv engang at ændre koden sådan som du havde tænkt dig at gøre, sådan at det ikke virker. Så kan jeg se på hvad du har gjort forkert. Men du skal selv gøre et forsøg først.

Bruger #12606 @ 28.10.10 09:30

Hej Jesper, Tak fordi, du vil hjælpe mig.
Men jeg ved ikke hvorfor jeg har været sådan en klovn... - Måske fordi jeg ikke er vant til at implementere jQuery...

Jeg har selv fundet den åbenlyse fejl!

Jeg rettede id om til class både i html-koden og css'en, men glemte selvfølgelig at rette det i det lille script, der er nederst i mit html-dok. *DOH*

Sa. Tak fordi, du ville hjælpe, men jeg ville lige komme tilbage og fortælle, at jeg selv havde fundet kvaje-fejlen...

Indlæg senest redigeret d. 28.10.2010 09:34 af Bruger #12606

problemer med id der skal laves om til class

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler