Hallo,
ich bin noch ein ziemlicher Anfänger und bin gerade
dabei meine erste Typo3 basierte Seite zusammen zu bauen.
Jetzt habe ich ein Template, wo mich allerdings der linke
Container stört.
Ich würde gerne den ersten mit dem Hauptinhalt nach links hin
vergrößern und den 2. Container am besten komplett herausnehmen.
Jetzt meine Frage: Wie mache ich das?
Hier mal die Template Dateien + ein Screenshot:
# Default PAGE object:
page = PAGE
page.includeCSS {
file10 = fileadmin/templates/default.css
file10.media = screen
}
page.typeNum = 0
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/temp1.html
workOnSubpart = DOCUMENT_BODY
subparts.INHALT < styles.content.get
marks.FOOTER = COA
marks.FOOTER {
10 = TEXT
10.field = title
20 = TEXT
20.value = - © 2009 Legends of Total War
}
marks.NAVIGATION = HMENU
marks.NAVIGATION {
wrap = <ul class="navi"> | </ul>
1 = TMENU
1.NO.linkWrap = <li> | </li>
}
marks.HEAD = TEXT
marks.HEAD.value = Legends of Total War
marks.HEAD.wrap = <h1> | </h1>
}
#seite.10.marks.INHALT_LINKS = CONTENT
#seite.10.marks.INHALT_LINKS {
#table = tt_content
# select {
# pidInList = 42
# orderBy = sorting
# }
# }
config.spamProtectEmailAddresses = 2
config.spamProtectEmailAddresses_atSubst = (at)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="keywords" content="empire,total,war,medieval,rome,LoTW,legends,of,2,napoleon," />
<meta name="description" content="Internetseite der Legends of Total War (LoTW). Aktiv in Rome,Medieval 2 und Empire Total War." />
<meta name="Robots" content="INDEX,FOLLOW" />
<title>Legends of Total War</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- ###DOCUMENT_BODY### -->
<div id="outer">
<div id="header">
###HEAD###
</div>
<div id="menu">
###NAVIGATION###
</div>
<div id="content">
<div id="xbg1"></div>
<div id="primaryContentContainer">
<div id="primaryContent">
###INHALT###
Hier könnte der Inhalt stehen
###INHALT###
</div>
</div>
<div id="secondaryContent">
###INHALT_LINKS###
Hier kommt noch was hin
###INHALT_LINKS###
</div>
<div class="clear"></div>
</div>
<div id="footer">
###FOOTER###
</div>
</div>
<!-- ###DOCUMENT_BODY### -->
</body>
</html>
und hier noch der CSS Stylsheet:
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
/* Basic */
*
{
margin: 0em;
padding: 0em;
}
h1,h2,h3,h4,h5,h6
{
text-transform: uppercase;
letter-spacing: 0.2em;
}
body
{
font-family: "trebuchet ms", sans-serif;
font-size: 10pt;
background-color: #000000;
color: #6F5129;
}
a
{
color: #667700;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
/* Outer */
#outer
{
width: 778px;
margin: 2em auto;
}
/* Header */
#header
{
padding: 1.75em;
text-align: center;
}
#header h1
{
font-size: 2em;
}
#header h2
{
font-size: 1em;
color: #747474;
}
#header h1 a
{
color: #fff;
text-decoration: none;
}
/* Menu */
#menu
{
background: #000000 url('images/a1.jpg') top left no-repeat;
height: 94px;
width: 778px;
}
#menu ul
{
list-style: none;
text-align: center;
position: relative;
top: 45px;
}
#menu li
{
padding: 0em 1.5em 0em 1.5em;
display: inline;
}
#menu li a
{
color: #3A2000;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
font-size: 0.9em;
letter-spacing: 0.2em;
}
#menu li a:hover
{
text-decoration: underline;
}
/* Content */
#xbg1
{
position: absolute;
z-index: 1;
background: #000000 url('images/a2.jpg') top left no-repeat;
width: 778px;
height: 98px;
}
#content
{
background: #000000 url('images/a3.jpg') top left repeat-y;
}
#content p
{
margin-bottom: 2em;
line-height: 1.5em;
}
#content h2,h3,h4,h5,h6
{
position: relative;
color: #3F2109;
margin-bottom: 1em;
padding-bottom: 0.5em;
border-bottom: solid 1px #DFBF99;
}
#content h2
{
font-size: 1.5em;
}
#content h3
{
font-size: 1.1em;
}
#content ul
{
margin-bottom: 2em;
padding-left: 1em;
}
#content blockquote
{
margin-bottom: 2em;
}
#content blockquote p
{
border-left: solid 8px #667700;
padding-left: 1em;
margin-bottom: 0em;
}
#content table
{
margin-bottom: 2em;
}
#content table th
{
text-align: left;
font-weight: bold;
padding: 0.5em;
}
#content table td
{
padding: 0.5em;
}
#content table tr.rowA
{
background-color: #DFBD99;
color: inherit;
}
#content table tr.rowB
{
background-color: #EFDCC2;
color: inherit;
}
/* Primary Content */
#primaryContentContainer
{
position: relative;
z-index: 2;
float: right;
margin-left: -18em;
width: 100%;
}
#primaryContent
{
margin: 2em 3.0em 0em 19em;
padding: 0em 0em 0em 1.5em;
border-left: solid 1px #DFBF99;
}
/* Secondary Content */
#secondaryContent
{
position: relative;
z-index: 2;
float: right;
width: 15em;
margin-top: 2em;
}
/* Footer */
#footer
{
width: 778px;
height: 56px;
padding-top: 30px;
background: #000000 url('images/a4.jpg') top left no-repeat;
text-align: center;
}
.clear
{
clear: both;
}
zu guter letzt der Screenshot:
http://img193.imageshack.us/img193/2447/10202009165856.png
Ich fänds klasse wenn sich einer mal die Problemlage ansehen- und mir
dabei helfen würde meine erste Typo3 Website fertig zu stellen.
Gruß,
Malak
PS: Falls ihr mehr Infos braucht, sagt bescheid.