Hallo zusammen,
ich habe folgende HTML Seite als Template für ein Typo3 Projekt bekommen. ICh bin noch nicht so richtig fit in Sachen Typo3 und mir macht diese Vorlage Kopfschmerzen.
<!-- DOKUMENT_BODY start-->
<!-- wrapper -->
<div id="wrapper">
<!-- sub menu containing nonpublic areas -->
<!-- SUBMENU start-->
<div id="submenu">
<div id="search">
<form action="#" method="post">
<span>Search:</span>
<input type="text" name="" value="" />
<input type="submit" value=" Go " />
</form>
</div>
###BLUEMENU###
</div>
<!-- SUBMENU ende-->
<!-- main menu -->
<div id="mainmenu">
<table cellpadding="0" cellspacing="0">
<tr> <!-- linkes Menu -->
<td width="33%" id="mainmenu-td-left">###MAINMENU-L###</td>
<!-- Mittleres Menu -->
<td width="34%" id="mainmenu-td-center">###MAINMENU-C###</td>
<!-- Rechtes Menu -->
<td width="33%" id="mainmenu-td-right">###MAINMENU-R###</td>
</tr>
</table>
</div>
<!-- header / logo -->
<div id="header" style="background:#8FA0BA scroll repeat 0 0;">###LOGO###</div>
<!-- content area containing floating div containers -->
<div id="content">
<table id="content-table" cellpadding="0" cellspacing="10">
<tr>
<td width="33%" id="content-left"><div id="textcolleft" class="scrollable">###CONTENT_LEFT###</div></td>
<td width="34%" id="content-center"><div id="textcolcenter" class="scrollable">###CONTENT_CENTER###</div></td>
<td width="33%" id="content-right"><div id="textcolright" class="scrollable">###CONTENT_RIGHT###</div></td>
</tr>
</table>
</div>
<!-- footer -->
###FOOTER_1###
<div id="footer2">###FOOTER_2###</div>
</div>
<!-- DOKUMENT_BODY ende-->
<script language="javascript" type="text/javascript">
<!--
var scrheight = document.body.clientHeight - 363;
var scrx = document.body.clientWidth - 50;
var scry = scrx / 1020 * 555;
var scrflashx = scrx / 100 * 98 ;
document.getElementById('textcolleft').style.height = scrheight + "px";
document.getElementById('textcolleft').style.overflow = "auto";
document.getElementById('textcolcenter').style.height = scrheight + "px";
document.getElementById('textcolcenter').style.overflow = "auto";
document.getElementById('textcolright').style.height = scrheight + "px";
document.getElementById('textcolright').style.overflow = "auto";
document.getElementById('world').style.height = scry + "px";
document.getElementById('world').style.width = scrflashx + "px";
// -->
</script>
Das Menü klappt wunderbar, doch irgendwie habe ich es noch nicht geschnallt, wie ich im Contentbereich meine Schrift und Schriftgröße aus dem CSS anspreche.
Ich würde mich sehr freuen, wenn mir jemand mal etwas erklärt wie ich mit dem Design richtig umgehe.
Gruß
Thomas
Hallo,
das hat ja überhaupt nix mit TYPO3 sondern nur mit CSS zu tun!
* { font-size: 12px; color:blue;}
#textcolcenter { font-size:10px, color:red;}
lg georg
Hallo just2b,
ok. Im Contentbereich wird aber leider die Schrift nicht angezogen, welche im CSS hinterlegt ist, sowie die Schriftgröße etc.
Kann ich aber diese Designvorlage so in diesem Stil verwenden? Und oben mit der Suchbox ist das so richtig? Darf die an dieser Stelle so eingebaut werden?
Gruß
Thomas
ok. Im Contentbereich wird aber leider die Schrift nicht angezogen, welche im CSS hinterlegt ist, sowie die Schriftgröße etc.
ja meine Glaskugel ist defekt
Kann ich aber diese Designvorlage so in diesem Stil verwenden? Und oben mit der Suchbox ist das so richtig? Darf die an dieser Stelle so eingebaut werden?
ja sicher kannst du die so verwenden. Naja die Suchbox macht halt nix... wie man eine Suche einbaut in ein Template, da gibts genug Threads
georg
ok Danke.
Wollte nur vorher sichergehen, dass man das so verwenden kann, bevor ich mir hier total einen anbreche.
Vielen Dank und Gruß
Thomas
Hallo noch eine Frage für mein Verständnis,
die ganze Seite ist ja in einem DIV eingeschlossen (<div id=wrapper>.. )
muss ich diesen div id=wrapper explizit irgendwie in Typo3 angeben, oder erkennt das CSS selbstständig, was dort für styles hingehören? Irgendiwe habe ich da noch Verständnisprobleme.
MfG
Thomas
kA was du willst aber schau meine 1. Antwort an. Sowas gilt weiterhin wenn du bestimmte divs anders stylen willst
georg
Vielleicht solltest du dich zuerst etwas mit HTML und CSS auseinandersetzen, das würde dich mit Sicherheit weiterbringen...
Hallo,
ich stimme wunschtacho zu. Wobei ich eigentlich Vorlagen bekomme, die bereits im HTML eingebaut sind, diese muss ich aber in Typo3 umsetzen. Ich habe wohl noch nicht so ganz verstanden wie Typo3 arbeitet. Wie man oben in meiner HTML Vorlage sieht, habe ich einige id´s und classes. Im Menü habe ich die Klassen direkt mit in Typo3script eingebaut: Beispiel:
MAINMENU-L = HMENU
MAINMENU-L {
special = list
special.value = 13
1 = TMENU
1 {
wrap = <ul id="navlinks><li class="litop">|</li></ul>
noBlur = 1
expAll = 1
NO = 1
NO.ATagParams = class="atop"
IFSUB.wrap = <ul>|
IFSUB.wrapItemAndSub = <li>|</li>
IFSUB.NO = 1
IFSUB.NO.ATagParams = class="isparent"
ACTIFSUB < .IFSUB
ACTIFSUB.ATagParams = class="isparent"
.... usw..
Das Menü funktioniert so weit auch. Nur beim Content habe ich Probleme. Da werden keine Schriftgrößen vom CSS angezogen.
Muss ich nun bei mir im TS Contants die Schriften erstmal hinterlegen, oder wie läuft das? Bitte erlöärt mir das mal kurz.
Gruß
Thomas
Also,
wenn ich das richtig verstanden habe, macht Dir der Bereich
<td width="34%" id="content-center"><div id="textcolcenter" class="scrollable">###CONTENT_CENTER###</div></td>
Probleme, ist das richtig?
Also ich gehe mal davon aus, das Du das schon im Setup stehen hast:
CONTENT_CENTER < styles.content.get
dann sollte irgendwo in deinem CSS folgendes stehen:
#textcolcenter { ... }
oder
#textcolcenter.scrollable { ... }
oder auch
#contentcenter #textcolcenter.scrollable { ... }
oder ähnliches.
Da musst Du dann Deine Textformatierung einbauen!
Das ganze hat nichts mit Typoscript oder mit der Arbeitsweise von Typo3 zutun. Das ist wirklich nur HTML und CSS. Keine große Sache!
Les' Dich mal 20 min in http://de.selfhtml.org/ ein.
Meines Erachtens muss man das ohnehin wenn man mit Typo3 (oder jedem anderen CMS) arbeiten will.
bis dann!
Hallo,
genau richtig, wobei aber die Sachen die im div Tag stehen, sind für ein Javascript, das die Höhe der Seite automatisch anpasst. Irgendwie habe ich auf der ganzen Seite Probleme mit CSS. Die Schriften werden nicht angezogen, die Farben aus dem Menü schon. ICh glaube ich habe es noch nicht verstanden, wie ich Typo3 beibringe die z.B. dies hier umzusetzen.:
/* -------- Main Menu Left -------------- */
#navlinks, #navlinks ul {
float:left;
width: 100%;
list-style: none;
line-height: 1.5;
font-weight:bold;
padding:0;
margin:0;
height: 55px;
color:#00183F;
}
#navlinks a {
display: block;
width:266px;
text-decoration: none;
padding: 0.25em 0;
text-indent:2em;
}
#navlinks a.atop {
display: block;
width: 100%;
height: 45px;
line-height: 45px;
color: #7C6240;
text-decoration: none;
padding:0;
color:#E1E8F3;
font-size:1.5em;
margin:0 0 0 0;
font-weight:normal;
}
#navlinks li.litop {
width: 100%;
margin:0;
padding:0;
color:#fff;
background:transparent;
}
#navlinks a.isparent {
background: url(../images/pfeil.gif) scroll no-repeat top right;
font-size:10px;
}
#navlinks li {
float: left;
padding:0;
margin:0;
width: 266px;
background:#8FA0BA url(../images/menu-main-left-seperator.gif) scroll no-repeat left bottom;
}
#navlinks li ul {
position: absolute;
left: -999em;
height: auto;
width: 266px;
font-weight: normal;
margin: -1px 0 0 0;
border:1px solid #001740;
border-bottom:0;
background:#8FA0BA;
}
#navlinks li li {
padding-right: 16px;
width:250px;
}
#navlinks li ul a {
width: 266px;
color:#00183F;
color:#fff;
font-weight:bold;
}
#navlinks li ul ul {
margin: -1.7em 0 0 263px;
}
#navlinks li:hover ul ul, #navlinks li:hover ul ul ul, #navlinks li.sfhover ul ul, #navlinks li.sfhover ul ul ul {
left: -999em;
}
#navlinks li:hover ul, #navlinks li li:hover ul, #navlinks li li li:hover ul, #navlinks li.sfhover ul, #navlinks li li.sfhover ul, #navlinks li li li.sfhover ul {
left: auto;
}
#navlinks li:hover, #navlinks li.sfhover {
background-color:#00183F;
color:#fff;
}
#navlinks li.top {
width:266px;
margin:0;
padding:0;
}
Das ist ein Auszug aus meiner CSS. Alles funktioniert, bis auf die Schriften.
Ich stelle gern noch mehr Teile meines CSS zur Verfüfung.
Danke für eure Hilfe!
Grüße
Vom Quelltext her, ist alles absolut sauber gebaut. Ich glaube einfach, dass ich beim Menü die #navlinks li ul { beispielsweise nicht anspreche. Daher habe ich da auch keinerlei Formatierungen. Muss ich nun im CSS überall noch Klassen hinterlegen, oder wie bringe ich sowas content (default) bei, darzustellen. Wenn ich diese Hürde überwunden habe, komme ich bestimmt auch allein klar.
Würde mir das mal bitte jemand kurz erklären?
danke. gruß
Hallo noch einmal,
also noch mal für mein Verständnis. In meiner HTML Vorlage welche in so wie sie da ist in den fileadmin hochgeladen habe, sind ja eineige id´s und classes. Ich habe nun noch nicht verstanden, wie ich diese über Typoscript richtig anspreche.
Ich habe das Gefühl das nicht alles so umgesetzt wird wie es im CSS steht.
Auf einer statischen HTML Seite wo das CSS und Java alles mit eingebunden ist, sieht das alles ein wenig anders aus. Zum Beispiel habe ich da unter den Footern keinen weissen Abstand mehr.
Ich habe es wohl noch nicht verstanden wie ich das alles in Typo3 abbilde.
Gruß