Hallo Andreas!
Zitat von
Andreas
Ja, du kannst die Seitenstruktur beliebig verändern. Module hättest du auch nicht löschen müssen. Zeig uns am besten mal einen Link zu der Seite. Wenn sie noch nicht online ist, kannst du eine statische Seite erstellen und uns diese zeigen. CSS nicht vergessen. Elemente mit der Klasse invisible dürften das Layout nicht beeinflussen.
Im Moment ist die Seite nicht online. Ich arbeite mit MAMPP. Sende Dir vorerst mal den CSS Code:
bildschirm.css
Code:
/* Style sheet bildschirm */
html
{ overflow-y: scroll; }
body
{
background-color: #d9d9d9;
font-family: 81.25% Verdana, Arial, Helvetica, sans-serif;
}
#wrapper
{
background-color:#ffffff;
}
#header
{
margin-top:1em;
padding:48px 0 0 0;
background-color:#89adcd url("header_gradient.jpg") repeat-x left top;
}
#header h1
{
margin-top:0;
}
#header p#slogan
{
margin-left.18px;
}
#container
{
margin-right:18px;
margin-left:18px;
}
#main
{
min-height:300px;
padding-right:10px;
padding-left:10px;
line-height:1.7;
}
#footer
{
margin-bottom:1em;
padding:18px 18px 9px;
background-color:#89adcd;
color:#000;
}
navigation.css
Code:
/*--------------------------------------------------------------------------------------------------*/
/* Horizontale Navigation - Erste Ebene */
#header .mod_navigation
{
margin-top:18px;
padding:0 18px;
background-color:#89adcd;
color:#000;
}
#header .mod_navigation ul
{
width:auto;
margin-bottom:0;
float:left; /*schrumpft die Liste */
}
#header .mod_navigation li
{
width:auto;
margin:0;
border-right:1px solid #89adcd;
float:left; /*schrumpft die Listenelemente*/
list-style-type:none; /*Trennstriche rechts*/
}
#header .mod_navigation li.first
{
border-left:1px solid #89adcd; /*Trennstriche am Anfang*/
}
#header .mod_navigation a,
#header .mod_navigation span
{
min-width:78px;
display:block;
padding:8px;
text-align:center;
text-decoration:none;
color:#000;
background-color:transparent;
}
#header .mod_navigation .active,
#header .mod_navigation .trail
{
background-color:#2d5b85;
color:#fff;
}
#header .mod_navigation a:hover,
#header .mod_navigation a:focus
{
background-color:#2d5b85;
color:#fff;
}
/*-----------------------------------------------------------------------------------------------*/
/* Horizontale Navigation-Zweite Ebene */
/* Möglichkeit 1: Zwei horizontale Ebenen */
#container
{
padding-top:1.5em;
}
#header ul.level_2
{
left:auto;
top:auto;
position:absolute;
background-color:#ddd;
}
#header .level_2 li,
#header .level_2 li.first
{
border: none;
}
/*-------------------------------------------------------------------------------------------------*/
/* Möglichkeit 2: Dropdown-Navigation */
/*Listenelemente zweite Ebene untereinander */
#header .level_2 li
{
clear:both;
border:none;
}
/* Zweite Ebene ausblenden */
#header .level_2
{
width:0;
height:0;
left:-9999px;
position:absolute;
overflow:hidden;
display:inline;
top:-9999px;
z-index:1; /* "nach vorne" über den Inhaltsbereich */;
}
/* Zweite Ebene bei MouseOver einlenden */
#header li:hover .level_2
{
width:auto;
height:auto;
min-width:78px;
left:auto;
top:auto;
overflow:auto;
display:block;
background-color:#adcbe6;
border-bottom:1px solid #2d5b85;
}
#header .level_2 li.first
{
border:none;
}
#header .level_2 li a
{
text-align:left;
}
/*-------------------------------------------------------------------------------------------
/* Vertikale Navigatiion */
#left div.mod_navigation
{
width:142px;
float:left;
margin:32px 0 0;
font-size:12px;
}
#left .mod_navigation h1
{
margin:0 0 1em 0;
font-size:14px;
font-weight:bold;
}
#left .mod_navigation ul
{
margin:0;
padding:0;
background-color:#fff;
}
#left .mod_navigation li
{
list-style-type:none;
margin 0;
}
/* Menüpunkte gestalten */
#left .mod_navigation a,
#left .mod_navigation span
{
display:block;
padding:8px 8px 8px 18px;
background-color:#adcbe6;
border-top:1px solid #fff;
text-decoration:none;
color:#000;
}
/* Rollover und TAB-Fokus */
#left .mod_navigation a:hover,
#left .mod_navigation a:focus
{
color:#fff;
background: #2d5b85;
}
/* Aktiven Menüpunkt hervorheben */
#left .mod_navigation span.active,
#left .mod_navigation trail
{
color:#fff;
background: #2d5b85;
}
/* Menüpunkte gestalten */
#left .mod_navigation a,
#left .mod_navigation span
{
display:block;
background-color:#89adcd;
border-top:1px solid #fff;
text-decoration:none;
color:#000;
padding:8px 8px 8px 18xp;
}
/* Unterpunkte links einrücken */
#left .mod_navigation li li a,
#left .mod_navigation li li span
{
margin-left:18px;
}
/* Hervorhebung für Unterpunkte */
#left .mod_navigation li li a:hover,
#left .mod_navigation li li a:focus
{
background-color:#2d5b85;
color:#fff;
}
/* Alle Links im aktiven Listenelement einfärben */
#left .mod_navigation .submenu a
{
background-color:#adcbe6;
color:#000;
}
/*-------------------------------------------------------------------------------------------------*/
/* Metanavigation */
#header .mod_customnav
{
top:-44px;
position:absolute;
font-size:12px;
right:18px;
}
#header .mod_customnav li
{
width:auto;
float:left;
margin:0;
list-style-type:none;
}
#header .mod_customnav a,
#header .mod_customnav span
{
display:block;
margin-left:9px;
padding:4px;
text-decoration:none;
color:#fff;
}
#header .mod_customnav a:hover,
#header .mod_customnav a:focus
{
color:#000;
background:#89adcd;
}
#header .mod_customnav span.active
{
background-color:#89adcd;
color:#000;
}
/*-------------------------------------------------------------------------------------------------*/
In basic.css wurden nie Änderungen vorgenommen.
Ich hoffe das ich mit der Information der statischen Seite nicht all zu sehr daneben liege.
Hier der Seitenquelltext:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
This website is powered by Contao Open Source CMS :: Licensed under GNU/LGPL
Copyright ©2005-2012 by Leo Feyer :: Extensions are copyright of their respective owners
Visit the project website at http://www.contao.org for more information
//-->
<title>Websites erstellen mit Contao - Contao Open Source CMS 2.10</title>
</head>
<frameset rows="31,*" frameborder="0" framespacing="0">
<frame src="switch.php" name="switch" frameborder="0" scrolling="no" noresize="noresize" />
<frame src="http://localhost:8888/contaobuch/index.php" name="website" frameborder="0" noresize="noresize" />
</frameset>
</html>
Framequelltext:
Code:
<!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=utf-8" />
<!--
This website is powered by Contao Open Source CMS :: Licensed under GNU/LGPL
Copyright ©2005-2012 by Leo Feyer :: Extensions are copyright of their respective owners
Visit the project website at http://www.contao.org for more information
//-->
<title>Startseite - Wolfsberger Open 2012</title>
<base href="http://localhost:8888/contaobuch/" />
<meta name="robots" content="index,follow" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="system/contao.css" media="screen" />
<style type="text/css" media="screen">
/* <![CDATA[ */
#wrapper{width:960px;margin:0 auto;}
#left{width:182px;}
#right{width:182px;}
#main{margin-left:182px;margin-right:182px;}
/* ]]> */
</style>
<link type="text/css" rel="stylesheet" href="plugins/mediabox/1.3.4/css/mediaboxAdvBlack21.css" media="screen" />
<link type="text/css" rel="stylesheet" href="system/scripts/2b60f42d5bea.css" media="all" />
<script type="text/javascript" src="system/scripts/6bb6ab418aaa.js"></script>
<link href="tl_files/themes/blaues_theme/zentrale.css"
rel="stylesheet" type="text/css" />
</head>
<body id="top" class="mac chrome ch18">
<!--[if lte IE 6]>
<div style="background:#ffc;padding:12px;border-bottom:1px solid #e4790f;font-size:14px;color:#000;text-align:center;"><strong>Achtung!</strong> Sie verwenden einen <a href="http://ie6countdown.com" style="font-size:14px;color:#e4790f;">veralteten Browser</a> und <strong>können nicht alle Funktionen dieser Webseite nutzen</strong>.</div>
<![endif]-->
<div id="wrapper">
<div id="header">
<div class="inside">
<h1>Beispielsite</h1>
<p id="slogan">Websites erstellen mit Contao</p>
<!-- indexer::stop -->
<div class="mod_customnav block">
<a href="#skipNavigation14" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="first"><a href="index.php/kontakt-12.html" title="Kontakt" class="first">Kontakt</a></li>
<li><a href="index.php/kontakt.html" title="Impressum">Impressum</a></li>
<li class="last"><a href="index.php/sitemap.html" title="Sitemap" class="last">Sitemap</a></li>
</ul>
<a id="skipNavigation14" class="invisible"> </a>
</div>
<!-- indexer::continue -->
<!-- indexer::stop -->
<div class="mod_navigation block">
<a href="#skipNavigation3" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="active first"><span class="active first">Startseite</span></li>
<li class="sibling"><a href="index.php/nachrichten.html" title="Nachrichten" class="sibling">Nachrichten</a></li>
<li class="sibling"><a href="index.php/artikel-erstellen-16.html" title="Artikel erstellen" class="sibling">Artikel erstellen</a></li>
<li class="sibling"><a href="index.php/erweiterungen.html" title="Erweiterungen" class="sibling">Erweiterungen</a></li>
<li class="sibling last"><a href="index.php/downloads.html" title="Downloads" class="sibling last">Downloads</a></li>
</ul>
<a id="skipNavigation3" class="invisible"> </a>
</div>
<!-- indexer::continue -->
</div>
</div>
<div id="container">
<div id="left">
<div class="inside">
</div>
</div>
<div id="right">
<div class="inside">
</div>
</div>
<div id="main">
<div class="inside">
<div class="mod_article block" id="startseite">
<h1 class="ce_headline">Willkommen beim Wolfsberger Open 2012</h1>
<div class="ce_text block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis ligula tortor. Duis dictum, dolor eget dignissim scelerisque, augue lorem dictum nisl, quis molestie purus lectus vel ligula. Curabitur eget nisl mauris. Donec pharetra tellus sollicitudin lacus volutpat lacinia. In magna tortor, suscipit id lacinia et, aliquet vel enim. Morbi vel velit diam, ut imperdiet nunc. Integer nisl turpis, luctus nec dignissim vel, accumsan sed purus. Curabitur facilisis dui at magna fermentum dignissim.</p>
<p>Sed id nulla ligula. Cras sed magna vel nibh blandit pulvinar eu eget ipsum. Sed feugiat semper elit et rutrum. Cras vulputate dapibus volutpat. Nullam velit urna, condimentum id suscipit sed, ornare nec erat. Curabitur eu diam porttitor felis blandit commodo. Mauris elementum condimentum viverra. In hac habitasse platea dictumst. Mauris nisi velit, vehicula sit amet pulvinar eu, ultrices sed sapien.</p>
</div>
</div>
</div>
<div id="clear"></div>
</div>
</div>
<div id="footer">
<div class="inside">
<p>Made with Contao</p>
</div>
</div>
</div>
<script type="text/javascript" src="plugins/mediabox/1.3.4/js/mediabox.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
Mediabox.scanPage = function() {
var links = $$('a').filter(function(el) {
return el.rel && el.rel.test(/^lightbox/i);
});
$$(links).mediabox({/* Put custom options here */}, null, function(el) {
var rel0 = this.rel.replace(/[[]|]/gi,' ');
var relsize = rel0.split(' ');
return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
});
};
window.addEvent('domready', Mediabox.scanPage);
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
new Request({
url:'system/html/cron.txt',
onComplete: function(txt) {
if (!txt) txt = 0;
if (parseInt(txt) < (Date.now()/1000 - 300)) {
new Request({url:'cron.php'}).get();
}
}
}).get();
/* ]]> */
</script>
</body>
</html>
Wie gesagt, ich arbeite als Anfänger strikt nach dem Buch und ein Beispiel nach dem anderen funktionieren einwandfrei, so auch bis zur Abbildung 9.21 (S. 244) genau so war auch die Seite im Browser. Dann nahm ich wie beschrieben die Änderung in der Seitenstruktur vor und aus war es mit der schönen Seite. Reagiert das wirklich alles so empfindlich, aber probieren muss doch erlaubt sei. Mit HTML u. CSS bin ich leider noch nicht ganz so weit, dass ich von dort aus einen etwaigen Fehler schlüssig interpretieren könnte.
Navigation und Formatierung spielen verrückt!
Zitieren
und dann wieder zurückkopiert.
Lesezeichen