egopress hat Folgendes geschrieben: Nun ist mir noch nicht klar wie ich den Titel in die Kopfzeile kriege.
Den Titel deiner Homepage kannst du ändern, indem du auf
-Login
-Einstellungen
-Titel der Homepage
klickst
egopress hat Folgendes geschrieben:
Wie geht das mit : h1#header = Titelfeld im Header ...Wo muss ich das denn wie einsetzen:
[...]
Füge ich die ganz normal in CSS ein, mit den jeweiligen Werten?
Sämtliche Angaben in CSS setzt du in den Bereich bei
-Login
-Design einstellen
-Erweitere Einstellungen
-Css Code ohne Styletags
ein
Styletags sind dies Dinger hier
Code: <style type="text/css">
</style>
Du brauchst diese dort nicht einfügen, das sie vom HpBk automatisch erstellt werden.
egopress hat Folgendes geschrieben:
Im übrigen haben meine eigenen Angaben bei der "Kopfzeile" irgendwie nicht hingehauen
#kopf {
font: 1.8em serif;
text-align: center;
background-color: #e3f5f3;
color: #000;
border-bottom: #6f7400 2px solid;
padding: 40px;
}
Liegt das auch am "Baukastensystem?"
Groß und Kleinschreibung beachten!
Der Browser nimmt alles "wörtlich".
Ich habe mir mal deinen kompletten Code auf meiner Test-Webseite angeschaut und noch ein paar Tippfehler korrigiert.
Hier ist die korrigierte Version:
Code:
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#navigation {
background-color: #ebeae3;
width: 250px;
font-size: 0.8em;
border-top: 30px solid #dad6b1;
float: left;
}
#navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#navigation a {
text-decoration: none;
letter-spacing: 1px;
display: block;
padding: 5px 15px;
border-bottom: 1px solid white;
color: #565919;
}
#navigation a:hover, #navigation a:focus, #navigation a:active {
background-color: #e3e0cf;
}
body {
font: 100% sans-serif;
color: #000;
background-color: #fff;
}
#Kopf {
font: 1.8em serif;
text-align: center;
background-color: #e3f5f3;
color: #000;
border-bottom: #6f7400 2px solid;
padding: 40px;
}
#container2 {
margin: auto;
width: 960px;
}
#inhalt {
margin-left: 300px;
}
#inhalt h2{
color: #565919;
}
#fuss {
background-color: #dad6b1;
padding: 40px;
color: #000;
border-top: 1px solid #b08580;
clear: left;
}
p {
margin-bottom: 20px;
}
</style>
<div id="Kopf">
Eine schöne grosse Kopfzeile
</div>
<div id="container2">
<div id="navigation">
<ul>
<li><a href="start">Startseite</a></li>
<li><a href="aktuelles">Aktuelles</a></li>
<li><a href="angebote">Angebote</a></li>
<li><a href="service">Service</a> </li>
<li><a href="kontakt">Kontakt</a> </li>
<li><a href="impressum">Impressum</a> </li>
</ul>
</div>
<div id="inhalt">
<h2>Ein Absatz</h2>
Hier soll ein Inhalt stehen
<h2> Noch ein Absatz</h2>
Hier soll auch etwas stehen
</div>
<div id="fuss"> Copyright usw. usf. </div>
Die <head> und <body> Tags brauchst du nicht zu verwenden, da alles was du bei "Text über/unter dem Design" schreibst automatisch im <body>-Bereich landet.
Außerdem habe ich eine sog. "Nullformatierung" eingefügt (ganz oben der * ), die das Problem mit dem Abstand zwischen Content und Header behebt.
Du brauchst eigentlich nicht alle Standartklassen in deinem Design zu verwenden, da nur 2 davon dynamisch also pro Seite wechselnd sind.
Der Content/Inhaltsbereich und die Navigation.
Du kannst also die restliche Bereiche komplett frei erstellen, was meist einfacher ist, da man so nicht immer auf die korrekte Betitelung der IDs achten muss.
Dazu ein (hoffentlich) erklärendes Bild:
http://img.webme.com/pic/b/badnet/egopress.jpg
Alles was oberhalb der Standartklassen angezeigt werden soll kommt zu "Text über dem Design".
Alles darunter zu "Text unter dem Design".
Jetzt gilt es deinen HTML-Code dementsprechend aufzusplitten:
Code: <div id="Kopf">
Eine schöne grosse Kopfzeile
</div>
<div id="container2">
<div id="navigation">
<ul>
<li><a href="start">Startseite</a></li>
<li><a href="aktuelles">Aktuelles</a></li>
<li><a href="angebote">Angebote</a></li>
<li><a href="service">Service</a> </li>
<li><a href="kontakt">Kontakt</a> </li>
<li><a href="impressum">Impressum</a> </li>
</ul>
</div>
<div id="inhalt">
<h2>Ein Absatz</h2>
Hier soll ein Inhalt stehen
<h2> Noch ein Absatz</h2>
Hier soll auch etwas stehen
</div>
<div id="fuss"> Copyright usw. usf. </div>
Den Inhaltsteil, den Container und die Navigation soll der HpBk für uns erstellen, also fallen diese Codezeilen einfach weg:
Code: <div id="Kopf">
Eine schöne grosse Kopfzeile
</div>
<div id="fuss"> Copyright usw. usf. </div>
Herzlich wenig was da übrig bleibt, oder?
Der Kopf soll bekanntlich oben sitzen, also kommt dieser Abschnitt zu "Text über dem Design" und der Fuss geht zu "Text unter dem Design".
Und damit ist der HTML-Code deines Designs an den HpBk angepasst.
Jetzt kommen wir zum CSS-Abschnitt:
Wir haben deine IDs "container2", "inhalt" und "navigation" aus dem Spiel genommen, damit sie Platz für die Standart-IDs machen.
Dementsprechen müssen wir diese Abschnitte auch im CSS-Code umbennen:
Ich habe den Code auch gleich geordnet
Code:
* {
margin: 0px;
padding: 0px;
}
body {
font: 100% sans-serif;
color: #000;
background-color: #fff;
}
#Kopf {
font: 1.8em serif;
text-align: center;
background-color: #e3f5f3;
color: #000;
border-bottom: #6f7400 2px solid;
padding: 40px;
}
#container {
margin: auto;
width: 960px;
}
#nav_container {
background-color: #ebeae3;
width: 250px;
font-size: 0.8em;
border-top: 30px solid #dad6b1;
float: left;
}
#nav li {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#nav a {
text-decoration: none;
letter-spacing: 1px;
display: block;
padding: 5px 15px;
border-bottom: 1px solid white;
color: #565919;
}
#nav a:hover, #nav a:focus, #nav a:active {
background-color: #e3e0cf;
}
#content {
margin-left: 300px;
}
#fuss {
background-color: #dad6b1;
padding: 40px;
color: #000;
border-top: 1px solid #b08580;
clear: left;
}
p {
margin-bottom: 20px;
}
#content h2{
color: #565919;
}
Um die Änderungen einmal aufzulisten:
#navigation > #nav_container
#navigation a > #nav a
#navigation ul > #nav li (hier ist dir bei der Bezeichnung der Tags ein Fehler unterlaufen)
#inhalt > #content
#inhalt h2 > #content h2
Füge diesen Code nun bei "Css Code ohne Styletags" ein.
Du wirst sehen, dass sich eventuell einige Standartklassen zwischen das Design schieben und es verunstalten.
Daher deaktivieren wir alle Klassen und IDs die wir nicht brauchen:
Code: #sidebar_container {display:none;}
#counter {display:none;}
#title span {display:none;}
#header_container {display:none;}
#pre_content {display:none;}
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content {display:none;}
#extraDiv2 {display:none;}
#extraDiv3 {display:none;}
#extraDiv4 {display:none;}
#extraDiv5 {display:none;}
#extraDiv6 {display:none;}
Auch dieser Code wird bei "Css Code ohne Styletags" eingefügt.
Das nächste Problem, dass sich aus der Umformung des Designs ergeben hat, ist, dass sich der Kopf und der Fuss über den gesamten Bildschirm ausdehnen.
Das liegt daran, dass der container, der vorher das Design zusammengehalten hat den Änderungen zum Opfer fiel.
Wenn es dir so gefällt: Bitte schön.
Tuts das nicht, dann füge noch folgenden Code bei "Css Code ohne Styletags" im Abschnitt body ein:
Code: width: 960px;
margin: auto;
Soweit ich das sehe ist dein Design jetzt 100% an den HpBk angepasst.
Falls sich ein Mod hier die Mühe macht und diesen Post komplett liest:
Ich wünsche mir den Forentitel "Längster Post in einem Atemzug" zu Weihnachten. ______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
|