Suche im Forum:
Suchen


Autor Nachricht
Beitrag26.12.2010 um 19:41 (UTC)    
Titel: Mein Css-Design: Merkwürdigkeiten

Ich habe nun für meine Seite ein neues Probedesign per CSS erstellt. Es ist in meiner Homepage "egopress" zu sehen.
Aber da gibt es ein paar Dinge, die mir nicht in den Kopf wollen.
Das Design habe ich dem Buch "Html & CSS, von Maurice Florence (Markt und Technik) entnommen.

Während nun aber die Kopfzeile mit dem Text "Eine schöne grosse Kopfzeile" genau unter der Werbung plaziert ist, ist nach unten hin viel zu viel Platz geblieben.
Die Fusszeile sollte die Seite nach unten hin ja eigentlich abschliessen. Aber unter der Fusszeile (grau unterlegt) ist noch "Luft".
Und sie ist viel zu breit.. Und die Navi ist viel zu weit links.
Was mache ich denn jetzt wieder falsch, bzw, was läuft hier anders als bei mir in "Phase 5" oder in dem Buch...

Hier das Design:
<head>
<title></title>
<style type="text/css">
#navigation {
background-color: #ebeae3;
width: 250px;
font-size: 0.8em;
border-top: 30px solid #dad6b1;

}
#navigation {
width: 250px;
float: left;
}
#navigation ul {
list-style-type: none;
margin: 0;
padding;
}
#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;
}
#container {
margin: 40px 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>
</head>
<body>
<div id="Kopf">
Eine schöne grosse Kopfzeile
</div>
<div id="container">
<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>
</body>
</html>


Zuletzt bearbeitet von egopress am 26.12.2010, 22:09, insgesamt einmal bearbeitet
Beitrag26.12.2010 um 22:07 (UTC)    
Titel:

Wenn du selbst drauf kömmen möchtest einfach nur den Link anschauen und durchlesen und nicht den nächsten Absatz anschauen:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=100611

Ein Tutorial-Buch wie das, dass du benutzt, setzt voraus, dass du über einen eigenen Webspace verfügst, auf den du frei zugreifen kannst.
Du befindest dich hier allerdings im HpBk und hast eben nicht die volle Kontrolle über deinen Webspace.
Deswegen arbeitet der HpBk mit vorgefertigten Standartklassen und IDs.
U.a. der ID "container". In deinem Design gibt es nun die ID "container" zweimal:
Einmal deine manuell eingefügte ID und die des HpBks.
Du hast der ID "container" einen Außenabstand (margin) von 40px eingefügt, der eben diesen Abstand hervorruft.
Lösung:
Benenne deinen container um (z.B container2).

Zu deinem Design allgemein:
Es wird leider nicht so funktionieren wie du es gerne hättest, da wir wie gesagt im HpBk sind und nicht auf einem freien Webspace.
Die Inhalte von "Text über/unter dem Design" sind statisch und wechseln nicht von Seite zu Seite.
Daher kann man in deinem Design den Content nur für eine einzige Seite definieren.
Du musst damit der Inhalt deiner Seite dynamisch und auf jeder Seite etwas anderes angezeigt werden kann, die Standart klassen in dein Design einbauen.
Dabei sollte dir der Link helfen, den ich dir oben gepostet habe.
Bei Fragen und Problemen kannst du dich gerne an mich wenden.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag28.12.2010 um 12:02 (UTC)    
Titel: Neuer Anfang

So, ich habe jetzt, wie Du evtl bei mir sehen kannst, mal angefangen, nach dem Baukastensystem hier zu arbeiten.
Nun ist mir noch nicht klar wie ich den Titel in die Kopfzeile kriege.
Wie geht das mit : h1#header = Titelfeld im Header ...Wo muss ich das denn wie einsetzen:

Ich habs erstmal mit einer normalen <h2> </h2> Überschrift hingekriegt.

Auch die anderen Code:
#content = Textfeld
#title span = Seitentitel im Textfeld (platziert sich automatisch im #content )
#sidebar_container = Rechte Box
#sidebar_heading = Titelfeld Rechte Box (platziert sich automatisch in rechter Box)
#nav_container = Feld der Navigation
#nav_heading = Titel der Navigation (platziert sich automatisch im Feld der Navigation)
ul#nav = Auflistung der Navi-Links
li.nav_element = Hintergrund der Navi-Links
li.nav_element a = Textlinks der Navigation
li.nav_element a:hover = Hover-Effekt Navi-Links
#counter = Besucherzähler

Füge ich die ganz normal in CSS ein, mit den jeweiligen Werten?

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?"
Beitrag28.12.2010 um 14:14 (UTC)    
Titel: Re: Neuer Anfang

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?"

Code:
#kopf {

Code:

<div id="Kopf">

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.
Beitrag29.12.2010 um 18:16 (UTC)    
Titel: Merkwürdigkeiten......

Soweit danke ich Dir für Deine Hilfe. Ich habe den Code, so wie Du ihn umgestellt hast, bei mir eingefügt, aber irgendwie funktioniert's noch nicht.
Die Navigation taucht z. B.. gar nicht auf.. Und wie kommen die Links (z.B. Startseite usw.) dann in die Navi? Ich meine, dass die ja irgendwie eingefügt werden müssen?

Was habe ich denn jetzt übersehen?


Zuletzt bearbeitet von egopress am 29.12.2010, 19:38, insgesamt einmal bearbeitet
Beitrag29.12.2010 um 19:56 (UTC)    
Titel:

Du hast eventuell nicht alle vorhandenen Code rausgelöscht bevor du die neuen eingefügt hast, da ich folgendes bei dir gefunden habe:
Zitat:
#title span{display:none;}
#nav_container {
display: none;}

#nav_heading span{display:none;}
#nav_container,#title,#header {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;}

Die markierten Elemente müssen raus.

Die Links kommen in die Navigation, indem du die entsprechenden Seiten auf deiner Webside erstellst:
Arrow Login
Arrow Eigene Seiten editieren
Arrow Seite hinzufügen
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag29.12.2010 um 23:22 (UTC)    
Titel: Merkwürdigkeiten....usw.

Ich denke, dass ich jetzt alles gelöscht habe, was Du angegeben hast.
Aber trotzdem ist die Navi immer nocn nicht so wie ich sie vorher erstellt habe.

Da muss noch ein Fehler sein..
Beitrag30.12.2010 um 00:20 (UTC)    
Titel:

Du musst erst die entsprechenden Seiten erstellen:
Arrow Login
Arrow Eigene Seiten editieren
Arrow Neue Seite hinzufügen

Die Seiten die du dort erstellst werden in der Navigation als Links angezeigt.
Willst du also einen Link "Aktuelles" in der Navi, musst du die Seite "Aktuelles" erstellen.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag30.12.2010 um 04:02 (UTC)    
Titel: Merkwürdigkeiten....Es läuft und.......ein grosses DANKE

Jo, jetzt läuft es.

Bei der Navi waren die Links anfangs nicht mit der Hintergrundfarbe belegt. Dann habe ich den Code (#ebeae3) nocheinmal eingeben. Nun klappt es.

#nav_container {
background-color: #ebeae3 ;
width: 250px;
font-size: 0.8em;
border-top: 30px solid #dad6b1;
float: left;
}


Eine Frage fällt mir dann noch ein: Wenn ich auf den Link DVD klicke verschiebt sich die Fusszeile eine Zeile nach unten, obwohl gar kein Text da ist. Wenn ich dann auf den dritten Link gehe (LITERA) verschiebt sich die Fusszeile wieder nach oben. Woran liegt's?

Was mich dann noch stört, das ist die aufdringliche Werbung. Wobei mir der Teil über der Kopfzeile weniger ausmacht als dieses bekloppte Popup (oder so..) Aber das kann man ja wohl für eine Woche deaktivieren.
Ansonsten würde sich ja ein potentieller Besucher auch sofort genervt wieder ausklinken, denke ich..
Nun denn, mal sehen, was ich aus dieser Homepage zusammenbasteln kann.
Nochmals Danke für Deine Hilfe und einen "guten Rutsch" ins neue Jahr.


Zuletzt bearbeitet von egopress am 30.12.2010, 07:26, insgesamt einmal bearbeitet
Beitrag30.12.2010 um 14:59 (UTC)    
Titel:

Also wenn ich draufklicke verschiebt sich nichts.

Auch dir einen guten Rutsch.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de