Question

Is there something that will have the logical effect of adding the inline position tags for each of a multitude of absolute elements while defining all of the other style elements in a CSS file or style elements in the section of the page? Simply having a <div id="divIDname" style="left:100px;top:40px;"> doesn’t seem to be valid but the logic of having the small inline style append/override the ‘CSS ID’ style elements is what I am looking to achieve.

I am making a day planner for an aviation booking tracking system type layout and have broken up 17 hours of the day into elements representing 15 minute blocks, times by multiple aircraft (each A/C on it’s own line). I have made each one an absolute reference inside a single parent to ease placement on the page of the planner as a whole.

I am going to layer the actual bookings as higher layered elements over this planner so as such I need to know exactly where each of the 15 minute elements is located within the parent element. To this end I have placed each planner 15 minute element using absolute positioning (coordinates constructed mathematically and html generated within PHP loops, etc).

My problem becomes how to apply different border styles and :hover pseudo-classes to the elements without defining an individual CSS style for each and every 15 minute block element simply because each has it’s own unique left and top attributes. I am using inline styles for it as a workaround, but the HTML output and readability of the PHP code makes it hard to troubleshoot logic errors in my PHP scripts due sheer volume of output, and I can’t apply the :hover pseudo-class inline either, and as aircraft are added and removed from the list, the number of lines (and thus 15 minute block elements) will change as new rows are added or removed.

Server is a simple WAMP implementation with no jscript or other programming scripts other than PHP.

I’m not a seasoned programmer, just took on a fairly challenging project to try to re-learn and build on my sketchy HTML & PHP knowledge so please be gentle with the answers… 🙂

Any help would be greatly appreciated.

Regards

Braedon King,
Townsville, Australia

Answer 1

The simple answer seems to be inline style extends css classes, and doesn’t work with ID type css styles. Using class instead of id seems to have done the trick.

<div class="xyz" style="left: 100px; top:100px;">. Works

<div id="xyz" style="left: 100px; top:100px;">. Doesn’t work.

Thanks all for the responses that lead me to that.

Regards

Braedon