2kleuren in 1 link

RowanP · 17 mei 2008

Ik had eerst een mooi idee om de eerste letter van mijn link een andere kleur te geven dan de rest. Nou kan dit in princiepe met de link een kleur geven en de eerste letter een <font color="blabla"> te doen, maar hij kleurt dan niet mee met de hover.

Weet iemand hoe ik het voor elkaar kan krijgen om hem mee te laten hovveren of om 2 verschillende kleuren in een link in te voeren? (mocht dit css/js/php zijn dan is dat ook goed, want daar kan ik enigzins mee overweg)

mvg Rowan

That Guy · 17 mei 2008

nou, als je met css werkt, zoiets: (wel met de hand doen dan...)

PHP:

<a href='http://www.second-thought.nl' class='kleur1'>G</a>
<a href='http://www.second-thought.nl' class='kleur2'>a naar de Second Thought website</a>

beetje lomp, maar het werkt wel denk ik

[edit] je moet dan nog wel de style van CSS doen, maar dat zal je vast wel lukken, zo niet, post maar.[/edit]

RowanP · 17 mei 2008

Oja ik was nog 1 ding vergeten

Ze staan in blocks (navigation), dus dan krijg je een splitsing volges mij en dat is niet de bedoeling.

Dat maakt het een tikkie lastiger

That Guy · 17 mei 2008

Erhm als het goed is niet, weet niet hoe jij je style hebt opgebouwd. Je kan het iig proberen...

RowanP · 17 mei 2008

Ik zal even laten zien hoe mn css is opgebouwd:

Code:

a.home:link, a.home:visited {
	text-transform: uppercase;
	height: 30px;
	display: block;
	text-align: center ;
	text-decoration: none;
	color: #414141;
	float: left;
	font-size: 24px;
	font-weight: bold;
	padding: 10px 20px 11px 20px;
}

a.home:hover {
	background: #dd2f28;
	color: #FFFFFF;
}

Dus als ik 2 classes maak zal hij om de eerste letter een block maken en om de rest van de linktekst

That Guy · 17 mei 2008

dan haal je die block weg, en zet je om ze beide een div met block? Tenminste, als dat een beetje een oplossing is.

[edit]
block The element will be displayed as a block-level element, with a line break before and after the element
Je kan dus een div maken met een block... dat zou mischien helpen?
[/edit]

RowanP · 17 mei 2008

Dat zou misschien een oplossing zijn!
Maar kan dat blok dan ook een hoverkleur krijgen? Zoja dan is dat de oplossing

That Guy · 17 mei 2008

oh, erhm...
geen idee! mischien kan je een div een hover geven, zo niet kan je altijd nog een 'onmouseover' en 'onmouseout' geven... dat werkt mischien ook. (javascriptje)

[edit] Div hover werkt niet...

Check deze code, plak m in 'bla.html' ofzo:

HTML:

<html><head>

<script type="text/javascript"> 
	function changecolor(id, color) { 
		element = document.getElementById(id); 
		event.cancelBubble = true; 
		oldcolor = element.currentStyle.background; 
		element.style.background = color; 
	} 
</script>

<style>
a.kleur1:link, a.kleur1:visited {
	text-transform: uppercase;
	height: 30px;
	text-align: center ;
	text-decoration: none;
	color: #414141;
	font-size: 24px;
	font-weight: bold;
}
a.kleur1:hover {
	color: #FFFFFF;
}

a.kleur2:link, a.kleur2:visited {
	text-transform: uppercase;
	height: 30px;
	text-align: center ;
	text-decoration: none;
	color: #00ffff;
	font-size: 24px;
	font-weight: bold;
}
a.kleur2:hover {
	color: #FFFFFF;
}
div.bla {
	border:		0px solid #ffffff;
	width:		500px;
}


</style>
</head>
<body>
<div class='bla' id='bla' onmouseover="changecolor(this.id, '#ff00ff');" onmouseout="changecolor(this.id, '#ffffff');">
	<a href='http://www.second-thought.nl' class='kleur1'>G</a>
	<a href='http://www.second-thought.nl' class='kleur2'>a naar de Second Thought website</a>
</div>
</body>
</html>

werkt wel, lekker slecht enzo, mja is een demotje[/html]
[/edit]

RowanP · 17 mei 2008

Misschien is het gewoon handiger om een rollover plaatje te maken, want dit wordt wel heel erg omslachtig.
In ieder geval bedankt voor de hulp!

That Guy · 17 mei 2008

np, en succes!:thumb:

ErikBooy007 · 19 mei 2008

Misschien kun je iets in de zin van:

HTML:

a{
 color: kleur2;
}

a:hover{
 color: kleur3;
}

a:first-letter{
 color: kleur1;
}

Nu blijft de eerste letter de kleur houden die je specifieert. Als je wilt dat de eerste letter ook de hover-kleur aanneemt moet je a:hover{...} onder a:first-letter zetten.

Zie ook: Pseudo Class Selector 'First-Letter' op W3Schools

RowanP · 19 mei 2008

whow dat is precies wat ik zoek, maar als ik dit doe dan hoverkleurt hij niet mee en met IE (helaas waarom gebruiken mensen IE nog!) werkt heel de css voor dat object niet meer

Code:

a.home:link, a.home:visited {
	text-transform: uppercase;
	height: 30px;
	display: block;
	text-align: center ;
	text-decoration: none;
	color: #414141;
	float: left;
	font-size: 24px;
	font-weight: bold;
	padding: 10px 20px 11px 20px;
}

a.home:first-letter {
	color: #dd2f28;
}

a.home:hover {
	background: #dd2f28;
	color: #FFFFFF;
}

That Guy · 19 mei 2008

(helaas waarom gebruiken mensen IE nog!)

ie is tof! *kuch*
Microsoft, werelddominatie, internet explorer.

gewoon voor multi-browser support gaan

RowanP · 20 mei 2008

Ik ga altijd voor multibrowser support, alleen ik vind het gewoon jammer dat je soms lelijk moet coderen om IE het te laten snappen.

In ieder geval werkt het eerste letter een kleur geven wel, maar hij hovert niet mee

svdww · 20 mei 2008

RowanP zei:
Ik ga altijd voor multibrowser support, alleen ik vind het gewoon jammer dat je soms lelijk moet coderen om IE het te laten snappen.

In ieder geval werkt het eerste letter een kleur geven wel, maar hij hovert niet mee

Doctype opgenomen? Ik heb nooit zoveel problemen met cross-browser support.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

RowanP · 20 mei 2008

Jup de doctype zit erin

ErikBooy007 · 20 mei 2008

Kun je eens de link geven van de/een pagina waar je dit op wilt gebruiken. Als we de context kennen, kunnen we je misschien beter helpen. Of post anders de volledige source-code even.

RowanP · 20 mei 2008

http://rowanpreesman.nl/hypotheek

broncodes:
index.php

PHP:

<?php
// controleer dat de menu-variabele alleen uit letters bestaat
if ( preg_match("/^[a-zA-Z_]+$/", $_REQUEST[menu]) ){
	$menu=$_REQUEST[menu];
}else{
	$menu = "home";
}
$theme=$_REQUEST[theme];
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="css/
<?php 
if(IsSet($theme))
{
       print"$theme";
}
elseif(IsSet($menu))
{
	   print"$menu";
}
else
{
       print"home";
}
?>/style.css" rel="stylesheet" type="text/css">
<title>Hypotheek Inkopen - In welk mandje past uw hypotheek het best?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="hypotheekinkopen,hypotheek inkopen,hypotheek,inkopen,chrisvandongen,chris van dongen,chris,van,dongen,hiepoteek,hiepotheek,hypoteek">
<meta name="description" content="HypotheekInkopen.nl - In welk mandje past uw hypotheek het best?">

<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()

theImages[0] = 'header1.jpg'
theImages[1] = 'header2.jpg'
theImages[2] = 'header3.jpg'
theImages[3] = 'header4.jpg'
theImages[4] = 'header5.jpg'
theImages[5] = 'header6.jpg'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img border="0" src="images/'+theImages[whichImage]+'">');
}
function preloadImages() {
  var d=document; if(d.images){ if(!d.p) d.p=new Array();
    var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
}
</script>

</head>

<body>
<div id="container">

	<div id="navigation"><?php include "menu.php"; ?></div>
	<div id="header"><a href="index.php"><SCRIPT LANGUAGE="JavaScript">showImage();</script></a></div>
	<table class="bodyblock" cellpadding="0" cellspacing"0">
		<tr height="10"><td colspan="5"></td></tr>
		<tr valign="top"><td width="13"></td>
			<td class="content">
				<?php
				if(IsSet($menu))
				{
				include "$menu.php";
				}
				else
				{
				include "home.php";
				}
				?>
			</td>
			<td width="20"></td>
			<td class="column">
				<?php include "column.php"; ?>
			</td>
			<td width="13"></td>
		</tr>
		<tr height="10"><td colspan="5"></td></tr>		
		<tr><td colspan="5" class="footer">&copy;
								<?php $d = date("Y"); // Huidig jaar
								$o = 2008; // Jaar van oprichten

								if ($d <= $o) {
								echo $o;
								}
								else {
								echo $o."-".$d;
								}
								?> HypotheekInkopen.nl - Alle rechten voorbehouden.</td></tr>
		<tr height="10"><td colspan="5"></td></tr>
		</table>
</div>
</body>
</html>

home/style.css

Code:

html,body, #wrapper {
	margin:0;
	padding:0;
}

body, #wrapper {
	text-align: center;
	background: #414141;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	min-width: 803px;/* stop mozilla sliding off the edge */
	margin: 0;
	padding: 0;
}

#wrapper {
	margin: 0 auto;
    text-align: left;
    vertical-align: middle;
}

a, a:visited, a:active {
    color: #414141;
    text-decoration: underline;
}

a:hover {
    color: #dd2f28;
    text-decoration: none;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
}

h1 {
    color: #414141;
	font-size: 18px;

}

h2 {
    color: #dd2f28;
    font-style: italic;
	font-size: 11px;
}

h3 {
    font-style: italic;
	font-size: 14px;
	color: #FFFFFF;
}

#container { 
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 806px;
	background: #414141 url(../../images/bg.gif);
}

#navigation {
	height: 50px;
	padding: 0 3px 0 3px;
	text-align: left;
}

ul {
	list-style: none;
	line-height: normal;
}

/* navigation */

a.home:link, a.home:visited {
	text-transform: uppercase;
	height: 30px;
	display: block;
	text-align: center ;
	text-decoration: none;
	color: #414141;
	float: left;
	font-size: 24px;
	font-weight: bold;
	padding: 10px 20px 11px 20px;
}

a.home:first-letter {
	color: #dd2f28;
}

a.home:hover {
	background: #dd2f28;
	color: #FFFFFF;
}

a.faq:link, a.faq:visited {
	text-transform: uppercase;
	height: 30px;
	display: block;
	text-align: center ;
	text-decoration: none;
	color: #414141;
	float: left;
	font-size: 24px;
	font-weight: bold;
	padding: 10px 20px 11px 20px;
}

a.faq:hover {
	background: #ecbc00;
	color: #FFFFFF;
}

a.wiezijnwij:link, a.wiezijnwij:visited {
	text-transform: uppercase;
	height: 30px;
	display: block;
	text-align: center ;
	text-decoration: none;
	color: #414141;
	float: left;
	font-size: 24px;
	font-weight: bold;
	padding: 10px 20px 11px 20px;
}

a.wiezijnwij:hover {
	background: #465f13;
	color: #FFFFFF;
}

a.inschrijven:link, a.inschrijven:visited {
	text-transform: uppercase;
	height: 30px;
	display: block;
	text-align: center ;
	text-decoration: none;
	color: #414141;
	float: left;
	font-size: 24px;
	font-weight: bold;
	padding: 10px 20px 11px 20px;
}

a.inschrijven:hover {
	background: #2639a0;
	color: #FFFFFF;
}

/* /navigation */

#header{
	height: 300px;
	padding: 0 3px 0 3px;
}

.bodyblock {
	width: 806px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
 }

.content {
	width: 580px;
	text-align: justify;
}

.column {
	width: 180px;
}
 
#column-text {
	padding: 5px;
	text-align: justify;
	color: #FFFFFF;
	border: dashed #FFFFFF;
	background: #dd2f28;
	border-width: 0 0 5px 0;
}
 
.footer {
	width: 806px;
	text-align: center;
	color: #414141;
}

ErikBooy007 · 20 mei 2008

Geen idee of dit toegestaan is, maar het valt te proberen (waarschijnlijk krijg ik hier veel kritiek op)...

Je zou een dubbele pseudo-class selector kunnen gebruiken. Dus: a.home:first-letter:hover{};

Ik probeer vaak als ik ergens niet precies uitkom allerlei (misschien) onzinnige dingen uit en heeeel af en toe werkt het...

RowanP · 20 mei 2008

helaas zonder succes

wel raar dat hij niet wil hoveren (en dat IE heel de opmaak gewoon gaat negeren)

2kleuren in 1 link

Gebruiker

Meubilair

Gebruiker

Meubilair

Gebruiker

Meubilair

Gebruiker

Meubilair

Gebruiker

Meubilair

Terugkerende gebruiker

Gebruiker

Meubilair

Gebruiker

Gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Wij waarderen jouw privacy