[css] meerdere div's in één class

[Anoniem: 52382]

Ik weet niet of het volgende mogelijk is maar zoeken op het net heeft me nog geen antwoord gegeven.

Ik wil in css één class defineren waar meerdere div's in zitten. Is dat mogelijk?

Ik wil namelijk een soort van herbruikbaar "blok" hebben om deze dynamisch toe te kunnen voegen.

Hopelijk is dit een beetje duidelijk. Misschien zoek ik ook wel in de verkeerde richting maar dan hoor ik dat graag.

[RuudvandeBeeten]

Waarom zou je het niet kunnen?

code:

<div class="groen">
</div>
<div class="groen">
</div>
<div class="groen">
</div>

[ Voor 63% gewijzigd door RuudvandeBeeten op 29-07-2009 14:13 ]

[Noork]

Ik begrijp je niet. Weet je zelf wel een beetje hoe css werkt?

[Exception]

Je kunt een klasse gewoon meerdere keren gebruiken hoor:

code:

.jouwclass
{
    background-color: Red;
}

code:

<div class="jouwclass" id="div1"></div>
<div class="jouwclass" id="div2"></div>
<div class="jouwclass" id="div3"></div>

[jbdeiman]

Als jij de stijl van dat blok (repeterende blok) goed hebt gedaan, dan gaat dat met een class zeker lukken. Ik zie ook het probleem niet zo en heb net als Noork het idee dat je een beginner bent met CSS.

Een class gebruik je voor items die meermalen in dezelfde stijl voorkomen, een id gebruik je voor iets wat uniek is.
Dat is de definitie zoals die voor CSS geldt.

[Anoniem: 52382]

RuudvandeBeeten schreef op woensdag 29 juli 2009 @ 14:12:
Waarom zou je het niet kunnen?

code:

<div class="groen">
</div>
<div class="groen">
</div>
<div class="groen">
</div>

Wat ik wil is zoiets:

code:

<div class="wrapper">
    <div id="links"> </div>
    <div id="rechts"
         <div id="plaatje" </div>
</div>
</div>

En dit hele zooitje wil ik in één keer dynamisch in kunnen voegen

[disjfa]

Anoniem: 52382 schreef op woensdag 29 juli 2009 @ 14:21:
[...]
En dit hele zooitje wil ik in één keer dynamisch in kunnen voegen

Mits je je html goed intikt kan dat toch gewoon.

Wat zoek je nu? Wat is php? Wat is html? Wat is een database?

[danielkraak]

Ikzelf kreeg met meerdere divs van dezelfde class problemen. Het werd namelijk niet meer gezien als valid html, omdat je een div met een bepaalde class maar één keer mocht gebruiken. Misschien bedoelt de ts dat?

[Anoniem: 52382]

disjfa schreef op woensdag 29 juli 2009 @ 14:22:
[...]

Mits je je html goed intikt kan dat toch gewoon.

Wat zoek je nu? Wat is php? Wat is html? Wat is een database?

In javascript via

code:

appendChild(newdiv);

newdiv is dan de class "wrapper" en voegt dus in één keer meerdere divs toe

[Gersomvg]

danielkraak schreef op woensdag 29 juli 2009 @ 14:25:
Ikzelf kreeg met meerdere divs van dezelfde class problemen. Het werd namelijk niet meer gezien als valid html, omdat je een div met een bepaalde class maar één keer mocht gebruiken. Misschien bedoelt de ts dat?

Nee hoor.. een class herhalen mag gewoon.. Je bent waarschijnlijk in de war met ID

id

This name must be unique in a document.

class

Any number of elements may be assigned the same class name or names.

[ Voor 15% gewijzigd door Gersomvg op 29-07-2009 14:31 ]

[Mad Marty]

danielkraak schreef op woensdag 29 juli 2009 @ 14:25:
Ikzelf kreeg met meerdere divs van dezelfde class problemen. Het werd namelijk niet meer gezien als valid html, omdat je een div met een bepaalde class maar één keer mocht gebruiken. Misschien bedoelt de ts dat?

Dan zal je een id gebruikt hebben en geen class, classes kun je zonder problemen meerdere keren gebruiken. Zie ook de post van jbdeiman

edit:
Argh @ Gersompie

[ Voor 3% gewijzigd door Mad Marty op 29-07-2009 14:30 ]

[aequitas]

Geeft eens een uitgebreider voorbeeld van de code die je nu gebruikt. En van hoe je graag wil dat de code er uit komt te zien na het dynamisch invoegen.

[disjfa]

Anoniem: 52382 schreef op woensdag 29 juli 2009 @ 14:25:
[...]
In javascript via

code:

appendChild(newdiv);

newdiv is dan de class "wrapper" en voegt dus in één keer meerdere divs toe

Dus je weet wat je wilt. Je weet hoe je het wilt maken. Maak het dan gewoon.

Maak een javascriptfunctie maaklekkeredivzoalsikwil(); en voila.

[Anoniem: 52382]

disjfa schreef op woensdag 29 juli 2009 @ 14:30:
[...]

Dus je weet wat je wilt. Je weet hoe je het wilt maken. Maak het dan gewoon.

Maak een javascriptfunctie maaklekkeredivzoalsikwil(); en voila.

Klopt maar dan ga ik dus al die losse div's één voor één toevoegen. Wat ik mij dus afvroeg (topicstart) of het mogelijk is om in CSS één class te defineren zodat ik die toevoeg en gelijk alles op zijn plek staat.

[disjfa]

Hoe wil je met css html toevoegen?

[RuudvandeBeeten]

Anoniem: 52382 schreef op woensdag 29 juli 2009 @ 14:36:
[...]


Klopt maar dan ga ik dus al die losse div's één voor één toevoegen. Wat ik mij dus afvroeg (topicstart) of het mogelijk is om in CSS één class te defineren zodat ik die toevoeg en gelijk alles op zijn plek staat.

Voor mij (en ook andere) is jou probleem onduidelijk.

Geef een goed voorbeeld van wat je precies wilt bereiken.

Het aantal in te voegen DIVs zal niet afnemen als dat jou vraag is.

[Anoniem: 52382]

disjfa schreef op woensdag 29 juli 2009 @ 14:37:
Hoe wil je met css html toevoegen?

inderdaad kan dat niet, daarom zocht ik ook naar een andere optie. Blijkbaar is deze er niet dus moet ik ze één voor één toevoegen middels een javafunctie.

[Herko_ter_Horst]

Je kan in beperkte mate content toevoegen via :before en :after. Maar je kan via CSS geen zaken toevoegen aan de DOM structuur van je HTML document. Je kunt dus evt. wel een icoontje plaatsen of wat tekst toevoegen, maar een complete HTML structuur met divs kan niet. Zie ook: http://www.w3.org/TR/CSS2/generate.html

[ Voor 8% gewijzigd door Herko_ter_Horst op 29-07-2009 14:44 ]

[Anoniem: 52382]

RuudvandeBeeten schreef op woensdag 29 juli 2009 @ 14:38:
[...]

Voor mij (en ook andere) is jou probleem onduidelijk.

Geef een goed voorbeeld van wat je precies wilt bereiken.

Het aantal in te voegen DIVs zal niet afnemen als dat jou vraag is.

Ik heb bijvoorbeeld drie iconen die mooi gepositioneerd tov elkaar moeten worden. Ik zet daar dan een div omheen (wrapper) en ieder plaatje is ook een div. Op het moment dat ik op een button klik wordt wrapper (inclusief inhoud) op de pagina geplaatst (via appendChild). Iedere keer als ik weer op die knop klik moet hetzelfde gebeuren.

[Herko_ter_Horst]

Wat is er dan mis met de JavaScript oplossing die je zelf al bedacht had? Dat is namelijk Dynamic HTML...

[BtM909]

En laat eens zien welke code je hebt gefabriceerd (of geleend) om te bereiken wat je wilt bereiken? Lees Het algemeen beleid #quickstart eens door en hopelijk merk je zelf dat er een hele hoop schort aan de informatie die je steeds mondjesmaat geeft.

[disjfa]

Waarom is een plaatje een div Waarom is een plaatje niet gewoon een plaatje

Verder, maak zoals je zelf al 3 keer zegt een normale functie in JS die je gemakkelijk kan aanroepen. Jij bent de programeur hierzo. Je kan alles maken wat je wilt.

[Plague]

Dan zou ik het eerder server-side afhandelen met AJAX. Client-side dit soort dingen doen is vaak onnodig gecompliceerd.

[Anoniem: 52382]

disjfa schreef op woensdag 29 juli 2009 @ 14:47:
Waarom is een plaatje een div Waarom is een plaatje niet gewoon een plaatje

Verder, maak zoals je zelf al 3 keer zegt een normale functie in JS die je gemakkelijk kan aanroepen. Jij bent de programeur hierzo. Je kan alles maken wat je wilt.

Waarom moet het allemaal zo onvriendelijk? Ik weet dat het kan met een javascriptfunctie. Mijn vraag was of het makkelijker kan. Ik heb hier nog geen code voor omdat ik een nog oplossingsrichting aan het zoeken ben.

In ieder geval toch bedankt voor het meedenken.

[Anoniem: 52382]

Plague schreef op woensdag 29 juli 2009 @ 14:50:
Dan zou ik het eerder server-side afhandelen met AJAX. Client-side dit soort dingen doen is vaak onnodig gecompliceerd.

Ah, hier kan ik wat mee. Zal hier eens induiken

[disjfa]

Anoniem: 52382 schreef op woensdag 29 juli 2009 @ 14:53:
[...]
Ah, hier kan ik wat mee. Zal hier eens induiken

Ajax is ook gewoon javascript hoor Dus je vraag blijft dan gewoon even hard staan Wat er in de js nou gebeurt kan je zoals je zelf al kan bedenken zelf bedenken

Maar moet het clientside gebeuren?

[L01]

@disjfa: javascript != ajax, het ajax principe maakt ondermeer gebruik van javascript.

@TS: Maak je gebruik van een server-side scripting/programmeer taal zoals php of c#? Zo ja, dan is dit niet erg lastig om te maken.

[Bosmonster]

L01 schreef op woensdag 29 juli 2009 @ 14:59:
@disjfa: javascript != ajax, het ajax principe maakt ondermeer gebruik van javascript.

Hij zegt ajax = javascript en daar heeft ie helemaal gelijk in (al kun je natuurlijk gaan miereneuken, maar dat lijkt me niet zo'n goed idee).

Daarnaast is ajax compleet irrelevant volgens mij voor de vraag van TS.

Het gaat om het toevoegen van de div aan z'n document, niet waar je die data vandaan haalt.

[ Voor 20% gewijzigd door Bosmonster op 29-07-2009 15:06 ]

[Anoniem: 52382]

disjfa schreef op woensdag 29 juli 2009 @ 14:54:
[...]

Maar moet het clientside gebeuren?

Nee hoor, mag zeker serverside zijn.

[Plague]

Bosmonster schreef op woensdag 29 juli 2009 @ 15:02:
[...]


Hij zegt ajax = javascript en daar heeft ie helemaal gelijk in (al kun je natuurlijk gaan miereneuken, maar dat lijkt me niet zo'n goed idee).

Daarnaast is ajax compleet irrelevant volgens mij voor de vraag van TS.

Het gaat om het toevoegen van de div aan z'n document, niet waar je die data vandaan haalt.

Zo ver ik kan zien gaat het om het dynamisch toevoegen van knoppen. Knoppen hebben vaak ook wel een actie, en ik gok dat de toegevoegde knoppen ook steeds een andere actie/verwijzing moeten hebben. Uit dat oogpunt zou ik het persoonlijk server-side afhandelen. Daarmee bespaar je jezelf ook een hoop ellende met eventlisteners enzo.

[disjfa]

Anoniem: 52382 schreef op woensdag 29 juli 2009 @ 15:11:
[...]
Nee hoor, mag zeker serverside zijn.

Dan.... kan je ook een serverside taal gebruiken Bijvoorbeeld php en een heel simpel idee is include

Maar nu begrijp ik je probleemstelling steeds minder. Wat wil je nu precies. Wat ken je nu al? Heb je een vraag, of roep je wat in de ruimte en hoop je dat wij met een gouden ei aankomen.

[Anoniem: 52382]

Plague schreef op woensdag 29 juli 2009 @ 15:13:
[...]

Zo ver ik kan zien gaat het om het dynamisch toevoegen van knoppen. Knoppen hebben vaak ook wel een actie, en ik gok dat de toegevoegde knoppen ook steeds een andere actie/verwijzing moeten hebben. Uit dat oogpunt zou ik het persoonlijk server-side afhandelen. Daarmee bespaar je jezelf ook een hoop ellende met eventlisteners enzo.

Het gaat om lijnen en iconen. Een soort van flowdiagram met aan de iconen acties gekoppeld

[Anoniem: 52382]

disjfa schreef op woensdag 29 juli 2009 @ 15:17:
[...]

Dan.... kan je ook een serverside taal gebruiken Bijvoorbeeld php en een heel simpel idee is include

Maar nu begrijp ik je probleemstelling steeds minder. Wat wil je nu precies. Wat ken je nu al? Heb je een vraag, of roep je wat in de ruimte en hoop je dat wij met een gouden ei aankomen.

Ik ben nu nog met de frontend bezig. Hoe kan ik met drag & drop een soort van flow creeeren. Aan deze flow zitten dan weer acties die ik met ASP af wil handelen.

[L01]

Je blinkt niet echt uit in duidelijkheid TS, typ eens een mooi verhaal: Wat heb je nu en waar wil je naar toe? Wat moet het eindproduct worden en wat moet het kunnen?

[Anoniem: 52382]

L01 schreef op woensdag 29 juli 2009 @ 15:23:
Je blinkt niet echt uit in duidelijkheid TS, typ eens een mooi verhaal: Wat heb je nu en waar wil je naar toe? Wat moet het eindproduct worden en wat moet het kunnen?

Middels drag & drop een workflow creeeren. Op het moment dat ik een icoon drop worden de eigenschappen van dat icoon (en zijn positie) weggeschreven in de database. Als ik dus één icoon drop moet ik ook een verbinding maken naar het icoon wat er als staat (etc).

[disjfa]

Anoniem: 52382 schreef op woensdag 29 juli 2009 @ 15:28:
[...]
Middels drag & drop een workflow creeeren. Op het moment dat ik een icoon drop worden de eigenschappen van dat icoon (en zijn positie) weggeschreven in de database. Als ik dus één icoon drop moet ik ook een verbinding maken naar het icoon wat er als staat (etc).

Hoe zou je dat willen doen. Heb je al bedacht hoe je de zaken inelkaar wilt plakken.

Ik denk, met dit topic gelezen te hebben, dat je alles gewoom moet gebruiken wat er gezegd is. Dan zelf bedenken wat je eigenlijk aan het maken bent. En bedenken of jij de programeur bent die dat _kan_ maken. En zo nee. Zorg dan eerst voor voldoende kennis in je eigen hoofd zodat je wat je vraagt in het topic ineen keer zelf kan bedenken.

[Bosmonster]

Ok, stukje clientside scripting dus voor de drag/drop events en ajax calls voor het opslaan van de gegevens.

Kijk eens naar een library als jQuery en de drag/drop plugin van jQuery UI.

[Anoniem: 52382]

Bosmonster schreef op woensdag 29 juli 2009 @ 15:33:
Ok, stukje clientside scripting dus voor de drag/drop events en ajax calls voor het opslaan van de gegevens.

Kijk eens naar een library als jQuery en de drag/drop plugin van jQuery UI.

Precies hier zat ik aan te denken. Maar als ik dus een icoon drop moeten er gelijk met dat icoon lijnen en andere iconen verschijnen. Vandaar mijn oorspronkelijke vraag.

[Bosmonster]

Dat is een kwestie van wat elementen toevoegen. Met jQuery ook kinderspel.

Lijnen kan wel wat lastiger worden, met name schuine lijnen natuurlijk.

[Castor385]

Anoniem: 52382 schreef op woensdag 29 juli 2009 @ 14:10:
Ik wil in css één class defineren waar meerdere div's in zitten. Is dat mogelijk?

Ik wil namelijk een soort van herbruikbaar "blok" hebben om deze dynamisch toe te kunnen voegen.

Als je een class in CSS definieert, dan is dat per definitie dynamisch te kopieren/toe te voegen.

code:

<div class="blok">
 <p>tekst</p>
 <img src="plaatje1.jpg" alt="random tekst"/>
</div>

<div class="blok">
 <p>andere tekst</p>
 <img src="plaatje2.jpg" alt="random tekst"/>
</div>

code:

div.blok p { color: red;}
div.blok img { border: 0;}

Kopieerbaar blok met door CSS rood gemaakte tekst en plaatjes zonder omlijning: één class waar meerdere divs in zitten.

[BtM909]

Aantal dingen hacking_mike... Je verhaal wordt waziger met de post die je doet

1. Begin even duidelijk uit te leggen wat je precies wilt bereiken? Wat heb je zelf geprobeerd? Waar heb je op gezocht? Wat heb je gevonden? Waarom was dat geen oplossing voor je probleem?

2. Als je als laatste hebt gereageerd in een topic en weer wilt reageren binnen 24 uur, gebruik dan de knop ipv een nieuwe reply.

Ik geef je nog een kans om je verhaal te verduidelijken; anders gaat dit topic dicht en mag je het wellicht opnieuw proberen.

[Anoniem: 52382]

BtM909 schreef op woensdag 29 juli 2009 @ 15:57:
Aantal dingen hacking_mike... Je verhaal wordt waziger met de post die je doet

1. Begin even duidelijk uit te leggen wat je precies wilt bereiken? Wat heb je zelf geprobeerd? Waar heb je op gezocht? Wat heb je gevonden? Waarom was dat geen oplossing voor je probleem?

2. Als je als laatste hebt gereageerd in een topic en weer wilt reageren binnen 24 uur, gebruik dan de [afbeelding] knop ipv een nieuwe reply.

Ik geef je nog een kans om je verhaal te verduidelijken; anders gaat dit topic dicht en mag je het wellicht opnieuw proberen.

Ik ben al een stuk verder. Gooi maar dicht. Ben bang dat ik het niet veel duidelijker kan maken.

[Niemand_Anders]

Plague schreef op woensdag 29 juli 2009 @ 14:50:
Dan zou ik het eerder server-side afhandelen met AJAX. Client-side dit soort dingen doen is vaak onnodig gecompliceerd.

Euh, is AJAX niet per definitie client sided? Behalve prehistorische ASP websites ken ik verder geen webservers die server sided javascript uitvoeren.

En daarbij is Ajax gewoon javascript en de TS was opzoek naar een eenvoudigere methode dan via javascript de divjes toevoegen. En daarbij maakt het eigenlijk niet zo heel erg veel uit of je de div structuur nu client- of server sided maakt. De hoeveelheid werk is ongeveer evenveel.