Ich habe das sehr wohl gelesen, nur einfach bei der Umsetzung vergessen! Musste mich auch ersteinmal wieder gehörig einlesen (hml 5 tags) und das gedanklich Durchgekaute dann auch adäquat umsetzen, ich denke aber, dass es mir gelungen ist
ich meine nun ein klares theme mit klarer Struktur zu haben; dennoch bleibt ein Problem den Abständen. Ich habe das submenu und den content nun links gefloatet und die sidebar '<aside>' rechts. Müsste ich den Abstand nicht mit padding-left bzw right wegbekommen ? Ich hätte gerne, dass die sidebar bündig mit header abschließt.
Über Anregungen würde ich mich freuen!
Viele Grüße Kalenderfamily
PHP-Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <?php theme_meta(); ?> </head>
<?php include __dir__.'/count.php'; ?>
<body>
<div class="wrapper">
<header> <? php theme_sitetitle(); ?> BILD </header>
<nav> <?php theme_menu('ul', 'li', 'active', 0); ?> </nav>
<section><?php theme_pagetitle(); ?></section>
<div class="submenu"> <?php theme_menu('ul', 'li', 'active', 1, true); ?> </div>
<div class="content">
<div class="txt">
<?php theme_content(); ?>
<?php theme_area('main'); ?>
</div>
</div>
<aside> <?php include $_SERVER['DOCUMENT_ROOT'].'/data/settings/pages/99.sidebar.php'; echo $content; ?> </aside>
<footer>
<?php theme_area('footer'); ?>
</footer>
</body>
</div>
</html>
Code:
.wrapper {
/*
body ist der gesamte bildschirm
*/
background-color: black;
font-family: Trebuchet MS;
color: #000000;
margin: 50px;
}
header {
/* comments
reserviert f�r das bild oder text
background-color: green; /* kommentar */
margin-bottom: 50px; /* original 10 , hier ist das menu !!!*/
margin-left: 2%;
*/
display:block;
width: 900px;
height: 256px;
background-color:red;
background-image: url(./header.png); background-repeat:no-repeat;
}
nav {
/* comments
background-color: yellow; /* kommentar */
top: 225px; war original mit margin-top ausgetauscht
position: absolute;
margin-top: -100px;
margin-left: 50px;
margin-bottom: 10px;
width: 600px;
height: 70px;
*/
font-size: 15px;
background-color:yellow;
}
nav a:link {
/* comments
nur f�r textlinks, f�r links im kreis nicht relevant!!
*/
}
nav a:visited {
/* comments
nur f�r textlinks, f�r links im kreis nicht relevant!!
*/
vertical-align: middle;
}
nav a:active {
/* comments
nur f�r textlinks, f�r links im kreis nicht relevant!!
*/
vertical-align: middle;
}
nav a:hover {
/* comments
nur f�r textlinks, f�r links im kreis nicht relevant!!
*/
text-decoration: none;
background-color: blue;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 300px;
vertical-align: middle;
}
nav ul {
/* comments
background-color: gray;
*/
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
nav ul li {
/* comments
background-color: black;
*/
display: inline-block;
width: 100px;
line-height: 5.6;
margin-left: 10px;
}
nav ul li a {
/* comments
w�rde f�r alle listenelemente gelten!!
background-color: red;
color: yellow;
*/
border-radius: 50%;
display: block;
font-size: 1.1em;
text-decoration: none;
}
nav ul li:nth-child(1) a { background-color: blue; color: white;}
nav ul li:nth-child(2) a { background-color: green; color: white;}
nav ul li:nth-child(3) a{ background-color: orange; color: white;}
nav ul li:nth-child(4) a { background-color: red; color: white;}
nav ul li:nth-child(5) a { background-color: blue; color: white;}
nav ul li:nth-child(6) a { background-color: green; color: white;}
nav ul li:nth-child(7) a{ background-color: orange; color: white;}
nav ul li:nth-child(8) a { background-color: red; color: white;}
nav ul li:nth-child(1) a:hover{ background-color: orange; }
nav ul li:nth-child(2) a:hover{ background-color: red; }
nav ul li:nth-child(3) a:hover{ background-color: blue; }
nav ul li:nth-child(4) a:hover{ background-color: green; }
nav ul li:nth-child(5) a:hover{ background-color: orange; }
nav ul li:nth-child(6) a:hover{ background-color: red; }
nav ul li:nth-child(7) a:hover{ background-color: blue; }
nav ul li:nth-child(8) a:hover{ background-color: green; }
.submenu {
/* comments
margin-left: 0px;
margin-top: 45px;
margin-right: 20px;
*/
float: left;
background-color: brown;
font-size: 11pt;
width: 180px;
}
.submenu ul {
line-height: 1.2em;
list-style: none outside none;
}
.submenu li {
border-bottom: 1px solid #D1D1D1;
padding: 5px 0;
}
/*
.submenu li:before { content: "• "; color: red;}
.submenu li#active a {color: black; font-weight:bold;}
*/
.submenu a { text-decoration: none;}
.submenu ul li:nth-child(1) a { color: blue;}
.submenu ul li:nth-child(2) a { color: green;}
.submenu ul li:nth-child(3) a { color: orange;}
.submenu ul li:nth-child(4) a { color: red;}
.submenu ul li:nth-child(5) a { color: blue;}
.submenu ul li:nth-child(1) a:hover{ color: blue; font-weight:bold;}
.submenu ul li:nth-child(2) a:hover{ color: green; font-weight:bold;}
.submenu ul li:nth-child(3) a:hover{ color: orange; font-weight:bold;}
.submenu ul li:nth-child(4) a:hover{ color: red; font-weight:bold;}
.submenu ul li:nth-child(5) a:hover{ color: blue; font-weight:bold;}
.submenu ul li:nth-child(1) a:active{ color: blue; font-weight:bold;}
.submenu ul li:nth-child(2) a:active{ color: green; font-weight:bold;}
.submenu ul li:nth-child(3) a:active{ color: orange; font-weight:bold;}
.submenu ul li:nth-child(4) a:active{ color: red; font-weight:bold;}
.submenu ul li:nth-child(5) a:active{ color: blue; font-weight:bold;}
.content {
/* comments
unter menu...
margin-bottom: 100px;
background-color: #F2F2F2;
background-color: #FFCC99;
background-color: #FFFFFF;
border-radius: 5px;
width: 720px;
*/
width: 750px;
float: left;
background-color: white;
margin-top: 0px;
margin-left: 2%;
}
aside {
/* comments
not in use commented out in theme.php !!
margin-left: 680px;
http://bildung-individuell.de/?file=test
*/
float:right;
width: 150px;
background-color: lightgreen;
padding-top: 0px;
margin-left: 5px;
}
footer {
/*
background-color: #F2F2F2;
margin-top: 30px;
margin-left: 35px;
margin-right: 20px;
padding-top: 15px;
padding-bottom: 15px;
*/
border-top: 1px solid #D1D1D1;
clear:both;
font-size: 12px;
text-align: left;
color: red;
background-color: green;
}