so folgendes problem ich hab ein einfaches design erstellt und möchte das nun mit typo3 realisieren... die frage ist wie könnte ich das mit dem menü z.b hinbekommen, das das so versetzt da angezeigt wird?
hab mal en screenshot vom design gemacht
http://stetze-online.de/test2.gif
Also meine frage wie oben schon beschrieben,
-wie kann ich das menü realisieren?
-wie kann ich die grafiken vom design einbinden?
-wie realisiere ich eigentlich das komplette design? ^^
freu mich auf antworten...
gruß stetze
Hallo,
realisiere das ganze mal als HTML-Template, das ist der wesentliche Schritt, erst dann über das einbinden ins TYPO3 mehr nachdenken!
Menü kann man zB als Listenmenü machen mit jeweils einer anderen ID und dann per padding, nur mal eine Idee
viel erfolg
georg
ich weiß net wie ich das slicen soll ahh,
blöde rundung neben...
nun das ist dann aber kein TYPO3 Problem mehr... du solltest dir halt auch überlegen wohin der Content kommt, für den brauchst du ja nun mal irgendwas rechteckiges, wo dann dein div/table hin kommt, runderhum kommt dann der slice
georg
der content soll dahin wo der kreis ist...
das wäre keine frage gewesen... na dann kannst du e mit dem slicen beginnen, aber wie gesagt, kein typo3-spezifisches problem
georg
tja leider hab ich das so nicht hinbekommen und habs anderster versucht... nur weiß ich leider jetzt net wie ich das in typo3 einbinde
hier mal die html und die style datei...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
<!-- ###DOCUMENT_BODY### START-->
<div id="wrapper">
###ROOTLINE###
<div id="header">
###LOGO###
</div>
<div id="hauptmenue">
<!-- ###MENU### START-->
<!-- ###MENU### END-->
</div>
<div id="content">
<!-- ###CONTENT### START-->
<!-- ###CONTENT### END-->
</div>
<div id="footer">
###FOOTER###
</div>
</div>
<!-- ###DOCUMENT_BODY### END-->
</body>
</html>
/* CSS Document */
html, body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 100.01%;
text-align:center; /* fuer IE */
background-color: FEE1B9;
}
* {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0px;
width: 1024px;
text-align: left;
border: 2px solid #D59E5F;
}
#header {
background-color: #FFE6B5;
color: #000;
padding: 0px 0px 0px 0px;
}
/* Hauptmenue */
#hauptmenue {
background-color: #FEECD4;
color: #000;
padding: 20px 0px 20px 300px;
border-bottom: 1px dashed #D59E5F;
}
#hauptmenue ul {
list-style-type: none;
margin: 0px 0px 0px 20px;
}
#hauptmenue ul li {
display: inline;
}
#hauptmenue ul li a {
text-decoration: none;
font-size: 80%;
font-weight: bold;
padding: 1px 10px 2px 10px;
background-color: #DDB05E;
color: #fff;
border-right: 1px solid #B79348;
border-bottom: 1px solid #B79348;
}
#hauptmenue ul li a:hover {
background-color: #FFE6B5;
color: #900;
text-decoration: underline;
}
/* Content-Bereich */
#content {
background-color: #FEECD4;
color: #000;
padding: 10px 0px 10px 0px;
}
#content .liste {
background-color: transparent;
color: #000;
}
#content .liste ul {
list-style-position: outside;
list-style-type: circle;
padding: 0px 0px 0px 20px;
}
#content p, #content li {
font-size: 85%;
line-height: 140%;
margin: 10px 40px 10px 60px;
}
#content h1, #content h2 {
margin: 25px 0px 15px 50px;
}
#content h1 {
font-size: 140%;
letter-spacing: 1pt;
background-color: transparent;
color: #B79348;
}
#content h2 {
background-color: transparent;
color: #B79348;
font-size: 115%;
}
#content a {
text-decoration: none;
background-color: transparent;
color: #900;
font-weight: bold;
}
#content a:visited {
background-color: transparent;
color: #450000;
}
#content a:hover {
background-color: transparent;
color: #f00;
}
#content a:active {
background-color: transparent;
color: #f00;
}
#content a:focus {
background-color: transparent;
color: #f00;
}
/* Footer */
#footer {
background-color: #FEECD4;
color: #000;
height: 30px;
padding: 10px 0px 0px 0px;
border-top: 1px dashed #D59E5F;
}
#footer p {
font-size: 75%;
text-align: center;
}
/* Sonstige */
#content p.topper {
margin: 30px 0px 20px 60px;
font-size: 80%;
}
#content .tutor {
background-color: #ffffcc;
color: #600;
border: 1px solid #600;
margin: 10px 0px 10px 0px;
padding: 0px 10px;
}