nicht angemeldet
IE = OK FF & NS machen Tabellezelle um 3px zu hoch
Der Martin...Moin @ ALL,
nach der Umstellung von DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
auf
echo'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
passt mein Tabellenlayout nicht mehr.
Der IE 6.0 macht bezüglich der Pixelangaben genau das was ihm gesagt wird. Der FF und der NS genehmigen sich 3 zusätzliche Pixel in der Höhe, welche das Layout ruinieren.
Per CSS habe ich alle margin und padding auf 0 px gesetzt. Auch habe ich alle "white spaces" und breaks entfernt.
Hier ist die betreffende Tabelle:
<table style="background-image:url('.$Current_URL.'/images/glas_back_oben.jpg); height:108px; width:100%;" border="1" cellpadding="0" cellspacing="0">
<tr style="height:68px; width:100%;">
<td style="height:68px; width:135px;"><img src="./images/ob_li.jpg" width="135" height="68" alt=""></td>
<td style="height:68px; width:75px;"><img src="./images/ob_li_b.jpg" width="75" height="68" alt=""></td>
<td align="right" style="width:100%; height:68px;"><img src="./images/kids.gif" width="200" height="60" alt="All together"></td>
</tr>
<tr style="height:40px; width:100%;">
<td style="height:40px; width:135px;"><img src="./images/ob_li_c.jpg" width="135" height="40" alt=""></td>
<td style="height:40px; width:75px;"><img src="./images/leiste_li.jpg" width="75" height="40" alt=""></td>
<td align="center" style="height:40px; white-space:nowrap; background-image:url('.$Current_URL.'/images/glas_back_oben_b.jpg);"><span class="point"> • </span><a href="./wir_sind.php" class="menuoben">Wir sind</a><img src="./images/spacer.gif" width="100" height="1" alt=""><span class="point"> • </span><a href="./wir_bieten.php" class="menuoben" >Wir bieten</a><img src="./images/spacer.gif" width="100" height="1" alt=""><span class="point"> • </span><a href="./wir_moechten.php" class="menuoben" >Wir möchten</a></td>
</tr>
</table>
Wie bekomme ich diese zusätzlichen Pixel in der Höhe weg?
Die Entwicklunspage ist hier: http://ladenbuerger.dnip.net/Strict/index.php
Sollte die Page nicht erreichbar sein, dann gab es eine Zwangstrennung von T-Offline, dann bitte 10 Minuten später nocheinmal versuchen.
Damit man es besser sieht, ist der Border auf 1 gesetzt.
Danke & regds
Mike©
--
Freunde kommen und gehen. Feinde sammeln sich an.
Freunde kommen und gehen. Feinde sammeln sich an.
-
Hi,
nach der Umstellung [auf Standards Compliance Mode]
passt mein Tabellenlayout nicht mehr.Tabellenlayout passt _nie_. Warum machst Du sowas Dämliches?
Der IE 6.0 macht bezüglich der Pixelangaben genau das was ihm gesagt wird.
Was i.d.R. bedeutet, dass Du Dir nicht im Klaren darüber bist, was Du sagst.
Der FF und der NS genehmigen sich 3 zusätzliche Pixel in der Höhe, welche das Layout ruinieren.
Die da wo sind?
Per CSS habe ich alle margin und padding auf 0 px gesetzt. Auch habe ich alle "white spaces" und breaks entfernt.
Hast Du die Codes validiert?
<table style="background-image:url('.$Current_URL.'/images/glas_back_oben.jpg); [...]
Dies beispielsweise ist kein gültiger CSS-Code.
Sollte die Page nicht erreichbar sein,
Ist sie nicht.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Moin Cheatah,
Tabellenlayout passt _nie_. Warum machst Du sowas Dämliches?
weil das zunächst das Grundkonzept ist und hat bislang gepasst.
Also ein Schritt nach dem anderen. Rom wurde auch nicht an einem Tag erbaut.Ich stelle nun um auf Strict, und wenn dann wieder Zeit ist ersetze ich die Tabelle. Dennoch ist momentan das Tabellenproblem akut. Über etwas anderes müssen wir also derzeit nicht diskutieren.
Der IE 6.0 macht bezüglich der Pixelangaben genau das was ihm gesagt wird.
Was i.d.R. bedeutet, dass Du Dir nicht im Klaren darüber bist, was Du sagst.
Du möchtest damit zum Ausdruck bringen, dass der IE es falsch richtig macht.
Der FF und der NS genehmigen sich 3 zusätzliche Pixel in der Höhe, welche das Layout ruinieren.
Die da wo sind?
In zwei von zwei Rows
Hast Du die Codes validiert?
Yep sowohl CCS als auch html. Im CCS werden natürlich die Einfärbungen der Srcollbars angemeckert, das war's aber auch.
<table style="background-image:url('.$Current_URL.'/images/glas_back_oben.jpg); [...]
Dies beispielsweise ist kein gültiger CSS-Code.Das ist der PHP Code und wenn der geparst ist, dann ist es valide.
Ist sie nicht.
Jetzt schon
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hi,
Also ein Schritt nach dem anderen. Rom wurde auch nicht an einem Tag erbaut.
nein, aber niedergebrannt.
Ich stelle nun um auf Strict, und wenn dann wieder Zeit ist ersetze ich die Tabelle. Dennoch ist momentan das Tabellenproblem akut. Über etwas anderes müssen wir also derzeit nicht diskutieren.
Du hast ein Fundament auf Sand gebaut. Es ist wacklig, aber das aus Brettern und Reispapier bestehende Haus sieht ordentlich aus. Jetzt willst Du die Wände durch Stein ersetzen und erwartest, dass das Fundament das noch immer mit macht?
Das klappt nicht. Wenn Du bei Methoden des letzten Jahrtausends bleiben möchtest, solltest Du dies auch in der damals gängigen Umgebung tun: im Quirks-Mode.
Was i.d.R. bedeutet, dass Du Dir nicht im Klaren darüber bist, was Du sagst.
Du möchtest damit zum Ausdruck bringen, dass der IE es falsch richtig macht.Zumindest, dass dies das Wahrscheinlichste ist.
Der FF und der NS genehmigen sich 3 zusätzliche Pixel in der Höhe, welche das Layout ruinieren.
Die da wo sind?
In zwei von zwei RowsPrima. "Ich bin zum ersten Mal hier in Hameln, könnten Sie mir wohl bitte sagen, wo das Rathaus ist?" - "In Hameln." - "Danke für's Gespräch ..."
<table style="background-image:url('.$Current_URL.'/images/glas_back_oben.jpg); [...]
Dies beispielsweise ist kein gültiger CSS-Code.
Das ist der PHP Code und wenn der geparst ist, dann ist es valide.Du bist IMHO lange genug in diesem Forum zugegen, um zu wissen, dass serverseitiger Code bei clientseitigen Problemen nur behindern, niemals aber helfen kann. Warum machst Du es potenziellen Helfern unnötig schwer?
Ist sie nicht.
Jetzt schonJa. Ich tue mich ein wenig schwer, durch die vielen Linien überhaupt einen Fehler zu sehen; zudem machen die massigen, wiederholten Angaben ein Debugging wahnsinnig schwierig. Wenn Du schon die Idiotie des letzten Jahrtausend fortzuführen gedenkst, dann lagere doch wenigstens den CSS-Code brauchbar aus.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Moin,
<table style="background-image:url('.$Current_URL.'/images/glas_back_oben.jpg); [...]
Dies beispielsweise ist kein gültiger CSS-Code.
Das ist der PHP Code und wenn der geparst ist, dann ist es valide.Du bist IMHO lange genug in diesem Forum zugegen, um zu wissen, dass serverseitiger Code bei clientseitigen Problemen nur behindern, niemals aber helfen kann. Warum machst Du es potenziellen Helfern unnötig schwer?
Sorry für diesen Ausrutscher.
Ja. Ich tue mich ein wenig schwer, durch die vielen Linien überhaupt einen Fehler zu sehen; zudem machen die massigen, wiederholten Angaben ein Debugging wahnsinnig schwierig. Wenn Du schon die Idiotie des letzten Jahrtausend fortzuführen gedenkst, dann lagere doch wenigstens den CSS-Code brauchbar aus.
Ähm, wie meinen? Der Code ist in format.css ausgelagert.
Danke für Dein Engagement.
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hi,
Ähm, wie meinen? Der Code ist in format.css ausgelagert.
es sind viele style-Attribute vorhanden. Wenn ich beispielsweise die height-Eigenschaft entfernen möchte, um das Ergebnis zu testen, muss ich das mindestens drei Mal machen. Ehrlich gesagt fehlt mir dazu nach einiger Zeit die Lust.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Moin
es sind viele style-Attribute vorhanden. Wenn ich beispielsweise die height-Eigenschaft entfernen möchte, um das Ergebnis zu testen, muss ich das mindestens drei Mal machen. Ehrlich gesagt fehlt mir
dazu nach einiger Zeit die Lust.
Yep, das mag einer der Nachteile von Tabellenlayout sein.
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.
-
-
-
-
-
-
Hallo Mike
passt mein Tabellenlayout nicht mehr.
Der IE 6.0 macht bezüglich der Pixelangaben genau das was ihm gesagt wird. Der FF und der NS genehmigen sich 3 zusätzliche Pixel in der Höhe, welche das Layout ruinieren.Per CSS habe ich alle margin und padding auf 0 px gesetzt. Auch habe ich alle "white spaces" und breaks entfernt.
Diese machen üblicherweise im IE Probleme, in anderen Browsern weniger.
Wie bekomme ich diese zusätzlichen Pixel in der Höhe weg?
Diese zusätzlichen Pixel sind die Unterlängen in den Tabellenzellen, die
deine Layoutgrafiken enthalten (Unterlängen für z.B. g,j,p,q,y).
z.B. hier:<tr style="height:68px; width:100%;"> <td style="height:68px; width:135px;"><img src="./images/ob_li.jpg" width="135" height="68" alt=""></td> <td style="height:68px; width:75px;"><img src="./images/ob_li_b.jpg" width="75" height="68" alt=""></td> <td align="right" style="width:100%; height:68px;"><img src="./images/kids.gif" width="200" height="60" alt="All together"></td> </tr>Höhe der Zellen 68px, Höhe der Grafiken 68px. die Grafiken werden auf der
Grundlinie der Schriftzeile (auch, wenn keine Schrift vorhanden ist)
ausgerichtet. Tabellenzeilen werden auf das notwendige Maß erweitert,
dadurch erscheint die Unterlänge als zusätzliche Höhe.Du hast folgende Möglichkeiten:
- du gibst den Layoutgrafiken ein
vertical-align:bottomodervertical-align:text-bottom, oder - du gibst ihnen ein
display:block, oder - du verwendest gleich Hintergrundgrafiken
(meiner Meinung nach für Layoutgrafiken die beste Lösung)
Allerdings möchte ich mich Cheatahs Meinung anschließen:
Eine Umstellung auf Strict, ohne dabei auch das Tabellenlayout zu beseitigen
halte ich für nicht sinnvoll.
Es dürfte sich auch relativ unproblematisch als CSS-Layout umsetzen lassen
(vielleicht sogar einfacher, als mit Tabellen).Noch eine Anmerkung:
Das animierte Gif auf der Seite sieht furchtbar pixelig aus.
Ich würde ihm ein paar Graustufen gönnen.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Moin Detlef G,
Danke für deine Ausführungen. Ich werde morgen damit experimentieren.
Noch eine Anmerkung:
Das animierte Gif auf der Seite sieht furchtbar pixelig aus.
Ich würde ihm ein paar Graustufen gönnen.OK
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an. -
Moin nochmal,
Allerdings möchte ich mich Cheatahs Meinung anschließen:
Eine Umstellung auf Strict, ohne dabei auch das Tabellenlayout zu beseitigen
halte ich für nicht sinnvoll.
Es dürfte sich auch relativ unproblematisch als CSS-Layout umsetzen lassen
(vielleicht sogar einfacher, als mit Tabellen).Da möchte ich doch nocheinmal drauf eingehen. Was hat die Umstellung nach Strict mit dem Entfernen des Tabellenlayouts zu tun. Meines Erachten nach nichts.
Ich bin noch nicht fit genug in CSS um die Tabellen zu ersetzten. Daher beschloss ich Schritt für Schritt vor zu gehen und zunächst mal Strict umzusetzen.
Täusche ich mich, oder wird das Ersetzen der Tabellen in einer Div "Suppe" enden. (Wie gesagt: Meine CSS Kenntnisse sind bei weitem noch nicht ausgereift.)
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hi,
Da möchte ich doch nocheinmal drauf eingehen. Was hat die Umstellung nach Strict mit dem Entfernen des Tabellenlayouts zu tun. Meines Erachten nach nichts.
richtig, ein kausaler Zusammenhang besteht nicht. Die Verwendung einer Strict DTD hat aber gewisse Aussagen z.B. bezüglich der Qualität des Dokuments - in Code, Usability etc. - die im krassen Widerspruch zu einem Tabellenlayout stehen. Das ist so, als wenn Du Baby-Gebrabbel in neuer Rechtschreibung notierst.
Ich bin noch nicht fit genug in CSS um die Tabellen zu ersetzten.
Niemand hat gesagt, dass es leicht ist - sondern nur, dass es leicht _wird_.
Daher beschloss ich Schritt für Schritt vor zu gehen und zunächst mal Strict umzusetzen.
Das ist Unsinn. Mache es lieber umgekehrt: Erst CSS, dann strict.
Täusche ich mich, oder wird das Ersetzen der Tabellen in einer Div "Suppe" enden.
Sagen wir: Das ist ein Fehler, der Anfängern oft passiert. Das "Problem" ist, dass Du erst mal HTML lernen musst, wenn Du mit CSS beginnst. Bisher beherrschst Du es nämlich nicht - und dieses Urteil beruht nicht auf Kenntnis Deines Codes, sondern darauf, dass Du CSS noch nicht erlernt hast.
(Wie gesagt: Meine CSS Kenntnisse sind bei weitem noch nicht ausgereift.)
Jetzt ist der richtige Zeitpunkt, damit anzufangen :-)
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Moin Cheatah,
Sagen wir: Das ist ein Fehler, der Anfängern oft passiert. Das "Problem" ist, dass Du erst mal HTML lernen musst, wenn Du mit CSS beginnst. Bisher beherrschst Du es nämlich nicht - und dieses Urteil beruht nicht auf Kenntnis Deines Codes, sondern darauf, dass Du CSS noch nicht erlernt hast.
Danke für den Nachsatz. Ich war schon in hab acht Stellung :-)
Dennoch bin ich immernoch der Meinung das es nicht zwingend notwendig ist die Umstellung auf Strict einher gehen zu lassen mit der Eleminierung von Tabellenlayouts. Und wenn ich mich nicht irre ist die Layoutgestaltung hier immernoch eine beliebtes Diskussionsthema.
Ich betrachte die Eleminierung des Tabellenlayouts nichts als zwingend sondern als aufgezwungen. Dennoch werde ich später versuchen mich in den hohen Künsten des CSS zu beweisen.
Das Tabellenlayout erfüllt seine "für mich dienlichen" Zwecke. Warum muss ich mich "verkrampfen" um schick zu sein?
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hi,
Danke für den Nachsatz. Ich war schon in hab acht Stellung :-)
besser als halb acht Stellung, schließlich haben wir es schon nach neun ;-)
Dennoch bin ich immernoch der Meinung das es nicht zwingend notwendig ist die Umstellung auf Strict einher gehen zu lassen mit der Eleminierung von Tabellenlayouts.
Wie gesagt: Ist es nicht. Du darfst Dich dann nur nicht über irgend welche Detailprobleme beklagen - die liegen an der sinnfreien Verknüpfung von Plus und Minus.
Ich betrachte die Eleminierung des Tabellenlayouts nichts als zwingend sondern als aufgezwungen.
Ich betrachte sie als Schreibfehler ;-)
Das Tabellenlayout erfüllt seine "für mich dienlichen" Zwecke. Warum muss ich mich "verkrampfen" um schick zu sein?
Irrtum. Die Verkrampfung findet durch das Tabellenlayout statt - durch den Missbrauch der zur Strukturierung tabellarischer Daten gedachten Elemente für Zwecke, die mit HTML nicht abgebildet werden können. Die Verwendung von Toilettenpapier zum Niederschreiben eigener Dichtkunst mag auch funktionieren. Wenn man das macht, darf man sich aber nicht beschweren, wenn das Papier auseinanderfieselt und die Werke irgendwann nicht mehr lesbar sind.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Moin Cheatah,
Irrtum. Die Verkrampfung findet durch das Tabellenlayout statt - durch den Missbrauch der zur Strukturierung tabellarischer Daten gedachten Elemente für Zwecke, die mit HTML nicht abgebildet werden können. Die Verwendung von Toilettenpapier zum Niederschreiben eigener Dichtkunst mag auch funktionieren. Wenn man das macht, darf man sich aber nicht beschweren, wenn das Papier auseinanderfieselt und die Werke irgendwann nicht mehr lesbar sind.
Lasse es mich so ausdrücken; Ich habe Dich ansatzweise verstanden und ich werde darüber nachdenken.
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hi,
Lasse es mich so ausdrücken; Ich habe Dich ansatzweise verstanden und ich werde darüber nachdenken.
ich habe nichts anderes erwartet und freue mich auf Deine Rückfragen :-)
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Moin Cheatah,
ich habe nichts anderes erwartet und freue mich auf Deine
Rückfragen :-)
*ROFL* Du bist und bleibst ein Sadist. Diese Rückfragen werden wohl Monate auf sich warten kassen ;-)
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hi,
*ROFL* Du bist und bleibst ein Sadist.
<verbeug> stets zu Diensten! </verbeug> :-)
Diese Rückfragen werden wohl Monate auf sich warten kassen ;-)
Ehrlich gesagt glaube ich das nicht. CSS in semantischen Markup erfordert gleich zu Beginn viel Verstehen, weil es ein anderes Denken bedingt. Da bleiben Fragen naturgemäß nicht aus.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Moin Cheatah,
Ehrlich gesagt glaube ich das nicht. CSS in semantischen Markup erfordert gleich zu Beginn viel Verstehen, weil es ein anderes Denken bedingt. Da bleiben Fragen naturgemäß nicht aus.
INDEED. Aber ich bin ein Kämpfer. We will see. Don't call me, i will call you ;-)
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hi,
INDEED. Aber ich bin ein Kämpfer. We will see. Don't call me, i will call you ;-)
wenn ich nun an Larry Holmes' Zitat "Alle Kämpfer sind Prostituierte und die Promoter ihre Zuhälter." denke, stellt sich mir folgende Frage: Ja, bin ich denn ein Callboy?! ;-)
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Moin,
Ja, bin ich denn ein Callboy?! ;-)
Yep ;-) Gute Nacht und Danke für deine Unterstützung.
Ich hoffe ich kann das umsetzten. NEEEEEEEE - Ich werde das umsetzen.Stay tune!
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.
-
-
-
-
-
-
-
-
-
-
Hallo Mike
Was hat die Umstellung nach Strict mit dem Entfernen des Tabellenlayouts zu tun. Meines Erachten nach nichts.
Es ist aber auch nicht nötig.
Ich bin noch nicht fit genug in CSS um die Tabellen zu ersetzten.
Das sollst du auch gar nicht.
Es wäre der falsche Weg.Daher beschloss ich Schritt für Schritt vor zu gehen und zunächst mal Strict umzusetzen.
Damit machst du dir unnötig doppelte Arbeit.
Täusche ich mich, oder wird das Ersetzen der Tabellen in einer Div "Suppe" enden. (Wie gesagt: Meine CSS Kenntnisse sind bei weitem noch nicht ausgereift.)
Wenn du versuchst, die Tabellen zu "ersetzen", wirst du voraussichtlich
keine HTML-Seite erstellen sondern wirklich eine DIv-Suppe kochen.
Deshalb schrieb ich auch oben, dass du die Tabellen nicht ersetzen sollst.
Du solltest eher komplett neu beginnen.
(OK, die Texte kannst du kopieren, die müssen wohl nicht neu getippt werden)Als erstes, vergesse, wie das Layout nachher aussehen soll!
Dann lies meine Herangehensweise oder/und meine Herangehensweise.PS: Du verwendest das Layout-Template "Hinter Glas" von Jürgen Asendorf.
Das solltest du (meiner Meinung nach) entweder so verwenden, wie es ist,
oder ein eigenes Design verwenden.
Ich würde kein Layout zu entwickeln, das ein fremdes Design 1 zu 1 kopiert.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Moin;
PS: Du verwendest das Layout-Template "Hinter Glas" von Jürgen Asendorf.
Das solltest du (meiner Meinung nach) entweder so verwenden, wie es ist,
oder ein eigenes Design verwenden.
Ich würde kein Layout zu entwickeln, das ein fremdes Design 1 zu 1 kopiert.Ja, das verwende ich, und ich war mit Jürgen in Kontakt. Mit Verlaub war seine Vorlage in keinster Weise Valide. Insofern ist es zwar seine "Vorlage" aber auch nicht mehr. Natürlich auch nicht weniger.
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.
-
-
- du gibst den Layoutgrafiken ein
-
Moin @ All,
zunächst Mal, ich war mir nicht sicher ob ich einen neuen Thread eröffnen soll, oder mich hier dranhängen. Nun, ich habe mich also hier dran gehängt.
Wie nicht anders zu erwarten hier die ersten Fragen:
So sieht/sah die Tabelle(oben) aus:
---------------------------------------------------------------
| Bild1 | Bild2 | Hintergrundfarbe + Bild3 rechts align |
----------------------------------------------------------------Da die Bilder 1 und 2 pixelgenau positioniert werden müssen, habe ich mich zunächst für DIV entschieden. Also hier 3 DIV absolut positioniert und die Bilder 1 und 2 als Hintergrundgraphik eingebunden. Das klappte auch ganz gut. Jetzt habe ich ein Problem mit dem dritten DIV. Die Breite von DIV1 und DIV2 sind in Pixel angegeben. Wie kann ich jetzt dem DIV3 "Spalte 3" sagen: "Sei so breit wie der restlich verbleibenden Platz"?
Ich hatte zunächst den Lösungsansatz die Bilder absolut zu positionieren (ohne DIV), aber dann habe ich wieder das Problem mit der "Spalte 3"
Ich bin bemüht :-(
Danke & regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hallo Mike,
Die Breite von DIV1 und DIV2 sind in Pixel angegeben. Wie kann ich jetzt dem DIV3 "Spalte 3" sagen: "Sei so breit wie der restlich verbleibenden Platz"?
Wie wäre es, wenn du ihm gar keine feste Breite gibst, sondern nur ein margin-left, dessen Wert der Summe der Breite der beiden Bilder entspricht? Die Breite des dritten Feldes (DIV) ergibt sich dann von selbst.
Dann kannst du auch auf die DIVs um die beiden linken Bilder verzichten und die Bilder direkt ausrichten.Ich bin bemüht :-(
Schön! Der gute Wille ist schon viiiel wert. :)
Ciao,
Martin
-
Moin Martin,
Wie wäre es, wenn du ihm gar keine feste Breite gibst, sondern nur ein margin-left, dessen Wert der Summe der Breite der beiden Bilder entspricht? Die Breite des dritten Feldes (DIV) ergibt sich dann von selbst.
Dann kannst du auch auf die DIVs um die beiden linken Bilder verzichten und die Bilder direkt ausrichten.Das mit den Bildern direkt ausrichten ist klar, dennoch weiß ich nicht wie ich der "dritten Spalte" sagen kann das sie den Rest der Bildschrimbreite einnehmen soll. In etwa wie bei Frames width:*;
Ich hatte zwischzeitlich weiter experimentiert, und dann das hier vesucht, was auch zu dem gewünschten Ergebnis führte bei IE 6.0 und FF aber wie soll es ander sein beim NS 7.0 nicht:
<div id="main_zeile1_links">
</div><div id="main_zeile1_mitte">
</div><div id="main_zeile1_rechts">
<img src="./images/kids.gif" width="200" height="60" align="right" alt="All together">
</div>Entwicklungslink:
http://ladenbuerger.dnip.net/no_tables/regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hallo,
Das mit den Bildern direkt ausrichten ist klar, dennoch weiß ich nicht wie ich der "dritten Spalte" sagen kann das sie den Rest der Bildschrimbreite einnehmen soll. In etwa wie bei Frames width:*;
Wie gesagt: Indem du die Breitenangabe für dieses DIV (ein solches ist es doch?) ganz weglässt. Ein DIV ohne Breitenangabe nimmt automatisch die gesamte verfügbare Breite ein. In diesem Fall, da du die beiden Bilder links durch position:absolute aus dem Textfluss genommen hast, also die gesamte Fensterbreite. Desweegen habe ich vorgeschlagen, gib ihm einfach bloß ein margin-left und mach diesen Margin so breit, dass er gerade der Breite der beiden Bilder entspricht.
Entwicklungslink:
http://ladenbuerger.dnip.net/no_tables/Noch kein Inhalt, aber die Optik gefällt mir sehr gut!
So long,
Martin
-
Moin Martin,
Wie gesagt: Indem du die Breitenangabe für dieses DIV (ein solches ist es doch?) ganz weglässt. Ein DIV ohne Breitenangabe nimmt automatisch die gesamte verfügbare Breite ein. In diesem Fall,
Ich habe es jetzt umgebaut, allerdings ist das Ergebnis in den 3 Browsern IE, FF und NS unterschiedlich:
CCS:
#main_div_zeile1
{
border:1px solid black;
margin-left:210px;
display:block;
position:absolute;
top:0px;
left:0px;
height:68px;
padding:0 0 0 0;
background-color:#B4D1E1
}img.zeile1_links
{
margin:0 0 0 0;
position:absolute;
top:0px;
left:0px;
padding:0 0 0 0;
}img.zeile1_mitte
{
margin:0 0 0 0;
position:absolute;
top:0px;
left:135px;
padding:0 0 0 0;
}PHP/HTML:
<img class="zeile1_links" src="./images/ob_li.jpg" width="135" height="68" alt="">
<img class="zeile1_mitte" src="./images/ob_li_b.jpg" width="75" height="68" alt="">
<div id="main_div_zeile1">
<img src="./images/kids.gif" width="200" height="60" align="right" alt="All together">
</div>http://ladenbuerger.dnip.net/no_tables/
Wie die Page mal aussehen soll kannst Du am Link oben links sehen. So ist die Page momentan online.regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hallo Mike
Ich habe es jetzt umgebaut, allerdings ist das Ergebnis in den 3 Browsern IE, FF und NS unterschiedlich:
Im Opera 7.23 sieht es auch nicht gerade toll aus.
#main_div_zeile1
{
...
position:absolute;Muss das sein?
img.zeile1_links
{
...
position:absolute;Und schon wieder!
img.zeile1_mitte
{
...
position:absolute;Und nochmal!
Willst du eine HTML-Seite mit CSS gestalten oder eine Collage kleben?
<img class="zeile1_links" src="./images/ob_li.jpg" width="135" height="68" alt="">
Ist diese Grafik Seiteninhalt? (oder nur Design?)
<img class="zeile1_mitte" src="./images/ob_li_b.jpg" width="75" height="68" alt="">
Ist diese Grafik Seiteninhalt? (oder nur Design?)
<div id="main_div_zeile1">
<img src="./images/kids.gif" width="200" height="60" align="right" alt="All together">
</div>Endlich mal eine Grafik, die Seiteninhalt und nicht nur Design ist.
Schau dir zuerst den Inhalt der Seite an, nicht das Layout, einfach nur als
vernünftig strukturiertes HTML, ohne Formatierungen.
Dann schaue, was braucht welche Farbe, Höhe, Breite, Margin, Padding usw.Ach, was schreibe ich hier, ich habe dir die Archivlinks bereits gepostet.
Position ist nur für ganz bestimmte Anwendungsfälle geeignet, selten für
das Grundlayout.Dieses Stückchen der Seite würde ich etwa so machen:
HTML
CSSAuf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Moin Detlef,
Willst du eine HTML-Seite mit CSS gestalten oder eine Collage kleben?
Ja, ich muss wohl kleben. Das Design ist halt so:
http://www.ladenbuerger.deDieses Stückchen der Seite würde ich etwa so machen:
HTML
CSSDanke für Deine Unterstüzung. Ich habe mir deine "Version" abgespeichert, und sobald meine Kids mir wieder etwas Zeit lassen, werde ich sie mir zu Gemüte führen.
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hallo Mike
Ja, ich muss wohl kleben. Das Design ist halt so:
http://www.ladenbuerger.deIch kenne das Design.
Dort gibt es nichts (außer der Linkerklärung beim Hovern), was mittels
position:absolute auf die Seite geklebt werden muss.
Ansonsten wäre der einzige Grund mit position zu arbeiten, wenn Kopf und
Navigation fixiert werden sollten.
Aber auch dann empfielt es sich nicht, jedes Element einzeln aufzukleben,
sondern jeweils ganze Blöcke.Du verrennst dich in das Layout!
Schalte mal als erstes deine Gedanken an das gewünschte Layout ab!
Schreibe die Seiten als sinnvoll strukturiertes HTML!
(ich finde nirgends auf den Seiten auch nur eine Überschrift)Erst wenn ein gut und sinnvoll strukturiertes HTML vorliegt, erst dann,
nicht eher, ist es sinnvoll das Design mittels CSS umzusetzen.Bisher versuchst du eine Wand bunt anzustreichen, die überhaupt noch nicht
vorhanden ist.
Du willst eine Ecke mit blauem Glaseffekt, also versuchst du diese mittels
position mitten in die Luft zu hängen.
Baue erst die Wand (die HTML-Seite), dann kannst du diese anpinseln (CSS).Erst, wenn die Seitenstruktur (HTML) steht, siehst du, welche Elemente
überhaupt vorhanden sind und welchem davon du welche Eigenschaften (CSS)
verpassen musst.Bis jetzt versuchst du die Designelemente in die Seite zu kleben, um danach
den Seiteninhalt irgendwie dazwischen zu quetschen.
So geht das bei Tabellenlayout, wo du für jeden Inhalt und jedes
Designelement eine Tabellenzelle vorsiehst. Wenn du es bei einem CSS-Layout
genauso versuchst, wird es eine Div-Suppe oder zumindest eine Seite, die
sich nie den Inhalten oder der Browserfenstergröße vernünftig anpassen kann.http://d-graff.de/demos/selfhtml/ladenburger/index.html
http://d-graff.de/demos/selfhtml/ladenburger/screen.cssUps, da habe ich ja beim hochladen das e (ladenbu_e_rger) vergessen.
http://d-graff.de/demos/selfhtml/ladenbuerger/index.html
http://d-graff.de/demos/selfhtml/ladenbuerger/screen.cssSo ist es besser!
Danke für Deine Unterstüzung. Ich habe mir deine "Version" abgespeichert, und sobald meine Kids mir wieder etwas Zeit lassen, werde ich sie mir zu Gemüte führen.
Das ist nur schnell als Beispiel so hingeschrieben (ok, auch ein paar
Grafiken zusammenkopiert).Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Moin Detlef,
Bisher versuchst du eine Wand bunt anzustreichen, die überhaupt noch nicht
vorhanden ist.das ist eine harte Nuss, aber ich werde sie zu nehmen wissen.
Das ist nur schnell als Beispiel so hingeschrieben (ok, auch ein paar
Grafiken zusammenkopiert).You made my day :-)
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.
-
-
-
-
-
-
-
-
Moin @ All,
dank Eurer Hilfe geht die Umsetzung "relativ" zügig voran. Dennoch habe ich hier die nächste Hürde.
Ein DIV wurde so definiert:
#header2
{
background: #b4d1e1 url(./images/header2.jpg) left bottom no-repeat;
height:40px;
text-align:center;
vertical-align:bottom;
}Hier möchte ich nun das Textmenü reinpacken. Jedoch klebt der Text am oberen Rand des DIV und ich bekomme ihn innerhalb des DIV nicht tiefer.
Ich habe es mit vertical-align versucht, aber das zeigt keine Wirkung. Die Link Definitionen sehen so aus:
a:link.menuoben
{
color: #ffffff;
text-decoration:none;
font-family: Tahoma, Verdana,sans-serif;
font-size: 14pt;
background-color:#000066;
}Wie bekomme ich das Menu (Text Links) vom oberen Rand des DIV weg?
http://ladenbuerger.dnip.net/no_tables/index_detlef.php
Danke & regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hallo Mike©.
Ein DIV wurde so definiert:
#header2
{
background: #b4d1e1 url(./images/header2.jpg) left bottom no-repeat;
height:40px;
text-align:center;
vertical-align:bottom;
}Du bist hier doch „ein Weilchen“ dabei, weißt also, wo du nachschauen kannst, um zu erfahren, worauf vertical-align wirkt.
Wie bekomme ich das Menu (Text Links) vom oberen Rand des DIV weg?
Neben vertical-align könntest du doch auch einmal mit padding dein Glück versuchen.
Einen schönen Donnerstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Moin Ashura,
Du bist hier doch „ein Weilchen“ dabei, weißt also, wo du
Indeed ;-)
vertical-align wirkt.
Da bin ich ja auch "fälschlicher Weise" gelandet.
Neben vertical-align könntest du doch auch einmal mit padding dein Glück versuchen.
Ich hatte bereits auch margin versucht aber nicht padding.
Nun, wenn ich padding hier einbaue:
#header2
{
background: #b4d1e1 url(./images/header2.jpg) left bottom no-repeat;
height:40px;
text-align:center;
padding-top:10px;
}dann zerreist es das Layout und padding hier:
a:link.menuoben
{
color: #ffffff;
text-decoration:none;
font-family: Tahoma, Verdana,sans-serif;
font-size: 14pt;
background-color:#000066;
padding-top:10px;
}zeigt es keine Wirkung.
*SCHULTERHOCHZIEH*regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hallo Mike©.
Das Ausrichtungsproblem möchte ich kurz einmal beiseite lassen, um dich zu etwas zu fragen:
Warum verwendest du keine Liste für die Navigation?
Einen schönen Donnerstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Moin Ashura,
Warum verwendest du keine Liste für die Navigation?
Frage mich mal was leichteres. Keine Ahnung. Ist aber auch egal.
Ich habe mir die derzeitge Entwicklungs Page mal im NS 7.0 angesehen, bzw. da ist nichts zu sehen.
Ich gebe erst mal auf!
Dennoch vielen Dank an Alle.
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hallo Mike©.
Warum verwendest du keine Liste für die Navigation?
Frage mich mal was leichteres. Keine Ahnung. Ist aber auch egal.
Schade.
Ich gebe erst mal auf!
Dennoch vielen Dank an Alle.
Wenn du Lust verspürst, das Ganze doch noch einmal in Angriff zu nehmen, weißt du ja, wo du Hilfe erwarten kannst.
Einen schönen Donnerstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Moin nochmal,
Wenn du Lust verspürst, das Ganze doch noch einmal in Angriff zu nehmen, weißt du ja, wo du Hilfe erwarten kannst.
Sicher :-) Besten Dank. Allerdings kann es ja nicht sein, dass ich hier wegen jedem quersitzendem Pups nachfrage. Ich werde erst mal in mich gehen. *CLEAR BRAIN - FLOAT FRISCHLUFT - AND TRY AGAIN*
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.
-
-
-
-
-
-
-