[CSS] styleset voor verschillende font-sizes in een regel - Softwareontwikkeling

woensdag 16 maart 2005 09:07

Acties:

Kabbelend watertje

Topicstarter

Ik ben bezig een paar pagina's van HTML 4.01 transitional naar 4.01 strict te vertalen. Ik loop tegen een klein probleempje aan wat ik wel opgelost krijg, maar ik vind mijn oplossing niet netjes. Ik zou graag willen weten of hier een betere oplossing voor bestaat.

De site heeft een paar toplevel pagina's met op elke pagina een header regel met daarin de links naar de andere toplevel pagina's. In die regel is dan de link naar de huidige pagina niet als link uitgevoerd. De links wil ik in een iets groter lettertype dan de rest van de pagina, de huidige pagina 'link' in een nog groter lettertype.
In 4.01 transitional doe ik dat met een tabel waarbij ik na de <td> bij de links <font size="+1"> doe en voor de huidige pagina <font size="+2">.
In 4.01 strict mag <font size> niet meer en ik wil ook die tabel kwijt. Daarvoor heb in een styleset een pseudo-class "banner" aangemaakt waarbij p.banner font-size: 150% heeft. Het probleem daarmee is dat hiermee links automatisch ook 150% worden, dus die moet ik met a.banner op 75% zetten om ze kleiner te maken, terwijl ze wel (font size="+1") groter moeten zijn dan de normale tekst.
(font size="+1" is 110%, font size="+2" is 150%)

Dat vind ik dus niet netjes, en daarom ook de vraag: Is daar een betere oplossing voor?

Een plaatje zegt meer dan 1000 woorden, dus dit is de code. De tabel is de
oude situatie, de p class="banner" is de nieuwe situatie.

HTML:

<html>
<head>
<style type="text/css">

p.banner {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 150%; }

a.banner {
  font-weight: normal;
  font-size: 75%; }
</style>
</head>

<body>
<table>
<tr><td><font face="Arial" size="+1">
         <a href="pag1.html">Pagina 1</a>&nbsp;</font></td>
    <td><font face="Arial" size="+2">
        <b>Active pagina 2</b>&nbsp;</font></td>
    <td><font face="Arial" size="+1">
        <a href="pag2.html">Pagina 3</a>&nbsp;</font></td></tr>
</table>

<p class="banner">
  <a class="banner" href="pag1.html">Pagina 1</a>&nbsp;
  Active pagina 2&nbsp;
  <a class="banner" href="pag3.html">Pagina 3</a>&nbsp;
</p>

</body>
</html>

[ Voor 35% gewijzigd door Maasluip op 16-03-2005 09:12 ]

Signatures zijn voor boomers.

woensdag 16 maart 2005 09:16

Acties:

faabman

Maasluip schreef op woensdag 16 maart 2005 @ 09:07:
In 4.01 strict mag <font size> niet meer en ik wil ook die tabel kwijt. Daarvoor heb in een styleset een pseudo-class "banner" aangemaakt waarbij p.banner font-size: 150% heeft.

banner is gewoon een class hoor, pseudo classes zijn :hover, :active, etc.

waarom maak je van je navigatie niet gewoon een lijst? Dan kun je één van je list-elements de class active meegeven en daaraan de extra grote font-size meegeven...

HTML:

  <ul>
    <li><a href="">blaat</a></li>
    <li class="active"><strong>blaat</strong></li>
  </ul>

even wat met css spelen en je kunt met je lijstje elke opmaak creeren die je wilt (op GoT / Google zijn genoeg voorbeelden te vinden)

[ Voor 11% gewijzigd door faabman op 16-03-2005 09:31 . Reden: semantisch gezien is het beter om een strong / em te gebruiken voor de actieve pagina ]

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

woensdag 16 maart 2005 09:18

Acties:

crisp

Devver

Pixelated

Ik denk dat je meer zoiets zou moeten doen:

Cascading Stylesheet:

1 2	p.banner, p.banner a { font-size: 100%; } p.banner strong { font-size: 150%; font-weight: normal; }

HTML:

<p class="banner">
  <a href="pag1.html">Pagina 1</a>
  <strong>Active pagina 2</strong>
  <a href="pag3.html">Pagina 3</a>
</p>

Je wilt immers nadruk leggen op de huidige pagina...

Het idee van faabman (een list) is ook een goeie

[ Voor 7% gewijzigd door crisp op 16-03-2005 09:19 ]

Intentionally left blank

woensdag 16 maart 2005 09:19

Acties:

Maasluip

Kabbelend watertje

Topicstarter

faabman schreef op woensdag 16 maart 2005 @ 09:16:
[...]

waarom maak je van je navigatie niet gewoon een lijst? Dan kun je één van je list-elements de class active meegeven en daaraan de extra grote font-size meegeven...

Omdat een lijstje onder elkaar komt te staan en ik wil de links naast elkaar hebben staan.
En het probleem is ook niet zozeer dat het me niet lukt, ik vind de oplossing alleen niet mooi. 75% gebruiken voor tekst die je groter wil hebben dan standaard...

Signatures zijn voor boomers.

woensdag 16 maart 2005 09:20

Acties:

crisp

Devver

Pixelated

Met CSS zijn listitems prima naast elkaar te krijgen hoor

Intentionally left blank

woensdag 16 maart 2005 09:23

Acties:

Maasluip

Kabbelend watertje

Topicstarter

Die oplossing met strong is mooi. Hoe ik in css lists naastelkaar moet krijgen moet ik dan nog even opzoeken. Met HTML ben ik nog vrij hard in 1995 blijven steken (toen net 1.0 goed gedefinieerd was).

Signatures zijn voor boomers.

woensdag 16 maart 2005 09:24

Acties:

RwD

kloonikoon

crisp schreef op woensdag 16 maart 2005 @ 09:20:
Met CSS zijn listitems prima naast elkaar te krijgen hoor

Als ie het zelf zoeken moe is hier wat mogelijkheden:

spoiler:

li{float:left/right; of display:inline;}

woensdag 16 maart 2005 09:25

Acties:

BtM909

Watch out Guys...

Maasluip schreef op woensdag 16 maart 2005 @ 09:23:
Die oplossing met strong is mooi. Hoe ik in css lists naastelkaar moet krijgen moet ik dan nog even opzoeken. Met HTML ben ik nog vrij hard in 1995 blijven steken (toen net 1.0 goed gedefinieerd was).

Ok, ga ik nog een keer spammen

• http://www.simplebits.com...styling_nested_lists.html
• http://css.maxdesign.com.au/listutorial/index.htm
• http://css.maxdesign.com.au/listamatic2/
• http://www.alistapart.com/articles/taminglists/

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 16 maart 2005 14:37

Acties:

Maasluip

Kabbelend watertje

Topicstarter

Ik heb een beetje gespeeld met de mogelijkheden, ik moet zeggen dat crisp toch wel een beetje weet waarover hij praat

Alleen heb ik de p.banner, p.banner a opgesplitst omdat als je die twee samen neemt en een link al 110% is, de strong als 136% gedefinieerd moet worden om uiteindelijk 150% (110% * 136%) te krijgen, en dat is net zo goed niet mooi.
Met tabellen gaat het ook goed, maar dan vind ik het niet mooi als het venster smaller dan de tabel wordt, de tekst per cel een regelafbreking krijgen.
<li> aanpassen is een absolute nono als je het op browsercompatibiliteit gaat gooien. Als je een browser hebt die geen css ondersteunt heb je met de eerste twee oplossingen nog min of meer de opmaak die je bedoelt (alleen de font karakteristieken zijn anders), maar met een list krijg je opeens een echte bulleted html list, alles op een eigen regel. En dat is dus juist niet wat ik wil hebben.
Dus iedereen die zo fan is van <li> op een regel: bekijk het eens in een oude browser.

* Maasluip gebruikt nog dagelijks Lynx

Maar iedereen bedankt voor de tips!

Signatures zijn voor boomers.

woensdag 16 maart 2005 15:12

Acties:

Verwijderd

Maasluip schreef op woensdag 16 maart 2005 @ 14:37:
<li> aanpassen is een absolute nono als je het op browsercompatibiliteit gaat gooien. Als je een browser hebt die geen css ondersteunt heb je met de eerste twee oplossingen nog min of meer de opmaak die je bedoelt (alleen de font karakteristieken zijn anders), maar met een list krijg je opeens een echte bulleted html list, alles op een eigen regel. En dat is dus juist niet wat ik wil hebben.
Dus iedereen die zo fan is van <li> op een regel: bekijk het eens in een oude browser.

Dude, dat is het hele idee achter CSS!

Scheid de inhoud/structuur van de opmaak. Voor elk element in je content zoek je het conceptueel best bijpassende HTML-element. Daar hang je met CSS de opmaak aan vast die je zelf wilt. Een menu is conceptueel redelijk hetzelfde als een lijst. Als je dat horizontaal wilt afbeelden, prima. Het feit dat je dan in Lynx een overzichtelijk lijstje ziet is toch alleen maar goed?

woensdag 16 maart 2005 15:19

Acties:

BtM909

Watch out Guys...

Verwijderd schreef op woensdag 16 maart 2005 @ 15:12:
[...]

Dude, dat is het hele idee achter CSS!

Scheid de inhoud/structuur van de opmaak. Voor elk element in je content zoek je het conceptueel best bijpassende HTML-element. Daar hang je met CSS de opmaak aan vast die je zelf wilt. Een menu is conceptueel redelijk hetzelfde als een lijst. Als je dat horizontaal wilt afbeelden, prima. Het feit dat je dan in Lynx een overzichtelijk lijstje ziet is toch alleen maar goed?

Ik ben het wel deels met Maasluip eens, alleen in 't volgende opzicht.

Doordat je content en opmaak totaal van elkaar scheidt, krijg je met een browser zoals Lynx dat alle webpagina's er hetzelfde uitzien. Kan me eigenlijk voorstellen dat je voor browsers die geen CSS ondersteunen (en dus alleen de content met 'conceptueel bijpassende HTML elementen' ziet

) Eigenlijk zou je voor dat soort browsers terug moeten springen naar HTML2.0 oid.

Waar ik het mee eens ben met Maasluip: ik wil ook een deel opmaak gebruiken voor m'n webpagina zonder CSS. De vraag is alleen hoe pak je dat aan

Ik heb geen tijd om het volledig uit te werken, anders had ik er een nieuw topic van gemaakt. Vind het wel discussie-waardig

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 16 maart 2005 15:52

Acties:

Maasluip

Kabbelend watertje

Topicstarter

Idd. HTML is in eerste instantie bedacht als weergave taal en niet als opmaak taal. De eerste pogingen om opmaak in HTML te zetten waren ook sterk browserafhankelijk en zeer gekunsteld. In de begindagen werd er ook zwaar afgegeven op mensen die probeerden hun webpagina echt te layouten. HTML was tekst, geen fancy dingen!
In die 10 jaar zijn we uiteraard ver uitgestegen boven het originele concept van HTML, en dat is absoluut niet verkeerd, maar juist dit voorbeeld met horizontale lists geeft aan dat je nog altijd voorzichtig moet zijn met hoe je je layout maakt. Het punt is niet zozeer dat je het niet op een bepaalde manier moet/mag doen, het punt is dat als je het anders doet het er op meer browsers zo uitziet zoals je het bedoeld hebt.
Daarom is het (in dit voorbeeld) niet zo verstandig om <li> te gebruiken om tekst horizontaal op te maken.

En opmaak voor css-loze browsers: volgens mij, als je het goed doet, is dat geen punt. Zolang je geen vieze truukjes gaat gebruiken en items misbruikt voor iets waar ze niet voor bedoeld zijn (ja, horizontale lists, volgens mij heb ik een nieuw stokpaardje), dan moet het geen probleem zijn.
Het mag best eens gezegd worden: GoT en Tweakers is goed te lezen in Lynx. Het kan op details beter (en uiteraard vallen die vieze javascript headlines links bij Tweakers weg) maar de tekst staat niet wild over het scherm verdeeld en wat bij elkaar hoort staat ook bijelkaar. Dat geeft al aan dat je in moderne browsers een hele mooie site kunt bouwen die nog altijd zo backwards compatible is dat hij in 10 jaar oude software ook goed gerenderd wordt.

Maar goed, we gaan lichtelijk offtopic. Is zoals je zegt t.z.t. wel een mooi topic waardig.

[ Voor 32% gewijzigd door Maasluip op 16-03-2005 15:58 ]

Signatures zijn voor boomers.

woensdag 16 maart 2005 15:59

Acties:

RwD

kloonikoon

Dan wil ik er nog offtopic aan toe voegen dat je best aardig bent voor die > 1% bezoekers waar het niet goed werkt.