Bitcoin Forum
November 09, 2024, 12:34:27 AM *
News: Latest Bitcoin Core release: 28.0 [Torrent]
 
   Home   Help Search Login Register More  
Bitcoin Forum > Bitcoin > Project Development > CSS help with micro-templating...
Pages: [1]
« previous topic next topic »
  Print  
Author Topic: CSS help with micro-templating...  (Read 1622 times)
Alex Beckenham (OP)
Full Member
***
Offline Offline

Activity: 154
Merit: 100


View Profile
June 01, 2011, 05:28:07 AM
 #1
Hi,

I don't even know if this is possible but it seems like it should be...

I'd like to build a 'building block' of html which will then be reused in multiple places in my page.

So let's say i have the following which I'd like to class as 'atom':

Code:
.atom {
   width:1px;
   height:1px;
   background-color:red;
}

Then have another class called a 'molecule'... Is it possible to define each molecule as containing exactly 3 atoms, without specifically hard-coding 3 atoms into every molecule div?

Then later what if I want to have:

<div class='goo'>
</div>

...which automatically displays 100 molecules.


So then after my CSS is set up, the HTML to display 300 atoms would simply be:

Code:
<html>
<body>
<div class='goo'>
</div>
</body>
</html>

Is that possible? How to do it?

Thanks Cheesy
http://btcriches.com/images/btcriches468.gif

 Need to contact me? Please read this.

 http://payb.tc/alex
Fiyasko
Legendary
*
Offline Offline

Activity: 1428
Merit: 1001


Okey Dokey Lokey


View Profile
June 01, 2011, 05:38:49 AM
 #2
Im assuming you can do some form of Targeting when wanting to refer to a set of rules that you created
http://bitcoin-otc.com/viewratingdetail.php?nick=DingoRabiit&sign=ANY&type=RECV <-My Ratings
https://bitcointalk.org/index.php?topic=857670.0 GAWminers and associated things are not to be trusted, Especially the "mineral" exchange
Alex Beckenham (OP)
Full Member
***
Offline Offline

Activity: 154
Merit: 100


View Profile
June 01, 2011, 05:39:19 AM
 #3
Quote from: JackRabiit on June 01, 2011, 05:38:49 AM
Im assuming you can do some form of Targeting when wanting to refer to a set of rules that you created

Guh?

I can't do much. I just want to define an atom has having a certain look (css, html, images, whatever) and then be able to place that many times in the html without specifically copying and pasting all of the HTML associated with that small block.

Does CSS have a system of sub-classes and sub-sub-classes?

This is how I envisage things:

Code:
.atom {
  width:1px;
  height:1px;
  background-color:red;
}

.molecule {
   atom
   atom 
   atom
}

.goo {
   molecule
   molecule
   ...
   molecule
   molecule
}

<div class='goo'>
</div>
http://btcriches.com/images/btcriches468.gif

 Need to contact me? Please read this.

 http://payb.tc/alex
spleeder
Newbie
*
Offline Offline

Activity: 51
Merit: 0



View Profile WWW
June 01, 2011, 11:26:01 AM
 #4
What you want to achieve has nothing to do with CSS. You can do it with Javascript.
Alex Beckenham (OP)
Full Member
***
Offline Offline

Activity: 154
Merit: 100


View Profile
June 01, 2011, 11:47:50 AM
 #5
Quote from: spleeder on June 01, 2011, 11:26:01 AM
What you want to achieve has nothing to do with CSS. You can do it with Javascript.

Okay no problem. I wasn't sure.

I've already built the site now anyway with a bit of copy+paste Smiley

Will hopefully have the new site ready in a day or so.
http://btcriches.com/images/btcriches468.gif

 Need to contact me? Please read this.

 http://payb.tc/alex
spleeder
Newbie
*
Offline Offline

Activity: 51
Merit: 0



View Profile WWW
June 01, 2011, 12:01:22 PM
 #6
With all the molecules and atoms you made me a bit curios. What is this website about?
Alex Beckenham (OP)
Full Member
***
Offline Offline

Activity: 154
Merit: 100


View Profile
June 01, 2011, 12:07:06 PM
 #7
Quote from: spleeder on June 01, 2011, 12:01:22 PM
With all the molecules and atoms you made me a bit curios. What is this website about?

It was just an example.

I have a dice game coming up. Each dice consists of a shadow plus a face, and each dice is in a set of 6, and there are 2 sets.

So I thought there may have been a more hierarchal way of arranging them in the page, but since I'm no CSS guru I've ended up just hard-coding pixel locations with the 'position:absolute' feature.

I'm much more at home doing the graphics in Photoshop than I am cutting it up to HTML afterwards, but the guy I usually hire to do that is busy on something else at the moment, so I'm slowly doing it myself Smiley
http://btcriches.com/images/btcriches468.gif

 Need to contact me? Please read this.

 http://payb.tc/alex
drgr33n
Sr. Member
****
Offline Offline

Activity: 308
Merit: 251



View Profile
June 01, 2011, 01:12:48 PM
 #8
Although this is probably better suited to be coded in Php java you can do this with CSS but use images instead of colors.
eturnerx
Member
**
Offline Offline

Activity: 84
Merit: 10


View Profile
June 01, 2011, 02:10:17 PM
 #9
OP what you want to do is not achieveable in HTML/CSS. You need javascript. I'd recommend you start out by learning jQuery. Start with beginner tutorials such as:
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers

What you're trying to do with the dice... well consider either using images. If you want to draw in javascript then consider using the HTML5 canvas element. Just be careful because HTML5 is only supported in newer browsers.
AntiVigilante
Member
**
Offline Offline

Activity: 98
Merit: 10



View Profile
June 01, 2011, 08:57:47 PM
 #10
Quote from: Alex Beckenham on June 01, 2011, 12:07:06 PM
Quote from: spleeder on June 01, 2011, 12:01:22 PM
With all the molecules and atoms you made me a bit curios. What is this website about?

It was just an example.

I have a dice game coming up. Each dice consists of a shadow plus a face, and each dice is in a set of 6, and there are 2 sets.

So I thought there may have been a more hierarchal way of arranging them in the page, but since I'm no CSS guru I've ended up just hard-coding pixel locations with the 'position:absolute' feature.

I'm much more at home doing the graphics in Photoshop than I am cutting it up to HTML afterwards, but the guy I usually hire to do that is busy on something else at the moment, so I'm slowly doing it myself Smiley


I take bitcoin (in BTC or dobits (.001 BTCs)). I could make this work.
Proposal: http://forum.bitcoin.org/index.php?topic=11541.msg162881#msg162881
Inception: https://github.com/bitcoin/bitcoin/issues/296
Goal: http://forum.bitcoin.org/index.php?topic=12536.0
Means: Code, donations, and brutal criticism. I've got a thick skin. 1Gc3xCHAzwvTDnyMW3evBBr5qNRDN3DRpq
AntiVigilante
Member
**
Offline Offline

Activity: 98
Merit: 10



View Profile
June 01, 2011, 11:58:32 PM
 #11
Micro templating is unnecessary.

You can use multiple classes in the class="" attribute.
Proposal: http://forum.bitcoin.org/index.php?topic=11541.msg162881#msg162881
Inception: https://github.com/bitcoin/bitcoin/issues/296
Goal: http://forum.bitcoin.org/index.php?topic=12536.0
Means: Code, donations, and brutal criticism. I've got a thick skin. 1Gc3xCHAzwvTDnyMW3evBBr5qNRDN3DRpq
Alex Beckenham (OP)
Full Member
***
Offline Offline

Activity: 154
Merit: 100


View Profile
June 02, 2011, 01:20:32 AM
 #12
Quote from: AntiVigilante on June 01, 2011, 08:57:47 PM
Quote from: Alex Beckenham on June 01, 2011, 12:07:06 PM
Quote from: spleeder on June 01, 2011, 12:01:22 PM
With all the molecules and atoms you made me a bit curios. What is this website about?

It was just an example.

I have a dice game coming up. Each dice consists of a shadow plus a face, and each dice is in a set of 6, and there are 2 sets.

So I thought there may have been a more hierarchal way of arranging them in the page, but since I'm no CSS guru I've ended up just hard-coding pixel locations with the 'position:absolute' feature.

I'm much more at home doing the graphics in Photoshop than I am cutting it up to HTML afterwards, but the guy I usually hire to do that is busy on something else at the moment, so I'm slowly doing it myself Smiley


I take bitcoin (in BTC or dobits (.001 BTCs)). I could make this work.

Thanks, pretty much finished with the graphics and HTML now. It's mainly PHP work from here onwards.
http://btcriches.com/images/btcriches468.gif

 Need to contact me? Please read this.

 http://payb.tc/alex
lemonginger
Full Member
***
Offline Offline

Activity: 210
Merit: 100


firstbits: 121vnq


View Profile
June 03, 2011, 06:49:19 AM
 #13
a bit off topic, but if this is the way your brain naturally wants to go, look into using LESS

http://lesscss.org/
Pages: [1]
  Print  
Bitcoin Forum > Bitcoin > Project Development > CSS help with micro-templating...
 « previous topic next topic »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2006-2009, Simple Machines Valid XHTML 1.0! Valid CSS!