[XHTML, CSS] Opbouw kolommen. Ok in IE, niet in FF en Opera

[Urk]

Allemaal nog een gelukkig en gezond 2006 gewenst (weet dat hoi en doei groeten niet op prijs worden gesteld, maar mag mijn mede GoT'ers vast wel een gelukkig nieuwjaar wensen )

Het volgende:

Ik probeer d.m.v. XHTML en CSS een kolom indeling te maken (content 2 kolommen, waarbij de content in beide kolommen met elkaar links uitlijnen, net zoals je in een <table> zou hebben.
Ik doe dit als volgt:

HTML:

<div class="contact_colum">Bankrekening:</div><div class="contact_colum">1234.56.789</div><br />
<div class="contact_colum">KvK:</div><div class="contact_colum">1234567[img]"images/external-link.gif"[/img]</div><br />
<div class="contact_colum">BTW nummer:</div><div class="contact_colum">NL00000000</div><br />

Waarbij de volgende CSS

Cascading Stylesheet:

body {[...] font-size: 11px; margin: 0px 0px 0px 0px; line-height: 16px;}
.contact_colum {float:left; width: 150px;}
.external_link {margin-left: 3px;}

Echter zonder de image op de 2e regel ging het in alle drie de browsers goed, maar bij het plaatsen van een kleine image achter de tekst in de 2e regel, 2e kolom verspringt de regel daarom in FF en Opera. IE6 doet het dan wel goed.
Waarschijnlijk gebruik ik een niet zo nette methode of kan het veel korter/beter.
De image moet netjes met de tekst vertical uitgelijnd zijn op dezelfde hoogte.

Iemand een idee hoe ik deze layout goed krijg in alle 3 de browsers (IE, FF en Opera 8.x)

[ZeilDude]

No offense, maar volgens mij moet je maar eerst eens een goede css-tutorial lezen. Dan had je bijvoorbeeld geweten, dat div's standaard blok-elementen zijn en een <br /> - overbodig is. Zoek dus eerst maar eens uit wat het verschil is tussen inline en block, en wat float en clear doen. Daarbij, 2-column layout geeft een enorme berg zoekresultaten, je hoeft de oplossing dus niet eens zelf te zoeken.

Overigens is het kolom in het engels column, niet colum. Verder, als je al je div's dezelfde naam geeft, kun je het net goed niet doen, of de parent een naam geven.

Tot slot, maak je code volgende keer wat leesbaarder, dus zoiets:

HTML:

<div class="contact_column">
    Bankrekening:
</div>
<div class="contact_column">
    1234.56.789
</div>
<div class="contact_column">
    KvK:
</div>
<div class="contact_column">
    1234567
    <img src="images/external-link.gif" border="0" 
        class="external_link" alt="Deze link opent in een nieuw venster" 
        title="Deze link opent in een nieuw venster" />
</div>
<div class="contact_column">
    BTW nummer:
</div>
<div class="contact_column">
    NL00000000
</div>

[ Voor 73% gewijzigd door ZeilDude op 02-01-2006 20:36 ]

[Alain]

Maar een tabel zoals jij met div's probeert te maken is toch gewoon een table? Waarom gebruik je dan geen table?

[Urk]

ZeilDude schreef op maandag 02 januari 2006 @ 20:29:
Dan had je bijvoorbeeld geweten, dat div's standaard blok-elementen zijn en een <br /> - overbodig is.

Dat weet ik, alleen moet ik natuurlijk 2 columns naast elkaar hebben, bij geen gebruik van float: left; komt alles onder elkaar, of dien ik dat dan niet bij de laatste kolom te gebruiken?

[Urk]

Het werkte trouwens prima zoals ik het had, alleen zodra ik het image gebruikte naast de tekst was de layout in FF en Opera niet meer goed en werd de regel daaronder verschoven...

[Rexomnium]

Zet er een nieuwe div van 300 px omheen en laat de onderliggen elementen daaronder vallen:

Cascading Stylesheet:

body {
[...] font-size: 11px; margin: 0px; line-height: 16px; }
.poep {
width: 300px; }
.contact_colum {
float: left; width: 150px; }
.external_link {
margin-left: 3px; }

HTML:

<div class="poep">
    <div class="contact_colum">
        Bankrekening:
    </div>
    <div class="contact_colum">
        1234.56.789
    </div>
    
    <div class="contact_colum">
        KvK:
    </div>
    <div class="contact_colum">
        1234567
        [img]"images/external-link.gif"[/img]
    </div>
    
    <div class="contact_colum">
        BTW nummer:
    </div>
    <div class="contact_colum">
        NL00000000
    </div>
</div>

Waarom zet je trouwens niet gewoon een spatie tussen het plaatje en de tekst?

[ Voor 63% gewijzigd door Rexomnium op 02-01-2006 22:23 ]

[Urk]

Rexomnium schreef op maandag 02 januari 2006 @ 22:19:
Zet er een nieuwe div van 300 px omheen en laat de onderliggen elementen daaronder vallen:

Cascading Stylesheet:

body {
[...] font-size: 11px; margin: 0px; line-height: 16px; }
.poep {
width: 300px; }
.contact_colum {
float: left; width: 150px; }
.external_link {
margin-left: 3px; }

HTML:

<div class="poep">
    <div class="contact_colum">
        Bankrekening:
    </div>
    <div class="contact_colum">
        1234.56.789
    </div>
    
    <div class="contact_colum">
        KvK:
    </div>
    <div class="contact_colum">
        1234567
        [img]"images/external-link.gif"[/img]
    </div>
    
    <div class="contact_colum">
        BTW nummer:
    </div>
    <div class="contact_colum">
        NL00000000
    </div>
</div>

Waarom zet je trouwens niet gewoon een spatie tussen het plaatje en de tekst?

Thanks!
Ik had iets soortgelijks eerst, alleen dat werkte alleen niet in Opera. Maar nu blijkt dat Opera toch een gecachte versie van de CSS oppikte!
Dit werkt dus prima (na een Ctrl+F5 in Opera), in alle drie de browsers.

Is er nog een kortere of betere manier om dit te doen? (met bijv minder gebruik van <div> tags?)

Kan iemand me alsjeblieft nog uitleggen in het nederlands wat de CSS property clear nou precies doet? De info hierover op de officiele specificatie van het W3C begrijp ik niet helemaal

Werkt toch niet goed, zie post hieronder

[ Voor 21% gewijzigd door Urk op 02-01-2006 22:49 ]

[Urk]

Rexomnium: je oplossing werkt niet goed in IE, maar nu wel in FF en Opera.
Kijk maar wat IE doet, en dat komt puur door dat plaatje, daarmee is ook alle ellende begonnen...

IE6 screenshot:

[ZeilDude]

Urk schreef op maandag 02 januari 2006 @ 22:42:
Rexomnium: je oplossing werkt niet goed in IE, maar nu wel in FF en Opera.
Kijk maar wat IE doet, en dat komt puur door dat plaatje, daarmee is ook alle ellende begonnen...

IE6 screenshot:
[afbeelding]

Ja, dus? Wat ga je doen? Een oplossing zoeken! Kom, tis hier geen helpdesk! Ik heb je al wat tips gegeven, waar je mee uit de voeten kunt. Kom op, actie, ga wat doen!

[Urk]

ZeilDude schreef op maandag 02 januari 2006 @ 23:06:
[...]
Ja, dus? Wat ga je doen? Een oplossing zoeken! Kom, tis hier geen helpdesk! Ik heb je al wat tips gegeven, waar je mee uit de voeten kunt. Kom op, actie, ga wat doen!

Wat denk je dat ik de halve dag al aan het doen ben? , ook met nieuwe info lukt het niet om het all browser compatible te krijgen...
Ik ben al wat standaarden aan het doorlezen, maar in mijn ogen: als het in FF en Opera werkt, kan het net zo goed weer een IE bug zijn, waarvoor weer een of andere CSS hack nodig is.

[Rexomnium]

Als ik jou was, Urk, dan zou ik lekker tabellen gebruiken. Divs gebruik je om een layout te maken, tabellen gebruik je om data te structureren. Eigenlijk ben je nu juist dát aan 't doen; data overzichtelijk op een page te plempen.

[Victor]

Rexomnium schreef op maandag 02 januari 2006 @ 23:18:
Als ik jou was, Urk, dan zou ik lekker tabellen gebruiken. Divs gebruik je om een layout te maken, tabellen gebruik je om data te structureren. Eigenlijk ben je nu juist dát aan 't doen; data overzichtelijk op een page te plempen.

Als ik jou was, Urk, dan zou ik dat lekker niet doen

Gebruik een definition list, perfect voor wat je hier wilt. Semantisch correct en eenvoudig op te maken:

Cascading Stylesheet:

body
{
    color: #000;
    background-color: #fff;
    font: 11px Verdana, Tahoma, Arial, Sans-Serif;
}

dt
{
    height: 14px;
    line-height: 14px;
}

dd
{
    margin-left: 100px;
    margin-top: -14px;
}

dd.kvk
{
    color: #f90;
}

img
{
    border: 0px;
    vertical-align: middle;
}

HTML:

<dl>
    <dt>Bankrekening:</dt>
    <dd>1234.56.789</dd>
    <dt>KvK:</dt>
    <dd class="kvk">1234567 [img]"external-link.gif"[/img]</dd>
    <dt>BTW nummer:</dt>
    <dd>NL00000000</dd>
</dl>

[ Voor 10% gewijzigd door Victor op 02-01-2006 23:35 ]

[Erkens]

King_Louie schreef op maandag 02 januari 2006 @ 23:29:
Gebruik een definition list, perfect voor wat je hier wilt. Semantisch correct en eenvoudig op te maken:

zo zou ik het ook gedaan hebben ja, veel beter. Hoewel ik dd elementen dan wel met dd afsluit en niet met dt

[Alain]

Urk schreef op maandag 02 januari 2006 @ 23:12:

als het in FF en Opera werkt, kan het net zo goed weer een IE bug zijn, waarvoor weer een of andere CSS hack nodig is.

Tja, als je een hamer gebruikt om een schroef in de muur te draaien kun je de schroef moeilijk de schuld geven.

[Victor]

Erkens schreef op maandag 02 januari 2006 @ 23:34:
[...]

zo zou ik het ook gedaan hebben ja, veel beter. Hoewel ik dd elementen dan wel met dd afsluit en niet met dt

Ik weet niet waar je het over hebt?

Bedankt

Cursed be the copy + paste...

[Urk]

Rexomnium schreef op maandag 02 januari 2006 @ 23:18:
Als ik jou was, Urk, dan zou ik lekker tabellen gebruiken. Divs gebruik je om een layout te maken, tabellen gebruik je om data te structureren. Eigenlijk ben je nu juist dát aan 't doen; data overzichtelijk op een page te plempen.

King_Louie schreef op maandag 02 januari 2006 @ 23:29:
Als ik jou was, Urk, dan zou ik dat lekker niet doen

Nee, dat dacht ik toch ook al, iedereen raad hier altijd af om tabellen te gebruiken en nou begint iemand weer dat we terug zouden moeten naar tabellen
Ik weet dat je nog wel tables natuurlijk gebruikt voor herhalende data sturcturen (lijsten e.d.)

King_Louie schreef op maandag 02 januari 2006 @ 23:29:
Gebruik een definition list, perfect voor wat je hier wilt. Semantisch correct en eenvoudig op te maken:

Thanks, dit ga ik even proberen!

[Urk]

Mijn god, dit is gewoon niet te doen om het in IE, FF en Opera gelijk te krijgen:

Met de volgende code:

HTML:

<dl>
    <dt>Bankrekening:</dt>
    <dd>NL1234.56.789</dd>
    <dt>KvK:</dt>
    <dd>NL1234567[img]"images/external-link.gif"[/img]</dd>
    <dt>BTW nummer:</dt>
    <dd>NL00000000</dd>
</dl>

Cascading Stylesheet:

dt
{
 height: 16px;
 line-height: 16px;
}

dd
{
 margin-left: 150px; 
 margin-top: -16px;
 /* height: 16px; */
}
.external_link
{
 margin-left: 3px;
 /* margin-top: 5px; */
}

Screenshot IE6 (fout, regelafstranden kloppen niet meer):


Screenshot Firefox en Opera 8.x (goed!):


Door het weghalen van het commentaar in de CSS heb ik dat nog geprobeerd, maar ook dan is het niet gelijk in de drie browsers en is er weer verschil in IE met 1 pixel.

[Pendaco]

heb je;

code:

img 
{ 
    border: 0px; 
    vertical-align: middle; 
}

wel in je css opgenomen?

[Victor]

Ik heb het zitten proberen, en precies pixelperfect krijg ik het niet. Ik vermoed dat dit gewoon in het verschil in renderen zit, en dat het niet te fixen is met CSS (tenzij je verschillende stylesheets gebruikt, gespecificeerd op useragent).

Ik kom zo dichtbij:

(Overlay IE en FF)

Met de volgende CSS:

Cascading Stylesheet:

body
{
    color: #000;
    background-color: #fff;
    font: 11px Verdana, Tahoma, Arial, Sans-Serif;
}

dt
{
    height: 16px;
    line-height: 16px;
}

dd
{
    height: 16px;
    margin-left: 100px;
    margin-top: -16px;
    line-height: 16px;
}

dd.kvk
{
    color: #f90;
}

img
{
    height: 8px;
    border: 0px;
    vertical-align: 2px;
}

Maar goed, de bezoeker die dit verschil ziet (en de moeite neemt om een overlay te maken) heeft gewoon echt te veel tijd.

[Urk]

Pendaco schreef op dinsdag 03 januari 2006 @ 00:36:
heb je;

code:

img 
{ 
    border: 0px; 
    vertical-align: middle; 
}

wel in je css opgenomen?

Ja, maar daar word het alleen maar slechter op.

[Pendaco]

Het vreemde vind ik ook dat het bij King_Louie niet om de KvK gaat die verkeerd staat maar juist om de text met de afbeelding (wat je ook zou verwachten), terwijl in de ts vorige afb (zijn niet meer online helaas), het om de text; KvK ging.

Dan zou ik zelf denken dat het aan de afbeelding ligt die toch net iets groter is dan de regelhoogte toelaat, waardoor dat stukje text automatisch een paar pixels naar beneden schuift.

[Erkens]

Kan je die image dan niet gewoon als background gebruiken in je CSS? Het is immers een style ding en heeft weinig met de content te maken voor zover ik het kan zien.

[Victor]

Erkens schreef op dinsdag 03 januari 2006 @ 13:12:
Kan je die image dan niet gewoon als background gebruiken in je CSS? Het is immers een style ding en heeft weinig met de content te maken voor zover ik het kan zien.

Het heeft wel degelijk invloed op de content. Als dat icoon de enige indicatie is voor een link naar een externe website, hoe moet een useragent zonder CSS ondersteuning dit dan weergeven?

[crisp]

Speel anders eens met line-height

[Erkens]

King_Louie schreef op dinsdag 03 januari 2006 @ 13:53:
[...]

Het heeft wel degelijk invloed op de content. Als dat icoon de enige indicatie is voor een link naar een externe website, hoe moet een useragent zonder CSS ondersteuning dit dan weergeven?

Gewoon zoals die browser anders ook een link aangeeft? (waarschijnlijk blauw onderstreept).
Maar je geeft het zelf al aan, het is een indicatie dat het een linkje is, dus is het een styling 'issue'.

[Victor]

Erkens schreef op dinsdag 03 januari 2006 @ 14:05:
[...]

Gewoon zoals die browser anders ook een link aangeeft? (waarschijnlijk blauw onderstreept).
Maar je geeft het zelf al aan, het is een indicatie dat het een linkje is, dus is het een styling 'issue'.

Dit plaatje geeft specifiek aan dat het een link naar een externe pagina is. Voor dit onderscheid is deze afbeelding noodzakelijk. Zou je deze afbeelding in een stylesheet stoppen, dan moeten gebruikers zonder CSS ondersteuning deze informatie dus missen, en dat mag nooit de bedoeling zijn.

[Erkens]

En welke browsers ondersteunen geen CSS?

[Victor]

Erkens schreef op dinsdag 03 januari 2006 @ 14:21:
En welke browsers ondersteunen geen CSS?

Textbased browsers (Lynx en soortgenoten) en sommige screenreaders. Bovendien is het gewoon een stuk informatie, en dat hoort dus niet in je stylesheet thuis.

[Urk]

King_Louie schreef op dinsdag 03 januari 2006 @ 13:53:
[...]

Het heeft wel degelijk invloed op de content. Als dat icoon de enige indicatie is voor een link naar een externe website, hoe moet een useragent zonder CSS ondersteuning dit dan weergeven?

Lekker belangrijk... Er gaat niemand deze site bekijken met een tekst browser zoals Lynx, moderne browsers die de site bekijken zonder CSS zullen de site al prima kunnen lezen.

King_Louie schreef op dinsdag 03 januari 2006 @ 14:15:
[...]

Dit plaatje geeft specifiek aan dat het een link naar een externe pagina is. Voor dit onderscheid is deze afbeelding noodzakelijk. Zou je deze afbeelding in een stylesheet stoppen, dan moeten gebruikers zonder CSS ondersteuning deze informatie dus missen, en dat mag nooit de bedoeling zijn.

Zoals hierboven al gezegd, dat maakt voor deze site niet uit...

[Urk]

crisp schreef op dinsdag 03 januari 2006 @ 13:54:
Speel anders eens met line-height

Ik heb al geprobeerd te spelen met de CSS properties: line-height, height, float, displayen clear maar krijg het echt niet goed in alle drie de browsers. Denk dat ik maar gewoon genoegen moet nemen met niet helemaal correct...

Wat ik me vanochtend opeens wel realiseerde, wat ik nu ook even ga proberen, is gewoon 2 DIV te maken naast elkaar van beide 150px breed. Binnen deze divs gewoon naar de volgende regel met een linebreak (<br />). Even kijken of dat goed gaat met dat plaatje...

[ Voor 30% gewijzigd door Urk op 03-01-2006 14:40 ]

[Victor]

Urk schreef op dinsdag 03 januari 2006 @ 14:36:
[...]

Lekker belangrijk... Er gaat niemand deze site bekijken met een tekst browser zoals Lynx, moderne browsers die de site bekijken zonder CSS zullen de site al prima kunnen lezen.

[...]

Zoals hierboven al gezegd, dat maakt voor deze site niet uit...

Kijk, als jij er voor deze site geen waarde aan hecht, dan moet je het zeker proberen. Ik geef enkel aan dat als je echt voor optimale toegankelijkheid gaat dat het niet netjes is. Als het om een webapplicatie o.i.d. gaat zou ik er zelf ook geen seconde over nadenken, en het gewoon als background instellen.

[Urk]

King_Louie schreef op dinsdag 03 januari 2006 @ 14:25:
[...]

Textbased browsers (Lynx en soortgenoten) en sommige screenreaders. Bovendien is het gewoon een stuk informatie, en dat hoort dus niet in je stylesheet thuis.

En ook Firefox met page style --> no style...

[Victor]

Urk schreef op dinsdag 03 januari 2006 @ 14:41:
[...]

En ook Firefox met page style --> no style...

Nou is dat geen normaal gebruik van een browser, maar inderdaad, ook dan gaat informatie verloren. Overigens is de oplossing met DIVs die je noemde gewoon ronduit smerig, dus probeer het eerst eens met het plaatje als achtergrond.

[Urk]

King_Louie schreef op dinsdag 03 januari 2006 @ 14:43:
[...]

Nou is dat geen normaal gebruik van een browser, maar inderdaad, ook dan gaat informatie verloren. Overigens is de oplossing met DIVs die je noemde gewoon ronduit smerig, dus probeer het eerst eens met het plaatje als achtergrond.

Ze hebben die functie niet voor niets ingebouwd toch, en misschien is dat een goede simulatie (niet helemaal natuurlijk) van hoe bijv. Lynx de site rendert.

Plaatje als achtergrond: maar dan kan ik geen Alternative tekst meer meegeven, toch? Dat is nu juist net de bedoeling...

[MBV]

waarom maak je het plaatje niet als achtergrond van een <a href..../> ofzo? Dat lijkt mij semantisch meer correct, en je kan het makkelijker doen lijken of het plaatje er niet was

[Victor]

Urk schreef op dinsdag 03 januari 2006 @ 14:50:
[...]

Ze hebben die functie niet voor niets ingebouwd toch, en misschien is dat een goede simulatie (niet helemaal natuurlijk) van hoe bijv. Lynx de site rendert.

Plaatje als achtergrond: maar dan kan ik geen Alternative tekst meer meegeven, toch? Dat is nu juist net de bedoeling...

Plaatje als achtergrond van de hyperlink (wel eerst een block element van maken om er extra ruimte aan de rechterkant aan toe te voegen voor de achtergrond) en dan met het title attribuut een tooltip aan toevoegen.

[Urk]

King_Louie schreef op dinsdag 03 januari 2006 @ 14:53:
[...]

Plaatje als achtergrond van de hyperlink (wel eerst een block element van maken om er extra ruimte aan de rechterkant aan toe te voegen voor de achtergrond) en dan met het title attribuut een tooltip aan toevoegen.

Ik heb nu het volgende:

HTML:

<a class="external_link" href="" target="_blank"
 alt="Deze link opent in een nieuw venster"
 title="Deze link opent in een nieuw venster">12345678</a>

En CSS:

Cascading Stylesheet:

.external_link
{
 display: block;
 background-image: url('../images/external-link.gif');
 background-repeat: no-repeat;
 background-position: right;
}

Echter staat het image dan heel ver van het einde van de link af, heb de search al gebruikt om te zoeken hoe dat zit maar kom er niet uit, de link tekst is natuurlijk variabel lang, daardoor kan ik geen exacte breedte of afstand aangeven.
Hoe krijg ik het background image dan direct achter de link (met een afstand ertussen van bijv. 5px)?

[ Voor 11% gewijzigd door Urk op 03-01-2006 15:43 ]

[Victor]

Als je 'm een float: left geeft zal het anchor element niet breder worden dan de tekst die erin staat. Met een padding-right kun je dan de noodzakelijke ruimte toevoegen.

Ik zal ook even kijken of ik nog een nettere oplossing kan vinden.

Je kunt ook display: table-cell gebruiken, dit geeft minder problemen dan een float waarmee je meteen heel je flow overhoop haalt.
Paddings mogen natuurlijk op alle elementen, dus een aangepaste display is helemaal niet nodig. Padding-right volstaat.

[ Voor 44% gewijzigd door Victor op 03-01-2006 16:05 ]

[Urk]

Jaja, ik heb 'm!
Was er ook net achter na wat geklooi dat met padding-right er extra ruimte toegevoegd kan worden

HTML:

.external_link
<a class="external_link" href="" target="_blank"
 alt="Deze link opent in een nieuw venster"
 title="Deze link opent in een nieuw venster">12345678</a><br />

Cascading Stylesheet:

.external_link
{
 display: inline;
 padding-right: 11px;
 background-image: url('../images/external-link.gif');
 background-repeat: no-repeat;
 background-position: right;
}

[Erkens]

King_Louie schreef op dinsdag 03 januari 2006 @ 14:25:
Textbased browsers (Lynx en soortgenoten) en sommige screenreaders. Bovendien is het gewoon een stuk informatie, en dat hoort dus niet in je stylesheet thuis.

Dan verschilt daar onze mening over wat informatie is en wat styling is. Een plaatje wat aangeeft dat het een linkje is naar buiten je site is imo namelijk niet iets wat echt iets toevoegd, mensen die een textbased browser gebruiken kijken immers vaker naar de url. Tevens kan je voor screenreaders er een andere "styling" aan toevoegen dan een plaatje die ze toch niet kunnen zien.

[Victor]

Urk schreef op dinsdag 03 januari 2006 @ 16:01:
Jaja, ik heb 'm!
Was er ook net achter na wat geklooi dat met padding-right er extra ruimte toegevoegd kan worden

HTML:

.external_link
<a class="external_link" href="" target="_blank"
 alt="Deze link opent in een nieuw venster"
 title="Deze link opent in een nieuw venster">12345678</a><br />

Cascading Stylesheet:

.external_link
{
 display: inline;
 padding-right: 11px;
 background-image: url('../images/external-link.gif');
 background-repeat: no-repeat;
 background-position: right;
}

Display: inline is niet nodig, een anchor is al een inline element.

Erkens schreef op dinsdag 03 januari 2006 @ 16:04:
[...]

Dan verschilt daar onze mening over wat informatie is en wat styling is. Een plaatje wat aangeeft dat het een linkje is naar buiten je site is imo namelijk niet iets wat echt iets toevoegd, mensen die een textbased browser gebruiken kijken immers vaker naar de url. Tevens kan je voor screenreaders er een andere "styling" aan toevoegen dan een plaatje die ze toch niet kunnen zien.

Denk niet dat we er uit komen, agree to disagree dan maar

[MBV]

Ik denk ook dat je de 'alt' tag van de <a> weg moet halen. In feite wordt de tekst tussen de <a> en </a> je alt-tag.

[Erkens]

MBV schreef op dinsdag 03 januari 2006 @ 16:52:
Ik denk ook dat je de 'alt' tag van de <a> weg moet halen. In feite wordt de tekst tussen de <a> en </a> je alt-tag.

sowieso heeft een a-tag geen alt-attribuut

[crisp]

Erkens schreef op dinsdag 03 januari 2006 @ 18:30:
[...]

sowieso heeft een a-tag geen alt-attribuut

Geen enkele tag heeft attributen, elementen wel

[Erkens]

crisp schreef op dinsdag 03 januari 2006 @ 23:29:
[...]

Geen enkele tag heeft attributen, elementen wel

whatever, ik noem dat ding een tag

[ZeilDude]

Erkens schreef op dinsdag 03 januari 2006 @ 23:33:
[...]

whatever, ik noem dat ding een tag

Ok, wil je het verschil tussen beide weten? Kijk dan hier.
Het is dus <a>-tag en a-element. Een element heeft attributen, een tag niet, hoewel er dus binnen een tag wél attributen kunnen staan. Logisch toch?
Het is een beetje flauw, maar namen en begrippen zijn er niet voor niets natuurlijk.

[ Voor 30% gewijzigd door ZeilDude op 04-01-2006 05:45 ]

[Erkens]

ZeilDude schreef op woensdag 04 januari 2006 @ 05:41:
Ok, wil je het verschil tussen beide weten? Kijk dan hier.

je hoeft mij echt het verschil niet uit te leggen, ik noemde dat ding hier een tag omdat hij zo gebruikt werd, in je HTML zet je namelijk geen elementen maar tags en aangezien een a-element geen alt-attribuut heeft is deze ook niet in de a-tag neer te zetten, immers die a-tag wordt uiteindelijk een a-element.

Het is een beetje flauw, maar namen en begrippen zijn er niet voor niets natuurlijk.

natuurlijk zijn die naamgevingen ergens voor bedacht, maar uiteindelijk bedoelen we allemaal hetzelfde

[StratoFarmer]

Urk schreef op maandag 02 januari 2006 @ 22:32:
[...]
Kan iemand me alsjeblieft nog uitleggen in het nederlands wat de CSS property clear nou precies doet? De info hierover op de officiele specificatie van het W3C begrijp ik niet helemaal

http://www.w3schools.com/css/pr_class_clear.asp

[ZeilDude]

Erkens schreef op woensdag 04 januari 2006 @ 09:21:
(...) je hoeft mij echt het verschil niet uit te leggen (...)

Blijkbaar wel, omdat je net niet de juiste terminologie gebruikt. Verder zijn posts natuurlijk nooit bedoeld voor één persoon, maar voor iedereen.

(...) immers die a-tag wordt uiteindelijk een a-element (...)

Neen, andersom, het element wordt een tag.

(...) natuurlijk zijn die naamgevingen ergens voor bedacht, maar uiteindelijk bedoelen we allemaal hetzelfde (...)

Wij Tweakers onderscheiden ons natuurlijk wel van het 'gepeupel' door juist net even wél de juiste namen te gebruiken.

[Erkens]

ZeilDude schreef op woensdag 04 januari 2006 @ 14:38:
Blijkbaar wel, omdat je net niet de juiste terminologie gebruikt.

ben je nu achterlijk of flame je met opzet

Neen, andersom, het element wordt een tag.

niet waar, ik zet in mijn html bestand tags welke door de browser omgezet worden naar element

Wij Tweakers onderscheiden ons natuurlijk wel van het 'gepeupel' door juist net even wél de juiste namen te gebruiken.

mja is natuurlijk ook weer niet zo'n aardige reactie, zullen we het on-topic houden?

[ Voor 26% gewijzigd door XangadiX op 04-01-2006 17:48 ]