Archief - Vaste kolombreedtes én hoogtes

pina · 18 apr 2010

Ik ben op zoek naar een HTML-code waarbij je een kolom definiëert, maar de cellen moeten altijd dezelfde hoogte en breedte behouden, ongeacht de hoeveelheid tekst die er wordt ingeplaatst. Als je dan te veel tekst hebt, zou ik willen dat er dan ... in staat ipv de volledige tekst op verschillende lijnen, bv:

een tekst die te lang zou zijn voor een bepaalde cel:
de kat krabt de krollen van de trap

Die tekst wil ik niet op 2 lijnen in de cel zien verschijnen zoals bij standaard HTML, maar gewoon met ... achter:

de kat krabt de krollen....

Gaat dat eigenlijk in html, of moet ik daarvoor al beroep doen op php?

bicklo · 18 apr 2010

CSS is de beste oplossing voor iets dergelijks. LINK

Eleven · 18 apr 2010

Voor de kolommen te maken is CSS inderdaad de juiste oplossing.
Die ... zal je wel met een server side scripttaal zoals PHP moeten doen.

pina · 18 apr 2010

Ik kan wel wat css maar ik heb nooit echt een property geweten die de tekst afbreekt naargelang de kolomgrootte. Ik weet wel dat je de breedte van een tabel kan vastzetten, maar als de tekst niet in de breedte kan, wordt die verder aangevuld in de hoogte...

welke property gebruiken jullie daar dan voor?

adrianhates · 18 apr 2010

daar gebruiken we een <p> voor

<p> staat voor paragraaf en zal zich zo breed maken als de breedte van het omvattende block element.

Drone · 18 apr 2010

Ben ik het nu of zijn de antwoorden hier niet echt helemaal correct.
-Waarom zou je php moeten gebruiken om zoiets te doen? Je kan dit even goed met javascript doen. Het voordeel met een server-side language is natuurlijk wel dat je de overbodige tekst niet naar de browser moet sturen. Maar ik denk nu niet dat dit een grote performance drop zal geven.

-Wat je zegt is waar adrianhates maar ik zien niet direct hoe het een oplossing kan bieden voor zijn probleem.

Ik zou gewoon kijken hoeveel letters/woorden er in elke cell gaan en dan de string afbreken bij de laatste letter of woord en er dan "..." aan toevoegen. Ik zou om zeker te zijn dat de tekst niet naar een nieuwe lijn gaat ook "white-space: nowrap;" zetten. Het aantal woorden tellen is moeilijker dan het aantal letters tellen.

Een oplossing zonder javascript of andere programmeertaal is om "white-space: nowrap;" te zetten en dan de content die buiten de cell gaat te verbergen met overflow:hidden. Het probleem is dan wel dat in het midden van een woord of letter een onderbreking kan zien. Je hebt dan wel geen "..." aan het eind maar dit kan je ook oplossen met wat extra css.

adrianhates · 18 apr 2010

hehe , idd ik lees ni altijd direct alles..

Zero grav heeft hier onlangs nog een antwoord voor gepost.. Misschien eens de search knop gebruiken.

edit: ff gezocht en kvind het zelf ni snel terug.. Misschien kan/gaat Zero Grav het hier binnenkort zelf nog eens posten

Zero Grav · 18 apr 2010

Bedoelt gij niet dat 'read more' gedoe, adrianhates? Anders zou ik zelf niet echt weten waar het over gaat.

[drone]-[1.05] zit er wel het dichtste op. Overflow: hidden en white-space: nowrap in combinatie met :after { content: "..."; } ofzo. Het in php alleen doen is zelfs niet mogelijk omdat ge dan nooit gaat weten wanneer ge op de 'tweede lijn' zit (afhankelijk van de browser/os/instellingen).

pina · 18 apr 2010

Zero Grav zei:
Bedoelt gij niet dat 'read more' gedoe, adrianhates? Anders zou ik zelf niet echt weten waar het over gaat.

[drone]-[1.05] zit er wel het dichtste op. Overflow: hidden en white-space: nowrap in combinatie met :after { content: "..."; } ofzo. Het in php alleen doen is zelfs niet mogelijk omdat ge dan nooit gaat weten wanneer ge op de 'tweede lijn' zit (afhankelijk van de browser/os/instellingen).

hola, het wordt hier effe een verwarrende boel

het is eigenlijk, lijkt mij toch op het 1e zicht, niet echt moeilijk: ik zal het simpel proberen uitleggen:

je heb een tabel van 200px met elke cel waar dus 100px ruimte is voor tekst.
in cel 1 plaats je een tekst die langer is dan de voorziene 100px ruimte.

in normale omstandigheden zal de tekst gewoon doorlopen over 2 rijen, maar dat wil ik niet. Ik wil dat die tekst vast op 1 rij blijft, en de resterende tekst die er niet meer in past, gewoon weglaat en '...' achter zetten. Die ... achterzetten kan je desnoods nog doen door een extra kolom naast te plakken met ... in, maar het gaat hem vooral om dat hij dan de resterende tekst weglaat ipv verder aanvult op de 2e lijn.

Zero Grav · 18 apr 2010

Code:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	 <style type="text/css">
	 <!--

		* {
			margin: 0;
			padding: 0;
		}
		
		#container {
			margin: 10px;
		}
		
		#column {
			width: 200px;
			height: 200px;
			border: 1px solid green;
		}
		
		#column p {
			width: 100px;
			overflow: hidden;
			white-space: nowrap;
		}
		
		#column p:after {
			content: "...";
		}

	 -->
	 </style>

	<title></title>

	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="robots" content="noindex, nofollow" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<div id="container">
	<div id="column">
		<p>Dit is een paragraaf met meerdere lijnen tekst. Deze zal op 100 pixels afgesneden worden en gevolgd worden door 3 punten.</p>
	</div>
</div>

</body>
</html>

Een begin, het enige probleem is dat em momenteel nog die ... achter de content van de paragraaf zet en die dus ook wordt afgesneden. Maar ik heb op het moment niet echt tijd om er verder naar te kijken.

Drone · 18 apr 2010

Ja het lijkt iets simpel maar om het echt goed te doen is niet gemakkelijk. "After" in css werkt ook niet in geen enkele IE browser dacht ik. Maar met de css van Zero Grav kan je zeker al een goed resultaat bekomen.

Eleven · 18 apr 2010

[drone]-[1.05];13159594 zei:
Ben ik het nu of zijn de antwoorden hier niet echt helemaal correct.
-Waarom zou je php moeten gebruiken om zoiets te doen? Je kan dit even goed met javascript doen. Het voordeel met een server-side language is natuurlijk wel dat je de overbodige tekst niet naar de browser moet sturen. Maar ik denk nu niet dat dit een grote performance drop zal geven.

Dit kan ook met Javascript, maar als het om veel tekst gaat zou ik het toch met PHP doen. Het hangt wat af van de situatie, gebruik je al PHP, dan kan dat er ook nog wel bij. Wil je met je tekst nog wat 'creatieve' dingen doen zoals een read more of een slider zodat je tekst wel zichtbaar wordt dan is Javascript een betere oplossing.
Puur CSS zou ik nog niet doen om al een aantal aangehaalde redenen, ook de :after wordt niet ondersteund in oudere browsers. (Of je die browsers al dan niet gaat ondersteunen is een andere discutie)

Zero Grav · 18 apr 2010

Maar let wel dat PHP u niet de 'eerste lijn' gaat geven, maar een bepaald aantal karakters. Zelf doe ik het ook met PHP, om die reden dat CSS het niet doet zoals het zou moeten en het nogal overbodig is om content te laden die ge niet gaat gebruiken.

En gewoon om even in de herhaling te vallen en Eleven zijn gelijk te onderstrepen, voor een read more alternatief javascript.

pina · 19 apr 2010

Zero Grav zei:

Code:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	 <style type="text/css">
	 <!--

		* {
			margin: 0;
			padding: 0;
		}
		
		#container {
			margin: 10px;
		}
		
		#column {
			width: 200px;
			height: 200px;
			border: 1px solid green;
		}
		
		#column p {
			width: 100px;
			overflow: hidden;
			white-space: nowrap;
		}
		
		#column p:after {
			content: "...";
		}

	 -->
	 </style>

	<title></title>

	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="robots" content="noindex, nofollow" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<div id="container">
	<div id="column">
		<p>Dit is een paragraaf met meerdere lijnen tekst. Deze zal op 100 pixels afgesneden worden en gevolgd worden door 3 punten.</p>
	</div>
</div>

</body>
</html>

Een begin, het enige probleem is dat em momenteel nog die ... achter de content van de paragraaf zet en die dus ook wordt afgesneden. Maar ik heb op het moment niet echt tijd om er verder naar te kijken.

thnx! ik ga dat morgenavond eens rustig bekijken en uittesten!

pina · 19 apr 2010

Eleven zei:
Dit kan ook met Javascript, maar als het om veel tekst gaat zou ik het toch met PHP doen. Het hangt wat af van de situatie, gebruik je al PHP, dan kan dat er ook nog wel bij. Wil je met je tekst nog wat 'creatieve' dingen doen zoals een read more of een slider zodat je tekst wel zichtbaar wordt dan is Javascript een betere oplossing.
Puur CSS zou ik nog niet doen om al een aantal aangehaalde redenen, ook de :after wordt niet ondersteund in oudere browsers. (Of je die browsers al dan niet gaat ondersteunen is een andere discutie)

nee, het gaat om niet veel tekst uiteindelijk. De tekst overflow zou slechts een paar woorden zijn, of pakweg max 1 zin.

pina · 20 apr 2010

heb nu wat trial & errors gedaan, en het is mij uiteindelijk wel min of meer gelukt. Maar:

als de tekst te lang is, komt ... wel achter de tekst, maar aangezien die dan al is afgebroken, zie je die ... niet meer. Oplossing: een 2e kolom naast maken die amper 20px breed is, en die vullen met ... en vlak naast de 1e kolom zetten, zonder border natuurlijk. Dan lijkt het alsof die ... gewoon na de afbreking wordt geplaatst.

probleem: als de tekst niet te lang is, zit je daar met een serieuze witruimte in die kolom (want de tekst is niet volledig gevuld in die kolom want hij is niet te lang), en dan zie je verderop ... staan

oplossing: ... plaatsen na elk lijntje tekst zoals in de oorspronkelijke code. Dan ga je na elke lijn sowieso ... hebben.

Probleem: Bij de tekst die niet te lang is, en die dus in de kolom past, heb je 2 keer ... staan: 1x vlak achter de tekst, en dan nog eens in die 2e kolom...

Er zou dus iets moeten zijn in de zin van: if, else blablabla, maar weet niet echt of dat haalbaar is en het lijkt mij de code toch wel serieus ingewikkeld maken...

Is het dan via Javascript niet eenvoudiger op te lossen? Ik heb zelf geen kennis van javascript, kan iemand mij dan eventueel op weg helpen?

stoomboot · 20 apr 2010

Eleven zei:
Voor de kolommen te maken is CSS inderdaad de juiste oplossing.
Die ... zal je wel met een server side scripttaal zoals PHP moeten doen.

:naughty:

http://tips-box.blogspot.com/2009/06/stunning-automatic-thumb-with-hover.html
't is wel met een knoppeke "read more" ipv ..., maar dat lijkt me vrij simpel op te lossen.

(Na heel vlug te hebben gekeken alleszins)

Archief - Vaste kolombreedtes én hoogtes

pina

Legacy Member

bicklo

Legacy Member

Eleven

Legacy Member

pina

Legacy Member

adrianhates

Legacy Member

Drone

Legacy Member

adrianhates

Legacy Member

Zero Grav

Legacy Member

pina

Legacy Member

Zero Grav

Legacy Member

Drone

Legacy Member

Eleven

Legacy Member

Zero Grav

Legacy Member

pina

Legacy Member

pina

Legacy Member

pina

Legacy Member

stoomboot

Legacy Member