Hallo,
ich habe mal lokal eine Contao 2.10 Installation mit einer meiner Websites erstellt. Im Thema html5 und css3 bin ich noch gar nicht. Die Seite sieht da schon recht gut aus, einige Fehler habe ich auch beseitigen können. Aber die Gallery die von Contao zur Verfügung stellt, spurt ums Verrecken nicht.
Sie dehnt sich auf 100% Seitenbreite aus und rutscht damit immer unter die Navigation. Hier mal der Seitenquelltext und anschließend die css. Wie bringe ich es fertig, das die Gallery wieder nur im Hauptbereich angezeigt wird?
Danke wenn jemand Rat weis.
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<!--
This website is powered by Contao Open Source CMS :: Licensed under GNU/LGPL
Copyright ©2005-2011 by Leo Feyer :: Extensions are copyright of their respective owners
Visit the project website at http://www.contao.org for more information
//-->
<title>Bilderhistorie der Weiberfastnacht - Carneval-Club-Besse</title>
<base href="http://localhost/ccb210_h5/">
<meta name="robots" content="index,follow">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="system/contao.css" media="screen">
<style media="screen">
#wrapper{width:960px;margin:0 auto;}
#right{width:188px;}
#main{margin-right:188px;}
</style>
<link rel="stylesheet" href="system/modules/guestbook/html/mod_guestbook.css" media="all">
<link rel="stylesheet" href="plugins/mediabox/1.3.4/css/mediaboxAdvBlack21.css" media="screen">
<link href="tl_files/themes/ccb_theme/zentrale.css" rel="stylesheet" type="text/css" />
<script src="system/scripts/6bb6ab418aaa.js"></script>
<!--[if lt IE 9]><script src="plugins/html5shim/html5-1.6.2.js"></script><![endif]-->
</head>
<body id="top" class="mac firefox fx6">
<!--[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">
<header id="header">
<div class="inside">
<h1><span class="big">C</span>arneval-<span class="big">C</span>lub-<span class="big">B</span>esse</h1>
<p id="slogan">...hier ist der Karneval zu Hause!</p>
<!-- indexer::stop -->
<nav class="mod_customnav block">
<a href="index.php/weiberfastnacht.html#skipNavigation6" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="first"><a href="index.php/vorstand.html" title="Vorstand" class="first">Vorstand</a></li>
<li><a href="index.php/impressum.html" title="Impressum">Impressum</a></li>
<li class="last"><a href="index.php/kontakt.html" title="Kontakt" class="last">Kontakt</a></li>
</ul>
<a id="skipNavigation6" class="invisible"> </a>
</nav>
<!-- indexer::continue -->
<!-- indexer::stop -->
<div class="anmeldelink"><a href="index.php/anmelden.html" title="Anmelden">Anmelden</a></div>
<!-- indexer::continue -->
</div>
</header>
<div id="container">
<aside id="right">
<div class="inside">
<!-- indexer::stop -->
<div class="mod_form tableless block">
<form action="index.php/finden.html" id="suchformular" method="get" enctype="application/x-www-form-urlencoded">
<div class="formbody">
<input type="text" name="keywords" id="ctrl_6" class="text" value=""> <input type="submit" id="ctrl_6_submit" class="submit" value="Suchen"><br>
</div>
</form>
</div>
<!-- indexer::continue -->
<!-- indexer::stop -->
<nav class="mod_navigation block">
<a href="index.php/weiberfastnacht.html#skipNavigation1" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="startseite sibling first"><a href="index.php/index.html" title="Startseite" class="startseite sibling first">Startseite</a></li>
<li class="sibling"><a href="index.php/aktive.html" title="Aktive" class="sibling">Aktive</a></li>
<li class="sibling"><a href="index.php/sessionsberichte.html" title="Sessionen" class="sibling">Sessionen</a></li>
<li class="sibling"><a href="index.php/bildergalerien.html" title="Bildergalerien" class="sibling">Bildergalerien</a></li>
<li class="sibling"><a href="index.php/alle-prinzenpaare.html" title="Alle Prinzenpaare" class="sibling">Alle Prinzenpaare</a></li>
<li class="active"><span class="active">Weiberfastnacht</span></li>
<li class="sibling"><a href="index.php/verein.html" title="Verein" class="sibling">Verein</a></li>
<li class="sibling"><a href="index.php/kalender.html" title="Kalender" class="sibling">Kalender</a></li>
<li class="sibling"><a href="index.php/gaestebuch.html" title="Gästebuch" class="sibling">Gästebuch</a></li>
<li class="sibling last"><a href="index.php/links.html" title="Links" class="sibling last">Links</a></li>
</ul>
<a id="skipNavigation1" class="invisible"> </a>
</nav>
<!-- indexer::continue -->
</div>
</aside>
<section id="main">
<div class="inside">
<article class="mod_article block" id="weiberfastnacht">
<h1 class="ce_headline">Bilderhistorie des Weiberelferrats</h1>
<section class="ce_gallery block">
<table>
<tbody>
<tr class="row_0 row_first even">
<td class="col_0 col_first" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_1995.jpg" rel="lightbox[lb188]" title="Weiberelferrat 1995"><img src="system/html/weiberelferrat_1995-f464e8b9.jpg" width="96" height="120" alt="Weiberelferrat 1995"></a>
<figcaption class="caption">Weiberelferrat 1995</figcaption>
</figure>
</td>
<td class="col_1" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_1999.jpg" rel="lightbox[lb188]" title="Weiberelferrat 1999"><img src="system/html/weiberelferrat_1999-7db8f295.jpg" width="160" height="138" alt="Weiberelferrat 1999"></a>
<figcaption class="caption">Weiberelferrat 1999</figcaption>
</figure>
</td>
<td class="col_2" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2000.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2000"><img src="system/html/weiberelferrat_2000-5ffc0cba.jpg" width="160" height="105" alt="Weiberelferrat 2000"></a>
<figcaption class="caption">Weiberelferrat 2000</figcaption>
</figure>
</td>
<td class="col_3 col_last" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2001.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2001"><img src="system/html/weiberelferrat_2001-fb7ca864.jpg" width="160" height="105" alt="Weiberelferrat 2001"></a>
<figcaption class="caption">Weiberelferrat 2001</figcaption>
</figure>
</td>
</tr>
<tr class="row_1 odd">
<td class="col_0 col_first" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2002.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2002"><img src="system/html/weiberelferrat_2002-076d799d.jpg" width="160" height="113" alt="Weiberelferrat 2002"></a>
<figcaption class="caption">Weiberelferrat 2002</figcaption>
</figure>
</td>
<td class="col_1" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2003.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2003"><img src="system/html/weiberelferrat_2003-3709d183.jpg" width="160" height="115" alt="Weiberelferrat 2003"></a>
<figcaption class="caption">Weiberelferrat 2003</figcaption>
</figure>
</td>
<td class="col_2" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2004.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2004"><img src="system/html/weiberelferrat_2004-79b4ae4e.jpg" width="160" height="107" alt="Weiberelferrat 2004"></a>
<figcaption class="caption">Weiberelferrat 2004</figcaption>
</figure>
</td>
<td class="col_3 col_last" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2005.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2005"><img src="system/html/weiberelferrat_2005-149f1e9e.jpg" width="160" height="111" alt="Weiberelferrat 2005"></a>
<figcaption class="caption">Weiberelferrat 2005</figcaption>
</figure>
</td>
</tr>
<tr class="row_2 even">
<td class="col_0 col_first" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2006.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2006"><img src="system/html/weiberelferrat_2006-70af1921.jpg" width="160" height="112" alt="Weiberelferrat 2006"></a>
<figcaption class="caption">Weiberelferrat 2006</figcaption>
</figure>
</td>
<td class="col_1" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2007.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2007"><img src="system/html/weiberelferrat_2007-2f71bf7f.jpg" width="160" height="109" alt="Weiberelferrat 2007"></a>
<figcaption class="caption">Weiberelferrat 2007</figcaption>
</figure>
</td>
<td class="col_2" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2008.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2008"><img src="system/html/weiberelferrat_2008-45c5d183.jpg" width="160" height="107" alt="Weiberelferrat 2008"></a>
<figcaption class="caption">Weiberelferrat 2008</figcaption>
</figure>
</td>
<td class="col_3 col_last" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2009.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2009"><img src="system/html/weiberelferrat_2009-1a9822e9.jpg" width="160" height="107" alt="Weiberelferrat 2009"></a>
<figcaption class="caption">Weiberelferrat 2009</figcaption>
</figure>
</td>
</tr>
<tr class="row_3 row_last odd">
<td class="col_0 col_first" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2010.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2010"><img src="system/html/weiberelferrat_2010-5c7c0fbe.jpg" width="160" height="107" alt="Weiberelferrat 2010"></a>
<figcaption class="caption">Weiberelferrat 2010</figcaption>
</figure>
</td>
<td class="col_1" style="width:25%;">
<figure class="image_container" style="padding:7px 1px;">
<a href="tl_files/bilder/weiberfastnacht/weiberelferrat_2011.jpg" rel="lightbox[lb188]" title="Weiberelferrat 2011"><img src="system/html/weiberelferrat_2011-42738370.jpg" width="160" height="107" alt="Weiberelferrat 2011"></a>
<figcaption class="caption">Weiberelferrat 2011</figcaption>
</figure>
</td>
<td class="col_2 empty"> </td>
<td class="col_3 col_last empty"> </td>
</tr>
</tbody>
</table>
</section>
</article>
</div>
<div id="clear"></div>
</section>
</div>
<footer id="footer">
<div class="inside">
<p>© 2008, CCB Carneval-Club-Besse 1962 e.V<br />
Wir wünschen viel Spaß auf unserer Homepage und bei
unseren Veranstaltungen!</p>
</div>
</footer>
</div>
<script src="plugins/mediabox/1.3.4/js/mediabox.js"></script>
<script>
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>
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>
Code:
@media screen {
#header .mod_customnav {
position: absolute;
top: -34px;
right: 18px;
font-size: 12px;
font-family: Arial,Verdana,Helvetica,sans-serif;
}
#header .mod_customnav li {
float: left;
width: auto;
list-style-type: none;
margin: 0;
border-left: 1px solid #fff;
padding-right: 6px;
}
#header .mod_customnav a,
#header .mod_customnav span {
display: block;
text-decoration: none;
color: #fff;
padding: 4px;
margin-left: 9px;
}
#header .mod_customnav a:hover,
#header .mod_customnav a:focus {
background: #89adcd;
color: #000;
}
#header .mod_customnav span.active {
background-color: #89adcd;
color: #000;
}
#right .mod_form {
float: right;
width: 180px;
background-color: #194c8e;
border-top: 1px solid #fff;
margin-right: 1px;
}
#right #ctrl_6 {margin: 5px 0 10px 25px;}
#right #ctrl_6_submit {margin: 0 0 0 55px;}
#right .countdown {
float: right;
width: 180px;
margin-right: 1px;
text-align: center;
background-color: #194c8e;
border-top: 1px solid #fff;
color: #fff;
}
#right .countdown a {
text-decoration: none;
color: #fff;
}
#right .countdown a:hover,
#right .countdown a:focus {
background: #89adcd;
color: #000;
}
#right nav.mod_navigation {
float: right;
width: 180px;
margin: 0 1px 0 0;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 1.1em;
}
#right nav.mod_navigation ul {
background-color: #fff;
margin: 0;
padding: 0;
}
#right nav.mod_navigation li {
margin: 0;
list-style-type: none;
padding: 0;
}
#right nav.mod_navigation a,
#right nav.mod_navigation span {
display: block;
text-decoration: none;
background-color: #194c8e;
color: #fff;
padding: 4px 4px 4px 9px;
border-top: 1px solid #fff;
}
#right nav.mod_navigation a:hover,
#right nav.mod_navigation a:focus {
background-color: #5789c6;
color: #fff;
}
#right nav.mod_navigation span.active,
#right nav.mod_navigation .trail {
background-color: #5789c6;
color: #fff;
}
#right nav.mod_navigation li li a,
#right nav.mod_navigation li li span {
margin-left: 0;
padding-left: 18px;
}
#right nav.mod_navigation li li a:hover,
#right nav.mod_navigation li li a:focus {
background-color: #5789c6;
color: #d09900;
}
#right nav.mod_navigation .submenu a {
background-color: #74aad0;
color: #000;
}
a.ext {
text-decoration: none;
color: #999;
background: url(bground/bluat1.gif) no-repeat left bottom;
padding-left: 20px;
}
a.int {
background: url(bground/bluint1.gif) no-repeat left bottom;
padding-left: 20px;
}
/* Nachrichten - Monat auswählen */
#left nav.mod_newsmenu {
float: left;
width: 142px;
font-size: 12px;
margin: 18px 0 0 10px;
}
#left .mod_newsmenu ul{
margin:0;
padding:0;
background-color:#fff;
}
#left .mod_newsmenu li {
list-style-type: none;
margin: 0;
}
#left .mod_newsmenu li.year {
font-size: 14px;
font-weight: bold;
padding: 0 0 1em 0;
}
#left .mod_newsmenu .level_2 {
font-size: 12px;
font-weight: normal;
margin: 1em 0 ;
}
#left .mod_newsmenu a,
#left .mod_newsmenu span {
display: block;
text-decoration: none;
background-color: #adcbe6;
color: #000;
padding: 4px;
border-top: 1px solid #fff;
}
#left .mod_newsmenu a:hover,
#left .mod_newsmenu a:focus {
background: #2d5b85;
color: #000;
}
#left .mod_newsmenu span.active {
background: #2d5b85;
color: #fff;
}
.pagination {
color: #000;
padding: 0 18px;
margin-top: 18px;
}
.pagination ul {
float: left;
width: auto;
}
.pagination li {
float: left;
width: auto;
list-style-type: none;
font-size: 12px;
}
.pagination a,
.pagination span {
display: block;
min-width: 10px;
color: #000;
text-align: center;
text-decoration: none;
padding: 8px;
}
/* ======================================
Sitemap gestalten - Kap. 8.8
====================================== */
.mod_sitemap ul ul { margin-bottom: 0; }
.mod_sitemap li {
list-style-type: none;
margin-left: 0; /* 1. Ebene ohne Einzug links */
}
.mod_sitemap li li { margin-left: 1.5em; } /* linker Einzug */
.mod_sitemap a { text-decoration: none; }
.mod_sitemap .level_1 a { font-weight: bold; color: #333;}
.mod_sitemap .level_2 a { font-weight: normal; color: #666;}
/* Patch hasLayout für IE 6 */
* html .mod_navigation ul,
* html .mod_navigation a,
* html .mod_navigation span {height: 1px;}
} /* Ende @media */
Code:
@media screen {
html {
height: 100.1%;
font-size: 62.5%;
}
body {
font-family: Arial,Verdana,Helvetica,Geneva,sans-serif;
font-size: 1.3em;
color: #333;
background: #fff url(bground/jockel_bg.png);
voice-family: "\" }\"";
voice-family: inherit;
font-size: 1.1em;
}
html>body {font-size:1.1em;}
#wrapper {margin-top: 10px;
margin-bottom: 10px;
}
#header {
/*height: 120px;*/
margin: 0;
padding: 20px 0 0 0;
margin-top: 2px;
font-family: "Comic Sans MS";
background: #194c8e url(bground/head1.png) no-repeat;
}
#header h1
{
margin: 5px 140px 0 10px;
padding: 13px 20px 17px 10px;
text-align: center;
font-family: "Comic Sans MS";
font-size: 2.5em;
color: #ffffff;
background: #194c8e url(bground/jockelsm02.gif) no-repeat left;
letter-spacing: 0.30em;
border: none;
}
.big {font-size:2.1em;}
#header p {
margin: -18px 280px 0 0;
padding-bottom: 10px;
text-align: right;
font-weight: bold;
font-size: 1.3em;
color: #deba7b;
}
h1,
h2,
h3,
h4,
h6 {
margin: 5px;
padding: 5px 5px 5px 7px;
text-align: center;
font-family: "Trebuchet MS",Arial,Verdana,Helvetica,Geneva,sans-serif;
font-weight: bold;
color: #444444;
}
.mod_article h1 {
margin: 20px 0 20px 15px;
padding: 5px;
background: url(bground/headline.png) no-repeat bottom left;
text-align: center;
font-size: 2.4em;
line-height: 1.5em;
}
#sessionen-berichte h1 {
margin: 0 0 20px 15px;
padding: 5px;
background: url(bground/sheadline.png) no-repeat bottom left;
text-align: center;
font-size: 2.4em;
line-height: 1.5em;
}
h2,h3,h4,h6 {text-decoration: underline;}
h2,h3,h6 {font-size: 1.4em;}
h2 {
line-height: 1.5em;
background: url(bground/kaeppchen.png) no-repeat bottom right;
padding: 15px 20px 5px 30px;
font-size: 1.8em;
color: #194c8e;
}
h4, h5 {font-size: 1.2em;}
h6 {border-top: 1px dotted #888888;}
p {
margin: 1em 1em 1em 1.5em;
font-size: 1.2em;
line-height:1.4em;
}
#container {
background: #fff url(bground/navtrenner.png) repeat-y;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
#container #topnews {
background: #fff;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
#footer {clear:both;}
#footer p {
margin: 0;
padding: 10px 5px;
text-align: center;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 1em;
color: #fff;
background: #5789c6 url(bground/feed1.png) no-repeat bottom;
}
.ce_text .image_container,
.mod_newsarchive .image_container
{
margin: 0 15px 10px 25px;
background: url(bground/dropshadow.png) no-repeat bottom right !important;
background: url(bground/dropshadow.gif) no-repeat bottom right;
margin: 10px 15px 15px 25px !important;
}
.ce_text .image_container img,
.mod_newsarchive .image_container img {
position: relative;
display: block;
margin: -3px 5px 5px -3px;
padding: 2px;
background-color: #fff;
border: 1px solid #666;
}
.ce_image { margin: 30px 0 30px 150px; }
.ce_image .image_container img {
position: relative;
display: block;
padding: 2px;
background-color: #fff;
border: 1px solid #666;
}
.ce_text .caption {padding: 0 0 7px 5px;}
.mod_newsarchive .layout_latest{
margin: 0 2em 0 15px;
border-top: 1px dotted #999;
}
.ce_text li {
font-size: 1.2em;
list-style-type: disc;
}
.ce_text li li {
font-size: 1.0em;
list-style-type: circle;
}
.ce_text a,
#verein a {
color: #194c8e;
text-decoration: none;
}
.mod_newsarchive h2 a { color: #194c8e; }
.mod_newsarchive a {
text-decoration: none;
color: #000;
}
.mod_newsarchive a:hover,
.mod_newsarchive a:focus { text-decoration: underline; }
.mod_newsarchive li { font-size: 1.1em; }
.mod_newsarchive .caption,
.mod_newsreader .caption {
width: 150px;
text-align: center;
padding-bottom: 5px;
}
.mod_newsarchive .info,
.mod_newsreader .info {
font-size: 1.1em;
margin-left: 2em;
}
.mod_newsreader li {
margin-left: 20px;
font-size: 1.1em;
text-align: left;
list-style-type: circle;
list-style-position: inside;
}
.ppsession .image_container {
margin-left: 35px;
}
.ppsession .image_container img {
border: 2px solid #d9d9d9;
border-right-color: #bbb;
border-bottom-color: #bbb;
margin-right: 30px;
margin-left: 15px;
}
.ppsession .image_container .caption {
width: 200px;
font-size: 1.1em;
text-align: center;
line-height: 1.2;
margin-bottom: 1em;
padding-left: 15px;
}
.pdf_link {
text-align: right;
/*width: auto;*/
margin: 10px 20px 10px 0;
}
.ce_toplink {
margin: 1.5em 1em;
font-size: 1.1em;
text-align: right;
}
.ce_toplink a{
color: #000;
background: #fff url(bground/bluup1.gif) no-repeat;
padding-left: 5px;
}
.ce_gallery .image_container img {
border: 2px solid #d9d9d9;
border-right-color: #bbb;
border-bottom-color: #bbb;
}
.ce_table table {
width: 100%;
background-color: #d9d9d9;
border-collapse: collapse;
border-bottom: 2px solid #bbb;
margin-bottom: 1em;
}
.ce_table thead {
background-color: #fff;
color: #000;
border-top: 2px solid #bbb;
border-bottom: 1px solid #bbb;
}
.ce_table tr.odd { background-color: #fff; }
.ce_table td, .ce_table th {
font-size: 1.1em;
padding: 0.5em 1em;
width: 28%;
}
/* ======================================
Kontaktformular gestalten
====================================== */
form#kontaktformular {
line-height: 1;
background-color: #ADCBE6;
padding: 0 18px 18px 18px;
border-top: 1px solid #89ADCD;
border-bottom: 1px solid #89ADCD;
margin: 0 2em 2em 2em;
}
#kontaktformular label {
display: block;
cursor: pointer;
margin: 18px 0 3px 0;
}
#kontaktformular .checkbox_container label {
display: inline;
position: relative;
bottom: 2px;
}
#kontaktformular .checkbox_container {
margin-top: 1em;
}
#kontaktformular input,
#kontaktformular textarea {
padding: 3px;
}
#kontaktformular input:focus,
#kontaktformular textarea:focus {
background-color: #ECECEC;
color: #000;
}
#kontaktformular p.error {
background: #FFC0CB; /* pink */
color: #000;
max-width: 400px;
padding: 3px;
border: 1px solid #f00; /* rot */
margin-bottom: 3px;
}
#kontaktformular .formbody { margin-left: 230px; }
/* Gestaltung Impressum und Seiten unter Verein */
.impressum p {
margin-left: 250px;
font-size: 1.2em;
}
.reim p { margin-left: 230px;}
.ce_download {
margin: 0 20px 10px 230px;
}
.ce_download a {
color: #194c8e;
text-decoration: none;
font-size: 1.2em;
}
/*Ausrichtung fŸür die Aktiven-Startseite*/
#slinks {
float: left;
width: 300px;
margin: 5px 5px 5px 50px;
padding-top: 5px;
}
.kiste {
width: 300px;
margin-top: 0px;
background-color: #fff;
border: 1px solid #999;
}
.kiste h5 {
text-align: center;
padding: 2px 2px;
margin: -5px;
border-bottom: 1px solid #194c8e;
background-color: #194c8e;
color: #fff;
}
.kiste p {
padding: 0 1px 1px 1px;
font-size: 1.2em;
}
.kiste a {
text-decoration: underline;
font-weight: bold;
}
/* ======================================
Suche - Ergebnisseite
====================================== */
#finden { margin: 0 30px; }
#finden p { margin-top: 1em; }
.mod_search input.text {
padding: 3px;
margin-left: 30px;
font-size: 1.2em;
}
.submit {
margin-left: 20px;
font-size: 1.2em;
}
.mod_search .radio_container{ margin: 1em 25px; }
.mod_search .radio_container label {
margin-right: 10px;
font-size: 1.2em;
}
#main .mod_search p.header {
text-align: right;
background-color: #ADCBE6;
border-top: 2px solid #86ADCD;
padding: 0.5em;
margin-top: 2em;
}
#main .mod_search h3 { font-size: 1.4em; }
#main .mod_search h3 a:link {
color: #0000FF;
background: none;
padding-left: 0;
}
#main .mod_search h3 a:visited {
color: #800080;
background: none;
padding-left: 0;
}
.mod_search h3 .relevance {
font-size: 1em;
font-weight: normal;
}
.mod_search p.context { margin: 0; }
.mod_search .highlight { font-weight: bold; }
.mod_search p.url { color: #008000; }
.mod_search .even, .mod_search .odd { padding: 0.5em; }
.mod_search .odd {
background-color: #d9d9d9;
margin: 1em 0;
}
/* ======================================
Mitglieder
====================================== */
/* Links im Header */
#header .abmeldelink,
#header .anmeldelink {
position: absolute;
/*float: left;
width: 230px;*/
left: 20px;
top: -19px;
color: #fff;
text-decoration: none;
font-size: 1.05em;
font-family: Arial,Verdana,Helvetica,sans-serif;
/*margin: -135px 0 0 20px;*/
}
.abmeldelink a,
.anmeldelink a {
color: #fff;
text-decoration: none;
font-size: 1.1em;
font-family: Arial,Verdana,Helvetica,sans-serif;
}
/* Anmeldeformular */
#tl_login { margin-left: 40px; }
#tl_login form {
line-height: 2;
padding-top: 1em;
}
#tl_login label {
float: left;
width: 100px;
line-height: 1.4em;
font-size: 1.2em;
}
#tl_login .checkbox_container label { float: none; }
#tl_login .checkbox_container input,
#tl_login .submit_container input.submit {
margin: 10px 0 0 100px;
}
#tl_login input.submit[value="Abmelden"] { margin-left: 0; }
/* ======================================
Kalender
====================================== */
table.calendar{
width: 98%;
border-collapse: separate;
background-color: #fcfcfc;
margin-left:5px;
}
table.calendar .head {
font-size: 1.1em;
text-align:center;
background-color: #f1f2f3;
padding: 6px 0;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
}
table.calendar th.previous {
text-align: left;
padding-left: 3px;
border-left: 1px solid #d9d9d9;
}
table.calendar th.next {
text-align: right;
padding-right: 3px;
border-right: 1px solid #d9d9d9;
}
table.calendar th a {
font-weight: normal;
text-decoration: none;
color:#333;
}
table.calendar th a:hover {
text-decoration:underline;
}
table.calendar .label {
font-size: 1.1em;
font-weight: normal;
text-align: center;
background-color:#ADCBE6;
color:#333;
padding: 2px;
}
table.calendar .weekend {
background-color:#f0f0f0;
color: #bbb;
}
table.calendar td {
width: 14%;
height: 7em;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
}
table.calendar .col_first {
border-left: 1px solid #d9d9d9;
}
table.calendar .header {
font-size: 1.1em;
background-color: #e6e6e6;
color: #666;
padding: 1px;
margin: 1px;
}
table.calendar .today {
background-color:#ADCBE6;
color: #fff;
}
table.calendar .event {
line-height: 1.1;
margin: 3px;
}
table.calendar .event a {
font-size: 1.1em;
text-decoration: none;
color: #333;
}
table.calendar .event a:hover{
text-decoration:underline;
}
/* ======================================
Startseite gestalten
====================================== */
.startseite .float_element {
float: left;
width: 330px;
background-color: #fff;
padding: 3px 4px 9px 4px;
border: 1px solid #194c8e;
margin: 18px 10px 25px 25px;
font-size: 1em;
}
.startseite .float_element h3 {
padding: 4px 2px;
margin: -5px -5px 10px -5px;
border-bottom: 1px solid #194c8e;
background-color: #194c8e;
color: #fff;
}
.startseite .float_element a { font-size: 1.1em; }
.startseite .float_element_redbox {
float: left;
width: 698px;
background-color: #fff;
padding: 3px 4px 9px 4px;
border: 1px solid #c41019;
margin: 18px 10px 25px 24px;
}
.startseite .float_element_redbox h3 {
padding: 4px 2px;
margin: -5px -5px 10px -5px;
border-bottom: 1px solid #c41019;
background-color: #c41019;
color: #fff;
}
.startseite .float_element_gross {
float: left;
width: 698px;
background-color: #fff;
padding: 3px 4px 9px 4px;
margin: 18px 10px 25px 24px;
}
.startseite .float_element_borderless {
float: left;
width: 330px;
background-color: #fff;
padding: 3px 4px 9px 4px;
/*border: 1px solid #194c8e;*/
margin: 18px 10px 10px 25px;
}
.startseite .float_element_borderless h2 {
padding: 4px 2px;
margin: -5px -5px 10px -5px;
}
/* Eventanmeldung */
.layout_simple,
.event { margin-bottom: 5px; }
.mod_serattendance { visibility: hidden; }
.ser_event_list { margin-left: 30px; }
.sortable th,
.sortable td {
width: 140px;
margin-top: 3px;
font-size: 1.2em;
line-height: 1.4em;
}
.checkbox_container { margin-left: 15px; }
.checkbox { margin-left: 20px; }
.submit_container { margin-top: 15px; }
/* Ende */
.entry-content p { font-size: 0.9em; }
/* Anmeldeseite - Passwort vergessen*/
.hyperlink_txt {
margin: 80px 0 0 140px;
font-size: 1.2em;
color: #194c8e;
text-decoration: none;
}
/* Anmeldeseite - Abmeldebutton */
#tl_logout .submit { margin-left: 20px; }
.checkbox_container { margin-left: -2px; }
/* Mein Konto */
.fields { margin: 30px 0 0 50px; }
.fields label,
.fields input {
float: left;
width: 140px;
margin-right: 30px;
}
.fields #ctrl_firstname { margin-top: 8px; }
.mod_personalData .submit_container { margin: 40px 0 20px 560px;}
/* Mitgliederliste formatieren */
.mod_memberlist #ctrl_for { margin-left: 20px; }
.mod_memberlist .single_record {
margin-left: 20px;
font-size: 1.2em;
line-height: 1.3em;
}
.mod_memberlist .single_record .value { padding-left: 20px; }
.mod_memberlist .formbody {margin-left: 20px; }
} /* Ende @media */
[Moderation: Beitrag hier ausgelagert.]
Contao-Gallery und html5
Zitieren
Zitat von gHeldT
Lesezeichen