- This topic is empty.
May 23, 2012 at 12:16 pm #38188
I’m still relatively new to CSS. My experience with PHP is limited to a simple email form project about 12 years ago. My experience with JS is that I can copy others’ examples into my html.
I am developing a site for legal advice on a specific topic for a lower-lit audience. It is a simple 1 column wireframe and will have around 15 or 20 pages. I would love to have a static div box on the right (no problem for me to make the div and place it) so that if a user clicks on a legal term of art in the body of the text, that static div is populated with that term and its definition (predetermined). I think the set of terms would be limited to less than about 50.
I have no idea where to even get started with this idea. Will I have to use a backend database? Is there a way that I can do this only in CSS? If so, any ideas on how to start? I don’ t even know what to call what I’m looking for. Thanks for any help.May 23, 2012 at 12:17 pm #103336
One last question – is this idea just way over my untrained head?May 23, 2012 at 12:38 pm #103338theacefesMember
I would say no, that it’s not over your head ;) but you should probably iron out the basics of web markup before you try something like this. CSS is for layout – no text or content will be produced with it – it’s all about styling content. You could use PHP to help you populate that static box either with a text file that can be read line by line or with a database.
Thanks – I do minimally understand how they work. I was thinking that with so few terms to define that I could create a class/id for each of them with “content” defined in the css to include their definition, then use some kind of script(?) to display that content. I wasn’t sure about if it was possible to handle it this way or not.
I created a faq with the checkbox hack and was using that as inspiration. I suppose I could use that hack and have the definition expand in-line with the other text, but that seems a bit less elegant to me.May 24, 2012 at 10:01 am #103399
You could just include the definitions in the markup (using HTML5) by using the
Definition: To define the meaning of a word, phrase or term.
Have you heard that HTML is the predominant markup language for Web pages?
Then style them however you want.May 24, 2012 at 10:26 am #103401
Thanks – I’ll try to work it in!May 24, 2012 at 11:32 am #103410
I found the following JS that I will incorporate:
Then use the following:
Click on a term in a pink box for its definition.
With some silly css like
border: thin solid rgba(153,255,51,1);
Are there any problems with this approach that should make me avoid it (other than the really ugly pink boxes with green borders)?May 24, 2012 at 1:37 pm #103422
Personally, I think a better idea would be to use a tooltip script. This simplifies your HTML markup and separates layout from function:
Hover on a term in a pink box for its definition.
Code for the head of your document
If you prefer a different tooltip script, there are a ton to choose from… the script shown above to initialize the tooltip will be slightly different.May 24, 2012 at 2:04 pm #103423
I thought about that approach and I think it would work well, but in this particular context I think it would be more helpful to be able to leave the definition visible while the user scrolls around, or allow them to cut & paste for printing or just print the page with the definition visible.May 24, 2012 at 2:07 pm #103425
Tooltips can be made “sticky” and remain open until the user closes them.
- The forum ‘CSS’ is closed to new topics and replies.