background voor link

Status
Niet open voor verdere reacties.
M

marc 05

Gebruiker
Lid geworden
5 sep 2006
Berichten
227
#content a {
color : white;
background:#584d7b;
}
#content a:hover, #content a:focus {
background : green;
color : white;
}
Klik om te vergroten...



Bovenstaande css style heb ik voor onderstaande html


HTML: 
 <div id="content">
  
    <p><a href="voorbeeld.php">Voorbeeld</a></P></div>


Nu heb ik in dezelfde div id="content" ook een ankerpunt gemaakt.

<p><a name="ankerpunt"></a>Wil hier geen background voor</p>


De background die ik nu krijg bij het ankerpunt is hetzelfde als dat ik voor de andere links krijg in html voor de DIV "content" Nu wil ik geen ankerpunt.... hoe kan ik dit instellen instellen in css?

Alvast bedankt, Marc
 
Wat je kunt proberen, hoewel ik niet precies weet hoe dit cross-browser functioneert:

Code: 
#content a[href] {
  color:       white;
  background:  #584d7b;
}

#content a[href]:hover, #content a[href]:focus {
  background:  green;
}

[EDIT]
Als een eigenschap gelijk blijft (color) hoef je die niet opnieuw te declareren. Een beetje het cascading principe van CSS.
[/EDIT]
 
het is logisch dat dit ankerpunt ook een achtergrondkleur krijgt je zegt immers

HTML: 
#content a {
color : white;
background:#584d7b;
}
#content a:hover, #content a:focus {
background : green;
color : white; /* hoef je niet op te geven dit erft hij van de a dus bij de hover geef je alleen aan wat er moet veranderen in dit geval de achtergrond kleur */ 
}

hiermee zeg je pak alle a tags die in de div content zitten. dus ook het ankerpunt dit is namelijk ook een a, zou je deze een andere kleur witten geven dan kun je deze a een class mee geven.

HTML: 
<p><a name="ankerpunt" class="anchor"></a>Wil hier geen background voor</p>

je css
HTML: 
#content .anchor{
hier je opmaak
}

ook zou je een span om je tekst heen kunnen gooien
HTML: 
<p><a name="ankerpunt"></a><span>Wil hier geen background voor<span></p>

HTML: 
#content span{
hier je opmaak
}

bij css moet je goed onthouden dat hoe dieper je specificeert des te belangrijker iets is.
 
Op zich natuurlijk een goede opmerking, alleen probeer ik zo weinig mogelijk aan mijn HTML te wijzigen, in het kader van de opmaak. Het toevoegen van span-tags en classes probeer ik dus tot een minimum te beperken... Vandaar mijn optie van een selector op basis van het href-attribuut.

Maar nu heeft de TS twee mogelijkheden om te proberen.
 
wat wil je nu precies doen dan ? je wilt geen extra opmaak toevoegen aan de html dat is nu duidelijk, maar je wilt dat de achor tag geen achtergrond krijgt terwijl je deze wel hebt opgemaakt d.m.v css begrijp ik dit goed ?
 
Wacht even, dat was een opmerking van mij, ik weet niet of dat ook bij de TS zo is. Ik probeerde alleen aan te geven, dat je met mijn snippet alleen <a>'s target, die ook een href-attribuut hebben. Misschien ff wachten op een reactie van de TS.
 
lol snap dr nu niks meer van :D btw wat bedoel je met TS?
 
Laatst bewerkt:
In het forum-jargon is TS = TopicStarter, kwam ik eens bij toeval achter.
Komt dus erg in de buurt van een FiPo! ;)
 
Ehm, naar mijn bescheiden mening bestaat het hele probleem niet, en zijn ook alle ingewikkelde en minder ingewikkelde oplossingen gansch en al niet nodig.
De TR's of BH's *) hebben zich meteen op oplossingen gestort, terwijl er geen probleem is. :D

Want als ik naar de FiPo van de TS ga, staat daar:
Code: 
#content a {
    color : white;
    background:#584d7b;
    }
#content a:hover, 
#content a:focus {
    background : green;
    color : white;
    }
en:
HTML: 
<div id="content">
    <p><a href="voorbeeld.php">Voorbeeld</a></p></div>
    ... enz.
    <p><a name="ankerpunt"></a>Wil hier geen background voor</p>
</div>
Nou, op deze manier is het een leeg ankerpunt <a></a>, en kan de bijbehorende tekst nooit de kleur/background van een link krijgen.
Want de tekst staat gewoon buiten de <a></a>. :P
Alleen als je de tekst binnen de <a></a> zou zetten, ja, dan wel.
Zelfs de meest eigenwijze browser kan er niets anders van maken.
Daarin tevens het modernere alternatief opgenomen:
HTML: 
<p id="ankerpunt-2">Ankerpunt-2 - wil hier geen background voor.</p>
Een <a></a> met een name of id is helemaal niet nodig. Op deze manier kan je er via het DOM-systeem ook allerlei javascript op loslaten als dat eens nodig mocht zijn.

Zo, mijn weekend kan niet meer stuk! ;)
CSShunter
_________
*) TR = TopicReactor, BH = BraveHelper.
 
Laatst bewerkt:
lol had niet gezien dat de tekst er buiten stond :o
 
bedankt tot dusver al voor de uitleg.


om het één en ander proberen uit te leggen heb ik even een ankerpunt aangemaakt in een openbare pagina, het ankerpunt waar het feitelijk om gaat staat in een afgeschermde pagina. Maar dit maakt even voor de uitleg niets uit.

Toch blijft het blokje in b.v. IE en FF aanwezig. Alleen wanneer ik in IE de compatibiliteitsweergave gebruik dan is het blokje weg. Kan ook geen fout ontdekken in de pagina die dit zou kunnen veroorzaken. Heeft het iets te maken met html 4.0?


Hier de link waar ik de tijdelijke ankerpunt aangemaakt heb. Beneden op de pagina staat de link naar het ankerpunt.

http://www.digitreport.com/vakantie1.php
 
Hoi Marc,
't Is toch merkwaardig dat ie het in mijn testpagina niet doet, en bij jou wel.
Het lijkt wel alsof de <a></a> op jouw pagina een bepaalde breedte heeft, ook als er geen spatie tussen staat.
Ha! Het lijkt niet alleen zo ... het is ook zo! :D
Code: 
#content a { 
    [B]padding [/B]: 0 [B]3px[/B];
    color : white;
    background:#584d7b;
    }
Elke <a> in de #content heeft een linker- en een rechterpadding van 3px, samen 6px, ook als er niets in staat. Dat is gewoon de minimale breedte.
Klopt bij nameten (en het bg-kleurtje #584d7b klopt ook):

ankerpunt.png

De oplossing is dus:
Code: 
#content #ankerpunt { 
    padding : 0;
    }
Daarbij moet je in de html de name vervangen door id, anders werkt het niet (css pakt alleen een id of class, geen name):
HTML: 
<a id="ankerpunt"></a>
Zo zie je maar weer dat je altijd de volledige echte dader moet zien *): dan kan een niet bestaand ene probleem toch een wel bestaand ander probleem zijn. ;)

Met vriendelijke groet,
CSShunter
_______________
*) In je css van de vraagstelling in de FiPo nr.#1 stond die padding er niet bij! :P
 
Laatst bewerkt:
Dank je csshunter, trouwens allemaal bedankt tot zover.

Dit is wat ik bedoelde.

Een <a></a> met een name of id is helemaal niet nodig. Op deze manier kan je er via het DOM-systeem ook allerlei javascript op loslaten als dat eens nodig mocht zijn.
Klik om te vergroten...


Hoe werkt dit als je geen name of id hebt.... hoe kun je er via het DOM-systeem javascripts op loslaten en hoe werkt het systeem?


Misschien een vraag voor een nieuwe topic... waar zou ik deze dan kunnen plaatsen?
 
Achtergrondkleur menu

Head:

Code: 
ul.navbar li {
	background: gray;
	margin:1.5em 0;
	padding: 0.3em;
	border-right: 1em solid black }
ul.navbar a {
	text-decoration: none }
	a: link {
	color: black }
	a: visited {
	color: black }

Body:

Code: 
<ul class="navbar">
<li><a href="Voorbeeld.html">Voorbeeld</a>
<li><a href="Voorbeeld2.html">Voorbeeld</a>
<ul>

Even het script aanpassen en Klaar is Kees!
 
@MrMorrie1
De:
Code: 
a[COLOR="darkred"]:[/COLOR] link { color: black }
a[COLOR="darkred"]:[/COLOR] visited { color: black }
zal moeten zijn:
Code: 
a[COLOR="darkred"]:[/COLOR]link { color: black }
a[COLOR="darkred"]:[/COLOR]visited { color: black }
zonder spatie tussen de : en "link" en "visited".
De <li>'s zullen fatsoenlijk afgesloten moeten worden met een </li>. En de laatste <ul> moet uiteraard een </ul> zijn.
Maar, eh, de vraagsteller heeft al een oplossing waar hij tevreden mee is. Ik zie ook niet precies het verband tussen de ul.navbar a en de bladwijzer in de #content waarover het ging.
Op welke vraag is dit een reactie? :rolleyes:

=====
@marc 05
Wat ik bedoelde, was dat je geen losse <a id="bladwijzer"></a> nodig hebt, maar het kunt regelen met een <p id="bladwijzer"> (of een ander element waaraan je de id="bladwijzer" vastknoopt; kan bv. ook een <div> of een <hr> zijn).

Neem bv. deze:
HTML: 
<p><a href="#extra" onclick="show('extra')">Ga naar Extra</a></p>

... en ergens anders onzichtbaar:

<div id="extra" style="display: none;">
   <h2>Extra</h2>
   <p>De bonus hierbij is ... enz.</p>
</div>
Vanwege de id="extra" in de <div> is die dan makkelijk met javascript te traceren:
[JS]function show(n){
var showDiv = document.getElementById(n);
showDiv.style.display = 'block';
}[/JS]
De klik op de link maakt nu de Extra-div zichtbaar, en zet deze bovenaan de pagina.

=====
Elementen zonder id zijn trouwens ook via de DOM-regels te benaderen, met bv.:
[JS]var p5 = document.getElementsByTagName('p')[4];
p5.style.color = 'red';[/JS]
Deze geeft de vijfde paragraaf een rode tekstkleur.
Attentie: de DOM-telling begint altijd met 0 voor het eerste element met een bepaalde naam (en niet met een 1!). Als je de <body> nodig hebt, moet je dan ook zeggen:
[JS]var bodyDiv = document.getElementsByTagName('body')[0];[/JS]
(ook al is er maar één <body>; maar dat weet het javascript niet ;) )

=====
Mocht je nog een concrete vraag over javascript hebben, dan zou ik die plaatsen in de javascript-afdeling van het forum:
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Dank je csshunter,

Een beetje is me nu duideljk hoe het DOM-systeem werkt.... voor verdere vragen met betrekking tot javascript doe ik een beroep op het desbetreffende forum.


Groeten, Marc
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan