CSS tekst opmaak

[damnsharp]

Ik denk dat ik CSS en tekst opmaak al best wat onder de knie heb maar als ik tegen het volgende probleem loop voel ik me een behoorlijke beginner . Het probleem is dat de tekst in een tabel er anders uit ziet (dikker) dan de tekst in een paragraaf en ik snap niet waarom.
Linkje test website (let niet op de andere opmaak want het is een test site).

Het gaat om de tekst onder de kop "professioneel" ten opzichte van de tekst die onder uitklap gedeelte "diensten" staat.
Met firebug zie ik dat er wat over erf css code van de accordion plug-in thethe-accordion staan maar als ik die allemaal uitzet in firebug wordt het er niet beter op.

Thanks!

 

[Naarling]

1) Waarom gebruik je daar een tabel?
2) Je hebt die bovenste tekst in <th></th> tags geplaatst, tekst die normaal bovenaan de kolommen van een tabel staat en die standaard vet wordt weergegeven.

 

[tecsman]

De tekst in de tabel heeft denk ik last van een over-ge-erfde stijl van een parent-div.
Ik zie dit:

Inherited from

div#thethe-accordion-content-1.ui-accordion-content
#thethe-accordion-content-1 {
  font-size:1.2em !important;
}

Als je die font-size: terugbrengt naar 1em is de tekst weer 'normaal'.

Belangrijke tip:
Zoek op: FIREBUG
Dit is een extensie voor Firefox (en andere browsers) waarmee je in een gedeeld scherm zowel de website als de diverse codes kunt bekijken.
Diverse codes = HTML, CSS, Javascript, etc.
Je kunt met Firebug ook 'real-time' de code veranderen en direct het effect op je (andere deel-)scherm zien.

Op deze wijze heb ik ook uitgeprobeerd wat het effect van die font-size is.


Nog een belangrijke tip:
Zoek op "WEB DEVELOPER TOOLBAR" van Chris Pederick.
Dat is een heel belangrijk hulpmiddel waarmee je allerlei 'onderwater-informatie' op je scherm tevoorschijn kunt toveren.
Deze toolbar bevat overigens ook links naar validator-services.

Validator
Deze moet je zeker gaan gebruiken. Zie bijvoorbeeld hier http://validator.w3.org/check?verbose=1&uri=http://albuswebdesign.nl/wordpresstest4/
Deze service wijst je op de syntactische fouten die je maakt in je html-code.

Zo gebruik jij bijvoorbeeld nogal vaak de volgende: <p/>
Je gebruikt die waarschijnlijk om een 'lege regel' te creëren. Deze code bestaat echter helemaal niet en het beoogde effect is dan ook nihil.
Waarschijnlijk wil/bedoel je zo iets: <p>&nbsp;</p>
en even waarschijnlijk heb je ook iets opgepikt over lege elementen in XHTML, zoals bijvoorbeeld <br />
Maar dat kun je niet op deze manier gebruiken voor een lege regel.

 

[damnsharp]

super!

Goh, wat zijn jullie snel! Net bakkie koffie op en nu al reacties. Super hoor. :love:

@naarling, ik wil tekst links en foto rechts plaatsen, vandaar een tabel.
Ja die th... die zal ik eens weggooien.

@tecsman, dank je ook voor de tips. Firebug gebruik ik ook maar kwam er daarmee nog niet uit. Die webdeveloper toolbar ook maar te weinig, hoe die me nu zou helpen bijvoorbeeld weet ik niet.
Ja klopt! Ik wil regelmatig witregels neerzetten. En trouwens ik ben soms ook wat dyslectisch vandaar dat ik wel eens wat omdraai. Oh, is <br /> niet goed daarvoor?

Phoei... het is me al zo vaak gezegd om bij problemen eerst de diverse validators te gebruiken, waarom denk ik daar niet aan als er een probleem is? Ik stoot me vaak aan dezelfde steen. Ik ga de handtekening van CSShunter waar de riedel instaat boven mijn beeldscherm ophangen
Och ja, die strong is obsolete, haal ik weg. Ik zal font-weight css ervoor gebruiken.

Zo, ik kan weer verder in troubleshooten. Ga het aanpassen en kijken wat er dan overblijft.

 

[Naarling]

@naarling, ik wil tekst links en foto rechts plaatsen, vandaar een tabel.

Daar heb je geen tabel voor nodig, sterker, daar zijn tabellen niet voor bedoeld. Het enige wat je in die div nodig hebt is een losse paragraaf en een plaatje. Met CSS kun je dan zorgen dat ze de goede breedte krijgen en naast elkaar komen te staan.

Tabellen voor je layout gebruiken levert alleen maar problemen en onoverzichtelijke code op.

 

[damnsharp]

@naarling, dan ga ik hem na de lunch, want ik rammel, snel aanpassen! Overigens jouw handtekening is er ook 1tje om boven het scherm te hangen :thumb:

 

[tecsman]

Oh, is <br /> niet goed daarvoor?

Uh, nee, <br /> zou juist wel goed zijn; maar ik dacht dat je <p/> als een soortgelijk iets had gebruikt, en dat zou niet goed zijn.

Overigens kun je in plaats van <br /> ook beter een CSS-oplossing gebruiken,
bijvoorbeeld door een marge te gebruiken, zoiets als {div#: margin-bottom = 10px; }

 

[damnsharp]

Helder wbt <br />. Ja tecsman, dat is ook een idee met CSS codes. Omdat het een WordPress site is zet WordPress en de plug-ins er ook codes omheen. Bijv. die </p> foutmelding bij de validator krijg ik er niet uit. Als ik in WordPress de pagina bewerk en dan ipv wysiwyg de code editor gebruik zie ik die er ook niet staan. WordPress is fijn om mee te werken maar soms... grmbl.

Oh nog vraag aan Naarling, waarom zou ik geen tabel eigenlijk gebruiken om naast tekst een foto te plaatsen? Ik begrijp nu dat het zonder tabel ook gaat en dat met een tabel er meer code door ontstaat maar is dat de enige reden?

 

[Naarling]

Oh nog vraag aan Naarling, waarom zou ik geen tabel eigenlijk gebruiken om naast tekst een foto te plaatsen? Ik begrijp nu dat het zonder tabel ook gaat en dat met een tabel er meer code door ontstaat maar is dat de enige reden?

Op zichzelf vind ik dat al een redelijk goede reden. Dit is nog een heel simpel, klein, stukje van je layout en zelfs dan krijg je met een tabel veel meer regels HTML dan nodig is. Even ter vergelijking, dit is jouw tabel:

<!DOCTYPE html>
<html>
<head></head>
<body>
<table class="contenttabel" width="450" border="0">
  <tbody>
    <tr>
      <td width="300">
        <div align="left" width="150px">Suspendisse potenti. Praesent diam nulla, varius sed ultricies a, gravida in magna. Nulla diam velit, convallis in hendrerit quis, egestas non arcu. In mattis posuere mi ac dictum. Praesent non elit ut dui pharetra adipiscing. Morbi sapien sem, luctus in scelerisque eget, adipiscing in libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst</div>
      </td>
      <td><img src="http://albuswebdesign.nl/wordpresstest4/wp-content/uploads/2012/11/damiaan.png" alt=""></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Dit is hetzelfde effect met divs en wat CSS.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.content{
	width:450px;
}

.content p{
	width:300px;
	float:left;
}
</style>
</head>
<body>
<div class="content">
	<img src="http://albuswebdesign.nl/wordpresstest4/wp-content/uploads/2012/11/damiaan.png" alt="">
	<p>Suspendisse potenti. Praesent diam nulla, varius sed ultricies a, gravida in magna. Nulla diam velit, convallis in hendrerit quis, egestas non arcu. In mattis posuere mi ac dictum. Praesent non elit ut dui pharetra adipiscing. Morbi sapien sem, luctus in scelerisque eget, adipiscing in libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst</p>
</div> 
</body>
</html>

Normaliter zou die CSS natuurlijk in een apart bestand staan. Bij dit kleine stukje scheelt dat al zes regels HTML. Het mooie van CSS is ook dat je het één keer kunt schrijven om het dan op alle pagina's toe te passen. Als je de layout in de HTML met tabellen bepaalt moet je die hele tabelstructuur op iedere pagina weer maken.

Als je de volledige site uit tabellen op gaat bouwen wordt het nog veel erger, dan krijg je waarschijnlijk ook te maken met tabellen binnen tabellen, binnen tabellen. Het resultaat is dan een weinig flexibele layout die bij het minste of geringste zal breken (als je wat extra's toe wilt voegen bijvoorbeeld) en zich niet aan kan passen aan verschillende schermformaten. Maar, waarom zou je hier wél een tabel voor gebruiken?

NB: Voor de duidelijkheid, het is niet zo dat je nooit tabellen moet gebruiken. Als je gegevens weer wilt geven die je in, bijvoorbeeld, een boek ook in een tabel zou zien staan dan kun je in HTML natuurlijk ook een tabel gebruiken.

 

[damnsharp]

Het is helder @Naarling! Jouw voorbeeld code ziet er helderder uit en heeft inderdaad minder regels. Ik blijf soms nog wat teveel in HTML hangen om daarmee het op te maken ofschoon daar juist CSS voor bedoeld is
Dank je zeer voor de hulp en tips. Een dikke :thumb: (en alvast een fijne jaarwisseling toegewenst)

Ik heb de vraag al status opgelost gezet maar nog 1 ding voor mijn beeldvorming, ik neem aan dat altijd na een float een clear moet komen dus dat in jouw laatste code ook een clear:both moet komen te staan, toch?

 

[Naarling]

[...] ik neem aan dat altijd na een float een clear moet komen dus dat in jouw laatste code ook een clear:both moet komen te staan, toch?

Dat hangt helemaal af van wat je wilt bereiken. Lees anders dit artikel eens door, dat geeft een vrij goede uitleg van het hele float en clear verhaal.

 

[damnsharp]

@Naarling, heldere link over de floats. Dank je.