Webocton - Community

[Sweeney Todd]

Hallo Zusammen, hallo Benedikt,

ich habe irgendwie den Durchblick verloren. Vielleicht könnt Ihr mir
in der Umsetzung helfen.
Nun ich habe es (endlich) geschafft eine separate .css Datei für meine Homepage (dauert bei meinem Tempo und Durchblick wahrscheinlich 20 Lichtjahre und keiner weiss mehr was CSS ist)
zu erstellen - und es klappt nicht ganz.
Die Startseite ist total simpel, nicht lachen ich fange ja erst an.
Die .css Datei scheint mir doch vieles zu vereinfachen und meine Seiten sollen ja noch wachsen!

Ohne .css Datei sah es gut aus. Navi links, Text rechts. Ich weiss nicht was ich falsch gemacht habe, ich suche mir noch den Wolf (uups, tschuldigung ). Aber ich bin mit meinem Latein wirklich am Ende. Nach Einbindung der .css Datei sitzt mir der Inhalt plötzlich unter die Navi - und nicht mehr nebendran . Wo liegt mein Fehler?

Nachstehend meine .css Datei:

Code: Alles auswählen

body,table,td,tr,div,p,pre,h1,h2,h3,h4,ul {
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif
}

body {
background-image:url(bilder/pfoetchen.jpg);
font-size:100.01%;
margin:0;
padding:1em
}

a:link {
color:#000;
background-color:
}

a:visited {
color:#666;
background-color:#eee
}

a:hover {
color:#fed;
background-color:#9CF
}

a:active {
color:#FFF;
background-color:gray
}

h1 {
font-size:2.5em;
margin:0 0 1em;
padding:0.8em;
text-align:center;
border:2px ridge silver;
background:#CCF url(animiertegifs/00101.gif) no-repeat
}

html>body h1 {
border-color:/* Farbangleichung an den IE */
gray
}

#navigation {
font-size:1.1em;
float:left;
width:22em;
margin:0;
padding:0.5em
}

#navigation li {
list-style:none;
margin:0;
padding:0.5em
}

#navigation a {
display:block;
padding:0.2em;
font-weight:700
}

#inhalt {
margin-left:20em;
padding:0 1em;
min-width:16em /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */


}

#inhalt h1 {
font-size:1.5em; /*geändert 1.5*/
margin:0
}

#inhalt h2 {
font-size:1.8em;
margin:0 0 1em;
font-weight:700
}

#inhalt p {
font-size:1em;
margin:1em 0
}

.c-1 {
text-align:center;
padding:0 10.7em;
margin:0
}

.c-2 {
position:absolute;
top:780px;
left:150px
}

#fusszeile {
clear:both;
font-size:0.9em;
margin:0;
padding:0.1em;
text-align:center;
background-color:#fed;
border:1px solid silver
}

Ich danke Euch im Voraus für jede Antwort!!!!

Liebe Grüße
Sweeney

P.S: Schaue mir mein "Werk" an mit IE 7.0.6001 und Firefox 3.0.7

//EDIT: Code-Tags eingefügt, MfG Benedikt

[RcCluster]

hi,

wenn du die code-tags verwendest, dann können wir das besser lesen.

und gibt uns doch bitte den inhalt, zumindest das grundgerüst, deiner html-datei auch noch an.

das css muss ja auf irgendetwas angewendet werden. sonst kommt man nicht weit.

lg
RcCluster

ps: also als echter sweenney solltest du dir über wölfe am wenigsten sorgen machen

[nierewa]

Hi

also beim ersten überfliegen deines css-codes ist
mir aufgefallen, das du sehr oft das ";" vergessen hast.
Meist in der letzten Angebe vor der "}".

Jede css Angabe muß mit einem ";" abgeschlossen werden.
Wenn das fehlt, passieren die verrücktesten Darstellungsfehler.

Bei Angabe eines Background-Images,wird die Pfadangabe
üblicherweise in "url('Pfad zum Bild')" gesetzt.

html>body h1 {
border-color:gray;/* Farbangleichung an den IE */
}

Solch eine Angabe habe ich noch nie gesehen: "html>body h1
Ich weiß auch nicht alles, aber gibt es das wirklich?

Ich hab diese Angabe im Code weiter unten einfach mal weggelassen und soweit geändert, wie ich fehlerhafte Angaben erkannt habe

Code: Alles auswählen

body,table,td,tr,div,p,pre,h1,h2,h3,h4,ul {
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

body {
background-image:url('bilder/pfoetchen.jpg');
font-size:100.01%;
margin:0;
padding:1em;
}

a:link {
color:#000;
background-color:;
}

a:visited {
color:#666;
background-color:#eee;
}

a:hover {
color:#fed;
background-color:#9CF;
}

a:active {
color:#FFF;
background-color:gray;
}

h1 {
font-size:2.5em;
margin:0 0 1em;
padding:0.8em;
text-align:center;
border:2px ridge silver;
background:#CCF;
background-image: url('animiertegifs/00101.gif');
background-repeat:no-repeat;
}

#navigation {
font-size:1.1em;
float:left;
width:22em;
margin:0;
padding:0.5em;
}

#navigation li {
list-style:none;
margin:0;
padding:0.5em;
}

#navigation a {
display:block;
padding:0.2em;
font-weight:700;
}

#inhalt {
margin-left:20em;
padding:0 1em;
min-width:16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */


}

#inhalt h1 {
font-size:1.5em; /*geändert 1.5*/
margin:0;
}

#inhalt h2 {
font-size:1.8em;
margin:0 0 1em;
font-weight:700;
}

#inhalt p {
font-size:1em;
margin:1em 0;
}

.c-1 {
text-align:center;
padding:0 10.7em;
margin:0;
}

.c-2 {
position:absolute;
top:780px;
left:150px;
}

#fusszeile {
clear:both;
font-size:0.9em;
margin:0;
padding:0.1em;
text-align:center;
background-color:#fed;
border:1px solid silver;
}


[Benedikt Loepp]

also beim ersten überfliegen deines css-codes ist
mir aufgefallen, das du sehr oft das ";" vergessen hast.
Meist in der letzten Angebe vor der "}".

Falsch - den letzten vor einer } darf man weglassen! Die automatische CSS-Optimierung vom Scriptly macht das, sofern eingestellt, auch.

Ansonsten kann ich nierewa allerdings nur zustimmen.
Falls es immer noch nicht klappt, wäre es übrigens hilfreich, du würdest uns einen Link zu der entsprechenden Seite zur Verfügung stellen - dann könnten wir sehen, was genau nicht richtig ist und wie sich das ändern lassen könnte

MfG Benedikt Loepp

[Sweeney Todd]

Hallo Ihr Lieben,

ich danke schon mal ganz herzlich für die Tipps!



Zur Antwort von nierewa:

Wo ich das - html>body h1 {
border-color:gray;/* Farbangleichung an den IE */
}
aufgegabelt hatte, kann ich nicht mehr sagen. Ich habe es jetzt weggelassen - kein Unterschied.
Danke!

Zu Benedikt: Ich aktiviere immer mein CSS, das ist eine prima Hilfe.
Ich hatte auch nachgelesen, das ein ";" am Ende des Codes nicht erforderlich ist - nur zum trennen von mehreren Angaben.
Wie das mit dem Link senden funktioniert, weiß ich nicht genau.
Ich habe die Seiten bis jetzt nur im Scriptly.

Auch vielen Dank an RcCluster!

Anbei sende ich meine Seite, Text usw. ist alles noch alles in Arbeit. Ich fange erst mit dem Gerüst an. Wieviele Listenpunkte, Seiten etc. es werden sollen weiß ich noch nicht.
So sende ich Euch anbei den Quelltext von meiner Startseite (mit Spaßtext) zu der .css Datei.

Noch eines: Ich finde, dass Scriptly und auch die Mitglieder hier im Forum supertoll sind. Besonders hervorzuheben sind hierzu der
freundliche, seriöse Umgangston und die Kompetenz der Schreiber. Ich als Anfänger fühle mich hier sehr wohl!

Zum u.a. Code:
Auch das "absolute Positionieren" der kleinen .gif Datei klappt nun nicht mehr. Sie steht auf einmal wieder dort, wo ich sie nicht haben möchte ......

Vielen Dank im Voraus!
Liebe Grüße

Sweeney

[Dodwin]

Ohne .css Datei sah es gut aus.

Mhh, das ist natürlich eine schlechte Fehlerbeschreibung.
Du willst CSS, sagst aber gleichzeitig, dass es ohne CSS gut aussieht?
Warum lässt du die CSS-Datei dann nicht weg?

Ich nehme an du willst die Navigation links neben den Text setzen. Dafür müsste ein float:left; width:... reichen.

html>body h1 {
border-color:gray;/* Farbangleichung an den IE */
}

Solch eine Angabe habe ich noch nie gesehen: "html>body h1
Ich weiß auch nicht alles, aber gibt es das wirklich?

Die Angabe ist absolut korrekt.
> bewirkt, dass nur die Elemente eine Verschachtelung tiefer betroffen werden *linkraussuch*

Der IE<=6 interpretiert das allerdings nicht, somit würde diese Formatierung nur für moderne Browser greifen.

Gruß,
Dodwin

[nierewa]

Falsch - den letzten vor einer } darf man weglassen! Die automatische CSS-Optimierung vom Scriptly macht das, sofern eingestellt, auch.

Die Angabe ist absolut korrekt.
> bewirkt, dass nur die Elemente eine Verschachtelung tiefer betroffen werden

Da kann ich nur sagen, man lernt nie aus

Wie das mit dem Link senden funktioniert, weiß ich nicht genau.
Ich habe die Seiten bis jetzt nur im Scriptly

Vielleicht könntest du dann ein Bildschirmfoto oder etwas ähnliches an deinen Beitrag anhängen. Es ist schwer zu helfen, wenn man nicht weiß wie deine Seite fertig aussehen soll

Ich hab mal fix ein Beispiel-Layout gemacht.
Schau's dir mal an, ob du dir das so in etwa gedacht hast.

Die Html-Seite:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

    <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="alles">
    <div id="navigation">
            <ul>
                <li>1. Punkt</li>
                <li>2. Punkt</li>
                <li>3. Punkt</li>
                <li>4. Punkt</li>
                <li>5. Punkt</li>
            </ul>
    </div>
    <div id="inhalt">
                    <h2>Welcome!</h2>
                    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
                    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>
</div>
</body>
</html>

Und die css dazu:

Code: Alles auswählen

body,html{
    margin: 0px auto;
}
div#navigation{
position: absolute;
width:200px;
height:300px;
background-color: red;
}

div#inhalt{
position: absolute;
float:right;
margin-left:200px; /*entspricht der Weite des Navigation-div*/
width:500px;
height:700px;
background-color: blue;
}
div#alles{
width:700px;
height:700px;
left:50%;             /*Ausrichtung links */
margin-left:-350px;   /*die halbe Breite des div wieder nach links verschieben, damit der Div zentriert auf der Seite dargestellt wird*/
padding:0px;
background-color: green;
position:absolute;
}

Noch eine Kleinigkeit.
Der Post wird extrem in die Breite gezogen, so das ich horizontal scrollen muß. Bei den vielen "x" scheint kein Zeilenumbruch statt zu finden.

[Benedikt Loepp]

Das mit dem > war mir auch neu... Interessante Sache, hoffentlich denk ich das nächste mal dran, wenn ich es gebrauchen könnte.

Noch eine Kleinigkeit.
Der Post wird extrem in die Breite gezogen, so das ich horizontal scrollen muß. Bei den vielen "x" scheint kein Zeilenumbruch statt zu finden.

Richtig - hab den Code mal in eine externe Datei ausgelagert...
Achtet bitte ein bissl darauf, das arme Forum heile zu lassen Ihr könnt eure Beiträge editieren und Zeilenumbrüche reinhauen oder nen Attachment anhängen -das erspart mir die Arbeit, dass zu machen

@Sweeney: Noch ein Dank für dein Lob! Freut mich, dass du dich hier wohl fühlst, und hoffe wir können doch noch weiterhin kompetent bei deinem Problem helfen

MfG Benedikt Loepp

[nierewa]

Noch ein Post zu später Stunde

Ich sage auch, dieses Forum ist der Hammer.
Wer kennt das nicht? Man hat ein Anliegen und alles was man bekommt ist: "Google ist dein Freund." oder "Schon mal die Hilfe versucht", "Verdammt. Willst Du mich verarschen? Schau in's Handbuch."

Ich meine wer nicht helfen will, braucht doch nicht zu antworten. Foren sind dafür da, Hilfe zu erfragen, wo man selber nicht weiter weiß. Und jeder braucht mal Hilfe.

Sorry, aber das mußte mal gesagt werden

[Dodwin]

Das mit dem > war mir auch neu... Interessante Sache, hoffentlich denk ich das nächste mal dran, wenn ich es gebrauchen könnte.

Wie gesagt, IE <= 6 interpretiert das ganze nicht. Und solange der IE 6 immer noch knapp 50% hat, sollte man besser darauf verzichten.
Einsatz findet > daher meistens nur als CSS-Hack für moderne Browser.

Gruß,
Dodwin

[Sweeney Todd]

Du willst CSS, sagst aber gleichzeitig, dass es ohne CSS gut aussieht?
Warum lässt du die CSS-Datei dann nicht weg?


Ich nehme an du willst die Navigation links neben den Text setzen. Dafür müsste ein float:left; width:... reichen.

Hallo Dodwin,

nun ich dachte mir, wenn ich schon im Quelltext mit CSS arbeite,
dann macht es doch nur auch Sinn, wenn ich auch eine separate .css Datei dazu anlege. Schließlich vereinfacht es doch das Arbeiten ? Und es wäre ja auch nicht konsequent... , oder.....?
Es verschiebt sich ja nur alles, wenn ich die .css Datei verbaue. Nehme ich sie wieder weg - ist alles in Butter.

So ist es auch mit dem float - Befehl. Ich habe die Navileiste mit float:left ... positioniert. Die ist auch schön links. Nur wenn ich die .css Datei verbaue schiebt sich mein Text unter die Navi!

Ich verstehe es einfach nicht!

Versuche meine Seite nun irgendwie Euch zukommen zu lassen, so wie ich sie für mich super aussieht (ohne styles.css) und
mit .css.

Liebe Grüße
Sweeney

[Sweeney Todd]

Vielleicht könntest du dann ein Bildschirmfoto oder etwas ähnliches an deinen Beitrag anhängen. Es ist schwer zu helfen, wenn man nicht weiß wie deine Seite fertig aussehen soll

Hallo nierewa,

Habe schon Dodwin mitgeteilt - ich probiere es einen Link etc. zu senden, damit Ihr/Du meine Seite sehen könnt. Habe leider da
noch wenig Erfahrung. Kann ich von meinem Homepage-Ordner die .htm Datei einfach als Datei versenden? Klappt das so?

Ich hab mal fix ein Beispiel-Layout gemacht.
Schau's dir mal an, ob du dir das so in etwa gedacht hast.

Das ist total nett von Dir, das probiere ich am WE gleich aus! DAANKE!

Aber nun ensthaft, ich will lernen und mich verbessern - und da ist es unabdingbar, dass man auch etwas annimmt! Ist mein Entwurf so mißraten?
Es sieht zwar nicht danach aus, aber es hat mich doch sehr viel Arbeit gekostet ....
Wenn mein Entwurf völligst Banane sein sollte, überladen, widersprüchlich, unnötige Befehle, etc., etc. - bitte sagt es mir

Vielen Dank an Alle im Voraus
LG Sweeney

[Sweeney Todd]

//EDIT: Code-Tags eingefügt, MfG Benedikt

Lieber Benedikt,

diesen Hinweis habe ich nicht verstanden ...

Was hatte ich vergessen, was wurde von Dir eingefügt?

Sorry Sweeney

[nierewa]

Hi,

ich hab mir deine obrige HTML-Seite,
mit der verlinkten style.css noch mal angesehn.

Problem erkannt, Gefahr gebannt.

Das style for type="text/css" kann weg.
Das ist aber nicht der Fehler

Überprüfe mal bitte die Namen der ID's die du vergeben hast mit den dazugehörigen ID's in der css Datei.

In der HTML-Seite hast du die IDs groß geschrieben,
in der css-Datei aber klein. ID's sind case sensitive

Einfach in der HTML-Seite:

Inhalt -> inhalt
Navigation -> navigation
Fusszeile -> fusszeile

und schon funktioniert es

[Sweeney Todd]

Hi,

ich hab mir deine obrige HTML-Seite,
mit der verlinkten style.css noch mal angesehn.

Du gibst den Verweis auf die css-Datei so an:

Code: Alles auswählen

<link rel="stylesheet" style type="text/css" href="styles.css">

Das style for type="text/css" kann weg.
Das ist aber nicht der Fehler

Ich hab jetzt mal ne dumme Frage, aber hast du schon mal den Pfad und den Namen der externen css Datei überprüft?

Hi nierewa,

dumme Fragen gibt's doch gar nicht!

die Datei heißt styles.css und ist im selben Ordner abgelegt wie die .htm Dateien (Extra Order=Homepage).
Es wird ja alles Andere (Schriftgröße, Farbe, Hintergrund etc.) korrekt angezeigt nur wird der Inhalt verschoben und das kleine Bild nicht mehr richtig positioniert.
Ich dachte immer mit Position:absolute gibt's an der Position der Grafik nichts mehr zu rütteln?

Ich merke schon, die dicke selfhtml Schwarte ist wirklich große Klasse und die Homepage dazu auch - aber es gibt immer wieder
Dinge die so einfach nicht sind. Man muss es wirklich am "lebenden Objekt" ausprobieren.

LG Sweeney