As Garryn made the mistake to tell me that problems regarding CSS are welcome here
and I assume here are so many experts in templating and CSS I’d like to ask you for help on my own handmade template.
I’ve developed it to transform the static, frame based version of
http://www.karatekunst.net to modx, without the use of tables. The layout is quite simple, it consists of a header and a content area, which is devided in two columns, the left one holding only one image, the right one the text. A border should be around header and content.
As fixed size layouts are not my favorite, I did two version, one fixed, one resizable (non-fixed). You can see them here:
http://bischof.homelinux.net/karatekunst-table-less-fix.htm
http://bischof.homelinux.net/karatekunst-table-less-variabel.htm
(CSS is still inline, for debugging purposes, I will use @import later).
Problem:
In IE everything looks like it should. At home, with my firefox or konqueror, there are some problems:
- The border around header and content is gone
- With non-fixed design, text is positioned under the image, not to the right
- If there’s less text than the image’s height, the page border is drawn under the image
Are these problems visible for you too?
Within modx, the body of the template looks like this:
<BODY>
<!-- start all content -->
<DIV id=page>
<!-- start header -->
<!-- nothing here for karatekunst.net -->
<!-- Start Menü -->
<DIV id=menu>
<!-- menue-snippet from modxcms: -->
[[DropMenu?id=0]]
</DIV>
<!-- end menue -->
<!-- end header -->
<!-- content -->
<DIV id=left>
<!-- standard image left, own TV -->
<img width="375" height="400" src="[*image-left*]">
</div>
<DIV id=content>
[*content*]
<br />
</DIV>
<!-- end content -->
</DIV>
<!-- end all content -->
</BODY>
It think the problem should be with the CSS of the two colum-divs (#content and #left), here is the shortened style definition. If you need the complete CSS, please have a look in the source of my example links:
<STYLE type=text/css>
/* hier noch inline, weil's einfacher zum Debuggen ist, später:
@import url("assets/site/karatekunst-table-less.css"); */
/* Scrollbalken im Standardmode müssen im HTML-Tag definiert werden
-> Seite ist im Standardmode, s. Doctype-Definition */
html {
SCROLLBAR-FACE-COLOR:#880000;
SCROLLBAR-HIGHLIGHT-COLOR:#880000;
SCROLLBAR-SHADOW-COLOR:#e7d8bf;
SCROLLBAR-3DLIGHT-COLOR:#e7d8bf;
SCROLLBAR-ARROW-COLOR:#e7d8bf;
SCROLLBAR-DARKSHADOW-COLOR:#880000;
SCROLLBAR-BASE-COLOR:#880000;
scrollbar-track-color:#880000;
}
BODY {
FONT-SIZE:12px;
FONT-FAMILY:Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR:#880000;
TEXT-ALIGN:center;
COLOR: #e7d8bf;
/* Scrollbalken im Quirksmode gehören in den BODY-Tag, hier nicht benutzt */
SCROLLBAR-FACE-COLOR:#880000;
SCROLLBAR-HIGHLIGHT-COLOR:#880000;
SCROLLBAR-SHADOW-COLOR:#e7d8bf;
SCROLLBAR-3DLIGHT-COLOR:#e7d8bf;
SCROLLBAR-ARROW-COLOR:#e7d8bf;
SCROLLBAR-DARKSHADOW-COLOR:#880000;
SCROLLBAR-BASE-COLOR:#880000;
scrollbar-track-color:#880000;
}
/* Überschriften und Text */
H1 {
FONT-SIZE:12px;
MARGIN:30px 0 0 0;
BACKGROUND-COLOR:#e7d8bf;
COLOR:#880000;
text-align:right;
padding: 2px 5px;
}
H2 {
FONT-SIZE:14px; COLOR:#e7d8bf;
}
H3 {
FONT-SIZE:14px; COLOR:#e7d8bf;
}
P {
MARGIN-TOP:20px;
}
/* CSS für automatisch generiertes Menü */
#menu {
CLEAR:right;
PADDING-RIGHT:0px;
BORDER-TOP:#000000 1px solid;
PADDING-LEFT:0px;
PADDING-BOTTOM:10px;
COLOR:#e7d8bf;
PADDING-TOP:40px;
TEXT-ALIGN:center;
BACKGROUND-COLOR:#000000
}
.topnav {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
/* linker Bereich mit Bild */
#left {
FLOAT:left;
WIDTH:376px;
BACKGROUND-COLOR:#880000;
BORDER-RIGHT:none;
PADDING-RIGHT:0px;
BORDER-TOP:none;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
BORDER-LEFT:none;
PADDING-TOP:0px;
BORDER-BOTTOM:none;
COLOR:#e7d8bf;
}
/* rechter Textbereich */
#content {
BORDER-RIGHT:none;
PADDING-RIGHT:10px;
BORDER-TOP:none;
PADDING-LEFT:10px;
FLOAT:right;
PADDING-BOTTOM:0px;
BORDER-LEFT:none;
PADDING-TOP:0px;
BORDER-BOTTOM:none;
BACKGROUND-COLOR:#880000;
COLOR:#e7d8bf;
/* für feste Breite (800x600) tauschen - Teil 1 */
/* WIDTH:362px; */
}
/* Einstellung des äußersten divs */
#page {
border: 1px #000000 solid;
margin: 0px auto;
text-align:left;
/* für feste Breite (800x600) tauschen - Teil 2 */
/* width:760px; */
width:99%;
}
</STYLE>
Any help is greatly appreciated!
Frisco
☆ A M B ☆
