ich bin Redaxo Anfänger und habe jetzt ein Design umgeschrieben. Das Design wird auch so angezeigt, wie ich es gerne hätte.Leider gibt es ein Problem mit der kompletten Menü Einbindung.
Das Seitenmenü links funktioniert ohne Probleme, Allerdings ist unter den Menüpunkten ein grafischer Fehler. Es wird eine Linie angezeigt. Die anderen beiden Topmenüs bekomme ich gar nicht richtig eingebunden. Das Template verschwindet immer ganz, wenn ich die beiden Topmenüs einbinden will. Die Topmenüs sollen horizontal angezeigt werden. Irgendwie funktioniert das nicht ganz so wie es soll. Wäre nett, wenn Ihr mir helfen könntet.
Hier der HTML Code (Anm.d.R.@op: Code Blöcke bitte mit "Code" Tags umgeben!)
- Code: Alles auswählen
<!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="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Template 13</title>
<title><?php print $REX['SERVERNAME'].' | '.htmlspecialchars($this->getValue("name")); ?></title>
<meta name="keywords" content="<?php print htmlspecialchars($this->getValue("art_keywords")); ?>" />
<meta name="description" content="<?php print htmlspecialchars($this->getValue("art_description")); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $REX['HTDOCS_PATH'] ?>files/styles.css" media="screen" />
</head>
<body>
<div id=WholePage>
<div id="Container">
<div id="Top">
<div id="Header">
<div id="RightHeader">
<?php $rexnav = rex_navigation::factory(); echo $rexnav->get(0,1,FALSE,TRUE); ?>
</div>
<span class="name">aliquet pharetra leo</span><br/>
<span class="adress">www.company-name.com</span>
</div>
<div id="Inter">
<ul>
<li>Praesent sem sem, pulvinar at, bibendum at</li>
<li>Nunc aliquet pharetra leo. Nulla facilisi. Proin consectetuer dictum felis. </li>
<li>Aliquam pretium nisl vitae mauris. Curabitur libero. Cras eros. </li>
</ul>
</div>
<div id="Menu">
<a class="" href=""><span>About us</span></a>
<a class="" href=""><span>Our services</span></a>
<a class="" href=""><span>Help center</span></a>
<a class="" href=""><span>My account</span></a>
<a class="" href=""><span>News</span></a>
<a class="" href=""><span>For new customers</span></a>
</div>
</div>
<div id="Left">
<div id="LeftMenu">
<div class="LeftHeader">Main menu</div>
REX_TEMPLATE[2]
</div>
</div>
<div id="Middle">
<div id="Page">
<div id="Content">
<div class="TopPart">
<h2>consectetuer adipiscing elit Curabitur quis orci</h2>
<p class="Larger"> REX_ARTICLE[]
</div>
<div class="Part">
<h2>News and Tips for You</h2>
REX_ARTICLE[]
</div>
</div>
</div>
</div>
</div>
<div id="Footer">
<div id="Bottom">
<span><a href="http://www.sunlight.cz">E-shop design by Sunlight webdesign</a></span>
</div>
</div>
</div>
<div>
</div>
</body>
</html>
Und hier der CSS Code
body
{
padding:0;
margin:0;
background-color: white;
}
#WholePage
{
background-color: white;
}
#Container
{
width: 962px;
margin: 0px auto;
}
#Top
{
padding:0;
margin:0;
height: 302px;
background: url("img/main-picture.jpg") left 71px no-repeat;
}
#Top *
{
padding:0;
margin:0;
}
#Header
{
font-family: arial;
height: 61px; padding-top: 10px;
padding-left: 25px;
background: url('img/header-background.png') repeat-x left top;
}
.name
{
text-transform: uppercase;
font-size: 24px;
color: #e3e76e;
}
.adress
{
font-size: 14px;
color: white;
}
#Menu
{
height: 53px;
margin-top: 0px;
padding-left: 3px;
background: url('img/menu-background.png') repeat-x left top;
}
#Menu a
{
height: 53px;
line-height: 50px;
padding-right: 18px; padding-left: 18px;
background: url('img/menu-devider.png') right top no-repeat;
float: left;
margin-left: 3px;
text-decoration: none;
color: white;
font-size: 14px;
text-align: center;
font-family: arial;
}
#Top #Menu a:hover, #Top #Menu a.active
{
text-decoration: underline;
}
#Middle
{
}
#Page
{
}
#Content
{
padding-left: 8px;
}
#Content, #Left
{
padding-top: 3px;
}
#Footer
{
background-image: url("img/bottom_pattern.gif");
background-repeat: repeat-x;
background-position: left top;
height: 56px;
width: 100%;
float: left;
margin: 0px auto;
}
#Bottom
{
height: 32px;
width: 962px;
background: url('img/footer-background.png') repeat-x left top;
text-align: center;
line-height: 32px;
clear: left;
margin: 0px auto;
font-family: arial;
font-size: 12px;
color: white;
}
#Bottom a
{
text-decoration: none;
color: white;
}
#Bottom a:hover
{
text-decoration: underline;
}
#Middle,
#Left
{
float: left;
}
#Left
{
width: 274px;
}
#Middle
{
width: 688px;
}
.Part,.TopPart,#LeftMenu
{
border: 2px solid #d0d1d0;
background: #e4ece3;
}
#LeftMenu
{
font-size: 12px;
font-family: arial;
padding-bottom: 8px;
}
.Part
{
}
.TopPart
{
border: 0px;
background: url('img/first-banner.png') no-repeat left top;
height: 184px;
padding: 8px;
}
.Part,.TopPart
{
margin-bottom: 8px;
font-size: 12px;
font-family: arial;
text-align: justify;
}
.Part p
{
margin-left: 8px;
margin-right: 8px;
}
.TopPart p
{
margin-bottom: 0px;
margin-top: 6px;
}
.Part
{
clear: left;
padding-left: 0px;
}
.Part img
{
float: left;
margin: 8px;
}
#Content p
{
padding-left: 0px;
}
#LeftMenu ul
{
padding: 0px;
margin: 0px;
padding-top: 8px;
padding-bottom: 10px;
margin-bottom: 8px;
background: url('img/left-side-devider.gif') no-repeat center bottom;
}
#LeftMenu li
{
list-style-type: none;
}
#LeftMenu span
{
text-decoration: underline;
color: #446d07;
font-size: 15px;
}
#LeftMenu a
{
color: #666363;
text-decoration: none;
}
#LeftMenu a.Links
{
margin-top: 8px;
text-decoration: underline;
}
#LeftMenu a:hover
{
text-decoration: underline;
}
#LeftMenu span,
#LeftMenu a
{
display: block;
padding-left: 9px;
}
#LeftMenu li a
{
background: url('img/green-arrow.gif') no-repeat 9px 4px;
padding-left: 24px;
display: inline;
}
.TopPart h2
{
margin: 0px;
color: #edf32d;
font-size: 18px;
font-weight: normal;
font-family: arial;
text-transform: uppercase;
}
.TopPart .Larger
{
font-size: 14px;
}
.LeftHeader
{
margin: 0px;
background: url('img/left-header.png') no-repeat left top;
height: 38px;
}
.Part h2
{
margin: 0px;
background: url('img/content-header.png') no-repeat left top;
height: 37px;
display: block;
font-weight: normal;
}
.LeftHeader,
.Part h2
{
font-family: arial;
font-size: 16px;
color: white;
line-height: 37px;
padding-left: 10px;
}
.Part a
{
color: #4f8803;
}
.Part ul
{
clear: left;
padding: 0px;
margin: 0px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 10px;
}
.Part li
{
margin-top: 3px;
list-style-type: none;
}
.Part li a
{
padding-left: 14px;
background: url('img/green-arrow-2.gif') no-repeat 0px 5px;
}
#validator
{
clear: left;
float: left;
}
#validator img {
border:0 solid #FFFFFF;
height:31px;
width:88px;
}
#Inter
{
height: 178px;
font-size: 12px;
font-family: arial;
font-weight: bold;
color: white;
}
#Inter ul
{
padding: 0px;
margin: 0px;
padding-top: 90px;
padding-left: 20px;
}
#Inter li
{
margin-top: 3px;
background: url('img/white-arrow.gif') no-repeat 0px 4px;
list-style-type: none;
padding-left: 11px;
}
#RightHeader
{
float: right;
padding-right: 10px;
font-size: 12px;
}
#RightHeader a
{
padding-left: 16px;
padding-right: 4px;
color: #d2e288;
text-decoration: none;
background: no-repeat 0px 0px;
}
#RightHeader a:hover
{
text-decoration: underline;
color: white;
}
#RightHeader a:hover
{
background-position: 0px -12px;
}
#RightHeader a#home
{
background-image: url('img/home-icon.png');
}
#RightHeader a#home:hover
{
background-position: 0px -14px;
}
#RightHeader a#sitemap
{
background-image: url('img/site-map-icon.png');
}
#RightHeader a#contacts
{
background-image: url('img/contact-icon.png');
}
li,ul /* korekce pro IE6 */
{
_padding-bottom: 0px;
_height: 12px;
_padding-top: 0px;
_margin: 0px;
}
