• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Dialog in HTML/CSS

E

ele

New member
Habe ich schon erwähnt, dass ich HTML und CSS hasse? Wenn nicht, dann ist es jetzt offiziell: Ich hasse HTML und CSS (und das W3 Konsortium).

Ich versuche jetzt schon eine Weile lang einen Dialog zu erstellen, allerdings will das Ding nie so aussehen wie ich möchte. Und wenn dann ein Hoffnungsfunke besteht, dann kucke ich mir das ganze in einem anderen Browser an und schon kann die Arbeit wieder von vorne beginnen.

Zur Anschaulichkeit, habe ich mal eine Skizze erstellt, wie das ganze schliesslich aussehen soll.

Die Hauptprobleme bestehen darin, dass der Dialog horizontal zentriert (von mir aus mit einer fixen Breite) und vertikal zentriert (so dass oben und unten noch etwas vom Hintergrund zu sehen ist) sein sollte. Hinzu kommt noch erschwerend, dass die Daten in der Mitte des Dialogs länger sein können als die höhe des Dialogs und deshalb am schönsten eine Lösung mit Scrollbalken wäre.

Bin für jegliche Hilfe dankbar, auch wenn ich daran zweifle, dass dies das allein mit HTML und CSS machbar ist. JavaScript ist durchaus erlaubt, da das ganze in einer Web-Applikation zur Anwendung kommt, welche ohne JavaScript eh nicht funktioniert.
 

Anhänge

  • Dialog.png
    Dialog.png
    9,2 KB · Aufrufe: 8
Sorry, aber ich verstehe das erwähnte "Dialog-Gedöns" nicht wirklich.
Könntest Du nicht einfach mal in einfachen Worten schildern, was Du erreichen möchtest?
Dein Screen lässt ja schon etwas erahnen, aber um auf "Nummer Sicher" zu gehen, wären noch Zusatzinformationen notwendig...
Aber anhand Deines Anhangs sieht das Ganze eigentlich ziemlich einfach aus.
Aber das kann es ja nicht sein, denn ansonsten hättest Du diesen Thread nicht eröffnet...
...seltsame Sache das...
 
Zuletzt bearbeitet:
Ok, ich versuche es mal anders.

Ich entwickle gerade eine Web-Applikation. Auf einer Seite in dieser Applikation gibt es eine Liste (Select) mit Einträgen. Da diese Liste relativ lang sein kann und es mit Strg-Click relativ mühsam ist einzelne Einträge auszuwählen, gibt es einen Button der einen Auswahlsassistenten öffnet. In der letzten Version der Applikation wurde das noch über ein Popup-Fenster gelöst. In der neuen Version soll es keine Popups mehr geben, es wird alles über Ajax und JavaScript gelöst. Also zeige ich einen Pseudo-Dialog an.

Der Hintergrund wird mit einem transparenten PNG ausgeblendet und in der Mitte ist der besagt Dialog. Damit das ganze hübsch aussieht, sollte der Dialog nicht das ganze Fenster füllen, sondern schön zentriert werden. Die Breite des Dialogs sollte vom Inhalt bestimmt werden, wobei ich auch mit einer festen Breite leben könnte. Die höhe des Dialogs darf auf keinen Fall die grösse des Fensters überschreiten, am schönsten wäre es wenn oben und unten noch etwas vom transparenten PNG sichtbar wäre, damit es auch wie ein Dialog aussieht. Das wäre das erste Problem.

Das zweite Problem ist, dass nun die Liste der Einträge, die nun in einer Tabelle (mit dazugehörigen Checkboxen für die Auswahl) dargestellt werden, in der Regel so gross ist, dass sie höher ist als der Dialog und das Fenster. Damit ist der Dialog-Effekt wieder kaputt. Deshalb wäre es hübsch wenn diese Tabelle gescrollt werden könnte.

Ich hoffe damit ist mein Problem etwas klarer.
 
Da habe ich es doch tatsächlich wieder einmal ohne fremde Hilfe geschafft. :icon6:

Wen es wundert, dies ist der Beispielcode:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
		<style type="text/css">
		<!--
		  
		.SelectAssistantDialog {
		    background-color: #ffcc99;
		    position: absolute;
		    top: 5%;    
		    bottom: 5%;
		    left: 50%;
		    margin-left: -400px;
		    width: 800px;    
		}  
		
		.SelectAssistantHeader {
		    position: absolute;
		    top: 0px;
		    width: 100%;
		    background-color: #99ccff;
		    height: 2em;
		}
		
		.SelectAssistantContent {
		    position: absolute;
		    top: 2em;
		    bottom: 2em;
		    overflow: auto;
		    width: 100%;
		    background-color: #99ff99;
		}
		
		.SelectAssistantFooter {
		    position: absolute;
		    bottom: 0px;
		    width: 100%;
		    background-color: #99ccff;
		    height: 2em;
		}
		        
		-->
		</style>
	<title></title>
	</head>
	<body>
		<div class="SelectAssistantDialog">
			<div class="SelectAssistantHeader">HEADER</div>
				<div class="SelectAssistantContent">
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
				</div>
			<div class="SelectAssistantFooter">FOOTER</div>
		</div>
	</body>
</html>
 
Gut, hatte auch mal dran getestet. Ist vermutlich noch zu optimieren, geht aber dafür auch im IE6, was bei Deinem Code nicht der Fall ist. Allerdings ist das vertikale Zentrieren bei Dir besser:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Content scrollen-auch IE6</title>
<style type="text/css">
html {
	height: 100%;
	max-height: 100%;
	padding: 0px;
	margin: 0px;
	border: 0px;
	background: #aaa;
	font-size: 100%;
/* hide overflow:hidden from IE5/Mac */
/* \*/
	overflow: hidden;
/* */
}
body {
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	border: 0px;
	background: #aaa;
}
#container {
	left:50%;
	margin-left:-366px;
	position: absolute;
	z-index: 3;
	width:700px;
	height: 60%;
	top: 50px;
	bottom: 0px;
	right: 250px;
	background: #eee;
}
html:first-child>b\ody #container {
	height: 62%;
}
#content {
	height: 100%;
	overflow: auto;
	background: #efefef;
	width: 640px;
	padding: 20px 30px;
}
#header {
	margin-top: 20px;
	text-align:center;
	font-size: 2em;
	width: 100%;
	height: 50px;
	background-color: #eee;
	border-bottom: 1px solid #000;
}
#footer {
	position: absolute;
	background-color: #eee;
	border-top: 1px solid #000;
	width: 100%;
	height: 30px;
	text-align:center;
	font-size: 2em;
	background: #eee;
}
</style>

</head>
<body>
<div id="container">
<div id="header">HEADER</div>
<div id="content">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br></div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
 
Danke für den Hinweis mit dem IE6. Mir schwant böses wenn ich am Ende meine Applikation damit Teste... Naja eventuell kann ich ja die Kunden dazu zwingen zumindest den IE7 zu verwenden, mal sehen was mein Auftraggeber dazu meint.

Deinen Code behalte ich mal im Hinterkopf, danke für die Mühe.

P.S. Du bist wohl auch eher ein Nachtmensch ;)
 
Zuletzt bearbeitet:
hallo ihr,
ich bin nicht so ein experte mit css, aber kann mir mal jemand bitte (für anfänger) erklären, wie mann den scrollbereich kleiner macht???
 
Bei dem Beispiel, dass ich angegeben habe würde man entweder den Header oder den Footer grösser machen. Für die Höhe des Headers muss man ändern:

- height: in der Klasse SelectAssistantHeader
- top: in der Klasse SelectAssistantContent

Der Wert muss jeweils gleich sein.

Für die Höhe des Footers:

- height: in der Klasse SelectAssistantFooter
- bottom: in der Klasse SelectAssistantContent

Der Wert muss wieder jeweils gleich sein.

Für eine gute Einführung in CSS ist immer selfhtml zu empfehlen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben