link in tekst grotere letters maar toch zelfde em grootte

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.414
Bij mijn test website heb ik een lettergrootte probleem wat ik niet zie waar het aan ligt.
De lettergrootte van een weblink in stukje tekst is groter ondanks dat volgens FireBug laat zien: font-size: 1.2em; net zoals de paragraaf.

Linkje naar pagina: http://www.albuswebdesign.nl/demo/agenda/
 
Toevoeging: verander ik de 1.2em naar 1.1em dan ziet het er beter uit maar ik snap het niet.
Lijntje code:
Code: 
#content a {font-size: 1.1em; color: #7007A6; text-decoration: none;}
 
1.2 em van 12 pixels = 14.4 = 14

Je 1.2 wordt relatief toegepast op 12, niet 10.
 
Daarom:
  • als je de font-size van de <a> weghaalt, gaat het goed in de content en de footer, daar blijft dan de <a> hetzelfde formaat houden als het element waar het in zit (de <p>, resp. de class="blok" die al de 1.2em hebben).
  • maar dan gaat het mis in het menu, want daar was de <a> het enige element in de cascade met een font-size, op de font-size in de <body> na; je ziet ook in Firebug bij een <a> in het menu dat de font-size van de <body> is doorgehaald, en er verder geen font-sizes in het rechter-venster staan.

Maar vanwege de erfenis-kwestie was de font-size van de menu-<a> 1.2em van de 62.5% font-size van de <body> en kwam uit op 1.2*62.5 = 75%.

Ergo: je kunt ofwel de <ul> van het menu, ofwel de <li>'s van het menu een font-size van 1.2em geven, wat dan door-geërfd wordt door de <a>'s in het menu. Dan kan de font-size van de <a> ongestraft verwijderd worden, en krijgen ook de <a>'s in het menu hun 75%.
 
CSS is echt puzzelen! Kei bedankt csshunter voor je tips en uitzoekwerk :o (en natuurlijk je lessen weer)
 
CSS is echt puzzelen!
Klik om te vergroten...
Nee hoor, dat valt eigenlijk reuze mee als je bedenkt dat de C van CSS staat voor Cascade:
alles wat onder de paraplu van een element hoger staat, blijft droog! :)

Daarom is het belangrijk om in de html-code goed in te springen: dan zie je precies waar de vertakkingen van de waterval zitten.

De enige complicatie is, dat sommige eigenschappen wel, en andere niet geërfd worden door de elementen binnen een ander element.
  • Een margin van iets wordt bv. niet geërfd (anders zou bv. bij een <div> met een {margin-left: 20px;}, waarin een <p>, waarin een <a> met een <img>: dit image 80px vanaf links komen te staan: 20px van de <div>, 20px van de <p>, 20px van de <a> en nog eens 20px voor het <img> zelf).
  • Font-sizes daarentegen zijn relatief en worden wel geërfd: als een <p> een font-size van 80% heeft, en een <a> een font-size van 70%, dan heeft een <a> binnen een <p> een font-size van 56%.
Gelukkig staat in de css-specificatie bij elke eigenschap of deze wel of niet geërfd wordt!

Maar je Wordpress heeft een prettige bende van het inspringen gemaakt, en met het doel om zo universeel mogelijk te kunnen zijn: het sjabloon hanteert de meest vreselijke classes en opeenstapeling daarvan.
De html is nu:
HTML: 
<body class="page page-id-30 page-template-default">

<div id ="container">

<div id ="header">

	<div id ="logo">
		<a href="#"><img src="http://www.albuswebdesign.nl/demo/wp-content/themes/pac-t/images/logo.png" alt "pact-t" /></a>
	</div> <!-- eind logo -->

	<div id ="slogan">
	<p>en hier komt een slogan te staan</p>

	</div> <!-- eind slogan-->
	
	<div id ="nav">
	
		<div class="menu-header"><ul id="menu-hoofdmenu" class="menu"><li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://www.albuswebdesign.nl/demo/">Home</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://www.albuswebdesign.nl/demo/testen-en-testen/">Testen <br />en<br /> Testen</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://www.albuswebdesign.nl/demo/contact/">Contact</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://www.albuswebdesign.nl/demo/over-ons/">Over Ons</a></li>

</ul></div>
	</div> <!-- eind nav-->
	
</div> <!-- eind header -->

<!-- 3 divs definieren -->
<div id="wrapper">
	



	<div id="sidebar">

<div id="nav_menu-2" class="widget-container widget_nav_menu"><div class="menu-navigatie-beneden-container"><ul id="menu-navigatie-beneden" class="menu"><li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item menu-item-37"><a href="http://www.albuswebdesign.nl/demo/agenda/">Agenda</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://www.albuswebdesign.nl/demo/kennisbank/">Kennisbank</a></li>

<li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="http://www.albuswebdesign.nl/demo/links/">Links</a></li>
</ul></div></div>
	</div>
	
	<div id="content">
	
			

				<div id="post-30" class="post-30 page type-page status-publish hentry">
											<h1 class="entry-title">Agenda</h1>
					
					<div class="entry-content">
						<p>Op deze pagina vind u informatie over de komende agenda.</p>

<ul>
<li>Morgen gebeurt dit …</li>
<li>Overmorgen gebeurt er weer iets anders.</li>
<li>Tsja, en dan?</li>
</ul>
<p>Lees meer op de volgende pagina: <a title="Google" href="http://www.google.nl" target="_blank">leesmeer</a></p>
																	</div><!-- .entry-content -->
				</div><!-- #post-## -->

				


	</div>

	
	<div class="clear"></div> <!-- we doen nu een clear omdat in CSS float gebruikt wordt voor bovenstaande elementen -->
	



</div> <!-- eind wrapper -->
	
	<div id="footer">

			
		<div class="eersteblok">			<div class="textwidget"><a href="#"><img src="http://www.albuswebdesign.nl/demo/wp-content/themes/pac-t/images/linkedin.png" alt "linkedin" /></a> <a href="#"><img src="http://www.albuswebdesign.nl/demo/wp-content/themes/pac-t/images/twitter.png" alt "twitter" /></a>
<p>eersteblok</p></div>
		</div>		<div class="blok">			<div class="textwidget">Tweede footer blok</br>

<a href="home.html" target="main">Home</a></br>
<a href="home.html" target="main">Home</a></br>
<a href="home.html" target="main">Home</a></br></div>
		</div>		<div class="blok">			<div class="textwidget">Derde footer blok</div>
		</div>		<div class="blok">			<div class="textwidget">Vierde footer blok</div>
		</div>				<div class="blok">			<div class="textwidget">Vijfde footer blok</div>

		</div>		<div class="clear"></div> <!-- we doen nu een clear omdat in CSS float gebruikt wordt voor bovenstaande elementen -->
		
	</div> <!-- einde footer -->
<p class="copyright"> &copy; 2012 <a href="http://www.albuswebdesign.nl" target="_blank">Albus Webdesign</a></p>


</div> <!-- eind container -->

</body>
</html>
Dat zijn geen oogstrelende watervallen, maar zich in doodsnood kronkelende rivieren na een orkaan. ;)
Dan kan je ook niet 1-2-3 zien (en ook niet 4-5-6), wat precies onder de css van een bovenliggend element moet vallen.
Met consequent inspringen zie je dit:
HTML: 
<body class="page page-id-30 page-template-default">

<div id ="container">
    <div id ="header">
        <div id ="logo">
            <a href="#"><img src="images/logo.png" alt="pact-t" /></a>
        </div> <!-- eind logo -->

        <div id ="slogan">
            <p>en hier komt een slogan te staan</p>
        </div> <!-- eind slogan-->
	
        <div id ="nav">
            <div class="menu-header">
                <ul id="menu-hoofdmenu" class="menu">
                    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
                        <a href="...">Home</a>
                    </li>
                    <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">
                        <a href="...">Testen <br />en<br /> Testen</a>
                    </li>
                    <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
                        <a href="...">Contact</a>
                    </li>
                    <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">
                        <a href="...">Over Ons</a>
                    </li>
                </ul>
            </div>
        </div> <!-- eind nav-->
    </div> <!-- eind header -->

    <!-- 3 divs definieren -->
    <div id="wrapper">
        <div id="sidebar">
            <div id="nav_menu-2" class="widget-container widget_nav_menu">
                <div class="menu-navigatie-beneden-container">
                    <ul id="menu-navigatie-beneden" class="menu">
                        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item menu-item-37">
                            <a href="...">Agenda</a>
                        </li>
                        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
                            <a href="...">Kennisbank</a>
                        </li>
                        <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58">
                            <a href="...">Links</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!-- eind sidebar -->
        
        <div id="content">
            <div id="post-30" class="post-30 page type-page status-publish hentry">
                <h1 class="entry-title">Agenda</h1>
                <div class="entry-content">
                    <p>Op deze pagina vind u informatie over de komende agenda.</p>
                    <ul>
                        <li>Morgen gebeurt dit …</li>
                        <li>Overmorgen gebeurt er weer iets anders.</li>
                        <li>Tsja, en dan?</li>
                    </ul>
                    <p>Lees meer op de volgende pagina: <a title="Google" href="http://www.google.nl" target="_blank">leesmeer</a></p>
                </div><!-- .entry-content -->
            </div><!-- #post-## -->
        </div>
        
        <div class="clear"></div> <!-- we doen nu een clear omdat in CSS float gebruikt wordt voor bovenstaande elementen -->
    </div> <!-- eind wrapper -->
    
    <div id="footer">
        <div class="eersteblok">
            <div class="textwidget">
                <a href="#"><img src="..." alt "linkedin" /></a> 
                <a href="#"><img src="..." alt "twitter" /></a>
                <p>eersteblok</p>
            </div>
        </div>
        
        <div class="blok">
            <div class="textwidget">
                Tweede footer blok</br>
                <a href="home.html" target="main">Home</a></br>
                <a href="home.html" target="main">Home</a></br>
                <a href="home.html" target="main">Home</a></br>
            </div>
        </div>
        
        <div class="blok">
            <div class="textwidget">
                Derde footer blok
            </div>
        </div>
        
        <div class="blok">
            <div class="textwidget">
                Vierde footer blok
            </div>
        </div>
        
        <div class="blok">
            <div class="textwidget">
                Vijfde footer blok
            </div>
        </div>
        
        <div class="clear"></div> <!-- we doen nu een clear omdat in CSS float gebruikt wordt voor bovenstaande elementen -->
    </div> <!-- einde footer -->
    
    <p class="copyright"> &copy; 2012 <a href="http://www.albuswebdesign.nl" target="_blank">Albus Webdesign</a></p>
</div> <!-- eind container -->

</body>
</html>
Zo zie je in 1 oogopslag waar de gelijkwaardige niveaus zitten, en waar de watervalletjes lopen. :)

Wat je ook ziet: in het streven naar universaliteit zijn veel meer <div>'s en classes gebruikt dan nodig is.
Neem bv. de navigatie-div, die is nu:
HTML: 
<div id ="nav">
    <div class="menu-header">
        <ul id="menu-hoofdmenu" class="menu">
            <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
                <a href="...">Home</a>
            </li>
            <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">
                <a href="...">Testen <br />en<br /> Testen</a>
            </li>
            <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
                <a href="...">Contact</a>
            </li>
            <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">
                <a href="...">Over Ons</a>
            </li>
        </ul>
    </div>
</div> <!-- eind nav-->
Maak je zelf een site met Kladblok, dan heb je de html en de css helemaal in de hand, en kan het worden:
HTML: 
<div id ="nav">
    <ul>
        <li id="item-1"><a href="...">Home</a></li>
        <li id="item-2"><a href="...">Testen <br />en<br /> Testen</a></li>
        <li id="item-3"><a href="...">Contact</a></li>
        <li id="item-4"><a href="...">Over Ons</a></li>
    </ul>
</div> <!-- eind nav-->
Want meer heb je niet nodig om alle elementen met de css-opmaak te kunnen bereiken. :D

Zaterdagavond-verzuchting: CMS'sen kunnen mooi zijn, maar bestaande templates aanpassen is soms crimineel!

Gegroet!
CSShunter
___________
PS:
Het uitzoeken doet Firebug voor me: klik je in het links-onder-venster op een element, dan zie je in het rechts-onder-venster meteen alle schakels in de cascade-eigenschappen van de css.
En ook waar de css van iets wordt overruled door een ander element. :)
Van vreemde verschijnselen heb je dan vaak binnen drie tellen de boosdoener te pakken.
 
Laatst bewerkt:
Goh, die 70% van de 80% font-size wist ik ook niet. Ik ben nu door het "websites opmaken met css - mark creeten" aan het worstelen en dat is ook zeer verhelderend samen met jouw uitleg. Ik print het uit en bundel het want ik heb een geheugen van een zeef, vandaar de computers vroeger ingegaan :) Ik zal ook vaker w3.org raadplegen, Dreamweaver vult veel aan maar toch.

Inderdaad dat structureerde werken is veel helderder en een paar keer op TAB drukken is niet ingewikkeld ;)

Firebug gebruik ik ook maar niet altijd snap ik wat er aan de hand is maar het wordt wel steeds duidelijker.

Csshunter, super! :D
(ik zal de vraag op gesloten zetten)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan