boxen check

[david]

hallo forum,

bin grad am werkeln an meiner ersten css site und bevor ich designen
anfange, wollte ich euch bitten die site kurz anzuschauen ob die boxen auch richtig verschachtelt sind.

hier ist die site

wäre sehr nett von euch.
lg david

[david]

der richtige link

hier ist die site

[hubschraubaer]

Hi!
Ja, eigentlich sind sie richtig verschachtelt. Aber:
1. <div id="header"> kannst du durch <h1> ersetzen.
und 2. eine Navigation, machst du besser mit Listenelementen (<ul> oder <ol>). Diese kannst du dann auch mit CSS gestalten.

ciao, hubschraubaer
ps: Noch eine Frage aus reiner Neugier: Warum schreibst du HTML 3.2? Es gibt doch schon 4.1!

[david]

hallo und vielen dank fürs checken + tipps :-)

ps: Noch eine Frage aus reiner Neugier: Warum schreibst du HTML 3.2? Es gibt doch schon 4.1!

weil ich
A nicht weiss was das bringt, werd aber mal googeln
B mit maguma studio werkel dass das glaube ich automatisch macht, version wahrscheinlich alt oder?

[hubschraubaer]

Hi!
zu A: Der Browser verarbeitet die Daten dann eben nach dem neuen Standart (4.1) und nicht nach dem alten. D.h. er kann dann eben auch die neueren Befehle verarbeiten, etc. und damit hast du dann mehr Spielraum und Möglichkeiten
zu B: Dann leg dir doch mal einen neuen Editor zu. Sehr gut sind Phase 5 und Weaverslave. Google auch mal danach. Beide sind umsonst.

ciao, hubschraubaer

[david]

hallo moch ne frage zu:

hier ist die site

ich will dass bei jeder div box der innenabstand padding auf einen bestimmten wert geht, kann ich das irgendwo allgemein definieren?

habs mit dem container probiert weil ich dachte dass sich das dann vererbt, geht aber leider nicht

[hubschraubaer]

Hi!
Nein, ich wüsste nicht, dass das geht. Du musst bei jeder Div-Box eineln padding angeben.
ciao, hubschraubaer

[david]

ok ok,

hier ist die site

wenn ich beim container padding:20px mache,
gibt es oben mehr abstand als unten, warum?

lg
david

[hubschraubaer]

Hi!
Keine Ahnung!

Aber noch was anderes:

Mit

h1{
background: red;
}

Kannst du auch

<h1>kopfzeile</h1>

ansprechen.
Ohne eine ID.

ciao, hubschraubaer

[david]

hi,
also nochmal zu meiner frage von meinem doppelposting oben:

ich habe dem footer ein margin gegeben(kein padding wie oben in meinem fehlerhaften doppelposting zu lesen war)

das funktioniert auch solange, bis der content bereich länger als

<div id="navileft">
<div id="picleft">

zusammen, wird. wie kann ich den fehler beheben?

die site
http://giland.org/trinity.htm

[Hopsel]

Hi david!

Du nimmst #content mit float: right; aus dem Dokumentenfluss. Floate besser die Navigation.

MfG H☼psel

[david]

hi + dnke
hab ich probiert geht aber nicht, das navi div erzeugt einen umbruch und der inhalt umfliesst erst ab dem log div.

vielleicht muss ich der navi ein anderes behältnis geben also so ein inline element?

neue version ist oben
http://giland.org/trinity.htm

[Hopsel]

Hi david!

hab ich probiert geht aber nicht

Nein, hast du nicht. Zumindest ist bei der neuen Version kein Versuch zu entdecken.

das navi div erzeugt einen umbruch und der inhalt umfliesst erst ab dem log div.

Ich weiß nicht, was du meinst.

vielleicht muss ich der navi ein anderes behältnis geben also so ein inline element?

Wieso kümmerst du dich nicht erstmal um ein wenig Inhalt, der semantisch korrekt ausgezeichnet wird. Dann kannst du den Code doch immer noch mit wenigen Div-Tags gruppieren und schließlich mit CSS das Aussehen anpassen.

http://giland.org/trinity.htm

Vielleicht solltest du einfach mal erklären, was genau du möchtest.

MfG H☼psel

[david]

hallo nochmal,

ich weiss genau was ich will:
den aufbau den ich zuvor hatte, bei dem aber der footer(bzw sein padding) das problem war.

hier nochmal der aufbau den ich anstrebe:

_________________________
___________header________
           .
     navi  .
           .
............      inhalt
           .
     logo  .
___________________________
____________footer_________

lg
david

[Hopsel]

Hi david!

den aufbau den ich zuvor hatte, bei dem aber der footer(bzw sein padding) das problem war.

Und ich habe dir eine Lösung genannt. Floate die Navigation. Natürlich musst du dem Inhalt dann noch ein entsprechendes margin-left mitgeben.

MfG H☼psel

[david]

hi hospel,

noch wach???
habs jetzt so hinbekommen, dass ich noch ne div box über die und das logo gezogen habe und diese dann gefloated habe.

allerdings könnte man das margin-left beim inhalt weglassen, also hab ichs wahrscheinlich doch ned kapiert.arrg

http://giland.org/trinity.htm

lg

[Axel Richter]

Hallo,

hier nochmal der aufbau den ich anstrebe:

_________________________
___________header________
           .
     navi  .
           .
............      inhalt
           .
     logo  .
___________________________
____________footer_________

Lies hier zu den Grundlagen.

Hole Dir dann hier Anregungen.

viele Grüße

Axel

[david]

Lies hier zu den Grundlagen.

Hole Dir dann hier Anregungen.

hab ich gemacht, konnte aber nirgendswo sehen wie man mein layout realisieren kann, ja es ist zweispaltig , die linke spalte hat aber 2 zellen(ui das hätt ich besser nicht so beschreiben sollen:)
die möglichkeit die ich gefunden habe, keine ahnung ob sie richtig oder gut ist, habe ich ja geposted und würd mich freuen wenn jemand konkret sagt obs falsch ist oder nicht.

http://giland.org/trinity.htm

[Axel Richter]

Hallo,

Lies hier zu den Grundlagen.

Hole Dir dann hier Anregungen.

hab ich gemacht,

Nein ;-)

die möglichkeit die ich gefunden habe, keine ahnung ob sie richtig oder gut ist, habe ich ja geposted und würd mich freuen wenn jemand konkret sagt obs falsch ist oder nicht.
http://giland.org/trinity.htm

1. Beschäftige Dich mit aktuellem HTML, besonders mit aktuellen Dokumenttypen. Recherchiere in Diesem Zusammenhang nach dem Begriff "Quirks-Modus".

2. Lass die Angabe von width:600px für das DIV#content einfach mal weg.

3. Bekämpfe dann den Three Pixel Text-Jog.

4. Überlege, ob Du ein pixelgenaues Layout überhaupt brauchst, oder ob Du Dich nicht doch von den etwas luftigeren Beispielen aus SELFHTML inspirieren lassen könntest.

5. Wozu ist das DIV#navileft nötig, wenn dort _nur_ die UL#navi drin steht? Alle CSS-Einstellungen für DIV#navileft kann auch UL#navi bekommen. Selbiges gilt für DIV#picleft vs. img src="logo.jpg".

6. Zeigt Dein IE die backgrund-color:grey wirklich an? Meiner kennt nur gray. Allgemein ist aber die Angaben der numerischen RGB-Farbe (#808080) besser, weil eindeutiger.

viele Grüße

Axel

[david]

hi und danke für die vielen vorschläge, werd probieren diese umzusetzten :)

[david]

hallo nochmal,
hab jetzt das div weggelassen und die css direkt auf das <ul> angewandt, das problem das sich mir noch stellt ist dass das logo und der erste <li> nicht bündig sind. das padding der <li> ist auf 0 gestellt, es bleibt aber dennoch ein rand.

die anderen vorschläge will ich auch noch umsetzen, den content bereich würde ich deswegen gerne fix machen weil ich es schöner finde wenn mann eine kante hat die immer gleich bleibt und mit einem footer rechts bündig ist.

http://giland.org/trinity.htm

[Axel Richter]

Hallo,

hab jetzt das div weggelassen und die css direkt auf das <ul> angewandt, das problem das sich mir noch stellt ist dass das logo und der erste <li> nicht bündig sind. das padding der <li> ist auf 0 gestellt, es bleibt aber dennoch ein rand.

Nein, das padding-left hast Du extra für den IE auf 0.8em gestellt. In anderen Browsern ist alles bündig.

Mit dem Hinweis auf www.positioniseverything.net hatte ich eigentlch nicht gemeint, dass Du absolut alle Hacks, die dort beschrieben werden gleich in Deine Seite einbauen sollst. Man muss auch _verstehen_, was man da macht.

viele Grüße

Axel

[david]

ist meine erste site, hab die designs aus intensivstation und selfhtml übernommen und modifiziert, daher auch die hacks die ich mitkopiert habe.

[david]

hallo nochmal, hab jetzt einiges im selfhtml gelesen und hoffe ich konnte es mit dem jetzigen design halbwegs umsetzten.

warum der footer aber soviel abstand zum content hat, da komm ich nicht darauf.

vielleicht schaut es sich noch jemand an, danke an hopel und alex fürs checken und die gedult...
http://giland.org/trinity.htm

[Detlef G.]

Hallo david

warum der footer aber soviel abstand zum content hat, da komm ich nicht darauf.

Das ist nicht der Abstand zwischen content und footer sondern der margin von p.
Dieser unerwartete Effekt ergibt sich durch die Regeln für Collapsing margins.

Setze mal für #content einen Border. (damit der dann nicht zu sehen ist, kannst du ja die Hintergrundfarbe verwenden)
z.b. border:1px solid #ff99cc;

Auf Wiederlesen
Detlef

[david]

hi und danke für die antwort, habe mir aber dann doch eine deutsche seite gesucht die das zusammenfallen der margins erklärt.

habe jetzt einfach mal das <p> weggelassen, was mich noch interessieren würde warum meine schrift im content bereich irgendwie anders wirk als in der navi, das ziel ist dass die überschrift gleich formatiert wie ein <li> der navi ist.

vielen dank

http://giland.org/trinity.htm

[Detlef G.]

Hallo david

habe jetzt einfach mal das <p> weggelassen,

Was soll der Blödsinn?
Wie du das Zusammenfallen der Margins verhindern kanns, habe ich dir gepostet, und der zukünftige Inhalt von content dürften doch wohl hauptsächlich Textabsätze werden.
Genau dafür ist p gedacht, p - paragraph - Absatz.
Beschäftige dich auch mit HTML, und damit, welchen Zweck die verschiedenen Elemente erfüllen.

was mich noch interessieren würde warum meine schrift im content bereich irgendwie anders wirk als in der navi, das ziel ist dass die überschrift gleich formatiert wie ein <li> der navi ist.

Verstehst du überhaupt irgendetwas von dem, was in deinem Stylebereich steht?

body {  
  ...  
  font-size: 12px;  
  ...  
}  

Also erstmal alles 12px!

h1 {  
font-size:14px;  
...  
 }  

Also h1 soll 14px groß sein.

a {  
...  
font-size: 11px;  
...  
}

Also alles was in einem Link steht 11px.

<span style="[code lang=css]font-weight:bold;">...[/code]

Also alles in deinem content außerdem noch fett.

Du erwartest doch nicht ernsthaft, dass 14px in Fettschrift (Fettschrift ist der übliche Browserstandard für Überschriften), 12px in Fettschrift (dein  span in #content) und 11px in Normalschrift (für a festgelegt) ein identisches Aussehen ergeben?

Beschäftige dich mit CSS, und schreibe nicht einfach irgendwelche Eigenschften dazu, wenn du nicht verstanden hast, wozu die Eigenschaften im CSS-Block dienen oder was diese bewirken!

Auf Wiederlesen
Detlef

[david]

hmm du hast völlig recht aber ich denk das ist so wenn man anfängt.
iss jetzt auch keine entschuldigung für die schlamperei.

das problem mit den collapsing margin hat sich durch die zeile
<br style="clear:both"> im content gelöst.

lg
david

[Hopsel]

Hi david!

ich will dass bei jeder div box der innenabstand padding auf einen bestimmten wert geht, kann ich das irgendwo allgemein definieren?

Sicher. Selektiere dazu einfach das/alle Div-Element.

MfG H☼psel

[Jonathan]

zu A: Der Browser verarbeitet die Daten dann eben nach dem neuen Standart (4.1) und nicht nach dem alten. D.h. er kann dann eben auch die neueren Befehle verarbeiten, etc. und damit hast du dann mehr Spielraum und Möglichkeiten

Ich bezeifele mal, dass ein Browser wirklich technologieren vergisst, nur weil er ein als 3.2 ausgezeichnetes Dokument vorgesetzt bekommt. Da HTML ja vermutlich auch relativ abwärtskompatibel ist, sollte das doch egal sein, (obwohl das verwenden von neueren Versionen natürlich sauberer ist)

Standart

Ich hasse diesen Schreibfehler... ;)

zu B: Dann leg dir doch mal einen neuen Editor zu. Sehr gut sind Phase 5 und Weaverslave. Google auch mal danach. Beide sind umsonst.

PSPad ist IMHO auch sehr gut. (Ich find den besser als Phase5)
http://www.pspad.com/de/screenshot.htm

[hubschraubaer]

Hi!

Standart

Ich hasse diesen Schreibfehler... ;)

Och möönsch! Was erwartest du von mir? Es sind doch Ferien! :-)

zu B: Dann leg dir doch mal einen neuen Editor zu. Sehr gut sind Phase 5 und Weaverslave. Google auch mal danach. Beide sind umsonst.

PSPad ist IMHO auch sehr gut. (Ich find den besser als Phase5)

PSPad kannte ich nicht.

ciao, hubschraubaer

[Hopsel]

Hi david!

die boxen auch richtig verschachtelt sind.

Es wäre sehr schon, wenn du dazu den Validator nehmen könntest.

MfG H☼psel