Text in div

[Efchen]

habe versucht das ganze umzusetzten, aber guck dir jetzt mal die seite an:(:?:

*such*kram* Ah, da ist der Link!

wiso hat sich das jetzt alles verschoben? :lol:

Ich bin nicht so tief in Deinem Problem drin, dass ich noch wüsste, wie es vorher aussah, oder worum genau es hier ging, aber die Antwort muss wohl so lauten:
Verschiedene HTML-Tags verursachen ein unterschiedliches Aussehen. Das liegt in der Natur der Tags. Üblich ist z.B. dass <strong> fett dargestellt wird (was aber nicht vorgeschrieben ist). <p> hat einen Abstand oben und unten, <div> nicht.
Generell gilt: Eigenschaften, die man an einem Element haben will, muss man im Stylesheet setzen. Eigenschaften, die man nicht will, muss man über entsprechende Werte abstellen. Auch wenn der Browser das per Default vielleicht nicht hat. Denn für die Defaultwerte von CSS-Eigenschaften gibt es nur Empfehlungen aber keine zwingend vorgeschriebenen Werte.

Wenn sich bei Dir was ändert, liegt das an den unterschiedlichen Werten unterschiedlicher Tags.
Da wir hier aber andere Tags eingebaut haben, um die Semantik zu verbessern, hat das alles seine Richtigkeit. Eine Anpassung ist nur noch im Stylesheet erforderlich.

und der margin-bottom ist weg, aber der rand noch nicht...

Ränder gehen nicht dadurch weg, dass man andere HTML-Tags verwendet.

Sag doch einfach, was genau noch nicht in Ordnung ist, dann können wir das der Reihe nach abhaken. Ich weiß ja auch nicht vom bloßen hinsehen, was Dich stört, oder womit Du Probleme hast :-)

 

[Bernhard]

habe versucht das ganze umzusetzten, aber guck dir jetzt mal die seite an:(:?:

wiso hat sich das jetzt alles verschoben? :lol:

und der margin-bottom ist weg, aber der rand noch nicht...

Hallo Spartist,

als erstes solltest Du mal die Fehler in Deinem Quelltext beheben, denn die können
in jedem Browser zu einer anderen Darstellung führen...

z.B.:

<h1><img src="images/design/header.jpg" width="100%" /[B][COLOR=Red]>[/COLOR][/B]</h1>

In einem <h1> bis <h6> werden keine <p> hineingeschachtelt, korrekt also:

<h3 id="news">Aktuelles</h3[COLOR=Red][B]>
[/B][/COLOR]<p>Am 1. M&auml;rz werden wir in Hunau Ski fahren. Treffen ist um 9 Uhr 
mit Pkw am SGV- Kasten.
F&uuml;r alle die nicht Ski fahren k&ouml;nnen oder wollen, steht auch eine 
Rodelbahn zur Verf&uuml;gung.<[COLOR=Red][B]/[/B][/COLOR]p>

usw.

Grüße
Bernhard

 

[Spartist]

*such*kram* Ah, da ist der Link!

Tut mir Leid

Die Seite soll eine einfache dreispaltige Seite sein.
Oben der Header, in meinem Fall eine Grafik. Links das Menü, in der Mitte der Inhalt der Seite und links noch Neuigkeiten über den Verein.

Das ganze sollte dann noch etwas geordneter aussehen als momentan. Also Menü und News gleich lang und breit. Unter dem Header soll der grau Rand, also der Header soll direkt an die Seite anschließen.
Und ganz unten noch die Fußzeile mit Copyright und E-mail (wie kann man nur die E-mail adresse rechtsbündig machen?;ugl )

So:

1. Der Rand unter dem Header muss weg. Im Stylesheet habe ich nur die Schriftgröße festgelegt.
Wiso ist da noch der Rand. Liegt das an h1 und dem Absatz danach? Wie kriege ich den dann weg?

2. Das Menü und News sind nicht gleichbreit und glecihhoch, obwohl ich beides festgelegt habe (10em breit und 50em hoch).

Hallo Spartist,

als erstes solltest Du mal die Fehler in Deinem Quelltext beheben, denn die können
in jedem Browser zu einer anderen Darstellung führen...

Danke, ich habe die Fehler korigiert ABER:
Die Seite ist im IE eine Katastrophe:!:
Ich denke aber sie sollte erstmal im Firefox ohne Fehler laufen, vielleicht zeigt der IE dann auch schon was ganz anderes an.

Hier nochmal der Link:

SGV Voßwinkel

Gruß
Spartist

 

[Bernhard]

Hallo Spartist,

als erstes solltest Du mal die Fehler in Deinem Quelltext beheben, denn die können
in jedem Browser zu einer anderen Darstellung führen...

z.B.:

<h1><img src="images/design/header.jpg" width="100%" /[B][COLOR=Red]>[/COLOR][/B]</h1>

In einem <h1> bis <h6> werden keine <p> hineingeschachtelt, korrekt also:

<h3 id="news">Aktuelles</h3[COLOR=Red][B]>
[/B][/COLOR]<p>Am 1. M&auml;rz werden wir in Hunau Ski fahren. Treffen ist um 9 Uhr 
mit Pkw am SGV- Kasten.
F&uuml;r alle die nicht Ski fahren k&ouml;nnen oder wollen, steht auch eine 
Rodelbahn zur Verf&uuml;gung.<[COLOR=Red][B]/[/B][/COLOR]p>

usw.

Grüße
Bernhard

Danke, ich habe die Fehler korigiert ABER:
Die Seite ist im IE eine Katastrophe:!:
Ich denke aber sie sollte erstmal im Firefox ohne Fehler laufen, vielleicht zeigt der IE dann auch schon was ganz anderes an.

Hier nochmal der Link:

SGV Voßwinkel

Gruß
Spartist

Hallo Spartist,

die Fehler, die ich Dir als Beispiel genannt habe, sind alle noch da, und der Validator findet noch mehr...

Solange das HTML-Gerüst nicht passt, wäre es Zeitverschwendung, zu versuchen,
die Darstellung mittels CSS anzugehen.

Deine Idee, die Darstellung erstmal im Firefox hinzubekommen, ist richtig, da der
sich relativ gut an die Standards hält.

Grüße
Bernhard

 

[Efchen]

als erstes solltest Du mal die Fehler in Deinem Quelltext beheben
z.B.:

<h1><img src="images/design/header.jpg" width="100%" /></h1>

Auch Du solltest dann fehlerfrei arbeiten, da fehlt das alt-Attribut! ;-)

Also Menü und News gleich lang und breit.

Das mit der gleichen Länge geht nur über "Faux Columns".
Dass der rechte Balken tiefer anfängt, liegt am margin-top der Überschrift.

Unter dem Header soll der grau Rand, also der Header soll direkt an die Seite anschließen.

Du hast den margin-bottom von h1 nicht auf 0 gesetzt. Wenn Du willst, dass etwas keinen Abstand hat, musst Du den ausschalten. Wenn Du eine Eigenschaft nicht angibst, heißt das in CSS immer "ist mir egal".

Und ganz unten noch die Fußzeile mit Copyright und E-mail (wie kann man nur die E-mail adresse rechtsbündig machen?

Z.B. mit "float:right";

2. Das Menü und News sind nicht gleichbreit und glecihhoch, obwohl ich beides festgelegt habe (10em breit und 50em hoch).

"em" orientiert sich an der Schriftgröße des aktuellen Elements. Da bei Dir Menü und News unterschiedliche Schriftgrößen haben, ist 50em natürlich nicht genauso hoch wie 50em.

Danke, ich habe die Fehler korigiert ABER:

Nein, hast Du nicht. Im h3#news steht immer noch ein Textabsatz drin usw.

Die Seite ist im IE eine Katastrophe:!:

Auf Anhieb merke ich, dass da viele Voreinstellungen fehlen, z.B. die font-family. Mein Firefox zeigt mir eine serifenlose Schrift an, der IE eine mit Serifen. Da Du es unterlassen hast, die font-family anzugeben, sagst Du damit den Browsern "Die Schriftart ist mir egal". Genauso, wie Dir die Hintergrundfarbe auch egal ist und sie bei mir deshalb grau ist. (in meinem anderen Browser wäre sie dreckiggelb ;-))

Bernhard hat aber Recht: Nur mit einer validen und semantisch einwandfreien Basis aus HTML macht es Sinn, sich auf CSS zu stürzen.

 

[Spartist]

upps ;ugl
hab vergessen die neue datei hochzuladen...

der Validator zeigt mir auch noch sehr viele Fehler an, die ich ziemlich komisch finde, da die Zeichen z.B da sind, der es aber trotzdem als Fehler erkennt.

Du hast den margin-bottom von h1 nicht auf 0 gesetzt. Wenn Du willst, dass etwas keinen Abstand hat, musst Du den ausschalten. Wenn Du eine Eigenschaft nicht angibst, heißt das in CSS immer "ist mir egal".

Hab ich gemacht, der Rand ist nun nur noch sehr klein, aber immer nich da...
aber ok das ist jetzt nicht schlimm.

Z.B. mit "float:right";

Html- Stelle:

<p id="fusszeile">
    &copy SGV Voßwinkel <a id="mail" href="mailto:[email protected]">[email protected]</a>
  </p>

Css- Stelle:

#mail {
float: right;
margin:0;
}

wie kann ich den absatz noch abstellen?
Es sollte ja auf gleicher höhe bleiben...

Und über der Fußzeile ist wieder ein Rand.
Sry, aber ich hab da noch nicht so den Durchblick wo genau ich den Rand abstellen muss. Wenn ich das bei allem, was direkt darüber ist, passiert nichts....

Gruß

edit: hab noch einiges geändert. habe jetzt alles mit "margin-top:" und dann mit "-" irgendwas.
könnt ihr mir jetzt nochmal alle wichtigen fehler anzeigen, bitte.

 

[Efchen]

der Validator zeigt mir auch noch sehr viele Fehler an, die ich ziemlich komisch finde, da die Zeichen z.B da sind, der es aber trotzdem als Fehler erkennt.

Klar, wenn man noch am Anfang der Materie steckt, kommt einem vieles komisch vor. Stell Deine Fragen zu Validator-Problemen im Validator-Thread ganz oben im Forum.

Hab ich gemacht, der Rand ist nun nur noch sehr klein, aber immer nich da.

Ich seh keinen Rand.

wie kann ich den absatz noch abstellen?

Das, was floatet, muss zuerst im HTML-Code kommen.
Also Reihenfolge vertauschen. Dann sollte es gehen.

Und über der Fußzeile ist wieder ein Rand.

Ja, Du hast ja für alle "p" auch "margin:1em 0" eingestellt, also gibts nach oben und unten einen Abstand von 1em Größe. Außerdem hast Du Deinem Footer noch einen Rahmen oben gegeben.

hab noch einiges geändert. habe jetzt alles mit "margin-top:" und dann mit "-" irgendwas.

Naja, das ist ja keine Lösung. Einen Fehler kann man nur bereinigen, indem man ihn findet und nicht, indem man die Auswirkung verschleiert.

 

[Bernhard]

upps ;ugl
hab vergessen die neue datei hochzuladen...

der Validator zeigt mir auch noch sehr viele Fehler an, die ich ziemlich komisch finde, da die Zeichen z.B da sind, der es aber trotzdem als Fehler erkennt.

Hallo Spartist,

der Validator sagt Dir doch wunderbar, wo die Fehler sind.
U.a. findet er die fehlende schließende Klammer bei dem Bild in h1, auf die ich Dich
schon vor zwei Tagen hingewiesen habe...

Hab ich gemacht, der Rand ist nun nur noch sehr klein, aber immer nich da...
aber ok das ist jetzt nicht schlimm.

das kann an der genannten fehlenden Klammer liegen, kann aber auch an der Font-size liegen,
die Du der h1 gibst, obwohl da ja nur ein Bild drin liegt...

könnt ihr mir jetzt nochmal alle wichtigen fehler anzeigen, bitte.

die wichtigen Fehler zeigt Dir der Validator.

Grüße
Bernhard

 

[Spartist]

die wichtigen Fehler zeigt Dir der Validator.

Stell Deine Fragen zu Validator-Problemen im Validator-Thread ganz oben im Forum.

Hab ich jetzt...

Ich seh keinen Rand.

s. edit ;)

Das, was floatet, muss zuerst im HTML-Code kommen.
Also Reihenfolge vertauschen. Dann sollte es gehen.

Danke, hat geklappt.

Naja, das ist ja keine Lösung. Einen Fehler kann man nur bereinigen, indem man ihn findet und nicht, indem man die Auswirkung verschleiert.

mhmm...nochmal drübergucken...

edit:
ich bin gerade dabei, die unterseiten schonmal mit inhalt zu füllen.
allerdings brauche ich dazu bei einigen seiten den befehl "overflow: auto". sobald ich den aber benutze ist die fußzeile weg.
Wieso das jetzt schon wieder ?^^

edit2: hat sich erledigt.
hab vergessen die tabelle zu schließen^^