ich find CMS einfach genial
wie einfach das ganze zu bedienen ist. Mit einem lokalen Webserver und Template Externalizer konnte ich durch das Forum auch schnell ein Design als Template abändern.Nur hänge ich an einien Punkten bei der ich nicht weiterkomme und würde mich über Hilfe freuen. Wenn das ganze Fertig ist stelle ich es auch gerne zum Download zur Verfügung.
Das derzeitige Ergebnis kann man sich unter http://base6.de/demo/cms anschauen.
Punkte dich ich gerne lösen würde:
- Beim Horizontalem Menü machen die nachfolgenden Menüpunkte einen Zeilenumbruch
- Der Text links oben für Suche hat einen Zeilenumbruch den ich auch gerne Entfernen würde.
- Bei Auswahl Vertikaler Menüpunkt ist der übergeordnete Horizontale Naviationsmenüpunkt nicht hervorgehoben. Ich hätte gerne Haupt- und Submenü hervorgehoben.
- Rechts oben sind Menüelemente vorhanden hinter den ich z.B das Kontaktformular hinterlegen möchte. Nur mit {contact} im Template gibt es Probleme.
- Irgenwie mag IE7 das Horizontale Menü nicht richtig anzeigen zu wollen. Nachfolgende Menüpunkte werden nicht angezeigt.
Hänge mal mein HTML und CSS mal rein
Code: Select all
<!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" xml:lang="en" lang="en">
<head>
{metadata}
{stylesheet}
<title>Marketplace</title>
</head>
</__body>
<!-- wrap starts here -->
<div id="wrap">
<!--header -->
<div id="header">
{search submit="Start" searchtext="Text"}
<div id="header-links">
<p>
<a href="index.html">Home</a> |
<a href="index.html">Contact</a> |
<a href="index.html">Site Map</a>
</p>
</div>
<!--header ends-->
</div>
<div id="header-photo">
<h1 id="logo-text"><a href="index.html" title="">marketplace</a></h1>
<h2 id="slogan">put your site slogan here...</h2>
</div>
<!-- navigation starts-->
<div id="nav">
{menu number_of_levels='1'}
</div>
<!-- navigation ends-->
<!-- content-wrap starts -->
<div id="content-wrap" class="two-col" >
<div id="sidebar">
<div id="sidemenu">
{menu start_level='2' collapse='1'}
</div>
<!-- sidebar ends -->
</div>
<div id="main">
{content}
</div>
<!-- content-wrap ends-->
</div>
<!-- footer starts -->
<div id="footer-wrap"><div id="footer">
{global_content name='footer'}
</div></div>
<!-- footer ends-->
<!-- wrap ends here -->
</div
<__body>
</__html>
Code: Select all
/********************************************
AUTHOR: Erwin Aligam
WEBSITE: http://www.styleshout.com/
TEMPLATE NAME: MarketPlace
TEMPLATE CODE: S-0017
VERSION: 1.0
DATE: August-31-2007
*******************************************/
/********************************************
HTML ELEMENTS
********************************************/
/* Top Elements */
* { margin: 0; padding: 0;}
body {
background: #fff;
font: 11px/1.75em Verdana, Tahoma, arial, sans-serif;
color: #666666;
text-align: center;
margin: 0 0 15px 0;
}
/* links */
a, a:visited {
color: #326ea1;
background: inherit;
text-decoration: none;
}
a:hover {
color: #383d44;
background: inherit;
padding-bottom: 0;
border-bottom: 2px solid #dbd5c5;
}
/* headers */
h1, h2, h3 {
font-family: 'Trebuchet MS', Tahoma, Sans-serif;
font-weight: Bold;
color: #333;
}
h1 {
font-size: 160%;
font-weight: normal;
}
h2 {
font-size: 130%;
text-transform: uppercase;
}
h3 {
font-size: 130%;
}
h1, h2, h3, p {
padding: 10px;
margin: 0;
}
ul, ol {
margin: 5px 20px;
padding: 0 20px;
}
/* images */
img {
background: #FAFAFA;
border: 1px solid #DCDCDC;
padding: 5px;
}
img.float-right {
margin: 5px 0px 10px 10px;
}
img.float-left {
margin: 5px 10px 10px 0px;
}
code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
/* white-space: pre; */
background: #F5F5F5;
border-left: 3px solid #D4D4D4;
}
acronym {
cursor: help;
border-bottom: 1px dashed #777;
}
blockquote {
font: bold 1.4em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;
margin: 10px;
padding: 0 0 0 25px;
background: #F5F5F5;
border-left: 3px solid #D4D4D4;
color: #444;
}
/* start - table */
table {
border-collapse: collapse;
margin: 10px;
}
th strong {
color: #fff;
}
th {
background: #e7e6e6 url(uploads/marketplace/button.jpg) repeat-x;
height: 29px;
padding-left: 12px;
padding-right: 12px;
text-align: left;
border-left: 1px solid #f4f4f4;
border-bottom: solid 2px #fff;
color: #333;
}
tr {
height: 30px;
}
td {
padding-left: 11px;
padding-right: 11px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
}
td.first,th.first {
border-left: 0px;
}
tr.row-a {
background: #F8F8F8;
}
tr.row-b {
background: #EFEFEF;
}
/* end - table */
/* form elements */
form {
margin:10px; padding: 0 5px;
background: #F5F5F5;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding:2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
textarea {
width:400px;
padding:2px;
font: normal 1em Verdana, sans-serif;
border:1px solid #eee;
height:100px;
display:block;
color:#777;
}
input.button {
font: bold 12px Arial, Sans-serif;
height: 24px;
margin: 0;
padding: 2px 3px;
color: #333;
background: #e7e6e6 url(uploads/marketplace/button.jpg) repeat-x;
border: 1px solid #dadada;
}
/********************************************
LAYOUT
********************************************/
dfn {
display:none;
}
#wrap {
position: relative;
width: 910px;
margin: 0 auto;
text-align: left;
background: #fff url(uploads/marketplace/content.jpg) repeat-y center top;
}
#content-wrap {
float: left;
width: 850px;
margin-left: 30px;
display: inline;
padding: 0;
border-top: 5px solid #fff;
background: #fff url(uploads/marketplace/content-wrap.jpg) repeat-x;
}
#header {
position: relative;
background: #fff url(uploads/marketplace/header-bg.jpg) repeat-y center top;
height: 35px;
width:910px;
padding: 0;
color: #fff;
}
/* header links */
#header #header-links {
position: absolute;
top: 8px; right: 45px;
color: #838181;
font-size: 10px;
font-weight: bold;
}
#header #header-links p {
padding: 0; margin: 0;
}
#header #header-links a {
color: #838181;
text-decoration: none;
}
#header #header-links a:hover {
color: #444;
}
/* header-photo */
#header-photo {
position: relative;
clear: both;
margin: 5px auto;
height: 250px;
width: 850px;
background: #fff url(uploads/marketplace/header-photo.jpg) no-repeat center center;
}
#header-photo h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bold 48px 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -1px;
color: #fff;
text-transform: none;
text-decoration: none;
border: none;
/* change the values of top and left to adjust the position of the logo*/
top: 25px; left: 30px;
}
#header-photo h2#slogan {
position: absolute;
margin: 0; padding: 0;
font: bold 14px 'Trebuchet MS', Arial, Sans-serif;
text-transform: none;
color: #B6D1F8;
/* change the values of top and left to adjust the position of the slogan*/
top: 80px; left: 35px;
}
/* Navigation */
#nav {
clear: both;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
background: #E4E4E4 url(uploads/marketplace/nav.jpg) repeat-x;
width: 850px;
padding: 0; margin: 0 0 0 30px;
height: 45px;
display: inline;
}
#nav ul li {
display: inline;
margin: 0; padding: 0;
}
#nav ul li a {
display: block;
float: left;
width: auto;
margin: 0;
padding: 0 15px;
border-right: 1px solid #dadada;
border-left: 1px solid #fafafa;
border-bottom: none;
color: #555;
font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
text-decoration: none;
letter-spacing: 1px;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #326ea1;
}
#nav ul li#current a {
background: #DBDBDB url(uploads/marketplace/nav-current.jpg) repeat-x;
}
/* Main Column */
.three-col #main {
margin: 10px 190px 0 200px;
}
.two-col #main {
margin: 10px 5px 0 200px;
}
#main h1 {
margin: 10px 10px 0 10px;
font: normal 1.8em Georgia, "Times New Roman", Times, serif;
color: #444;
padding: 15px 0 2px 0px;
border-bottom: 1px solid #dadada;
}
/* Sidebar */
#sidebar {
float: left;
width: 195px;
margin-top: 10px;
}
/* sidemenu */
ul.sidemenu {
text-align: left;
margin: 7px 8px 8px 10px; padding: 0;
border-top: 1px solid #E5E5E5;
text-decoration: none;
}
ul.sidemenu li {
list-style: none;
padding: 4px 0 4px 5px;
margin: 0 2px;
border-bottom: 1px solid #E5E5E5;
}
* html body ul.sidemenu li {
height: 1%;
}
ul.sidemenu li a {
text-decoration: none;
color: #326ea1;
border: none;
}
ul.sidemenu li a:hover {
color: #383d44;
border: none;
}
/* footer-wrap */
#footer-wrap {
clear: both;
width: 910px;
font-size: 95%;
padding: 20px 0;
text-align: left;
background: url(uploads/marketplace/footer-bottom.jpg) no-repeat center bottom;
}
#footer-wrap a {
text-decoration: none;
color: #666666;
font-weight: bold;
}
#footer-wrap a:hover {
color: #000;
}
#footer-wrap p {
padding: 10px 0;
}
#footer-wrap h2 {
color: #666666;
margin: 0;
padding: 0 10px;
}
/* footer */
#footer {
clear: both;
color: #666;
margin: 0 auto 10px auto;
width: 850px;
padding: 5px 0;
text-align: center;
background: #F8F7F7;
border-top: 1px solid #F2F2F2;
}
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
/* display and additional classes */
.clear { clear: both; }
/* post */
.post-by {
font-size: .95em;
padding-top: 0;
}
.post-footer {
background: #F5F5F5;
padding: 5px; margin: 20px 10px 0 10px;
font-size: 95%;
color: #666666;
}
.post-footer .date{
margin: 0 10px 0 5px;
}
.post-footer a.comments {
margin: 0 10px 0 5px;
}
.post-footer a.readmore {
margin: 0 10px 0 5px;
}
