egen stil på "diver"

egen stil på "diver"

Innleggav srb » tor 01.07.2010 15:54

Jeg trenger litt hjelp her:

trenger egen styring på fargen på en "a" i en "div"
"a" ene i menyen har én farge, men jeg trenger en annen farge på "a" en i en annen tekstboks... mener jeg kan styre dette, men får det ikke til.
EKS:
Kode: Merk alt
#textbox {
   overflow:auto;
   position:absolute;
   width:500px;
   height:500px;
   left:50px;
   top:220px;
   padding:5px 5px 5px 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#FFFFFF;
   text-align:left;
   }



EKS MED EGEN FORMSTIL PÅ "a":

Kode: Merk alt
#textbox a {
   overflow:auto;
   position:absolute;
   width:500px;
   height:500px;
   left:50px;
   top:220px;
   padding:5px 5px 5px 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#FFFFFF;
   text-align:left;
   }


DETTE ER SCC ´en:

Kode: Merk alt
@charset "UTF-8";
/* CSS Document */

html{
   margin:0px;
   padding:0px;
   height:100%;
   margin-bottom:1px;
}

body{
   margin:0px;
   padding:0px;
   background-image:url(../bg/murveggblurlight.png);
   background-repeat:no-repeat;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:small;
}


a{
   text-decoration:none;
   color:#666600;
   text-decoration:none;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
}


a:visited{
   text-decoration:none;
   color:#000000;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
}

a:hover{
   text-decoration:none;
   color:#666666;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
}

a:active{
   text-decoration:none;
   color:#CCFF00;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
}


p{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color:#CCCCCC;
   font-size:small;
}



h3{
   color:#FFFFFF;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:large;
}

h2{
   color:#FFFFFF;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:large;
}



ul li html {
margin: 0; padding: 0;
}


li {
list-style-type:none;
}



ul#linker {
   position:absolute;
   right:-5px;
   top:127px;
   width:585px;
   font-size:10px;
   text-align: center;
}

ul#li {
   position:relative;
   float:left;
   width:95px;
   height:20px;
   line-height:20px;
   background-color:#CCCCCC;
   border-right:2px dotted #FFFFFF;
}

/* Navigation Menu */

ul#nav {
   position:absolute;
   right:-5px;
   top:127px;
   width:585px;
   font-size:10px;
   text-align: center;
}

ul#nav li {
   position:relative;
   float:left;
   width:95px;
   height:20px;
   line-height:20px;
   background-color:#CCCCCC;
   border-right:2px dotted #FFFFFF;
}

ul#nav li.noBorder {
border-right:none;
}

ul#nav li:hover {
   background-color:#FFFFFF;
}

ul#nav li a {
   display:block;
   float:left;
   width:100%;
}

/* Second Tier */

ul#nav li ul {
display:none;
}

ul#nav li:hover ul {
   display:inline;
   float:left;
   width:100%;
   height:auto;
   margin:0;
   padding:0;
   text-align:left;
   font-size:10px;
}

ul#nav li:hover ul li {
   width:192px;
   height:20px;
   background-color:#FFFFFF;
   border:none;
   border-bottom:1px dotted #333333;
   overflow:hidden;
}

ul#nav li:hover ul li a {
   display: block;
   margin:0;
   padding:0 0 0 .3em;
   height:100%;
   line-height:2em
}

ul#nav li:hover ul li a:hover {
   background-color:#000000;
   color:#FFFFFF;
}


#index{
   position:relative;
   top:50px;
   margin:0 auto;
   background-image:url(../bg/omiguan.png);
   background-repeat:no-repeat;
   width:800px;
   height:600px;
}

#web{
   position:relative;
   top:50px;
   margin:0 auto;
   background-image:url(../bg/web.png);
   background-repeat:no-repeat;
   width:800px;
   height:600px;
}

#foto{
   position:relative;
   top:50px;
   margin:0 auto;
   background-image:url(../bg/foto.png);
   background-repeat:no-repeat;
   width:800px;
   height:600px;
}

#linker{
   position:relative;
   top:50px;
   margin:0 auto;
   background-image:url(../bg/linker.png);
   background-repeat:no-repeat;
   width:800px;
   height:600px;
}


#portfolio1{
   position:relative;
   top:50px;
   margin:0 auto;
   background-image:url(../bg/portfolio.png);
   background-repeat:no-repeat;
   width:800px;
   height:600px;
}

#portfolio{
   position:relative;
   top:50px;
   margin:0 auto;
   background-image:url(../bg/portfprod.png);
   background-repeat:no-repeat;
   width:800px;
   height:600px;
}

#annet{
   position:relative;
   top:50px;
   margin:0 auto;
   background-image:url(../bg/annet.png);
   background-repeat:no-repeat;
   width:800px;
   height:600px;
}

#annetto{
   position:relative;
   top:50px;
   margin:0 auto;
   background-image:url(../bg/annetto.png);
   background-repeat:no-repeat;
   width:800px;
   height:600px;
}
#kontakt{
   position:relative;
   top:50px;
   margin:0 auto;
   background-image:url(../bg/kontakt.png);
   background-repeat:no-repeat;
   width:800px;
   height:600px;
}

#textbox {
   overflow:auto;
   position:absolute;
   width:500px;
   height:500px;
   left:50px;
   top:220px;
   padding:5px 5px 5px 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#FFFFFF;
   text-align:left;
   }
   
#mailtextbox {
   overflow:auto;
   position:absolute;
   width:400px;
   height:300px;
   left:50px;
   top:220px;
   padding:5px 5px 5px 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#FFFFFF;
   text-align:left;
   }
   

#textboxPortF{
   overflow:auto;
   position:absolute;
   width:700px;
   height:100px;
   left:240px;
   top:220px;
   padding:5px 5px 5px 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#FFFFFF;
   text-align:left;
   }
   
   #textboxPortU{
   overflow:auto;
   position:absolute;
   width:500px;
   height:100px;
   left:295px;
   top:220px;
   padding:5px 5px 5px 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#FFFFFF;
   text-align:left;
   }
   
    #textboxPortA{
   overflow:auto;
   position:absolute;
   width:100px;
   height:50px;
   left:700px;
   top:550px;
   padding:5px 5px 5px 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#FFFFFF;
   text-align:left;
   }


#fotobox{
   overflow:auto;
   position:absolute;
   width:800px;
   height:200px;
   left:45px;
   top:220px;
   padding:5px 5px 5px 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#CCCCCC;
   }

#iguanLink a {
   position:absolute;
   font-size:9px;
   font-weight:bold;
   color:#FFFFFF;
   bottom:0px;
   right:4px;
}

#rettigheter p {
   position:absolute;
   font-size:10px;
   font-weight:bold;
   color:#FFFFFF;
   bottom:-25px;
   width:100px;
   right:320px;
}

#duerHer p {
   position:absolute;
   font-size:10px;
   font-weight:normal;
   color:#FFFFFF;
   top:565px;
   width:500px;
   text-align:left;
   left: 5px;
}

#portfolioGalleri{
   position:absolute;
   width:800px;
   height:250px;
   left:8px;
   top:300px;
   overflow:hidden;
   z-index: +1;
}


#lightbox{   position: absolute;   left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background:url(../lightbox2/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background:url(../lightbox2/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%   ; }

#imageData{   padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }   
#imageData #caption{ font-weight: bold;   }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;   }         
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}       

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }











   
medlem i 193 måneder
 

Re: egen stil på "diver"

Innleggav ingeborg » fre 23.11.2012 14:00

Hei! Du bruker ikke riktig kode for a. Dessuten skjønner jeg ikke helt hva det er du skal, for du kan egentlig ikke sette en <div> inni en <a> tag. Men du kan spesifikt endre linkers utseende basert på <div> tagen du putter <a> linken inni. Da må du isåfall gjøre sånn (legge til a:link, ikke bare a, og fjerne div-attributtene og bare ha tekstattributter)

Kode: Merk alt
#textbox a:link {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#FFFFFF;
   text-align:left;
   }


Da kan du også legge til #textbox a:hover, og #textbox a:visited for eksempel. Hvis du vil at diven skal endre seg ved "hover" så må du gjøre sånn (skrive inn i CSSen hvordan du vil den skal endre seg):

Kode: Merk alt
#textbox:hover {
     overflow:auto;
   position:absolute;
   width:500px;
   height:500px;
   left:50px;
   top:220px;
   padding:5px 5px 5px 5px;
   }


Håper jeg kunne hjelpe.

Brukerens avatar
medlem i 206 måneder
 

Re: egen stil på "diver"

Innleggav Forth » lør 24.11.2012 0:04

@ingeborg tror du misforsto hva han var ute etter.

om jeg tolker OP riktig så har han 2 ulike <div> som han ønsker ulik styling på <a> taggene i.

Isåfall kan du ikke bruke samme ID slik som er vist i kodesnuttene over.
en enkel tommelregel er at ID'er (#) kun forekommer 1 gang i HTML markupen, mens klasser (.) kan forekomme flere ganger.

Nå vet jeg ikke hvordan HTML markupen din ser ut, så siden jeg ikke vet konteksten tar jeg utgangspunkt i at disse to <div>'ene ligger likestilt.

Isåfall start med å gi disse to ulik klasse.

feks:
Kode: Merk alt
<div class="Hovedmeny"><a href="#">lenke</a></div>
<div class="Undermeny"><a href="#">lenke</a></div>


Så skriver du CSS med fellestrekkene i samme oppføring og spesifisering per klasse du ønsker annerledes

Kode: Merk alt
.hovedmeny a:link,
.undermeny a:link {
   overflow:auto;
   position:absolute;
   width:500px;
   height:500px;
   left:50px;
   top:220px;
   padding:5px 5px 5px 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   text-align:left;
}

.hovedmeny a:link {
    color:#FFFFFF;
}
.undermeny a:link {
    color:#000000;
}


Dermed ser lenkene like ut i de to ulike <div>'ene men i hovedmenyen er lenkene hvite og undermenyen er de sorte.

Du bør også som ingeborg sier spesifisere a:link, a:hover, a:visited for full kontroll over visningen.

forsto jeg deg rett? :)

Brukerens avatar
medlem i 221 måneder
 


Returner til CSS



Hvem er i Forumene

Registrerte brukere: Ingen registrerte brukere



cron