Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Lijst zo breed als tekst

bertenz - 18/01/2008 19:56 (laatste wijziging 18/01/2008 19:56)
HTML beginner		Hallo allemaal, Op mijn website wil ik gebruik maken van lijsten. Aangezien de informatie in die lijsten dynamisch is, kan de lijst in principe alle waardes aannemen. Ik wil echter graag dat de items maar éénregelig zijn (de lijst mag dus niet te smal zijn), maar ik wil ook liever geen lijst van 300 pixels breed hebben terwijl er bijvoorbeeld maar 100 pixels gebruikt worden. Weet iemand hoe ik op kan geven dat de lijst gewoon met de tekst mee groeit ? (en dan bijvoorbeeld 5 pixels later ophoudt) Alvast bedankt.

17 antwoorden

Gesponsorde links

tomie94 - 18/01/2008 20:10

PHP interesse

zoiets:

css code - Bekijk de code zonder highlighting - Klap code in

                .jediv {
width: auto; //De div zal zo breedt zijn als de tekst erin staat
max-width: 300px; //De div kan 1px zijn maar ook 299px maar hij mag niet groter dan 300px zijn.
}

            
.jediv {
width: auto; //De div zal zo breedt zijn als de tekst erin staat
max-width: 300px; //De div kan 1px zijn maar ook 299px maar hij mag niet groter dan 300px zijn.
}
 

bertenz - 18/01/2008 20:46
HTML beginner		Bedankt voor je hulp, maar ik wilde deze lijst maken met het list-element. De optie "width: auto;" werkt hier blijkbaar niet bij.... Heeft iemand anders misschien nog een oplossing voor mij ??

Rianne91 - 20/01/2008 12:24
Nieuw lid		je moet m op % zetten ;) width="100%"

bertenz - 20/01/2008 14:42
HTML beginner		Bedankt voor je hulp, maar helaas werkt ook dat niet. De lijst blijft gewoon de hele tijd op de maximale breedte (de hele pagina) staan. Alleen als ik een absolute waarde aan de lijst geef, heeft het niet de breedte van de hele pagina. Iemand enig idee hoe ik het dynamisch op kan lossen, dus dat de breedte misschien op een andere manier aangepast wordt .... ??

bertenz - 20/01/2008 17:18
HTML beginner		Ik heb ook beide manieren getest (width: 100%; en width="100%"), maar het werkt helaas niet. Iemand een oplossing voor dit probleem ?

JanW - 20/01/2008 18:53
Nieuw lid		Zat ff te denken maar is max-width:100%; niet mogelijk

bertenz - 20/01/2008 21:44
HTML beginner		Nee, helaas ook niet. De lijst blijft de hele breedte benutten tenzij ik er een absolute waarde aan geef. Misschien dat er nog een ander attribuut is voor lijsten ...

timmie_loots - 20/01/2008 21:59 (laatste wijziging 20/01/2008 22:01)
PHP gevorderde		Gewoon géén waarde geven? EDIT: En die extra ruimte kun je gewoon met padding e.d. oplossen natuurlijk.

bertenz - 21/01/2008 13:38
HTML beginner		Die extra ruimte kan inderdaad met padding, maar op die manier kan ik er helaas niet voor zorgen dat de lijst net zo breed (evt. + padding) wordt als de tekst. Dus als ik een lijst een achtergrondkleur mee geeft, zal deze over de hele breedte van de pagina te zien zijn tenzij ik er een absolute waarde aan geef. Of iemand moet weten hoe ik het toch nog kan oplossen ...

Pieter - 22/01/2008 14:30
SEO guru		Als je enkel de max-width (dus geen width) meegeeft moet het toch lukken? Of zit die tekst niet binnen je lijst? Heb je anders een voorbeeldje online staan? We krijgen het wel opgelost hoor, probeer het probleem gewoon zo goed mogelijk te omschrijven, want nu vind ik het nogal vaag.

Vincjenzo - 22/01/2008 16:36

Nieuw lid

Misschien zoiets?

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>list items met tekst mee laten groeien</title>
<style type="text/css">
li {
	display:inline;
	float:left;
	clear:left;
	background-color:blue;
	border:1px solid black;
}	
</style>
</head>

<body>
<ul>
	<li>een list item</li>
	<li>een langer list item</li>
	<li>de langste list item die we hebben</li>
	<li>kleintje</li>
</ul>	
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>list items met tekst mee laten groeien</title>
<style type="text/css">
li {
	display:inline;
	float:left;
	clear:left;
	background-color:blue;
	border:1px solid black;
}	
</style>
</head>
 
<body>
<ul>
	<li>een list item</li>
	<li>een langer list item</li>
	<li>de langste list item die we hebben</li>
	<li>kleintje</li>
</ul>	
</body>
</html>

Pieter - 22/01/2008 17:47
SEO guru		Ja, dat is een gewoon opgemaakte lijst. Een lijst groeit standaard mee. Nu moet er nog een max-width in van het gewenste aantal px..

timmie_loots - 22/01/2008 18:27
PHP gevorderde		Fout pieterc, in zijn geval worden de list items opgemaakt, niet de list zelf. Is een oplossing waar ik zelf ook aan zat te denken, maar ik weet niet of de list items even lang zijn; of dat deze onafhankelijk van elkaar een lengte krijgen (ik vermoed het laatste) waardoor de oplossing niet werkt.

Pieter - 22/01/2008 19:54
SEO guru		Dan nog is het geen verschil hé als enkel de list items opgemaakt zijn. Aangezien de topicstarter met tekst waarschijnlijk de inhoud van de lists bedoelde zal dat sowieso niet tot een oplossing leiden (het apart stylen van de list items, aangezien deze als list moeten bekeken worden in dit geval). Ik denk dat de topicstarter zijn probleem wat duidelijker moet omschrijven vooraleer we hier uit kunnen raken.

bertenz - 23/01/2008 14:45
HTML beginner		Ik zal mijn probleem nogmaals proberen uit te leggen. Ik wil een lijst hebben die automatisch net zo breed wordt als de tekst die erin staat. Doordat ik gebruik maak van een database, is de lijst telkens met andere gegevens gevuld en heeft de langste tekst dus ook telkens een andere lengte. Daardoor kan ik het probleem dus niet oplossen door er een vaste waarde aan te geven. Echter weet ik niet hoe ik ervoor kan zorgen dat de lijst net zo breed wordt als de langste tekst. Ik heb even een voorbeeld op mijn website gemaakt. De code is van deze pagina is: Plaatscode: 5188 Ik hoop dat mijn probleem nu duidelijker is en dat iemand de oplossing weet natuurlijk

Vincjenzo - 23/01/2008 23:32

Nieuw lid

Volgens mij zoek je een table.

html4strict code - Bekijk de code zonder highlighting - Klap code in

<table border="1">
	<tr><td>Naam</td></tr>
	<tr><td>Voorbeeld</td></tr>
	<tr><td>Nog een invoer voorbeeld</td></tr>
	<tr><td>De lijst blijft de hele breedte van de pagina gebruiken</td></tr>
</table>

<table border="1">
	<tr><td>Naam</td></tr>
	<tr><td>Voorbeeld</td></tr>
	<tr><td>Nog een invoer voorbeeld</td></tr>
	<tr><td>De lijst blijft de hele breedte van de pagina gebruiken</td></tr>
</table>

bertenz - 24/01/2008 00:26
HTML beginner		Kan inderdaad ook, maar zijn lijsten hiervoor dus niet bedoeld ? (als je dus wilt dat het mee groeit met de inhoud)

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten