Hi,
Not really sure exactly where I should / could have put this...
Generally this is an inquiry about what the CSS should look like to accomplish my goal.
It also ties in with how the modx page receives this information.
I am looking for the ’best way’ to accomplish this, and realize that my attempts may have been made with false presumptions in how I structured my template, css, modx content.
With this in mind, I am hoping the solution will be one, where the ’page builder’ would need to know next to ZERO about modx / html to accomplish the desired results... (basically just enough to put in the pictures / text).
Right now, I have it set up in modX using 8 template variables.
In the template I have put it inside the content div, for now, and overide its default positioning (to the left some pixels)
Here is the template information that is relevant.
<div id="pictureGroups">
<div id="picGroup1">
<div id="leftPic">
[*#leftPic*]
</div>
<div id="rightPic">
[*#rightPic*]
</div>
</div>
<div id="picGroup2">
<div id="leftPic">
[*#leftPic2*]
</div>
<div id="rightPic">
[*#rightPic2*]
</div>
</div>
<div id="picGroup3">
<div id="leftPic">
[*#leftPic3*]
</div>
<div id="rightPic">
[*#rightPic3*]
</div>
</div>
<div id="picGroup4">
<div id="leftPic">
[*#leftPic4*]
</div>
<div id="rightPic">
[*#rightPic4*]
</div>
</div>
</div>
So as you see above, I have leftPic1-4 and rightPic1-4 template variables. Likewise in my CSS I have similar. I have broken each set of pictures into groups, group 1,2,3, and 4. group one contains leftpic1 and rightpic1, etc. Now, leftpic1 may contain more than 1 picture, as can rightpic1... This is where alot of my problems come from.. (but certainly not all of them).
/* Picture Frame Templates */
#pictureGroups {
position:relative;
margin:0;
padding:0;
top:0;
left:0;
float:left;
}
#pictureGroups img {
position:relative;
padding: 0px 10px 0px 3px;
}
#picGroup1{
position:relative;
margin: 20px 0px 0px 0px;
padding: 0px 0px 10px 0px;
}
#picGroup2{
position:relative;
padding: 0px 0px 10px 0px;
}
#picGroup3{
position:relative;
padding: 0px 0px 10px 0px;
}
#picGroup4{
position:relative;
padding: 0px 0px 90px 0px;
}
#leftPic{
position:relative;
top:0px;
left:-160px;
width:349px;
border: 0 solid #000;
border-bottom: 1px;
}
#rightPic{
position:absolute;
top:0px;
left:250px;
width:349px;
border: 0 solid #000;
border-bottom: 1px;
}
I have mocked up my desired output... I cannot get things to behave this way. with rightpic absolute, it ignores if more than one photo exists on the right side, with leftpic relative, it colapses all of the images ontop of eachother, etc etc.
I’ve done some google searches looking for CSS ’table’ like layout etc.. but have not found the resource that will help me put this together... especially taking into consideration the modX element.
I’ve attached an image of how the output should behave...
The line separator part is not functioning at all in my code and has been subtituded with borders to the divs, just so i can see where each group is ending, atm.
Some problems with the text may arise from modX putting paragraph tags around the images... This seems to be default behavior for the ’rich text’ template variable?
I realize there is an image template variable, but as some ’groups’ contain more than 1 image per side, this was not desirable.
Thanks in advance,
Guy
--edit
(( I have found a couple links that seem to help me on the vertically aligned (centered) left and right sides...
http://blog.themeforest.net/tutorials/vertical-centering-with-css/ and
http://www.brunildo.org/test/vertmiddle.html )), Continuing to work on this trying to find a solution on my own as well... Will post back as progress is made...
