verDIVt und zugenäht: Netscape-Chaos

[dey]

Moin moin,

Nach langem probieren habe ich es endlich geschafft mein Layout mit DIV-Design hinzubekommen. Mit Tabellen hätte es nur Bruchteile gedauert aber das ist ja verpöhnt!

http://www.deyerling.keepfree.de/programming/

Unter Phase5, verknüpft mit MSIE6, sieht es gut? aus:

http://www.deyerling.keepfree.de/programming/msie6.jpg

Glücklicherweise habe ich es nochmal mit Netscape und Mozilla kontrolliert und schock:

http://www.deyerling.keepfree.de/programming/mozilla.jpg

Ich beschreibe mal grob mit <table>-konstruktion was ich vorhatte:

<table width="100%">
<tr>
 <td>blue frame links</td>
 <td width="640px">

<table >
   <tr>
   <td>blue frame top mit programming.jpg</td>
   </tr>
   <tr>
   <td>Inhalt mit grauem Hintergrund </td>
   </tr>
   </table>

</td>
 <td>blue fram rechts mit projects.jpg</td>
</tr>
</table>

1.
Auch unter MS fiel es mir sehr schwer mit Divs ein Design zu erzeugen welches in der Mitte, mehr oder weniger zentriert, eine feste Breite von 640px hat und der blaue Rahmen links und rechts je nach Fentsergrösse seine Breite ändert.
Meine verwendeten Div-Attribute waren zwar zum Schluss erfolgreich sind aber doch sehr zusammengestückelt.
Kann mir jemand sagen wie man mit Divs ein solches Design erzeugt?

2.
Unter Netscape/ Mozilla ging es dann völlig schief.
Wie erzeuge ich das von mir gewünschte Design denn nun auch noch Barrierefrei?

3.
Sollte ich meine eigene Signatur in Frage stellen

Im übrigen will ich mit den gewonnen Erfahrungen später meine Firmenhomepage auch auf Divs umstellen.
Die Links uaf der Seite sind noch nicht alle aktiv.

bydey

[Danny]

Moin,

das kenne ich. Allerdings ist die Zentrierung relativ einfach, wenn man weiss, wie's geht:

body {
 text-align: center;
}
#container {
 text-align: left;
 width: 640px;
}

Damit sollte <div id="container"> in den meisten aktuellen Browsern in der Mitte zentriert sein.

MfG
Danny

[dey]

Moin moin Danny,

das kenne ich. Allerdings ist die Zentrierung relativ einfach, wenn man weiss, wie's geht:

body {
 text-align: center;
}
#container {
 text-align: left;
 width: 640px;
}

Damit sollte <div id="container"> in den meisten aktuellen Browsern in der Mitte zentriert sein.

Endlich einer, der mich versteht.
Allerdings möchte ich jetzt links und rechts jeweils ein Div haben.
Links nur mit blauen Hintergrund und z.b. Breite 10px und rechts mit blauem Hintergrund und dem hintergrundbild.
Mein Problem ist das Verständnis von float, clear, position, etc, um Breiche zu definieren, die ich variabel haben möchte und andere, die ich aus Design gründen fix brauche.
Mein Tabllendesign war nur ein Beispiel, wie ich das schnell mit einer tabelle gelöst hätte. Aber Tabellen als Layout sind out oder!?

bydey

[Struppi]

Allerdings möchte ich jetzt links und rechts jeweils ein Div haben.
Links nur mit blauen Hintergrund und z.b. Breite 10px und rechts mit blauem Hintergrund und dem hintergrundbild.
Mein Problem ist das Verständnis von float, clear, position, etc, um Breiche zu definieren, die ich variabel haben möchte und andere, die ich aus Design gründen fix brauche.
Mein Tabllendesign war nur ein Beispiel, wie ich das schnell mit einer tabelle gelöst hätte. Aber Tabellen als Layout sind out oder!?

nein, wenn du ein Tabellenlayout hast dann oist eine Tabelle das Mittel der Wahl. Schon deine Dokumentenstruktur zeigt, dass es die schwer fällt das in CSS umzusetzten.

Dabei ist es eigentlich ganz einfach

------------------------------------
|oben                     |rechts  |
|                         |        |
|-------------------------|        |
|                         |        |
|Inhalt                   |        |
|                         |        |
------------------------------------

Da der rechte Bereich nur für eine Grafik da ist, brauchst du diesen gar nicht zu definieren. Es reicht einfach, wenn du deinem Dokument einen rechtes margin gibst, das groß genug ist um die Grafik aufzunehmen.

Also in etwa (ungetestet)

body
{
margin-left:2em;
margin-right:4em; (oder wie gesagt die breite der Grafik)
background: blue url(projects.gif) no-repeat ??px ??px;
}

#oben
{
background-color:blue;
color:white;
}

#inhalt
{
background-color:grey
color:black

}

Struppi.

[dey]

Moin moin,

Dabei ist es eigentlich ganz einfach

---

|oben                     |rechts  |
|                         |        |
|-------------------------|        |
|                         |        |
|Inhalt                   |        |
|                         |        |

Da der rechte Bereich nur für eine Grafik da ist, brauchst du diesen gar nicht zu definieren. Es reicht einfach, wenn du deinem Dokument einen rechtes margin gibst, das groß genug ist um die Grafik aufzunehmen.

Also in etwa (ungetestet)

body
{
margin-left:2em;
margin-right:4em; (oder wie gesagt die breite der Grafik)
background: blue url(projects.gif) no-repeat ??px ??px;
}

#oben
{
background-color:blue;
color:white;
}

#inhalt
{
background-color:grey
color:black

}

Struppi du versuchst mich zu verwirren. Grad sagst du noch mein tabellen-designerisches Denken hält mich davon ab, die Lösung zu finden, und jetzt lieferst du sie doch!?
Ich vermute mal die ??px im background definieren die Position?
Absolut zum Fenster?
Wenn ich die Fenstergrösse verändere ändert sich die Position?

bydey

[Struppi]

Struppi du versuchst mich zu verwirren. Grad sagst du noch mein tabellen-designerisches Denken hält mich davon ab, die Lösung zu finden, und jetzt lieferst du sie doch!?

Naja, du veruschst zu starr fixe Größen einzubauen. alles ein bisschen flexibler und mehr Struktur (d.h. weniger DIVs) und dann könnnte das in etwa hinhauen.

s. [pref:t=81361&m=473399]

Ich vermute mal die ??px im background definieren die Position?
Absolut zum Fenster?

Naja, du kannst den Hintergrund ja auch mit right rechtsbündig machen und evtl. noch einen Tranparenten Abstand in das Bild einbauen.

Struppi.

[dey]

Moin moin,

Struppi du versuchst mich zu verwirren. Grad sagst du noch mein tabellen-designerisches Denken hält mich davon ab, die Lösung zu finden, und jetzt lieferst du sie doch!?

Naja, du veruschst zu starr fixe Größen einzubauen. alles ein bisschen flexibler und mehr Struktur (d.h. weniger DIVs) und dann könnnte das in etwa hinhauen.

s. [pref:t=81361&m=473399]

Danke für das Beispiel, zu viel der Ehr.

Ich hatte am Anfang ja einen falschen Link gesetzt, welchen ich in der Konversation mit Mudgard korrigiert hatte.
http://www.deyerling.keepfree.de/programming/MSIE6.jpgSo soll es aussehen.

1.
Unter IE6 hatte ich dieses Design, mit viel Flickschusterei, mit Divs und Attributen in CSS hinbekommen

2.
Allerdings passt es überhaupt nicht in Mozilla
http://www.deyerling.keepfree.de/programming/mozilla.jpg

3.
Ich glaube fast, dass ich geistig/ designerisch nicht frei genug bin für diese Art Design. Vielleicht sollte ich mich weiter an Tabellen als Grundgerüst halten,
Siehe auch die Diskussion weiter unten.

bydey

[Tobias Kloth]

Hallo Danny,

body {
 text-align: center;
}
#container {
 text-align: left;
 width: 640px;
}
Damit sollte <div id="container"> in den meisten aktuellen Browsern in der Mitte zentriert sein.

wenn du mit "den meisten aktuellen Browsern" den IE meinst, dann ja - wenn nicht, ist es falsch: mit text-align werden nämlich nur inline-Elemente ausgerichtet, nicht aber block-level-Elemente wie div. Wie man block-level-Elemente ausrichtet steht in http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm.

Grüße aus Nürnberg
Tobias

[Danny]

Hi,

war mir klar, hatte bloß die margin-Angaben vergessen...

MfG
Danny

[Struppi]

Nach langem probieren habe ich es endlich geschafft mein Layout mit DIV-Design hinzubekommen. Mit Tabellen hätte es nur Bruchteile gedauert aber das ist ja verpöhnt!

Weiter unten ist eine passende Diskussion.
Meine Meinung, wenn dir Tabellen leichter fallen mach es mit Tabellen und wenn du dich mit CSS versuchen willst, denk dir Desgins aus die man mit CSS gut umsetzten kann, alles andere ist nur eine Qual.

Unter Phase5, verknüpft mit MSIE6, sieht es gut? aus:

http://www.deyerling.keepfree.de/programming/msie6.jpg

404 - geht nicht

Ich beschreibe mal grob mit <table>-konstruktion was ich vorhatte:

<table width="100%">
<tr>
<td>blue frame links</td>

background-color: blue;
margin-left: ??px

<td width="640px">

Muss das sein?

<table >
   <tr>
   <td>blue frame top mit programming.jpg</td>

Als Hintergrund oder Grafik?

<div id="top">
<img src="..">
</div>

background-color:blue;

<td>blue fram rechts mit projects.jpg</td>

margin-right:??px;
background: url(projects.jpg) no-repeat ??em ??em;

Auch unter MS fiel es mir sehr schwer mit Divs ein Design zu erzeugen welches in der Mitte, mehr oder weniger zentriert, eine feste Breite von 640px hat und der blaue Rahmen links und rechts je nach Fentsergrösse seine Breite ändert.

Das ist genau das Porblem, das ist Tabellendesign. Es geht in manchen Browsern, die sich halbwegs konform verhalten mit margin-left/right:auto.
Ich würde eher einfach einen festen Rahmen link rechts z.b. 2em machen und die Mitte flexibel. Oder, da du ja eine Grafik hast, den Rahmen so gross wie die Grafik (plus ein paar Pixel mehr).

Struppi.

[dey]

Moin moin Struppi,

Nach langem probieren habe ich es endlich geschafft mein Layout mit DIV-Design hinzubekommen. Mit Tabellen hätte es nur Bruchteile gedauert aber das ist ja verpöhnt!

Weiter unten ist eine passende Diskussion.
Meine Meinung, wenn dir Tabellen leichter fallen mach es mit Tabellen und wenn du dich mit CSS versuchen willst, denk dir Desgins aus die man mit CSS gut umsetzten kann, alles andere ist nur eine Qual.

Unter Phase5, verknüpft mit MSIE6, sieht es gut? aus:

http://www.deyerling.keepfree.de/programming/msie6.jpg

404 - geht nicht

Ich beschreibe mal grob mit <table>-konstruktion was ich vorhatte:

<table width="100%">
<tr>
<td>blue frame links</td>

background-color: blue;
margin-left: ??px

<td width="640px">

Muss das sein?

<table >
   <tr>
   <td>blue frame top mit programming.jpg</td>

Als Hintergrund oder Grafik?

<div id="top">
<img src="..">
</div>

background-color:blue;

<td>blue fram rechts mit projects.jpg</td>

margin-right:??px;
background: url(projects.jpg) no-repeat ??em ??em;

Auch unter MS fiel es mir sehr schwer mit Divs ein Design zu erzeugen welches in der Mitte, mehr oder weniger zentriert, eine feste Breite von 640px hat und der blaue Rahmen links und rechts je nach Fentsergrösse seine Breite ändert.

Das ist genau das Porblem, das ist Tabellendesign. Es geht in manchen Browsern, die sich halbwegs konform verhalten mit margin-left/right:auto.
Ich würde eher einfach einen festen Rahmen link rechts z.b. 2em machen und die Mitte flexibel. Oder, da du ja eine Grafik hast, den Rahmen so gross wie die Grafik (plus ein paar Pixel mehr).

Schweres Missverständnis: ich habe das Tabellendesign nur als Beispiel angefügt, wie ich es erfolgreich!? mit einer Tabelle, bzw. 2-3, gelöst hätte. Ich suche einen Lösungsansatz, dies barrierefrei in Div umzusetzen.

bydey

[Struppi]

Das ist genau das Porblem, das ist Tabellendesign. Es geht in manchen Browsern, die sich halbwegs konform verhalten mit margin-left/right:auto.
Ich würde eher einfach einen festen Rahmen link rechts z.b. 2em machen und die Mitte flexibel. Oder, da du ja eine Grafik hast, den Rahmen so gross wie die Grafik (plus ein paar Pixel mehr).

Schweres Missverständnis: ich habe das Tabellendesign nur als Beispiel angefügt, wie ich es erfolgreich!? mit einer Tabelle, bzw. 2-3, gelöst hätte. Ich suche einen Lösungsansatz, dies barrierefrei in Div umzusetzen.

nein, du verstehst mich falsch.

Dein Designansatz ist mit CSS/HTML so nicht ohne weiteres umsetzbar, also solltest du es mit einer Tabelle machen oder das Designkonzept so überdenken, dass es auch mit CSS erfolgreich umzusetzten ist. Wei ich ich schon schrieb, link und rechts einen gleich grossen Abstand (margin ) und den Inhalt nicht fix und schon hast du einen einfaches sogar mit NC 4.x funktioniertes zentriertes Layout, dann das Bild rechts entweder als Hintergrundbild (klappt dann nicht mehr mit NC 4) oder positioniert auf den rechten margin Rahmen, fertig. Der Rest ist relativ einfach umzusetzten.

Struppi.

[dey]

Moin moin,

nein, du verstehst mich falsch.

Dein Designansatz ist mit CSS/HTML so nicht ohne weiteres umsetzbar, also solltest du es mit einer Tabelle machen oder das Designkonzept so überdenken, dass es auch mit CSS erfolgreich umzusetzten ist. Wei ich ich schon schrieb, link und rechts einen gleich grossen Abstand (margin ) und den Inhalt nicht fix und schon hast du einen einfaches sogar mit NC 4.x funktioniertes zentriertes Layout, dann das Bild rechts entweder als Hintergrundbild (klappt dann nicht mehr mit NC 4) oder positioniert auf den rechten margin Rahmen, fertig. Der Rest ist relativ einfach umzusetzten.

Shit, ich bin ein old-styles Table-designer. Dann mach ich das mal mit <table>. mille gracie

bydey

[MudGuard]

Hi,

http://www.deyerling.keepfree.de/programming/msie6.jpg

404

Auch unter MS fiel es mir sehr schwer
2.
Unter Netscape/ Mozilla ging es dann völlig schief.

Es wäre natürlich günstiger, erst mit möglichst standardkonformen Browsern zu testen und erst am Schluß an den IE anzupassen.

cu,
Andreas

[dey]

Moin moin Andreas,

Hi,

http://www.deyerling.keepfree.de/programming/msie6.jpg
404

Sorry! Scheiss GROSSSCHREIBUNG und ich hab den Namen auch noch selbst vergeben!?
http://www.deyerling.keepfree.de/programming/MSIE6.jpg

Auch unter MS fiel es mir sehr schwer
2.
Unter Netscape/ Mozilla ging es dann völlig schief.

Es wäre natürlich günstiger, erst mit möglichst standardkonformen Browsern zu testen und erst am Schluß an den IE anzupassen.

Möglich, da ich mich aber firmenseitig in der M$-Welt bewege ist dieser Weg in meinem Falle der richtige.
Ausserdem erklärt Deine Antwort nicht die Unterschiede zwischen IE und Mozilla in der Interpretation der DIV-Attribute und erklärt natürlich auch nicht, wie ich einer Lösung näher komme.

"Hätte das Kind nicht am Brunnen gespielt, wärs nicht reingefallen; lassen wirs drin!?"

bydey

[MudGuard]

Hi,

Möglich, da ich mich aber firmenseitig in der M$-Welt bewege ist dieser Weg in meinem Falle der richtige.

Wenn Du das meinst, dann geh diesen Weg, aber ohne mich.

Ausserdem erklärt Deine Antwort nicht die Unterschiede zwischen IE und Mozilla in der Interpretation der DIV-Attribute und erklärt natürlich auch nicht, wie ich einer Lösung näher komme.

Sorry, aber wie hätte ich die Unterschiede erkennen (und damit erklären) sollen, wenn Du nicht in der Lage bist, das IE-Bild entsprechend zu verlinken?
Mein IE kommt aus Sicherheitsgründen nur zu Testzwecken lokal zum Einsatz - ins Internet lasse ich den nicht.

cu,
Andreas

[dey]

Moin moin,

Möglich, da ich mich aber firmenseitig in der M$-Welt bewege ist dieser Weg in meinem Falle der richtige.

Wenn Du das meinst, dann geh diesen Weg, aber ohne mich.

Ich will das nicht als Allerwelts-Lösung sehen, ist aber mein derzeitiger Weg

Ausserdem erklärt Deine Antwort nicht die Unterschiede zwischen IE und Mozilla in der Interpretation der DIV-Attribute und erklärt natürlich auch nicht, wie ich einer Lösung näher komme.

Sorry, aber wie hätte ich die Unterschiede erkennen (und damit erklären) sollen, wenn Du nicht in der Lage bist, das IE-Bild entsprechend zu verlinken?
Mein IE kommt aus Sicherheitsgründen nur zu Testzwecken lokal zum Einsatz - ins Internet lasse ich den nicht.

Habe doch in meiner Antwort den Link angepasst und der müsste jetzt gehen. thx

bydey

[Sven Rautenberg]

Moin!

Es wäre natürlich günstiger, erst mit möglichst standardkonformen Browsern zu testen und erst am Schluß an den IE anzupassen.

Möglich, da ich mich aber firmenseitig in der M$-Welt bewege ist dieser Weg in meinem Falle der richtige.

Es gibt eigentlich nur zwei Wege:

1. Entweder ist eine HTML-Lösung wirklich ausschließlich (!!!) nur für den IE gefragt. Dann ist gegen ein Entwickeln der Seite im IE nichts einzuwenden. Dann darf man sich hinterher aber auch nicht beschweren, dass andere Browser mit der Seite nichts anzufangen wissen, und dass die Änderungen, die man zur Korrektur machen muß, so aufwendig sind.

2. Oder man will eine Lösung, die grundsätzlich in allen Browsern funktioniert. Dann testet man die Seite NICHT im IE, sondern entwickelt sie zunächst mithilfe von Opera und/oder Mozilla basierend auf den aktuellen Standards. Das wenige, was der IE dann daran nicht versteht, wird mit geeigneten Methoden dann nachkorrigiert, was aber bei weitem nicht so aufwendig ist, wie der umgekehrte Fall unter 1.

Wenn du den Weg 1 wählst, dann beschwere dich nicht über die mangelhafte Umsetzung in anderen Browsern als dem IE. :)

Ausserdem erklärt Deine Antwort nicht die Unterschiede zwischen IE und Mozilla in der Interpretation der DIV-Attribute und erklärt natürlich auch nicht, wie ich einer Lösung näher komme.

Der IE hat gegenüber dem standardgemäßen Verhalten dermaßen viele Unterschiede und vor allem Bugs, dass man das unmöglich allgemein aufzählen könnte. :)

- Sven Rautenberg

[dey]

Moin moin Sven,

Wenn du den Weg 1 wählst, dann beschwere dich nicht über die mangelhafte Umsetzung in anderen Browsern als dem IE. :)

Ausserdem erklärt Deine Antwort nicht die Unterschiede zwischen IE und Mozilla in der Interpretation der DIV-Attribute und erklärt natürlich auch nicht, wie ich einer Lösung näher komme.

Der IE hat gegenüber dem standardgemäßen Verhalten dermaßen viele Unterschiede und vor allem Bugs, dass man das unmöglich allgemein aufzählen könnte. :)

Weisst du zufällig auch noch wie ich Mozilla zum Standart-Browser in Phase 5 definiere?

bydey

[Sven Rautenberg]

Moin!

Weisst du zufällig auch noch wie ich Mozilla zum Standart-Browser in Phase 5 definiere?

Bei mir: Einstellungen -> Programm -> Tab: Anbindungen.

Zusatzbrowser 1 und 2.

Du kannst in Phase 5 die interne Browseransicht mit dem IE nicht ersetzen, weil Phase 5 dazu die von MS angebotene Möglichkeit wahrnimmt, den IE als simple Anzeigekomponente einzubinden. Für Mozilla oder Opera gibts solche Komponenten nicht einzubinden.

Ist aber auch nicht erforderlich, denn die Seiten in einem externen Browser anzuzeigen ist IMO vollkommen ausreichend - man muß sie ja irgendwann sowieso in verschiedenen Browsern testen.

- Sven Rautenberg

[Dominik]

wahrnimmt, den IE als simple Anzeigekomponente einzubinden. Für Mozilla oder Opera gibts solche Komponenten nicht einzubinden.

Hallo!

das stimmt so nicht, Mozilla hat natürlich seine eigene (nicht IE kompatible API) für so was. Nachdem die Programmierer von Mozilla gemerkt haben, das (fast) niemand seine Programme darauf anpasst wurde das hier entwickelt:

http://www.iol.ie/~locka/mozilla/mozilla.htm

ist allerdings nicht 100% kompatibel und unterstützt auch die neueren APIs des IE - ActiveX Controls nicht.

Dominik

[dey]

Moin moin,

Bei mir: Einstellungen -> Programm -> Tab: Anbindungen.

Zusatzbrowser 1 und 2.

Habe ich vorhin hinzugefügt. Sehe aber irgendwie keine Veränderung. Wie und wo wirkt sich das aus?

Du kannst in Phase 5 die interne Browseransicht mit dem IE nicht ersetzen, weil Phase 5 dazu die von MS angebotene Möglichkeit wahrnimmt, den IE als simple Anzeigekomponente einzubinden. Für Mozilla oder Opera gibts solche Komponenten nicht einzubinden.

Das ist aber schade. Da hat jemand nicht daran gedacht, dass IE als Entwickler-Tool Schrott ist, wie ich ja so eben erfahren habe!?

Ist aber auch nicht erforderlich, denn die Seiten in einem externen Browser anzuzeigen ist IMO vollkommen ausreichend - man muß sie ja irgendwann sowieso in verschiedenen Browsern testen.

War ne reine Komfortfrage. Die interne Anzeige spart Zeit, weil Speichern und Anschauen 1 Klick ist.

bydey

[Struppi]

ich hab da mal was zusammengebaut, leider hab ich hier nur den IE 4 und der macht da nur Mist. Also, keine Ahnung ob das in etwa dem entspricht was du suchst:
http://home.arcor.de/struebig/js/test/dey/

Struppi.

[Struppi]

ich hab da mal was zusammengebaut, leider hab ich hier nur den IE 4 und der macht da nur Mist. Also, keine Ahnung ob das in etwa dem entspricht was du suchst:
http://home.arcor.de/struebig/js/test/dey/

OK, dank den Tips von Ingo sieht es jetzt ca. so aus wie du es willst.

Struppi.