nicht angemeldet
clear: left haut nicht hin
Guten Tag Forum,
http://217.160.40.241/_test/pages/catalog.php?pid=1
User: test
Pass: testtest
Das Bestellformular unten soll mit den anderen Formularen bündig sein.
Ich komme aber nicht aus der 3. Spalte raus. Wenn ihr die Seite mal abspeichert und vor dem Bestellformular einen Buchstaben schreibt, erscheint der in der 3. Spalte.
clear: left; bringt nichts.
Vor einigen Tagen hatte mir schon mal jemand ein Link gegeben zu diesem Problem, aber das hat auch nicht geklappt.
Bitte wer weiß wie man das löst. Drehe bald durch.
-
Das Bestellformular unten soll mit den anderen Formularen bündig sein.
Welche anderen Formulare? Ich sehe da nur eines (von Dir aufgeteilt in zwei), das unter der Tabelle mit den technischen Daten beginnt, links bündig am Fensterrand, oben bündig unter der rechten Galerie.
Ich komme aber nicht aus der 3. Spalte raus.
Was ist die dritte Spalte, die Galerie? Rein optisch würde ich ja eher sagen, dass Du nicht in die mittlere Spalte kommst (weil das Formular am linken Rand klebt).
Wenn ihr die Seite mal abspeichert und vor dem Bestellformular einen Buchstaben schreibt, erscheint der in der 3. Spalte.
Nein, in der ersten, ganz links. Vor welchem der beiden Bestellformulare? Ich würde ja auch behaupten, dass hervorragend clear:left funktionieren dürfte, schließlich steht links neben der Tabelle nichts.
BTW: Das Formular ist mehr als unübersichtlich. Die Gebinde kosten alle dasselbe, warum verkürzt Du die 24 Zeilen nicht auf eine einzige Zeile mit zwei Auswahlfeldern "Farbe" und "Menge"? Untendrunter noch eine separate Tabelle mit den Preisen, fertig.
-
Welche anderen Formulare? Ich sehe da nur eines (von Dir aufgeteilt in zwei), das unter der Tabelle mit den technischen Daten beginnt, links bündig am Fensterrand, oben bündig unter der rechten Galerie.
Genau das. Das soll nicht bündig mit dem linken Bildrand sein. Sondern bündig mit der Tabelle der technischen Daten.
Was ist die dritte Spalte, die Galerie? Rein optisch würde ich ja eher sagen, dass Du nicht in die mittlere Spalte kommst (weil das Formular am linken Rand klebt).
Ja, die 3. Spalte ist die Galerie. Habe ja links einen Platzhalter für die erste Spalte. Guck mal im Quelltext:
Aus der 3. Spalte raus:(klapt allerdings nicht wie du siehst)
<div style="clear: left;"></div>Und dann die für die erste Spalte einen unsichtbareb Platzhalter
<div class="spacer_c1"> </div>Nein, in der ersten, ganz links. Vor welchem der beiden Bestellformulare? Ich würde ja auch behaupten, dass hervorragend clear:left funktionieren dürfte, schließlich steht links neben der Tabelle nichts.
Ja, laut Theorie. Macht es aber nicht.
BTW: Das Formular ist mehr als unübersichtlich. Die Gebinde kosten alle dasselbe, warum verkürzt Du die 24 Zeilen nicht auf eine einzige Zeile mit zwei Auswahlfeldern "Farbe" und "Menge"? Untendrunter noch eine separate Tabelle mit den Preisen, fertig.
Ja danke, das lasse ich mir mal durch den Kopf gehen. Aber erst mal muss ich dieses Problem lösen, so dass ich die Seite hochladen kann. Dann machen ich mich wieder an die Usability Sachen.
-
Aus der 3. Spalte raus:(klapt allerdings nicht wie du siehst)
<div style="clear: left;"></div>Und dann die für die erste Spalte einen unsichtbareb Platzhalter
<div class="spacer_c1"> </div>Wenn ich mir das so anschaue, habe ich den Eindruck, dass die ganze Seite nicht vernünftig aufgebaut und das das eigentliche Problem ist.
Du brauchst nicht mehr als drei Spalten, links das Menü (Artikelnummer, Aktuelles,...), in der Mitte Produktbeschreibung und Formular, rechts die Galerie.
Und genau so solltest Du den HTML-Code aufbauen. Erst ein div mit float:left für das Menü, dann entweder ein div mit float:right für die Galerie und abschließend ein div für das Produkt, oder erst das Produkt mit float:left und dann abschließend die Galerie.Aber mit den div-Massen, die Du jetzt mit float und clear hin- und herzauberst, hast Du große Chancen, ständig irgendwelche Probleme zu haben. Ist eines gelöst, kommt das nächste.
BTW: Das Formular ist mehr als unübersichtlich. Die Gebinde kosten alle dasselbe, warum verkürzt Du die 24 Zeilen nicht auf eine einzige Zeile mit zwei Auswahlfeldern "Farbe" und "Menge"? Untendrunter noch eine separate Tabelle mit den Preisen, fertig.
Ja danke, das lasse ich mir mal durch den Kopf gehen.
Füge gleich vier oder fünf dieser Zeilen ein, nach Möglichkeit mit Option für den Kunden, noch weitere hinzufügen zu können (lässt sich in Javascript über DOM lösen). Kann ja sein, dass jemand mehrere verschiedene Gebinde kaufen möchte.
-
Hallo,
Und genau so solltest Du den HTML-Code aufbauen. Erst ein div mit float:left für das Menü, dann entweder ein div mit float:right für die Galerie und abschließend ein div für das Produkt, oder erst das Produkt mit float:left und dann abschließend die Galerie.
Ja, aber die Bestelltabelle würde nicht in die mittlere Spalte passen, so wie sie jetzt ist, deswegen habe ich 3 spalten und dann das clear und dann eine spalte und 2+3 zusammengefasst(in der die bestelltabelle ist):
header
-----------
1| 2 |3
1| 23
-----------
footerFüge gleich vier oder fünf dieser Zeilen ein, nach Möglichkeit mit Option für den Kunden, noch weitere hinzufügen zu können (lässt sich in Javascript über DOM lösen). Kann ja sein, dass jemand mehrere verschiedene Gebinde kaufen möchte.
Ja, aber alle raten mir das nicht von Javascript anhängig zu machen. Viele haben es nämlich nicht.
-
Ja, aber die Bestelltabelle würde nicht in die mittlere Spalte passen, so wie sie jetzt ist, deswegen habe ich 3 spalten und dann das clear und dann eine spalte und 2+3 zusammengefasst(in der die bestelltabelle ist):
Dann nehme zwei Hauptspalten für Menü (float:left) und Inhalt (kein float, aber margin oder padding auf Breite des Menüs gesetzt) und innerhalb der Inhaltsspalte schiebst Du die Galerie mit float:right an den rechten Rand.
Was mir momentan nicht gefällt, ist dass Du in dem Textfluss (Produktbeschreibung > Bestellformular) eine technische Unterbrechnung drin hast. Dadurch entstehen die Probleme bei der Positionierung.
Füge gleich vier oder fünf dieser Zeilen ein, nach Möglichkeit mit Option für den Kunden, noch weitere hinzufügen zu können (lässt sich in Javascript über DOM lösen).
Ja, aber alle raten mir das nicht von Javascript anhängig zu machen. Viele haben es nämlich nicht.
Das ist richtig, auch deswegen gleich von Anfang an vier oder fünf Bestellzeilen. Weitere Zeilen kann man in einem noscript verstecken, wer Javascript abgestellt hat, bekommt halt ein etwas unübersichtlicheres Formular, alle anderen die erweiterbare Kurzfassung.
-
Dann nehme zwei Hauptspalten für Menü (float:left) und Inhalt (kein float, aber margin oder padding auf Breite des Menüs gesetzt) und innerhalb der Inhaltsspalte schiebst Du die Galerie mit float:right an den rechten Rand.
Aber warum gibt es dann so viele Tutorien die Tabellen verdammen und CSS Layout predigen, _wobei_ die ein 2 oder 3 Spalten Layout erklären. Da haben die auch immer alle 3 DIVs nebeneinander. Habe lange gebraucht, um das einigermaßen zu verstehen. Und nun soll ich doch wieder alles umfloaten ?
Was mir momentan nicht gefällt, ist dass Du in dem Textfluss (Produktbeschreibung > Bestellformular) eine technische Unterbrechnung drin hast. Dadurch entstehen die Probleme bei der Positionierung.
Das verstehe ich nicht ganz. Wie meinste das? Könntest du den entsprechenen Code mal posten ?
Das ist richtig, auch deswegen gleich von Anfang an vier oder fünf Bestellzeilen. Weitere Zeilen kann man in einem noscript verstecken, wer Javascript abgestellt hat, bekommt halt ein etwas unübersichtlicheres Formular, alle anderen die erweiterbare Kurzfassung.
Hmm, kennst nicht zuviel ein Beispiel dazu? Bin etwas schwer von Begriff.
-
Hi,
Aber warum gibt es dann so viele Tutorien die Tabellen verdammen und CSS Layout predigen, _wobei_ die ein 2 oder 3 Spalten Layout erklären. Da haben die auch immer alle 3 DIVs nebeneinander. Habe lange gebraucht, um das einigermaßen zu verstehen. Und nun soll ich doch wieder alles umfloaten ?
Warum nicht? ;-)
Das Problem ist, so wie ich das sehe, das Zusammentreffen der W3C-Empfehlung, Tabellen nur für tabellarische Daten zu verwenden, mit der weitverbreiteten Unsitte, einfach alles in Tabellenzellen zu stecken und dann noch Tabellen zigfach zu verschachteln. Eine einzeilige zweispaltige Layouttabelle bräuchte auch nicht deutlich mehr Code als eine CSS-Lösung. Allerdings hätte sie den Nachteil, daß das Layout vom HTML-Code festgelegt ist (was auch nicht empfohlen wird) und eine Änderung (der Anordnung) dann im HTML-Code vorgenommen werden müßte.
Zwei weitere Probleme bei diesen ganzen Tutorials zu "Spalten"-Layouts ist, daß sie- meist (zusätzliche und nicht erforderliche bzw. besser durch andere Elemente zu ersetzende) DIVs verwenden,
- ausschließlich die durch Tabellendenken internalisierten "Spalten" ohne Tabellen umzusetzen versuchen.
freundliche Grüße
Ingo-
Hallo Ingo,
ja durch das Tabellendesign der Anfänge des Webs ist man zu sehr drauf festgefahren.
Aber wie soll man das in meinem Fall machen?
Ich habe doch in der Mitte des Produktkatalogs die abgerundeten Ecken als Hintergrundbilder nach diesem Vorbild:http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htm
Das geht nur mit 3 DIVs nebeneinander.
Wenn ich nur 2 DIVs nehme und die Gallerie innnerhalb des 2. DIVs rechts floaten lasse, wie soll man dann die abgerundeten Ecken hinbekommen ?
-
Hi,
Ich habe doch in der Mitte des Produktkatalogs die abgerundeten Ecken als Hintergrundbilder
so wie es jetzt auf der eingangs referenzierten Seite ist, braucht das doch gar keine Verschachtelungen.
Die linke Spalte hat nur eine abgerundete Ecke und der Inhaltsbereich zwei oben. Diese ließen sich auch unvrschachtelt innerhalb des Inhalts-Containers realisieren. Ein DIV mit zwei über float ausgerichteten Vordergrundgrafiken oder einer Vordergrundgrafik und der zweiten als Hintergrundbild eingebunden. Oder, wenn nur Hintergrundgrafiken eingesetzt werden sollen, könnte man diese auch einem zusätzlichen Element zuweisen.Wenn ich nur 2 DIVs nehme und die Gallerie innnerhalb des 2. DIVs rechts floaten lasse, wie soll man dann die abgerundeten Ecken hinbekommen ?
Schau mal hier http://www.1ngo.de/tanz/index.html, auch eine abgerundete Ecke mit nur einem angehängten DIV.
freundliche Grüße
Ingo-
Hallo Ingo,
Ein DIV mit zwei über float ausgerichteten Vordergrundgrafiken oder einer Vordergrundgrafik und der zweiten als Hintergrundbild eingebunden.
Ha! Eben nicht so hatte ich es am Anfang. Das war ja der Grund für mein Anfangsposting. So mag es der IE nicht!
»»Oder, wenn nur Hintergrundgrafiken eingesetzt werden sollen, könnte man diese auch einem zusätzlichen Element zuweisen.
Wie genau?
-
Hi,
Ein DIV mit zwei über float ausgerichteten Vordergrundgrafiken oder einer Vordergrundgrafik und der zweiten als Hintergrundbild eingebunden.
Ha! Eben nicht so hatte ich es am Anfang. Das war ja der Grund für mein Anfangsposting. So mag es der IE nicht!
Was genau hat denn nicht funktioniert? Wie wär's mal mit einem auf dieses Problem reduziertes Beispiel?
freundliche Grüße
Ingo-
Was genau hat denn nicht funktioniert? Wie wär's mal mit einem auf dieses Problem reduziertes Beispiel?
Nun ich hatte ein Div und in dem Div ein img mit float right und eins mit float left. Also die beiden Abrundungen. Und der IE hatte mir alles verschoben. Hatte aus Verzweifelung in diversen Foren gepostet und dann ganb mir jemand die URL zur Lösung mit abgerundeten Ecken in Selfhtml Tipps und Tricks.
Könntest du mir mal deine Lösung geben?
Also eine Dummylösung ohne die richtigen namen der bilder. So dass es so aussieht wie jetzt ? Also für die linke Spalte immer noch ein Div für den ganzen Inhalt, die untere Ecke dieses Divs kann man dann abrunden(HIntergrundbild). Aber was genau mit dem rechten Teil ?-
Es geht einfach nicht. Bin am probieren und probieren und es klappt NICHT.
{include file="top.tpl"}
<!-- COLUMN 1 -->
<div class="col1 br_corner_red">
{include file="menu_left.tpl"}
</div><!-- COLUMN 2 -->
<div style="background-image: url('../images/design/edge_red_top_left.png'); background-position: top left; background-repeat: no-repeat;">
<h2>{$aTrans.partner}</h2>
{if $cat_id > 25 && $cat_id < 41}
<h4>{$country}</h4>
{include file="partners_country.tpl"}
{else}
{include file="partners_message.tpl"}
{/if}
<img style="float: right;" src="../images/design/edge_red_top_right.png") />
<div style="float: right;">{include file="menu_right.tpl"}</div>
</div>-
Hi,
serverseitiger Code ist zwar hier weniger sinnvoll, aber ich würde es mal mit<div>
<img style="float:left;" src="../images/design/edge_red_top_left.png") /><img style="float:right;" src="../images/design/edge_red_top_right.png") />
<h2 style="clear:both;">{$aTrans.partner}</h2>
...
</div>
versuchen.freundliche Grüße
Ingo
-
-
-
-
-
-
-
hi,
Aber warum gibt es dann so viele Tutorien die Tabellen verdammen und CSS Layout predigen, _wobei_ die ein 2 oder 3 Spalten Layout erklären.
weil der von-tabellen-auf-CSS-umsteiger sich im allgemeinen krampfhaft an seinem "spalten-layout" festklammert, und noch nicht einzusehen vermag, dass man mit CSS vielleicht auch noch ganz andere spanende layouts jenseits davon machen könnte, und anfängt rumzumosern, wenn man ihm nicht sein spalten-layout gibt, wie er es haben möchte.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."
-
-
-
-
-
-
Hallo,
habe gerade mal ein paar Buchstaben in das Spacer DIV reingeschrieben:
<div class="spacer_c1">ddd</div>
Jetzt ist das Bestellformular dort wo es sein soll. Aber so kann ich es ja nich lassen.
Hilfe
-
hi,
habe gerade mal ein paar Buchstaben in das Spacer DIV reingeschrieben
was bitte ist denn ein "spacer div"?
direkter nachkomme des blind-gifs, in der absurden annahme, damit mehr up-to-date zu sein, was CSS-nutzung angeht?in deiner original-seite finde ich
<div class="spacer_c1"><br /></div>
- das ist doch hoffentlich nicht ernst gemeint?
mache abstände bitte über margin/padding, aber nicht _so_.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Hallo wahsaga,
in deiner original-seite finde ich
<div class="spacer_c1"><br /></div>
- das ist doch hoffentlich nicht ernst gemeint?
Doch. Nur so klappt es. Habe alles ausprobiert.
mache abstände bitte über margin/padding, aber nicht _so_.
Leider doch. Kannst dir ja die spacer_c1 (colum1) Klasse angucken. Habe dort die Breite des Divs angegeben. Funzt nur, wenn ich Buchstaben oder ein <br /> reinsetze. Die Buchstaben würde man ja sehen. Daher <br />
Wenn Du mir genaus sagen könntest wie, dann mache ich es und wäre SEHR dankbar. Aber ich habe nun unzählige Stunden drangesessen und graue Haare bekommen.
-
hi,
Leider doch. Kannst dir ja die spacer_c1 (colum1) Klasse angucken. Habe dort die Breite des Divs angegeben. Funzt nur, wenn ich Buchstaben oder ein <br /> reinsetze.
dann testest du offenbar in einem rückständigen browser, der mit leeren elementen nicht korrekt umzugehen weiß.
Die Buchstaben würde man ja sehen. Daher <br />
und schon mit geschütztem leerzeichen versucht?
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."
-
-
-
Hi,
Ich komme aber nicht aus der 3. Spalte raus.
welcher dritten Spalte? Hastte ich Dir schonmal geschrieben, daß ich im IE6 nur zwei "Spalten" habe. Die Gebißabdrücke sind linksbündig zwischen den beiden Tabellen angeordnet. Und der rote Balken am Fuß geht voll durch die drittletzte Tabellenzeile.
freundliche Grüße
Ingo