Forum Groups
  All forums
    Help & Feedback
      Work in progress
      Finished Art
      Non-Max related

Maxunderground news unavailable

CSS type placement question,......
show user profile  Dr. Jim
OK...using DW CS4 (and please....this is how I am doing it, point in telling me to use something else).

I have a box container created to contain my site. Everything is in place with regards to imagery and video files...etc..etc.
NOW, I have various bits of type to place around, 3 columns...and 3 headers above each column.

The only way I (total css noob) can get this working is to create my type and then create a new Class to define it, in this class I adjust the type and use the position absolute property to place my type within the container.
This all works fine.

BUT - My question is that since the position is defined in the class, I have to create a new Class for every bit of type at its new position. So 3 unique headers and 5 uniquely placed columns to type = 8 Classes to be defined to get them where they need to be on screen.

I am guessing I am doing this all wrong?
Any easy to explain help for CSS noob Dr. Jim?
read 482 times
8/6/2009 6:47:26 AM (last edit: 8/6/2009 6:47:26 AM)
show user profile  ScotlandDave
You can have for example one header class and one content class, then create ur position styles inline for each element. For example:

Website | Blog | Contact | Vimeo

read 477 times
8/6/2009 6:53:29 AM (last edit: 8/6/2009 6:56:00 AM)
show user profile  ScotlandDave
^^ Updated with image rather than code..

Website | Blog | Contact | Vimeo

read 467 times
8/6/2009 6:57:05 AM (last edit: 8/6/2009 6:57:05 AM)
show user profile  MrPumpernickel
However, cleanliness of code dictates that you don't place the stylesheet attributes in the html tags but rather point it to a class or id.

You're not doing it wrong, if you have eight different elements that need their own attributes you need to define eight classes, or sub-classes/variants.

YouTube Channel

read 459 times
8/6/2009 7:10:31 AM (last edit: 8/6/2009 7:11:57 AM)
show user profile  Dr. Jim

The 8 elements actually have the same font, and style......BUT they are in 8 different precisely located locations.

So I created 1 class for the first one,....then I am just duplicating it and assigning to each individual group of text and poitioning them accordingly.

So the real key here is the position. The main box model is centered on the page via left/right margin auto.

Then all this type needs to go in the box in very precise locations. But ofcourse stay releveant to the box model so it all stays centered and in place over the BG.

It all works great,...just wasnt sure if I needed a different class for every text group that has a unique position. Since the position is hard-wired into the Class seemed that I needed a different class for each individual type group, otherwise everything sits in the same place..

btw - If anyone cares enough to look at the code, its at
(this is blocking layout only, not design...and I'm not designing it anyway)
read 447 times
8/6/2009 7:37:13 AM (last edit: 8/6/2009 7:46:16 AM)
show user profile  Loud
You could do this without 8 specific classes, but that aside, the approach you're using will work. If everything is the same except the position you can put the shared styles on a class and put the positions on an id.

.myclass { font-size: 12px; color: orange; position: absolute; }
#instance1 { top: 10px; left: 20px; }
#instance2 { top: 10px; left: 60px; }
<div id="instance1" class="myclass">Blah</div>
<div id="instance2" class="myclass">Blah</div>

Better yet you would get the shared styles to cascade so you don't have to define a class at all. Good luck!

read 436 times
8/6/2009 9:27:15 AM (last edit: 8/6/2009 9:29:35 AM)
show user profile  Dr. Jim

That is pretty cool loud!
That 'looks' like just what I want. Now ofcourse I will see if I can implement it since I have crap CSS skills and am using DW CS4.....

But that code looks really, really straightforward...
read 425 times
8/6/2009 9:38:42 AM (last edit: 8/6/2009 9:45:32 AM)
#Maxforums IRC
Open chat window