[LØST] Problemer med HREF tag

Kenny Bones · 9. januar 2008

Kudos til Jesper Karsrud for excellent øye for feil! :thumbup:

Og selvfølgelig til Haraldson og alle andre som har hjulpet via PM!

Originaltråd redigert. Har nå fått til slik at fanen holdes inne når den aktuelle siden er lastet. Den er grei. Men sliter fortsatt med følgende:

Det bildet som er definert i #hjem kommer på lenkene i menyen! Why? Ser ut som at det er href-tagger den reagerer på. Fordi det er bare lenker den legger sånt på. Hvordan får jeg gjort om dette da? Prøvde nå å lage en href-lenke og en vanlig tekst og jeg ser nå at bildet kommer på href-taggen. Snedig.

Poster derfor hele CSS-koden:

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

*************************************************
** Kode som er gjeldende for hele siden [START]  **
**************************************************/
a
{
 outline: none;
}

p {
margin:0;
}

html,body {
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:#F3F6FA;
height:100%;
z-index:0;
margin:0;
padding:0;

}

.Showvideo,/* [SETTER FELLES STYLES PÅ FLERE] */
.Imagehead,.ImageLeft,.ImageCenter,.ImageRight,.contentImageRight {
background-color:#FFF;
border:1px solid silver;
}

.Footer,.Footer_left,.Footer_right {
height:100px;
bottom:0;
}

/*
*************************************************
** Kode som er gjeldende for hele siden [END]  **
*************************************************
*/

/*
*************************************************
** Kode for header [START]  **
*************************************************
*/

#nav {
position: absolute;
top: 101px;
left: 330px;
list-style: none;
margin: 0;
padding: 0;
height: 28px;
display: inline;
overflow: hidden;
width: 603px;
background: url(Html/Img/site/menu/navbar.gif)
}

#nav li {
position:relative; 
float:left;
margin: 0; 
padding: 0;
display: inline;
overflow: hidden;
list-style-type: none;
}

#nav a {
float: left;
padding: 28px 0 0 0;
overflow: hidden;
height: 0px !important; height /**/:20px; /* for IE5/Win */
}

#nav a:hover {
background-position: 0 -28px;
}

#nav a:active {
background-position: 0 -56px;
}

#hjem a  {
width: 58px;
background: url(Html/Img/site/menu/hjem.gif) top left no-repeat;
}

#hjelp a  {
width: 107px;
background: url(Html/Img/site/menu/hjelp.gif) top left no-repeat;
}

#brukerveil a  {
width: 140px;
background: url(Html/Img/site/menu/brukerveil.gif) top left no-repeat;
}

#e-learn a  {
width: 126px;
background: url(Html/Img/site/menu/e-learn.gif) top left no-repeat;
}

#forum a  {
width: 65px;
background: url(Html/Img/site/menu/forum.gif) top left no-repeat;
}

#kontakt a  {
width: 96px;
background: url(Html/Img/site/menu/kontakt.gif) top left no-repeat;}	
.leftmenu_wrap {
float: left;
}

/* Kode som gjør at fanene holdes inne */

body#hjem a#hjem-nav {
background-position: 0 -56px;
}


/*
*************************************************
** Kode som er gjeldende for hele siden [END]  **
*************************************************



*************************************************
** Kode for footer [START]  **
**************************************************
*/

.Footer {
position:absolute;
clear:both;
background-image:url(Html/Img/site/footer_middle.gif);
background-repeat:repeat-x;
width:100%;
text-align:center;
background-position:center;
z-index:inherit 1;
}

.Footer_left {
left:0;
float:left;
width:296px;
overflow:hidden;
position:relative;
background-image:url(Html/Img/site/footer_left.gif);
}

.Footer_right {
height:100px;
bottom:0;
right:0;
float:right;
width:296px;
overflow:visible;
position:static;
}

/*
*************************************************
** Kode for footer [END]  **
*************************************************


************************
** Hovedinnhold [START]   **
*************************/
#Content {
margin-top:0;
margin-right:10px;
margin-left:280px;
overflow:visible;
width:680px;
padding:10px 10px 110px;
}

#maincontainerwrap {
position:relative;
min-height:100%;
}

/* [INDIVIDUELLE STYLES] */
.QuoteRight,.QuoteLeft {
width:200px;
font-size:13pt;
letter-spacing:-1px;
border-bottom:1px solid silver;
border-top:1px solid silver;
color:#39F;
font-style:italic;
margin:0 0 15px 14px;
padding:5px 8px 7px;
}

.QuoteLeft {
float:left;
}

.QuoteRight {
float:right;
}

.Casewrap {
font-size:14px;
float:left;
margin-top:4px;
padding-top:4px;
padding-right:8px;
padding-left:8px;
margin-bottom:8px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
background-color:#E4EBF3;
border:1px solid #D3DEEB;
width:600px;
height:196px;
margin-left:1px;
}

/* [STYLES FOR BILDER] */
.ImageLeft,/* [SLÅR SAMMEN] */
.ImageCenter,/* [DISSE STILENE] */
.ImageRight {
line-height:0;
font-size:1px;
margin-top:0;
margin-bottom:0;
display:inline;
padding:2px;
}

.ImageLeft {
float:left;
margin:3px 15px 4px 0;
}

.ImageCenter {
text-align:center;
display:block;
position:absolute;
margin-left:20%;
}

.ImageRight {
float:right;
margin:4px 0 15px 15px;
}

.contentImageRight {
float:right;
margin-top:4px;
margin-bottom:4px;
margin-right:0;
padding:2px;
}

.Imagehead {
float:left;
margin:5px 50px 20px 31px;
padding:2px;
}

.Showvideo {
float:right;
margin:4px 0 15px 15px;
padding:1px;
}

/* [SKRIFTTYPER] */
.Hovedoverskrift {
font-size:13pt;
font-weight:700;
line-height:15pt;
letter-spacing:-1px;
color:#222;
}

.ImageText {
clear:both;
margin-top:2px;
border-top:1px solid #ddd;
font-size:8pt;
text-align:center;
line-height:normal;
width:auto;
padding:9px 3px 7px;
}

.Lenke {
font-size:9pt;
font-weight:400;
line-height:15pt;
color:#06F;
font-style:italic;
}

.caselinks {
font-size:14px;
color:#69F;
font-weight:700;
text-align:left;
text-decoration:none;
padding-left:5px;
}

.caselinks:hover {
text-decoration:underline;
color:#69F;
}

/*
************************
** Hovedinnhold [END]   **
************************


*****************************
** Venstremeny [START]	   **
******************************/
#Menu {
width:255px;
background-image:url(Html/Img/site/leftmenuspacer.gif);
background-repeat:repeat-y;
float:left;
top:0;

position:absolute;
left:0;
z-index:2;
overflow:visible;

}

body>#Menu {
width:255px;
}

.leftmenuwrap {
background-image:url(Html/Img/site/leftmenuspacer.gif);
background-repeat:repeat-y;
height:1%;
}

.leftmen_sec_bottom {
height:3px;
width:255px;
clear:both;
position:static;
}

.leftmen_sec_end {
height:21px;
width:255px;
clear:both;
position:static;
background-color:#F3F6FA;
}

.leftmen_content {
float:left;
width:184px;
margin-left:30px;
padding:10px 5px 5px;
}

.Leftmenutext_normal_link:hover {
text-decoration:underline;
}

.leftmen_sec_a,.leftmen_sec_b {
height:100%;
width:255px;
float:left;
}

.Leftmenutext_normal,.Leftmenutext_normal_link {
font-size:10pt;
font-family:Arial, Helvetica, Verdana, sans-serif;
text-align:left;
line-height:normal;
font-weight:400;
color:#467ddf;
font-style:normal;
text-decoration:none;
}

#leftmen_plusminus {
position:static;
left:73%;
width:37px;
height:15px;
z-index:1;
}
/*
*****************************
** Venstremeny [END]		 **
*****************************

Og her er HTML-koden

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ErgoGroup - Kundeservice Brukerstøtte</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body id="hjem">

<div class="headerdiv"><div><table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
<td width="100%"><img src="Html/Img/site/topmenu_kundeservice.gif" width="503" height="83" align="left" /></td>
<td width="100%"><img src="Html/Img/site/topmenu_ergologo.gif" width="521" height="83" align="right" /></td>
 </tr>
</table>
</div>
<img src="Html/Img/site/menutopspacer.gif" width="1800" height="18" /><img src="Html/Img/site/menutopleft.gif" width="1800" height="28" />

 <ul id="nav">

<li><a id="hjem-nav" href="/vegard/index.asp">hjem</a></li>
<li><a id="hjelp-nav" href="/vegard/hjelp.asp">hjelp</a></li>
<li><a id="brukerveil-nav" href="/vegard/brukerveil.asp">brukerveil</a></li>
<li><a id="e-learn-nav"> href="/vegard/e-learn.asp">e-learn</a></li>
<li><a id="forum-nav"> href="/vegard/forum.asp">forum</li>
<li><a id="kontakt-nav"a href="/vegard/kontakt.asp">kontakt</a>		
</li></ul>

</div>
</body>
</html>
</div>

  <div id="maincontainerwrap"> <!-- Wrapper alt sammen START -->
  <a name="top"></a>

  <div id="Menu"> 																										<!-- DIV for venstremeny START -->
	<div class="leftmen_sec_a" id="leftmen_sec_a"><img src="Html/Img/site/leftmenu_02.gif" alt="leftmenu_02" />		</div>  

	   <div class="leftmen_content" id="leftmen_content">																<!-- Første seksjon (hjelp & støtte) -->	

<div id="dtree">

<script type="text/javascript">


					a = new dTree('a');

					a.add(0,-1,'<strong> Velg programvare</strong>');
					a.add(1,0,'Microsoft');
					a.add(2,1,'Office 2003','example01.html');
		<!--		a.add(3,1,'Office 2007','example01.html'); //-->
					a.add(4,2,'Word 2003','example01.html','','','Html/Img/site/menu/word03.gif');
					a.add(5,2,'Excel 2003','example01.html','','','Html/Img/site/menu/excel03.gif');
					a.add(6,2,'Outlook 2003','example01.html','','','Html/Img/site/menu/outlook03.gif');
					a.add(7,2,'PowerPoint 2003','example01.html','','','Html/Img/site/menu/powerpnt03.gif');
					a.add(8,3,'Word 2007','example01.html','','','Html/Img/site/menu/word07.gif');
					a.add(9,3,'Excel 2007','example01.html','','','Html/Img/site/menu/excel07.gif');
					a.add(10,3,'Outlook 2007','example01.html','','','Html/Img/site/menu/outlook07.gif');
					a.add(11,3,'PowerPoint 2007','example01.html','','','Html/Img/site/menu/powerpnt07.gif');
					a.add(12,0,'Adobe');
					a.add(13,12,'Reader','example01.html');
					a.add(14,12,'Acrobat','example01.html');

						document.write(a);
					</script>


	   </div>		
	</div> 

  <div class="leftmen_sec_b" id="leftmen_sec_b"><img src="Html/Img/site/annet_top_01.gif" alt="annet_top_01" /></div>
	<div class="leftmen_content" id="leftmen_content_b">

		<div class="dtree2">				</div>			 
		</div>

		 <div class="leftmen_sec_end" id="leftmen_sec_end"><img src="Html/Img/site/leftmenubottom.gif" alt="leftmenubottom" /></div>
		   </div> 				
<!-- DIV for venstremeny END -->
			 <div id="Content"> <!-- Her begynner koden for innholdet på siden -->

   <p>Dette er innhold på siden<br />

   <a href="#top">Back to the top of the page</a>

<a href="c:\tootototototo.spt">Testeteste</a>
testeteste
 </div> 
 <!-- Her slutter koden for innholdet på siden -->

  <div class="Footer">
  <div class="Footer_left"></div>
	<div class="Footer_right"><img src="Html/Img/site/footer_right.gif" alt="footer_right" /></div>
  </div> 

</div> <!-- Wrapper alt sammen END -->

</body>
</html>

Endret 11. januar 2008 av Kenny Bones

semafor · 9. januar 2008

Jeg kan hjelpe hvis du har en fullstendig Internett-side med koden over inkludert.

Kenny Bones · 10. januar 2008

Har sendt deg PM. Tror jeg ihvertfall.. Så ingenting i sent items så jeg er ikke sikker. Kan i grunn ikke poste lenken til siden direkte i tråden fordi jeg er usikker på jeg i grunn har lov grunnet corporate-rules osvosv. Vil ikke risikere noe. Men det er den koden postet over som er på siden for øyeblikket. Så noe annet tror jeg ikke er nødvendig? Eller?

Kenny Bones · 10. januar 2008

Noen andre som har tips til hvordan jeg får det til?

Skjønner i grunn ikke hvorfor eller hvordan den tre-menyen til venstre får body-egenskapene til knappene.. Må jo være noe jeg har oversett her vel? :dontgetit:

Edit: Er det mulig å få til slik at de body-egenskapene satt på knappene kun gjelder for elementer inni én spesiell DIV? Menyen ligger inni en DIV som heter "nav". Da hadde jeg vel kunnet unngått av regelen går over alle andre elementer som blir påvirket av body?

Endret 10. januar 2008 av Kenny Bones

Haraldson · 10. januar 2008

For det første trenger du grunnleggende forståelse for pseudo-klasser i CSS. :active trigges kun når man holder musen nede på et element, oftest en <a>.

Videre må du tenke deg litt om. Du setter <body id="stil">?

Hvis det er gjennom å sette id på body du ønsker å løse dette, må du tenke annerledes. Hver side du navigerer til, eventuelt hver seksjon, gir <body> en egen id. For eksempel hovedsiden for Microsoft, her blir det slik; <body id="microsoft">. Så må du tenke videre - hvordan skal du nå identifisere menypunktet Microsoft i menyen?

Jeg vet ikke hvordan siden din er bygget, men er det hardkodede menyer som du har litt kontroll over, gir du hvert menypunkt en egen klasse, for eksempel som passer overens med id-en body får.

I CSS gjør du så følgende;

body#microsoft a.microsoft, #ms-office .ms-office {
background-position: 0 -56px;
}

Ulempen her er at du må hive inn regler for hvert eneste punkt. Har du et CMS, bør du se deg om etter muligheter til å sette klasser på de aktive menypunktene.

Endret 10. januar 2008 av Haraldson

Kenny Bones · 10. januar 2008

Hmm, det eneste jeg er ute etter er å få lagt en meny som har rollovers og hvor hver enkelt fane holdes nede dersom jeg er inne på den siden. Som her:

http://www.456bereastreet.com/archive/2005...state_with_css/

Blir det helt feil da?

Jeg har jo allerede klasser for hvert enkelt menyitem.

#hjem a {
width: 58px;

background: url(Html/Img/site/menu/hjem.gif) top left no-repeat;

}

Hvordan får jeg da redigert den koden du skrev så det passer inn i min? Jeg bruker jo et bilde for hvert enkelt menyitem. Hvordan blir det da? Og dersom jeg vil at regelen kun skal gjelde for elementer inni DIVen #nav?

Blir litt forvirret når man fletter sammen flere klasser i én.

Problemet mitt tror jeg ligger i at hver klasse er forskjellig iogmed at det er enkeltbilder definert i hvert enkelt menyitem. Når jeg har funnet hvordan andre gjør dette så ser jeg at alle fanene i menyene bruker samme bilde og at kun teksten endrer seg. Men jeg har jo bilder istedet for tekst, derfor må alle defineres hver for seg. Og det er her jeg sliter.

Endret 10. januar 2008 av Kenny Bones

Kenny Bones · 10. januar 2008

Da fikk jeg det faktisk til!

Jeg hadde bare misforstått fullstendig hvordan det fungerte, ikke verre enn det!

Dette måtte stå i koden min:

body#hjem a#hjem {
background-position: 0 -56px;

{

Dette jeg hadde misforstått. Med andre ord, istedet for background-position hadde jeg bare sagt at selve bildet skulle være der, og ikke den endrede posisjonen på bildet. ZOMG...

Edit: Eller ikke.. Funket ikke likevel. Men jeg er ihvertfall på et litt riktigere spor nå da tror jeg

Edit2: Og der funka det likevel. Hadde bare vært litt for ekstatisk og klipt ut koden over som gjorde til at det fungerte og glemt å lime inn igjen. Herregud

Endret 10. januar 2008 av Kenny Bones

Kenny Bones · 10. januar 2008

Har nå oppdatert førsteposten. Hva kan det være som gjør at href-taggene arver det jeg setter i klassene for knappene mon tro?

Må jo stå et eller annet sted. Kan jeg kanskje legge til en annen kode som forhindrer dette?

Haraldson · 10. januar 2008

'Arv' som du her kaller det, er i tilfelle helt og holdent avhengig av HTML-en, og den kan jeg ikke se noe sted. Vedder på at det er en syntaxfeil et sted i HTML-en.

Du kan ikke gi to elementer samme id. Body kan ikke ha samme id som et menypunkt, her må du gi et av elementene et prefix, som for eksempel #menu-microsoft, eller bytte til klasser.

Kenny Bones · 11. januar 2008

Ok, så hvis jeg bytter til klasser så vil det teoretisk sett funke? Aha, der tror jeg det gikk opp et lite lys for meg! :idea: For det første så hadde jeg misforstått hvordan jeg får til at fanene holdes nede. Jeg trodde at jeg måtte modifisere :active og bruke akkurat den stilen som body id. Men i ettertid så jeg jo at jeg må ha én stil for knappene og én som samsvarer med det jeg skriver som body id. Skal prøve meg litt frem. Poster også HTML-koden i førsteposten så den kan sees.

Jesper Karsrud · 11. januar 2008

Altså. I CSS-en din så har du sagt at #hjem a skal ha en bakgrunn. Da vil jo alle lenker innenfor et element med id "hjem" få denne stilen. Og siden du har gitt body id=hjem, vil selvfølgelig alle lenker på hele siden få stilen du egentlig har tenkt at kun skulle gjelde i menyen. Hadde du derimot gjort slik: a#hjem, og satt id=hjem på lenken i menyen din, ville du ikke fått problemet.

Det er noen grunnleggende ting her du må lese mer om, ser det ut til.

Kenny Bones · 11. januar 2008

Ja, jeg merket det siden problemet ikke skjedde dersom jeg ga bodyen en annen id. Og dermed ble dette enda mer forvirrende! Har lest i hytt og pine, men det er dette med pseudo-klasser som jeg sliter litt med. Tror det beste er å lese om det for å så prøve ut hvert enkelt steg selv så jeg virkelig forstår hvordan det henger sammen.

Så med andre ord, a#hjem betyr at den stilen som er gitt i denne kun skal gjelde for IDer som heter hjem innenfor a-tagger sant? Tror jeg begynner å forstå akkurat dette litt mer nå. Skal prøve det ut ihvertfall. Thx!

Edit: Og det fungerte perfekt gitt! Utrolig hvor enkelt det virker når man forstår det gitt!

Endret 11. januar 2008 av Kenny Bones

Logg inn

[LØST] Problemer med HREF tag

Anbefalte innlegg

Kenny Bones

Lenke til kommentar

Videoannonse

semafor

Lenke til kommentar

Kenny Bones

Lenke til kommentar

Kenny Bones

Lenke til kommentar

Haraldson

Lenke til kommentar

Kenny Bones

Lenke til kommentar

Kenny Bones

Lenke til kommentar

Kenny Bones

Lenke til kommentar

Haraldson

Lenke til kommentar

Kenny Bones

Lenke til kommentar

Jesper Karsrud

Lenke til kommentar

Kenny Bones

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer