Unerklärliches Wachstum von Div?

[Gary]

Hallo Zusammen,

Ich habe die Hauptseite meiner Webpage bis auf ein paar "Kinderkrankheiten soweit fertig.

Jetzt wollte ich die verlinkten Unterseiten ebenfalls anpassen und stoße hierbei auf folgendes Phänomen:

Der Div-Container unten in der Mitte (div.wc_body) enthält auf der Hauptseite viele kleine Ankerlinks. Auf den Unterseiten aber nur das Wort der Unterseite.

Beispiel: Man ist auf der Haupteiste = Alles wunderbar.
Man klickt auf Info = Der besagte Div-Container ist überhoch. Und das obwohl nur das Wort "Info" in Ihm steht. Je länger das Wort (z.B. Bedienung), desto höher wird der Container.

1... Woher kommt das?

-->weiteres Problem: Wenn ich statt "I N F O" mehr Abstand möchte und "I    N    F    O" schreibe, wird dies in der Ausgabe gar nicht berücksichtigt - egal ob 1000 Leerzeichen zwischen dem "I" und dem "N" stehen.

2... Woher kommt das?

Grüße Gary

[Shadowcrow]

'ǝɯɐu$ ıɥ

-->weiteres Problem: Wenn ich statt "I N F O" mehr Abstand möchte und "I    N    F    O" schreibe, wird dies in der Ausgabe gar nicht berücksichtigt - egal ob 1000 Leerzeichen zwischen dem "I" und dem "N" stehen.

Das ist so, mehr als ein Leerzeichen wird ignoriert - oft wird Quelltext nicht mit Tabs sondern mit Leerzeichen eingerückt. Um ein Leerzeichen zu erzwingen benutzt man   - für deinen Fall nicht empfehlenswert. Du willst: http://de.selfhtml.org/css/eigenschaften/schrift.htm#letter_spacing.

Ich hätte da einen Suuuper Lesetipp für dich: http://de.selfhtml.org/index.htm *duck*
ssnɹƃ
ʍopɐɥs

[ChrisB]

Hi,

Beispiel: Man ist auf der Haupteiste = Alles wunderbar.
Man klickt auf Info = Der besagte Div-Container ist überhoch.

Dazu muss man „Info“ erst mal finden - hat ein bisschen gedauert, bis ich das in der Winznavigation links überhaupt gesehen habe.

Und das obwohl nur das Wort "Info" in Ihm steht.

Is' doch glatt gelügt:

<div class="wc_body">  
<h2></h2>  
<h2>/\</h2>  
<h2>I N F O</h2>  
</div>

• Nein, da steht nicht nur Info drin, sondern noch anderer Unsinn.

-->weiteres Problem: Wenn ich statt "I N F O" mehr Abstand möchte und "I    N    F    O" schreibe, wird dies in der Ausgabe gar nicht berücksichtigt - egal ob 1000 Leerzeichen zwischen dem "I" und dem "N" stehen.

2... Woher kommt das?

Das kommt natürlich daher, dass in HTML die Regel gilt, dass unter normalen Bedingungen mehrere aufeinanderfolgende Whitespace-Zeichen zu einem Leerzeichen zusammengefasst werden.
Das könnte man zwar unter Benutzung geschützter Leerzeichen ändern - aber auch das wäre hochgradiger Blödsinn.

Du willst lediglich das optische Erscheinungsbild ändern, also nimmst du dazu selbstverständlich CSS.
http://de.selfhtml.org/css/eigenschaften/schrift.htm#letter_spacing

MfG ChrisB

[Gary]

Hi ChrisB

Is' doch glatt gelügt:

<div class="wc_body">

<h2></h2>
<h2>/</h2>
<h2>I N F O</h2>
</div>

>   
> - Nein, da steht nicht nur Info drin, sondern noch anderer Unsinn.  
  
Und jetzt ist es so:  
  
<div class="wc\_body">  
<h2>I N F O</h2>  
</div>  
  
Es ändert sich aber trotzdem nichts an dem überhohem Div \*grübel\*  
Wo kommt das her?  
  

>   
> > -->weiteres Problem: Wenn ich statt "I N F O" mehr Abstand möchte [...]  
> > 2... Woher kommt das?  
  

> Das kommt natürlich daher, dass in HTML die Regel gilt, dass unter normalen Bedingungen mehrere aufeinanderfolgende Whitespace-Zeichen zu einem Leerzeichen zusammengefasst werden.  
  
Ok, das muss man aber erst mal wissen, das der Browser nur \_eines\_ durchgehen läßt \*gims\*

[ChrisB]

Hi,

Und jetzt ist es so:

<div class="wc_body">
<h2>I N F O</h2>
</div>

Es ändert sich aber trotzdem nichts an dem überhohem Div *grübel*
Wo kommt das her?

Es wird vermutlich daran liegen, dass irgendeine Pfeife im CSS angegeben hat, dass div.wc_body eine Mindesthöhe von 132px haben soll*.

Ich würde vorschlagen, du setzt diesen vergesslichen Eumel einfach vor die Tür, denn er scheint dich massiv von der Arbeit und vom Vorankommen abzuhalten ...

Das kommt natürlich daher, dass in HTML die Regel gilt, dass unter normalen Bedingungen mehrere aufeinanderfolgende Whitespace-Zeichen zu einem Leerzeichen zusammengefasst werden.

Ok, das muss man aber erst mal wissen, das der Browser nur _eines_ durchgehen läßt *gims*

Das könnte man wissen, wenn man sich erst mal ein bisschen mit den Grundlagen beschäftigt hätte.

Dann müsste man hier auch nicht eine Frage nach der anderen rausfeuern, die man sich durchaus selbst beantworten könnte, wenn man sich erst mal die Grundlagenkapitel von SELFHTML durchliest.

* Das ist bspw. mit Freibug sehr leicht herauszufinden.

MfG ChrisB

[Gary]

Hi ChrisB

Das liegt nie und nimmer an der mindesthöhe. Habe sie mal eben entfernt - ohne Wirkung. Auch die h2 Elemente habe ich gegen gewöhnliche p ausgetauscht. Ohne Effekt.

Ich gehe alles nochmal durch. irgendwo muss es sein... ein div zuviel oder ein Schreibfehler. Bei der Hauptseite geht es jauch. leiches css.

Gruß und Bye

Gary

Merci trotzdem :-)

[ChrisB]

Hi,

Das liegt nie und nimmer an der mindesthöhe. Habe sie mal eben entfernt - ohne Wirkung.

Sie ist aktuell in deinem Beispiel immer noch drin - und so bald ich sie per Firebug abknippse, macht sich dein <div class="wc_body"> ganz schön klein. Setz' mal eine andere Hintergrundfarbe für dieses Element - dann siehst du's.

Ich gehe alles nochmal durch. irgendwo muss es sein...

Ja, aber verdammt gut versteckt - mann, ist das ein chaotischer Layout-Aufbau, hat mich jetzt gerade auch erst mal zehn Minuten gekostet, bis ich da mit Firebug halbwegs durchgesehen habe. Wirklich, sowas geht besser und einfacher. Was du da vor allem mit fixer Positionierung treibst, treibt dem CSS-Kenner die Tränen in die Augen.

Dein Element <div class="wc_head">, dass entgegen seiner Klassifizierung ganz unten angezeigt wird, zusammen mit <div class="wc_foot">, die dort den linken Teil der Spule darstellen - die sind auch wieder mit position:fixed positioniert, und haben eine Höhe von 132px.
Aber da ist auch noch mehr Schnickschnack drin, der den grauen Balken unten erzeugt - aber das krieg ich jetzt gerade wirklich nicht debuggt, so undurchsichtig ist mir dein ganzes Layout und die Struktur.

Allein schon, dass alle drei Elemente, die ich jetzt hier bisher als nutzlose Layouthilfen identifiziert habe, von dir wie folgt benannt worden sind (fälschlicherweise mit einer Klasse, statt einer ID wegen der Einzigartigkeit ihres jeweiligen Vorkommens):
  "wc_heat",
  "wc_body" und
  "wc_foot"

• mit Bezeichnern, die doch wohl danach *schreien*, dass sie INHALTLICHE Bedeutung ausdrücken *müssten* ... spricht doch wohl lautstark dafür, wie verkorkst der vorliegende Ansatz ist.

Mein Rat: Bau das ganze noch mal komplett neu auf, nicht auf irgendwelchem nicht mal halb verstandenen Copy&Paste-Scheiß.

Kümmere dich dabei zunächst *nur* ums HTML - und zwar so lange, bis es die *Inhalte*, die du darstellen willst (nicht die Verzierungen!), vernünftig strukturiert auszeichnet.

Erst danach denke überhaupt an CSS.

MfG ChrisB

[Gary]

Hi ChrisB

Sie ist aktuell in deinem Beispiel immer noch drin - und so bald ich sie per Firebug abknippse, macht sich dein <div class="wc_body"> ganz schön klein. Setz' mal eine andere Hintergrundfarbe für dieses Element - dann siehst du's.

Ja ist sie wieder drin. Ich hatte sie nur kurz aus - ohne Effekt. Und das sie ohne klein ist  stimmt zumidest hier nicht!

---------------------------------------------------------------------------
Ich habe es gefunden: Es war die height: auto; Angabe im div.wrapper_background (umspanner). Das "auto" erfüllt nur für den "langen" Content der Hauptseite seinen Sinn. Für die Unterseiten muss da 100% drin stehen (Ist der Sternenhimmel).
---------------------------------------------------------------------------

Ja, aber verdammt gut versteckt - mann, ist das ein chaotischer Layout-Aufbau, hat mich jetzt gerade auch erst mal zehn Minuten gekostet, bis ich da mit Firebug halbwegs durchgesehen habe. Wirklich, sowas geht besser und einfacher. Was du da vor allem mit fixer Positionierung treibst, treibt dem CSS-Kenner die Tränen in die Augen.

Da hast du recht. Das liegt daran, daß ich das komplette Layout schon 3 mal verändert habe. Zuletzt die Seitlichen Spule auf ein Layout als Footer umgebaut - infolge dessen ist es klar, das der Head jetzt unten ist und nichts mehr sinngemäß verwendet wird usw...

Mein Rat: Bau das ganze noch mal komplett neu auf, nicht auf irgendwelchem nicht mal halb verstandenen Copy&Paste-Scheiß.

Komplett aufbauen - Nein, ich war schon zu lange dran. Und irgendwann bekomme ich sonst mit meiner Frau Ärger...

Und wer mich kennt, weis das ich niemals Copy und Paste mache. Es ist alles auf meinem Mist gewachsen. Und zwar von A-Z.

Erst danach denke überhaupt an CSS.

CSS ist gut: Man kann nachträglich bequem am Aussehen drehen. Überlege mal, wenn ich die seitliche Spule zu Fuß im Quelltext hätte nach unten verschieben wollen... - wie lange das wohl gedauert hätte...

Jetzt ist fast alles so wie es sein soll!

Übrigens danke für deine 10 Minuten suchen, wäre nicht nötig gewesen  *anerkennungsvoll*

Grüße aus dem südlichsten Teil von Deutschland

Gary

[ChrisB]

Hi,

Komplett aufbauen - Nein, ich war schon zu lange dran.

Wenn du diesen Rohrkrepierer weiter „gesund bastelst“, dann, prophezeie ich, wirst du spätestens in einer Woche schon selber nicht mehr wissen, was du da wo weshalb wie gemacht hast.

Und wer mich kennt, weis das ich niemals Copy und Paste mache. Es ist alles auf meinem Mist gewachsen.

Auf diesem Mist könnte man Champignons züchten - jedes Pferd müsste neidisch sein.

CSS ist gut: Man kann nachträglich bequem am Aussehen drehen. Überlege mal, wenn ich die seitliche Spule zu Fuß im Quelltext hätte nach unten verschieben wollen... - wie lange das wohl gedauert hätte...

Überlege mal, wie sinnvoll es gewesen wäre, wenn du sie gleich mit einem Bezeichner benannt hättest, der nicht behauptet, sie hätte irgendwas mit "head" zu tun!

MfG ChrisB

[apsel]

Om nah hoo pez nyeetz, Gary!

CSS ist gut: Man kann nachträglich bequem am Aussehen drehen. Überlege mal, wenn ich die seitliche Spule zu Fuß im Quelltext hätte nach unten verschieben wollen... - wie lange das wohl gedauert hätte...

Das zeigt eigentlich, dass du noch großen Nachholebedarf hast (falls ich nicht das <ironie> übersehen habe).

mit HTML werden allein die Inhalte erstellt, ohne dass sie optisch aufgehübscht sind, ja sie müssen noch nicht einmal an den richtigen Positionen sein. (Eine Überschrift sieht hervorgehoben aus, weil sie semantisch als eine solche gekennzeichnet wird und die Browser ein Default-Stylesheet haben) Die Gestaltung erfolgt mit CSS.

Matthias

[shn]

Servus,

Und wer mich kennt, weis das ich niemals Copy und Paste mache.

Das kann mitunter auch ein Fehler sein. Wer aus vernünftigen™ Quellen kopiert und auch versteht und nachvollzieht was er da kopiert, kann hier und da ordentlich Zeit sparen, anstatt das Rad neu erfinden zu müssen.

Gruss
Patrick

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

"wc_heat",

Bei Hitze ist die Kacke wohl richtig am Dampfen.

Qapla'

[Peter Pan]

Hi!

"wc_heat",

Bei Hitze ist die Kacke wohl richtig am Dampfen.

Manchmal becommt man dafon Copfschmercen...

off:PP

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

* Das ist bspw. mit Freibug sehr leicht herauszufinden.

Wieviele Bugs hat man bei dir frei?

Qapla'

[Peter Pan]

Hi!

* Das ist bspw. mit Freibug sehr leicht herauszufinden.

Wieviele Bugs hat man bei dir frei?

Jede Menge - weißt Du doch auch als Forums-Veteran, oder?

off:PP