- Moderated by:
- Support Team
Goto page: [-1] 1 - 2 - 3 [+1]
Module Development HOWTO
-
- rank:
-
Helper
- registered:
- November 2002
- Status:
- offline
- last visit:
- 29.05.07
- Posts:
- 203
come
Please use tableless XHTML-CSS layout for the templating examples instead of the table-layout the ModGen creates.
The latest documentations should use the most recent standards so that upcoming modules from newbies will support the design philosophy of web-standards-compliance that the PostNuke CMS is following.
This is pissing me off. I've made huge progess on my module and I have a pretty solid understanding of the PostNuke Module system, but CSS is just plain crazy. I know it's supposed to be better, but I'm trying to go table-less for all of my templates and it seems like the user_display template is impossible.
I want something similar to a standard news-index block with a header, footer, and a content section with an image in it. In the header, I want a piece of text left-justified and a piece of text right justified, which would be two cells in a table. The content area is just an open free-form text area with an image anchored to the top-right corner. The footer needs to have a piece of text left-justified, a piece of text in the center, and a piece of text right-justified.
I have been reading CSS articles about the box model for days and I'm about to give up and create some f#$%@#$ing tables. All I end up with is seemingly random-placed divs and spans all overlapping each other. I obviously don't understand CSS completely, but this is putting a complete halt to my module development. Here is what I'm trying to do. I can do this with tables. :twisted:
Code
------------------------------------------------------------------------------------
|Opponent Match Date|
------------------------------------------------------------------------------------
|Content area (match notes) | |
| | Image |
| | |
| |-----------------|
| |
| |
| |
------------------------------------------------------------------------------------
|Elapsed time: nr Rating Change: nr Admin Options|
------------------------------------------------------------------------------------
-
- rank:
-
Helper
- registered:
- November 2002
- Status:
- offline
- last visit:
- 29.05.07
- Posts:
- 203
I would really appreciate it if you could. I'm just going to leave it plain and move on to the next function. I figure I can come back and learn CSS as well as I can after I get the module functional. I'll watch the thread.
Thanks for the offer.
-
- rank:
-
Helper
- registered:
- November 2002
- Status:
- offline
- last visit:
- 29.05.07
- Posts:
- 203
Lol. Just to give you an idea of how badly I'm mangling my CSS, check this out:
Woot!
Note: I have in the template right now, so that's why your popup blocker might complain.
-
- rank:
-
Professional
- registered:
- December 2002
- Status:
- offline
- last visit:
- 24.08.08
- Posts:
- 1588
here ya go :)
Quote
Opponent
Match Date
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
Elapsed Time: nr
-Lobos
--
-Lobos
Professional PHP Framework Services: Concept, Development and Deployment
-
- rank:
-
Helper
- registered:
- November 2002
- Status:
- offline
- last visit:
- 29.05.07
- Posts:
- 203
Sweet! Thanks. I'll slam this in today and check it out. I really appreciate the contributions and I love these forums. I guess my next project is learning XHTML/CSS. Maybe it should have been my last project. :)
-
- rank:
-
Helper
- registered:
- November 2002
- Status:
- offline
- last visit:
- 29.05.07
- Posts:
- 203
Ok. Updated it and it looks great. I had to use another hack to get the image to stop overlapping into the footer area. I was going to use min-height on the image, but found that MSIE doesn't support it, so I used This method of achieving the same results with valid CSS.
Essentially, I added another empty div after the content with this style:
Code
.content_clear {
clear:both;
height: 1px;
overflow: hidden;
}
Click the URL again and you will see it in all its splendor. Many thanks to Lobos and Topiatic for steering me away from the cliff's edge.
To get this topic back on topic, I'll mention that I have been taking notes as I create this module and I have lots of material for the Module Dev HOWTO.
-
- rank:
-
Steering Committee
- registered:
- December 2002
- Status:
- offline
- last visit:
- 23.11.08
- Posts:
- 13415
I'd add some padding to your image, and also perhaps your news container. Otherwise, looks great.
--
Regards,
Simon
itbegins.co.uk - Zikula Consulting
Please read the Support Guide
-
- rank:
-
Professional
- registered:
- November 2003
- Status:
- online
- Posts:
- 1676
jbirchett
Essentially, I added another empty div after the content with this style:
Code
.content_clear {
clear:both;
height: 1px;
overflow: hidden;
}
That's essentially the same as:from the above example with the style i followed up with... should be anyways.Code
<div class="clear"><!-- --></div>
--
Under Construction!
-
- rank:
-
Helper
- registered:
- November 2002
- Status:
- offline
- last visit:
- 29.05.07
- Posts:
- 203
AmmoDump
How nice the kids fisrt day of preschool and the Mad F**kers all on the same page...
How lovely...
Lol. This isn't a public module yet and I'm having fun with it while I'm developing. And besides, how do you think I got the kids? ;)
I admit I didn't try using the clear style first, but it looked like I needed that 1 pixel height property to make it work. I'll try it with the plain clear style and see if it still works.
Thanks again.
-
- rank:
-
Professional
- registered:
- December 2002
- Status:
- offline
- last visit:
- 24.08.08
- Posts:
- 1588
Topiatic
Very nice Lobos... well, other than forgetting to defining the class="clear" :
Quote
.clear{clear:both;}
Thanks,
It didn't actually need a clear class here, just the divs - sometimes they need to be cleared, sometimes not. Actually I was suprised this acutally worked on the first try - I must have actually learnt something over the years...
-Lobos
--
-Lobos
Professional PHP Framework Services: Concept, Development and Deployment
Goto page: [-1] 1 - 2 - 3 [+1]
|
