CSS en ID's

Status
Niet open voor verdere reacties.
L

lauraahh

Gebruiker
Lid geworden
14 aug 2012
Berichten
47
Beste allemaal,

Mijn werk heeft de moeilijkste vragen voor mij bewaard, voor als ik terug kwam van vakantie.

Ik heb meerdere pagina's met blokjes, die gemaakt worden daar de zelfde klas, daarbij hebben ze ook een ID meegekregen, zodat je de blokjes apart kan aanpassen.

Nou wil ik dat op 1 van de 7 pagina's de kleur van blokjes veranderen. Maar als ik het ID van het eerste blokje aanpas, verandert het eerste blokje op elke pagina. Is het mogelijk om daar verschil in te laten maken. dus dat je de titel van de pagina mee geeft bv.

Graag hoor ik jullie ideeën
 
Maak een tweede .css bestand aan? Link deze opnieuw door middel van deze code:
Code: 
<link href="style2.css" rel="stylesheet" type="text/css">

Verander daar de opmaak, en link deze alleen aan de pagina waar het blokje veranderd moet worden.
Nu staat één pagina ingesteld, als een andere kleur. Anders worden alle pagina's aangepast
doordat je één .css bestand hebt. Nu heb je er twee, en deze link je aan een pagina.
Bijvoorbeeld aan home.html.
Zoek deze code op (meestal bovenaan) en wijzig dit na de naam van je tweede .css bestand.
Code: 
<link href="style2.css" rel="stylesheet" type="text/css">

Dit zou moeten werken.

Edit: Het onderstaande bericht zou ook een optie kunnen zijn, is wat eenvoudiger denk ik.
 
Laatst bewerkt:
Multiple classes

Je kunt wel meerdere classes meegeven aan de blokjes

bijvoorbeeld:

<div class="class1 page1 goalx">
<div class="class1 page2 goaly">
<div class="class1 page3 goalx">

Je kunt dan in de bijbehorende CSS gebruik maken van alle classes en toch per <div> of per pagina flexibel blijven.
In bovenstaand voorbeeld kunnen alle divs gebruik maken van dezelfde 'class1' voor gemeenschappelijke kenmerken
en van de 'page...' classes voor kenmerken die voor specifieke pagina's gelden.
 
Kun je niet gewoon een class aan de pagina zelf toevoegen?
 
de website is op gezet met het CMS systeem van unit4, Hierdoor worden de pagina's vanuit 1 pagina op gezet.

/websolutions/?wsmt=wshomepageproductgroups&wssiproductgroup=2 zo ziet de link er uit achter de domein naam.
per pagina verandert alleen het cijfer.

De pagina wordt opgemaakt in wshomepageproductgroups. en wordt als volgt gedefinieerd.

<asp:Repeater ID="rptProductgroups" runat="server">
<ItemTemplate>
<wsfg:div id="divBox" runat="server" cssclass="left home-productgroepbox">
<div class="title-overflow" >
<asp:HyperLink ID="hypProductGroup" runat="server" CssClass="home-productgroepbox"></asp:HyperLink>
</div>
<asp:HyperLink ID="hypProductGroupImage" runat="server" CssClass="WSProductgroup"><wsfg:AutoImage runat="server" id="imgProductGroup" DesiredWidth="175" /></asp:HyperLink>
<asp:BulletedList ID="blstProductGroupChilds" runat="server" DisplayMode="Hyperlink"></asp:BulletedList>
</wsfg:div>
</ItemTemplate>
</asp:Repeater>

html ziet er dan als volgt uit

<div name="divBox" id="ctl00_ctl00_ctl00_MainContent_ModuleContent_WSModule1_WSHomepageProductgroups_89_21_rptProductgroups_ctl00_divBox" class="left home-productgroepbox">
<div class="title-overflow">
<a id="ctl00_ctl00_ctl00_MainContent_ModuleContent_WSModule1_WSHomepageProductgroups_89_21_rptProductgroups_ctl00_hypProductGroup" title="Antislip" class="home-productgroepbox" href="default.aspx?wsmt=wshomepageproductgroups&amp;wssiproductgroup=21650">Antislip</a>
</div>

<ul id="ctl00_ctl00_ctl00_MainContent_ModuleContent_WSModule1_WSHomepageProductgroups_89_21_rptProductgroups_ctl00_21650">
<li><a href="default.aspx?wsmt=wsitemlist&amp;wsref=wshomepageproductgroups&amp;wssiproductgroup=216500100">Antislip Stop-tex</a></li><li><a href="default.aspx?wsmt=wsitemlist&amp;wsref=wshomepageproductgroups&amp;wssiproductgroup=216500050">Antislip structuur</a></li><li><a href="default.aspx?wsmt=wsitemlist&amp;wsref=wshomepageproductgroups&amp;wssiproductgroup=216500000">Antislip normaal</a></li>
</ul>
</div>
 
De inhoud van de pagina's waar al die blokjes op staan, wordt opgebouwd naar aanleiding van een gekozen 'product-groep'.

Maar alleen de inhoud verandert n.a.v. de gekozen productgroep.
niet de opmaak.

Met andere woorden:
als je van één pagina, dus van één specifieke productgroep, de opmaak anders wilt,
zul je er voor moeten zorgen dat de code van de product-groep invloed uitoefent op de gekozen opmaak (in casu: andere kleur)

Dat zal niet lukken zonder ingrijpende verandering in het CMS zelf.
Dus: contact opnemen met Unit4



Ik vind overigens de kleuren van alle pagina's enigszins donker en somber.
 
tecsman zei:
Ik vind overigens de kleuren van alle pagina's enigszins donker en somber.
Klik om te vergroten...

Welke website heb je gekeken, sinds ik het bedrijf en adres niet heb vermeld.

Verder was ik al bang voor je antwoord, dat ga ik dan maar aan mijn manager door geven.
 
lauraahh zei:
Welke website heb je gekeken, sinds ik het bedrijf en adres niet heb vermeld.
Klik om te vergroten...
Beetje gegoogled op de productnamen lijkt me, ik vind het trouwens wel een raar CMS, alle pagina's lijken in een formulier te staan.
(dat sombere vind ik dan wel weer meevallen)

EDIT: Nu ik er over nadenk, dat formulier biedt mogelijk wel een oplossing voor je probleem. Het is geen mooie oplossing en in oude versies van IE werkt het mogelijk niet, maar goed.

De formulieren waar de pagina's in staan hebben allemaal een action attribuut, voor een deel zijn die uniek. Ik kan niet precies zien welke pagina je aan wilt passen maar als die pagina ook een unieke action voor het formulier heeft kun je daar gebruik van maken, als volgt.
Code: 
form[action$="X"] .Y{
background:Z;
}
Waarbij X het laatste (unieke) deel van de action is, Y is de class van de divs die van kleur moeten veranderen en Z is de kleur. Deze CSS regel is dus alleen van toepassing op elementen die in een <form> staan waarvan de action eindigt op X. Een voorbeeld:
Code: 
form[action$="wssiproductgroup=2"] .home-productgroepbox .title-overflow{
background:red;
}
Dit maakt de achtergrond van de kopjes op de "Vloeren" pagina rood.
 
Laatst bewerkt:
@Lauraahh
Als je op de producten zoekt in Google
zijn er niet zo veel websites met /websolutions/ in de URL.
 
Naarling zei:
Beetje gegoogled op de productnamen lijkt me, ik vind het trouwens wel een raar CMS, alle pagina's lijken in een formulier te staan.
(dat sombere vind ik dan wel weer meevallen)

EDIT: Nu ik er over nadenk, dat formulier biedt mogelijk wel een oplossing voor je probleem. Het is geen mooie oplossing en in oude versies van IE werkt het mogelijk niet, maar goed.

De formulieren waar de pagina's in staan hebben allemaal een action attribuut, voor een deel zijn die uniek. Ik kan niet precies zien welke pagina je aan wilt passen maar als die pagina ook een unieke action voor het formulier heeft kun je daar gebruik van maken, als volgt.
Code: 
form[action$="X"] .Y{
background:Z;
}
Waarbij X het laatste (unieke) deel van de action is, Y is de class van de divs die van kleur moeten veranderen en Z is de kleur. Deze CSS regel is dus alleen van toepassing op elementen die in een <form> staan waarvan de action eindigt op X. Een voorbeeld:
Code: 
form[action$="wssiproductgroup=2"] .home-productgroepbox .title-overflow{
background:red;
}
Dit maakt de achtergrond van de kopjes op de "Vloeren" pagina rood.
Klik om te vergroten...

Wow dit werkt inderdaad, nu wel ik nog dat elk blokje op die pagina een andere kleur heeft. Moet ik dan het ID van het blokje mee geven?.
Het gaat om pagina 7 ;)

Een vb van het id = ctl00_ctl00_ctl00_MainContent_ModuleContent_WSModule1_WSHomepageProductgroups_89_21_rptProductgroups_ctl00_divBox

Het dik gedrukte gedeelte verandert bij elk blokje,
 
Laatst bewerkt:
Ah, als je ieder blokje een andere kleur wilt geven moet je in plaats van .home-productgroepbox inderdaad #belachelijklangIDvandediv gebruiken. Als het in plaats van de titel, om het nu witte gedeelte gaat moet je .title-overflow uiteraard weglaten.
 
Ik heb het ID ook niet verzonnen. Ik werk hier nog maar kort, maar die namen van unit4 slaan af en toe nergens op.

Code: 
form[action$="wssiproductgroup=2"] .ctl00_ctl00_ctl00_MainContent_ModuleContent_WSModule1_WSHomepageProductgroups_89_21_rptProductgroups_ctl00_divBox .title-overflow{
background:red;
}

Doet het niet, wat doe ik fout.

ook met een # ervoor doet hij het niet
 
Ik heb gewoon een plaat voor mijn hoofd en kijk op de verkeerde pagina.
Dank jullie wel voor de snelle oplossingen.

gr laura
 
Naarling zei:
Mooi dat het opgelost is :)


Weet ik, was ook geen kritiek op jou maar op dat CMS.
Klik om te vergroten...

Dat weet ik dan ook weer.
Toen ik hier net begon moest ik ook even vloeken naar unit4.
Ze hebben meerdere CSS pagina's en welke moet je hebben om het aan te passen.
scripts moet ik heel moeilijk voor doen om ze werkend te krijgen.
En ga zo maar door.

En dan zie je in je vrije tijd ook nog eens dat logo tijdens nederlands voetbal, bij de reclame logos.

Maar nogmaals super bedankt.
 
Nog een klein probleempje waar ik tegen aanloop is de tekst kleur.
Bij sommige blokken moet deze zwart.

hoe krijg ik dat voor elkaar?
 
Het ziet er fleurig uit.

Maar,
ik heb nog een vraag in het kader van usability.
Wat is de functie van de kleuren?
Op het eerste gezicht zou ik als bezoeker verwachten dat kleuren een onderscheid aangeven tussen verschillende soorten producten,
maar niet alle roeden hebben dezelfde kleur evenmin als railroeden.
Ook de gebruikte materiaalsoorten (aluminium, Chroom,...) komen niet overeen met gelijke kleuren.

Met andere woorden: wat is de functie van de kleuren
En als het er alleen om gaat om het geheel wat vrolijker te maken, schenk dan aandacht aan bovenstaande opmerkingen. Kleuren hebben in de beleving van bezoekers al gauw een betekenis.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan