[CSS] Positionering van <a> tag display block en comma

[Woudloper]

Op de site van Jeffrey Zeldman (perm. link) zag ik dat er mensen bezig waren geweest om de W3C buttons te maken met alleen gebruik van XHTML en CSS!

Het idee vind ik erg leuk en probeer het nu toe te voegen aan een footer (welke ik soms gebruik als ik bezig ben met de ontwikkeling van pagina's. Gewoon omdat het makkelijk is).

Het probleem wat ik heb is het volgende. In eerste instantie wilde ik gaan werken met het eerste voorbeeld, maar ik vond (en anderen gelukkig ook ) dat het simpeler kon.

Nu heeft dat met behulp van Stuart Langridge geresulteerd in een redelijk werkende versie. Maar, daar heb ik nog één probleem mee.

Onderstaande is een stukje van de code te vinden. Zoals je kan zien zijn is het dus gewoon <a> tags bewerkingen met behulp van CSS.

HTML:

<div id="footer">
   <div class="devimage">4.
   </div>
   <p>
      Copyright &copy; 1999 - 2003 <a href="http://www.tweakers.net">Tweakers.net</a>.<br />
      <a class="silbutton" href="..."><strong>W3C</strong><em>XHTML 1.0</em></a>,
      <a class="silbutton" href="..."><strong>W3C</strong><em>CSS</em></a>
   </p>
</div>

klik hier voor een online voorbeeld (van alle opties).

Voorbeeldje van de fout:


Wat het probleem nou daadwerkelijk is. Is als ik gebruik maak van een comma de positities van de XHTML/CSS buttons helemaal niet meer klopt (en eigenlijk wil ik die laatste (#4) - met comma - toch wel blijven gebruiken).

Weet iemand van jullie hoe ik dit het beste kan oplossen?

edit:
Toevoeging: Als jullie/jij een vraag hebben over die groene blokjes, dan kan ik gewoon zeggen dat dat een Logootje is. Ik heb die er even neergezet zodat de layout een beetje zou kloppen

[ Voor 27% gewijzigd door Woudloper op 18-09-2005 23:06 ]

[Civil]

Ik kwam al een stuk verder door in je css dit te veranderen

Cascading Stylesheet:

    .silbutton {
      margin           : 1em 5px 0px 0px;
      width            : 95px;
      border           : 1px solid #ccc;
      font-family      : helvetica,arial,sans-serif;
      font-size        : 11px;
      font-weight      : bold;
      display          : inline-block;
    }

Ofwel inline-block in plaats van block
en float: left; eruit te gooien

Dan worden de twee linkjes gewoon gezien als twee elementjes op één regel en worden ze niet onder elkaar gepositioneerd of links uitgelijnd

volgens mij moet het dan lukken

edit:
edit screenshotje

ik heb trouwens de linkjes als volgt verandert:

Cascading Stylesheet:

    a.silbutton {
      background-color : #fc6;
      color            : #000;
      text-decoration  : none;
    }

i.p.v.

Cascading Stylesheet:

    .silbutton:link, .silbutton:visited, .silbutton:hover {
      background-color : #fc6;
      color            : #000;
      text-decoration  : none;
    

je verandert toch niet van kleur dus dan kan het een stuk korter en hoef je niet alle stylen van een link aan te geven dacht ik zo

[ Voor 5% gewijzigd door Civil op 14-04-2003 19:58 . Reden: screenshot ]

[Clay]

misschien dat je het al wist maar in moz gaan alle manieren eigenlijk fout, van grandioos tot enigzins, waarbij de inline-block display eigenlijk idd de manier is die nog het beste werkt.

[Civil]

Dat had ik idd gezien, aangezien ik standaard phoenix gebruik en het online voorbeeld van Woudloper is dan niet zoals het screenshotje van hem aangeeft.

Mijn screenshot heb ik later gemaakt in IE waar het dus gewoon goed werkt. in Moz komen de "plaatjes" iets onder de stippellijn terecht maar daar is mischien ook nog wel wat aan te doen.

[ Voor 3% gewijzigd door Civil op 14-04-2003 20:51 ]

[Woudloper]

Civil & Clay » »

Ja dat van die inline-block had ik nog niet uitgeprobeerd en dat ziet er meteen beter uit. Hoewel ik begrijp dat het alleen onder IE goed werkt?? Hebben jullie een voorbeeld van wat er fout gaat bij Phoenix, Mozilla of Safari, want dan kan ik eens gaan kijken of ik naar een alternatief kan zoeken.

Daarbij nog een vraag. Waarom gaat het fout bij de andere browsers dan IE? Is het omdat zij het fout interpreteren of omdat zij het verkeerd interpreteren. Ik kom daar zo één, twee, drie nog niet achter.

[Civil]

zo fout ziet het er niet uit hoor in IE wel een beetje anders.
Wat je ziet in moz is dat de "plaatjes" met de onderkant net iets onder de stippellijn liggen je zou kunnen zeggen 1 a 2 pixels. maar dat zou kunnen komen door de padding en margins die je aan je overige div's geeft.

Ik zou zeggen installeer phoenix op je computer and see for yourself. Ik zit nu niet thuis en kan dus nu geen screenshot posten maar als het vanavond nog nodig is zal ik het wel even doen.

[ Voor 10% gewijzigd door Civil op 15-04-2003 08:09 ]

[Woudloper]

Civil schreef op 15 April 2003 @ 08:05:
Wat je ziet in moz is dat de "plaatjes" met de onderkant net iets onder de stippellijn liggen je zou kunnen zeggen 1 a 2 pixels. maar dat zou kunnen komen door de padding en margins die je aan je overige div's geeft.

Hmm, dat is juist zo vreemd aangezien ik maar één div heb gebruik om daar even de diverse voorbeelden in te plaatsen. Deze div heeft de volgende Style Definities:

Cascading Stylesheet:

  .blocklevel {
    margin-top: 20px;
    border: 1px dashed grey;
    height:40px;
  }

Zoals je kan zien heb ik alelen maar aan de margin-top, border en aan de height gezeten...

[SillyJW]

Dit is wat ik in mozilla voorbij zie komen.. *klik*

[Civil]

SillyJW schreef op 15 April 2003 @ 10:06:
Dit is wat ik in mozilla voorbij zie komen.. *klik*
[afbeelding]

mmm ja das inderdaad zijn online voorbeeld in moz maar daar zijn we nu wel voorbij hoor

Het blijft wat vervelend met de verschillen tussen moz en IE.
Omdat je de footer <div> een bepaalde hoogte opgeeft kan die in IE mischien de goede hoogte hebben, in Moz kan deze hoogte mischien net te klein zijn vandaar dat de "plaatjes" dan net onder de lijn komen. Dit komt voor zover ik "weet" door de verschillen in hoogte van de standaard lettertypen van IE en Moz.
Hier heb ik zo gauw geen oplossing voor bij mij gaat dat hoogte, padding, margin verhaal namelijk ook altijd fout

Verder is het belangrijk dat je de hoogte van de footer en je devimage altijd even groot houd anders gaat het mis met de float: left; van je devimage.

En je maakt gebruik van relatieve maten "em" en absolute maten "px" door elkaar wat ook niet geheel lekker gaat naar mijn idee. (dit zal je wat moeten uitvogelen hoe het het beste werkt (ook met het vergroten en verkleinen van de lettergroote in zowel IE en Phoenix "slechtzienden")

Oja en ik zie net dat je display: inline-block; helemaal kan schrappen, weghalen heeft iig geen effect bij mij.

mijn versie

[ Voor 12% gewijzigd door Civil op 15-04-2003 22:04 . Reden: tikfoutje/kleine aanvulling ]

[Clay]

afgezien van dat het natuurlijk gewoon moet kunnen vind ik het toch wel wat vreemd om komma's tussen buttons te willen zetten Het ziet er imo ook raar uit. Bij het lezen van tekst ben je geoefend die komma te herkennen als iets wat op de zin in kwestie slaat, bij buttons heeft het inhoudelijk eigenlijk geen functie. "taalkundig" slaat het dus eigenlijk nergens op

Verschillen tussen Moz en IE blijven idd suf maar ga er aub niet klakkeloos van uit dat Moz het dan maar fout doet omdat het er in IE wel zo uitziet zoals jij wil Je kan er beter van uitgaan dat IE het dan "fout" doet, en Moz "goed", en dat je css dan gewoon niet helemaal klopt. Dit maakt het niet minder suf, en is alleen maar verwarrend maar zo krijgen browsers nou onterecht een slechte naam; omdat ze niet doen wat IE doet.

[Civil]

Clay schreef op 15 April 2003 @ 22:19:
...

Verschillen tussen Moz en IE blijven idd suf maar ga er aub niet klakkeloos van uit dat Moz het dan maar fout doet omdat het er in IE wel zo uitziet zoals jij wil Je kan er beter van uitgaan dat IE het dan "fout" doet, en Moz "goed", en dat je css dan gewoon niet helemaal klopt. Dit maakt het niet minder suf, en is alleen maar verwarrend maar zo krijgen browsers nou onterecht een slechte naam; omdat ze niet doen wat IE doet.

Ik ben het geheel met je eensch

[Woudloper]

Clay schreef op 15 april 2003 @ 22:19:
afgezien van dat het natuurlijk gewoon moet kunnen vind ik het toch wel wat vreemd om komma's tussen buttons te willen zetten

Daar heb je in principe gewoon gelijk in en wellicht pas ik het nog aan. Ik vond het meer vreemd dat het gedrag van de browser anders was als ik alleen maar een comma toe voegde.

maar ga er aub niet klakkeloos van uit dat Moz het dan maar fout doet omdat het er in IE wel zo uitziet zoals jij wil

Als ik bedoelde dat ik vond dat IE het goed deed, dan bedoelde ik het niet zo. Mijn inziens is het zo dat Mozilla (of één van de andere namen) het over het algemeen goed doet en dat IE het fout doet. Echter is het jammer dat zo veel mensen IE blijven gebruiken en Microsoft niet wil inzien dat ze IE sneller en beter moeten configureren aan de standaarden...

[tomato]

Clay schreef op 15 April 2003 @ 22:19:
afgezien van dat het natuurlijk gewoon moet kunnen vind ik het toch wel wat vreemd om komma's tussen buttons te willen zetten Het ziet er imo ook raar uit. Bij het lezen van tekst ben je geoefend die komma te herkennen als iets wat op de zin in kwestie slaat, bij buttons heeft het inhoudelijk eigenlijk geen functie. "taalkundig" slaat het dus eigenlijk nergens op

Nouja, het gaat hier nu natuurlijk wel om tekst. Inderdaad om tekst die opgemaakt wordt met CSS zodat het een button lijkt, maar het is nog gewoon tekst. En het lijkt mij niet heel vreemd om daar een komma tussen te plaatsen (of het er dan na het toepassen van de CSS nog mooi uit ziet is een ander verhaal).