26.03.2015, 11:23
|
|||
|
|||
Guten Morgen, glatt vergessen! Danke!
|
| Sponsored Links |
|
29.03.2015, 12:55
|
|||
|
|||
|
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:
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;
}
|
|
29.03.2015, 12:56
|
|||
|
|||
|
Das ist noch nicht das fertige theme...ich arbeite noch an Verbesserungen!
|
|
29.03.2015, 13:59
|
|||
|
|||
|
Hallo MrMurphy,
hier der html code: HTML-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"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="generator" content="pluck 4.7.3" /> <title>Bildung - bildung-individuell - pädagogischer Dienstleister im Rhein Neckar Kreis Heidelberg Mannheim</title> <link href="/data/themes/ex/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <header> <? php theme_sitetitle(); ?> BILD </header> <nav> <ul><li class="active" id="active"><a href="/?file=bildung" title="Bildung">Bildung</a></li><li><a href="/?file=soziales" title="Soziales">Soziales</a></li><li><a href="/?file=integration" title="Integration">Integration</a></li><li><a href="/?file=test" title="Sport">Sport</a></li></ul> </nav> <section>Bildung</section> <div class="submenu"> <ul><li><a href="/?file=bildung/paedagogische-betreuung" title="Pädagogische Betreuung">Pädagogische Betreuung</a></li><li><a href="/?file=bildung/fruehkindliche-foerderung" title="Frühkindliche Förderung">Frühkindliche Förderung</a></li><li><a href="/?file=bildung/hausaufgabenbetreuung" title="Hausaufgaben betreuung">Hausaufgaben betreuung</a></li><li><a href="/?file=bildung/nachhilfe" title="Nachhilfe">Nachhilfe</a></li><li><a href="/?file=bildung/tagesbetreuung" title="Tagesbetreuung">Tagesbetreuung</a></li></ul> </div> <div class="content"> <div class="txt"> <p>*</p> <p>*</p> <p>Ob Feuerbach, Humboldt oder Schiller, ob Schopenhauer oder J.F. Kennedy:</p> <p>Die Frage nach dem Wesen von Bildung, nach den bildenden Inhalten, nach Zweck und Sinn waren und sind zu jeder Zeit aktuell.*</p> <p>Dabei soll Bildung unserer Meinung nach als Entwicklungsprozess des Menschen verstanden werden, der ihn zum Einen dazu befähigt, ein mündiges wie kritisches, selbstbestimmtes Gesellschaftsmitglied zu werden, zum anderen dazu, ein ganzheitliches Persönlichkeitsprofil zu entwickeln.</p> <p>Bildung ist somit eine Schlüsselkompetenz, die sich auf eine individuelle und gleichzeitig gesellschaftliche Ebene beziehen muss und eine wechselseitige Wirkung entfaltet, um globale Schlüsselprobleme (vgl. Klafki (2007): Neue Studien zur Bildungstheorie und Didaktik, Weinheim, S. 56ff.) lösen zu können.</p> <p>Bildung muss unserem Verständnis nach zunächst individuell sein, die Qualität dieser individuellen Bildung entscheidet schließlich darüber, wie sich das individuelle Handeln im gesellschaftlichen Kontext , im Sinne der epochalen Schlüsselprobleme entfaltet.*</p> </div> </div> <aside> <p><span style="font-size: x-small;">Bildung Individuell</span><br /><span style="font-size: x-small;">Frau Yvonne Hohm</span><br /><span style="font-size: x-small;">Albert-Fritz-Str. 64</span><br /><span style="font-size: x-small;">69124 Heidelberg</span><br /><br /> <a title="Kontaktformular" href="?file=impressum" target="_self">Kontaktformular</a></p> </aside> <footer> <a href="http://bildung-individuell.de/?file=startseite">Startseite</a> <a href="http://bildung-individuell.de/?file=impressum">Impressum</a> <a href="http://bildung-individuell.de/ev">Verein</a> </footer> <!-- // >> <a href="/login.php">admin</a> // <a href="http://www.kalenderfamily.de/email">@</a> // <br />powered by <a href="http://www.pluck- cms.org">Impressum</a> --> </body> </div> </html>
|
|
29.03.2015, 16:19
|
|||
|
|||
|
Hallo,
warum ist der HTML-Quelltext jetzt plötzlich in XHTML? Dein ganzer Quelltext ist leider schlampig geschrieben. Das erschwert die Problembehebung ungemein. Deine Problembeschreibung ist zudem leider sehr verwaschen. Zitat:
Vertikal? Zwischen der header und dem, was ich in deinem Quelltext als Sidebar interpretiere, befindet sich ein section-Element mit schwarzer Schrift auf schwarzem Hintergrund. Deshalb können die nicht aneinander anschließen. Gruss MrMurphy Edith: Noch eine Nachfrage: Hast du dir die Seite mal bei unterschiedlichen Fenstergrößen und Zoomfaktoren (Strg+Mausrad) angeschaut? Soll die sich dann so verhalten, wie sie sich zur Zeit verhält? Geändert von MrMurphy (29.03.2015 um 16:39 Uhr)
|
|
29.03.2015, 22:39
|
|||
|
|||
|
Guten Abend MrMurphy, danke für deine Antwort.
Leider weiß ich nicht genau, welchen schlampigen HTML Code du meinst. Ich habe den HTMl Code jetzt einfach mal formatiert und Unnötiges rausgeschmissen, vielleicht vereinfacht dies das Ganze? HTML-Code:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="generator" content="pluck 4.7.3" /> <title>xxxxxxxxx</title> <link href="/data/themes/ex/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <header> <? php theme_sitetitle(); ?> BILD </header> <nav> <ul><li><a href="/?file=bildung" title="Bildung">Bildung</a></li><li><a href="/?file=soziales" title="Soziales">Soziales</a></li><li><a href="/?file=integration" title="In </nav> <section>Sport</section> <div class="submenu"> <ul><li><a href="/?file=test/submenu" title="Freizeiten">Freizeiten</a></li><li><a href="/?file=test/fussballturnier" title="Fußballturnier">Fußballturnier </div> <div class="content"> <div class="txt"> <p>*</p> <p>*</p> <p>"Der erzogene Mensch ist nicht das Werk von Erziehern, sondern das Ergebnis seiner eigenen Anstrengungen.“ (Scherler, K. (1997). Die Instrumentalisierungsdebatte in der Sportpädagogik.*<br />Sportpädagogik, 21(2), 5-11.)</p> </div> </div> <aside> <p><span style="font-size: x-small;">Bildung Individuell</span><br /><span style="font-size: x-small;">Frau Yvonne Hohm</span><br /><span style="font-size: x-small;">Albert- </aside> <footer> <a href="http://bildung-individuell.de/?file=startseite">Startseite</a> </footer> </body> </div> </html> Im Prinzip soll das aside element horizontal bündig mit dem content div und dieses wiederum mit dem submenu div bündig horizontal abschließen. Hinsichtlich des section elements sind alle ja vertikal bündig. Der Submenu div und der content div haben float left, das aside element float right. Im Footer ist clear both. Ich verstehe auch nicht, wieso das nav element horizontal nicht bündig ist... Über Anregungen bin ich dankbar, Grüße Kalenderfamily P.s.: Was die Größe und zoom etc. angeht, so habe ich dazu heute Mittag etwas gelesen (min height, width etc.). Dieses "Problem" berabeite ich im Anschluss, falls du das ansprichst? Geändert von kalenderfamily (29.03.2015 um 23:03 Uhr)
|
| Sponsored Links |
|
30.03.2015, 00:34
|
|||
|
|||
|
Zitat:
Ist leider so auch fehlerhafter HTML-Code. Und keine responsive Darstellung erkennbar. _____________ MfG Roland Vorlage für HTML-Seiten zum Testen. HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <title>… Titel der Webseite … </title> <meta charset="UTF-8"> <style type="text/css"> /* CSS für die Darstellung */ </style> </head> <body> <h1>HTML für die Struktur</h1> </body> </html> Geändert von K.Roland (30.03.2015 um 01:08 Uhr) Grund: Nachtrag
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Verschiebungen bei größerem Bildschirm | seelefant | CSS | 4 | 28.07.2014 16:43 |
| DIV Box (Sidebar) in bereits fertiges Design einfügen? | Daniel386 | CSS | 10 | 21.06.2011 23:58 |
| Probleme DIV Höhe, Anordnung | kran | CSS | 4 | 07.11.2010 11:23 |
| CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |
| Div Wight Auto???? | temp11 | CSS | 8 | 30.06.2009 13:34 |
Linear-Darstellung
