Zum Inhalt springen

Whatis wrong with my template-question from a danish newbie

Erstellt am 5. Februar 2004 · 5 Antworten · letzte Antwort am 10. Februar 2004

Tags: HTML & CSS, Frage, English

bjol ·

I have made my own template in DW. So good - looking great.
Now i tried to make it to an TYPO3 template. But it look like shit. My stylesheet wont work perfect. Something is missing in the leftmenu and topmenu. Links won't showed. Content are showing in the leftmenu. I must have missed something. but what
Is there anybody who could tell me, what is wrong.

feel free to answer in German and foregive my poor english, but my german will be much more terrible 🙂

here is my code

stylesheet:

/* Set <a href> properties */
a:link, a:visited, a:active { text-decoration:none; color:#07578B }
a:hover { color:#4090C4 }

/* Paragraph and heading properties */
h1 {
font-size:21px;
font-family: Tahoma;
}
h2 {
font-size:16px;
font-family: Tahoma;
}
h3 {
font-size:13px;
font-family: Tahoma;
}
p {
font-size:12px;
font-family: Tahoma;
}

/* Start from the top 🙂 */
.logo {
border:1px solid #000000;
}
.menubar {
border-left:1px solid #000000;
border-right:1px solid #000000;
background:url(images/menu_bg.gif);
font-size: 12px;
font-family: Tahoma;
}
.body {
border:1px solid #000000;
font-size:12px;
font-family: Tahoma;
}
.copyright {
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
font-size:10px;
font-family: Tahoma;
background:#C5C6C6;
}

/* Start the special color users 🙂:p */
/*.menuleft {
/* font-size:12px;
/* background: #E1E2E2;
/*}
/* Top Navigation Menu */
.topnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.topnav a:link {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF; /* white */
padding: 2px;
}
.topnav a:visited {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF; /* white */
padding: 2px;
}
.topnav a:hover {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background: #759214; /* lime green */
color: #FFFFFF; /* white */
padding: 2px;
}

.topnav-act {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background: #759214; /* lime green */
color: #FFFFFF; /* white */
padding: 2px;
}
.topnav-act a:active {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background: #759214; /* lime green */
color: #FFFFFF; /* white */
padding: 2px;
}
.topnav-act a:link {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background: #759214; /* lime green */
color: #FFFFFF; /* white */
padding: 2px;
}
.topnav-act a:visted {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background: #759214; /* lime green */
color: #FFFFFF; /* white */
padding: 2px;
}
.topnav-act a:hover {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background: #759214; /* lime green */
color: #FFFFFF; /* white */
padding: 2px;
}

/* Left Navigation Menu */

.leftnav1 a:link {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 15px;
white-space: nowrap;
background-color: #FFFFFF;
color: #759214; /* lime green */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
}
.leftnav1 a:visited {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 15px;
white-space: nowrap;
background-color: #FFFFFF;
color: #759214; /* lime green */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
}
.leftnav1 a:active {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 15px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -24px;
}
.leftnav1 a:hover {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 15px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -24px;
}

.leftnav1-act a:link {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 15px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -24px;
}
.leftnav1-act a:visited {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 15px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -24px;
}
.leftnav1-act a:active {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 15px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -24px;
}
.leftnav1-act a:hover {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 15px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -24px;
}

.leftnav2 a:link {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 30px;
white-space: nowrap;
background-color: #FFFFFF;
color: #7FB8E0; /* sky blue */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -48px;
}
.leftnav2 a:visited {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 30px;
white-space: nowrap;
background-color: #FFFFFF;
color: #7FB8E0; /* sky blue */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -48px;
}
.leftnav2 a:active {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 30px;
white-space: nowrap;
background-color: #FFFFFF;
color: #7FB8E0; /* sky blue */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -48px;
}
.leftnav2 a:hover {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 30px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -72px;
}

.leftnav2-act a:link {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 30px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -72px;
}
.leftnav2-act a:visited {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 30px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -72px;
}
.leftnav2-act a:active {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 30px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -72px;
}
.leftnav2-act a:hover {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 30px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -72px;
}

.leftnav3 a:link {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 45px;
white-space: nowrap;
background-color: #FFFFFF;
color: #7FB8E0; /* sky blue */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -96px;
}
.leftnav3 a:visited {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 45px;
white-space: nowrap;
background-color: #FFFFFF;
color: #7FB8E0; /* sky blue */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -96px;
}
.leftnav3 a:active {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 45px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -120px;
}
.leftnav3 a:hover {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 45px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -120px;
}

.leftnav3-act a:link {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 45px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -120px;
}
.leftnav3-act a:visited {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 45px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -120px;
}
.leftnav3-act a:active {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 45px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -120px;
}
.leftnav3-act a:hover {
display: block;
padding: 4px 4px 5px 4px;
text-indent: 45px;
white-space: nowrap;
background-color: #FFFFFF;
color: #F7620F; /* red orange */
text-decoration: none;
width: 100%;
background: url("images/buttons.gif") top left no-repeat;
background-position: 0 -120px;


/* Forms Fields */
SELECT {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px
}

TEXTAREA {
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #555555;
FONT-WEIGHT: normal;
FONT-SIZE: 12px;
BORDER-RIGHT: #759214 1px solid;
BORDER-TOP: #759214 1px solid;
BORDER-LEFT: #759214 1px solid;
TEXT-INDENT: 0px;
BORDER-BOTTOM: #759214 1px solid
}

INPUT {
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #555555;
FONT-WEIGHT: normal;
FONT-SIZE: 12px;
BORDER-TOP-WIDTH: 1px;
BORDER-LEFT-WIDTH: 1px;
BORDER-LEFT-COLOR: #759214;
BORDER-RIGHT-WIDTH: 1px;
BORDER-RIGHT-COLOR: #759214;
BORDER-BOTTOM-WIDTH: 1px;
BORDER-BOTTOM-COLOR: #759214;
BORDER-TOP-COLOR: #759214;
TEXT-INDENT: 0px;
BACKGROUND-COLOR: #FFFFFF;
}

AND MY SETUP IN TYPO3

# Setting up 'page' to be the default PAGE object (type=0)
#######################################
lib.stdheader.10.stdWrap.wrap =
tt_content.stdWrap.dataWrap = <A name="{field:uid}"></a>

page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/templates/projektinno/style_projektinno.css
page.bodyTag = <body background="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
page.1 = TEMPLATE
page.1.marks.PAGE_UID = TEXT
page.1.marks.PAGE_UID.field = uid
page.1 {
template = FILE
template.file = fileadmin/templates/projektinno/index.htm
workOnSubpart = DOCUMENT_BODY
subparts.CONTENT_LEFT < styles.content.getLeft
subparts.CONTENT_RIGHT < styles.content.getRight
subparts.CONTENT_BORDER < styles.content.getBorder
subparts.CONTENT < styles.content.get

# Top Navigation
#######################################
subparts.TOPNAV = HMENU
subparts.TOPNAV.special = directory
subparts.TOPNAV.special.value = 1
subparts.TOPNAV.1 = TMENU
subparts.TOPNAV.1 {
NO.allWrap = |*| <span class="topnav">&nbsp;&#124;&nbsp;|</span> |*|
ACT = 1
ACT.allWrap = |*| <span class="topnav">&nbsp;&#124;&nbsp;| </span> |*|
}

# Bottom Navigation
#######################################
subparts.BOTTOMNAV = HMENU
subparts.BOTTOMNAV.special = directory
subparts.BOTTOMNAV.special.value = 1
subparts.BOTTOMNAV.1 = TMENU
subparts.BOTTOMNAV.1 {
NO.allWrap = |*| <span class="bottomnav">&nbsp;&#124;&nbsp;|</span> |*|
ACT = 1
ACT.allWrap = |*| <span class="bottomnav">&nbsp;&#124;&nbsp;|</span> |*|
}

# Leftside Navigation
#######################################
subparts.LEFTNAV = HMENU
subparts.LEFTNAV.1 = TMENU
subparts.LEFTNAV.1 {

# Normal state properties
#######################################
NO.allWrap = <div class="leftnav1"> | </div>

# Enable active state and set properties:
#######################################
ACT = 1
ACT.allWrap = <div class="leftnav1-act"> | </div>
}

# Second level menu-object
#######################################
subparts.LEFTNAV.2 = TMENU
subparts.LEFTNAV.2 {

# Normal state properties
#######################################
NO.allWrap = <div class="leftnav2"> | </div>

# Enable active state and set properties:
#######################################
ACT = 1
ACT.allWrap = <div class="leftnav2-act"> | </div>
}

# Third level menu-object
#######################################
subparts.LEFTNAV.3 = TMENU
subparts.LEFTNAV.3 {

# Normal state properties
#######################################
NO.allWrap = <div class="leftnav3"> | </div>

# Enable active state and set properties:
#######################################
ACT = 1
ACT.allWrap = <div class="leftnav3-act"> | </div>
}
}

HERE ARE MY TEMPLATE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Dansk Projekt Innovation Typo3 Template</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<!-- ###DOCUMENT_BODY### START-->
<table align="center" width="750" cellpadding="0" cellspacing="0" class="logo">
<tr>
<td><img src="fileadmin/templates/projektinno/images/logo.gif"></td>
</tr>
</table>

<table align="center" width="752" cellpadding="0" cellspacing="0" class="menubar">
<!-- ###TOPNAV### Start -->
<tr>

<td align="center"><div class="menubar"><a href="#" title="Home"><img src="fileadmin/templates/projektinno/images/mb_home.gif" border="0"></a><a href="#" title="Link 1"><img src="fileadmin/templates/projektinno/images/mb_link1.gif" border="0"></a><a href="#" title="Link 2"><img src="fileadmin/templates/projektinno/images/mb_link2.gif" border="0"></a><a href="#" title="Contact Us"><img src="fileadmin/templates/projektinno/images/mb_contactus.gif" border="0"></div></a></td>
<!-- ###TOPNAV### Slut -->
</tr>

</table>

<table align="center" width="752" cellpadding="4" cellspacing="0" class="body">
<!-- ###LEFTNAV### Start -->
<tr>

<td class="leftnav1" width="25%" valign="top"><img src="fileadmin/templates/projektinno/images/lm_sitenav.gif"><br/>
<div class="leftnav1"><a href="#">Link 1</a></div>
<div class="leftnav1"><a href="#">Link 2</a></div>
<div class="leftnav1"><a href="#">Link 3</a></div>
<img src="fileadmin/templates/projektinno/images/lm_affiliates.gif"><br/>
<div class="leftnav1"><a href="#">Link 4</a></div>
<div class="leftnav1"><a href="#">Link 5</a></div>
<div class="leftnav1"><a href="#">Link 6</a></div>
<!-- ###LEFTNAV### Slut -->
<!-- ###CONTENT### Start -->
<td valign="top" rowspan="2">

<h1>THDesigner 001</h1>
<h2>This is a sub-heading!</h2>
<h3>This is an even lower sub-heading...</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril</p>
<h2>Another heading...</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conseq.</p>

</td>
<!-- ###CONTENT### Slut -->
</tr>

</table>

<table align="center" width="752" cellpadding="4" cellspacing="0" class="copyright" height="30">
<tr>
<td valign="middle" align="center">THDesigner 001 ©2003 <a href="#">taintedhand</a></td>
</tr>
</table>
<!-- ###DOCUMENT_BODY### end -->
</body>
</html>

TIA
bjol

c4c ·
bjol schrieb

I have made my own template in DW. So good - looking great.
Now i tried to make it to an TYPO3 template. But it look like shit. My stylesheet wont work perfect. Something is missing in the leftmenu and topmenu. Links won't showed. Content are showing in the leftmenu. I must have missed something. but what
Is there anybody who could tell me, what is wrong.

feel free to answer in German and foregive my poor english, but my german will be much more terrible 🙂

have u inserted the content (default) and cSet Stylesheet in ur RootTemplate (Include Static) ?

be_dee ·

1st sorry, there is no answer to ur question, cause i´m a newbie aswell and just making my first steps, but if u got time and want to u could answer me following:

i studied modern template building I and a few questions are left like "whow to i start" (watch my thread #8682)

so u made a stylesheet to ur htm-template, but how to u see how it looks while ure editing ur template, cause there is no link from ur htm to css only in typo script there is a link?

have u tryed the auto-template-parser? i did and now i don´t now what to use (handcoding or parser also mixed seems possible), maby u can explain me ur (jimy hendrix) experience

greets + thanx
be_dee

Quilano ·

Hi,

I am no expert on css myself. But I learned that you have to be very careful with the syntax. Very often, I forgot the ";" at the end of a setting.

I saw these missing in some parts of your css:

/* Set <a href> properties */
a:link, a:visited, a:active { text-decoration:none; color:#07578B }
a:hover { color:#4090C4 }

here>> color:#07578B;
here>> color:#4090C4;

As you define <a> Tags with it, this has to do with your menu settings. Maybe it is that simple?

bjol ·

Hallo be_dee
I have completed "Modern Templates Building". But i did'nt get to work, like in the tutorials.
e.g. I could not se the reason for having three files (templates). And the autotemplate parser works well in the tutorials but when i tried it, with my own templates, i couldn't get it to work. Maybe you ( and I) should handcoded it. Or is there anyone who can explain how to use it with "homemade" templates

CSS: I think it doesn't matter if you use it in your templates or you define it in your setup in typo3.
Am i wrong ?

But anyway: if i should suggest a starting point, then you should read TypoScript By Example. it can be DL from here http://typo3.org/doc.0.html?&tx_extrepmgm_pi1[show]=matrix&cHash=2ca089abb7

Hallo Quilano
Thanks for pointing out the errors in my CSS - i'll look in to it. I am neither an expert in CSS :-)

Final
Still i haven't get answers for my questions about typo3
Anybody ?

TIA
Bjol

PS: TYPO3 is a great system.. To bad it has such an poor documentation.