Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
z-index mit 2 Listen
Autor: Pikkolini
Datum: 02.02.2010 19:49:12
Hallo,
ich habe ein Formulat in dem 2 Listen sind. Die erste ist horizontal und in ihr sind ein paar img-Tags und ein Div. Die zweite dient zur positionierung der Textarea. Jetzt wollte ich mir aus dem Div in der ersten Liste ein eigenes Drop-Down Menü basteln. Nun möchte ich, dass das Menü, wenn es ausgeklappt ist über der Textarea ist und diese nicht verschiebt. Ich habe es mit z-index versucht, aber egal wie ich es versuche (habe ca. 10 Varianten ausprobiert) klappt es nicht. Ich hoffe mir kann einer erklären wie das funktioniert =)
Hier der HTML-Teil des Formulars:
<form action="" method="post" name="editor">
<fieldset>
<legend>Editor</legend>
<ul>
<li class="bbc">
<div id="size" class="bbc">
<ol>
<li>1</li>
<li>2</li>
</ol>
</div>
</li>
<li class="bbc"><img src="./img/b.gif" onclick="javascript:insert('[b]','[/b]')" class="bbc" title="Fett" alt="Fett"></li>
<li class="bbc"><img src="./img/i.gif" onclick="javascript:insert('[i]','[/i]')" class="bbc" title="Kursiv" alt="Kursiv"></li>
<li class="bbc"><img src="./img/u.gif" onclick="javascript:insert('[u]','[/u]')" class="bbc" title="Unterstrichen" alt="Unterstrichen"></li>
<li class="bbc"><img src="./img/img.gif" onclick="javascript:insert('[img=]','[/img]')" class="bbc" title="Bild" alt="Bild"></li>
<li class="bbc"><img src="./img/url.gif" onclick="javascript:insert('[url=]','[/url]')" class="bbc" title="Hyperlink" alt="Hyperlink"></li>
</ul>
<ol>
<li><textarea name="text" id="text" rows="20" cols="88"></textarea></li>
PS: Der Rest passt nicht mehr rein, er wird imemr gelöscht ;)
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: z-index mit 2 Listen
Autor: Freddy
Datum: 03.02.2010 02:10:23
Hallo,
> ich habe ein Formulat in dem 2 Listen sind. Die
> erste ist horizontal und in ihr sind ein paar
> img-Tags und ein Div. Die zweite dient zur
> positionierung der Textarea. Jetzt wollte ich mir
> aus dem Div in der ersten Liste ein eigenes
> Drop-Down Menü basteln. Nun möchte ich, dass das
> Menü, wenn es ausgeklappt ist über der Textarea
> ist und diese nicht verschiebt. Ich habe es mit
> z-index versucht, aber egal wie ich es versuche
> (habe ca. 10 Varianten ausprobiert) klappt es
> nicht.
Anhand Deines HTML-Ausschnitt wird wohl kaum jemand Dein Problem nachvollziehen können. Bitte poste doch eine vollständige, auf das Problem reduzierte Testdatei (von <!DOCTYPE> bis </html>), oder (besser noch:) poste einen Link.
Weißt Du, dass sich die CSS-Eigenschaft »z-index« nur auf Elemente auswirkt, die mit der »position«-Eigenschaft und einem Wert ungleich »static« positioniert sind?
Gruß,
Freddy
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: z-index mit 2 Listen
Autor: Pikkolini
Datum: 03.02.2010 17:25:53
> Anhand Deines HTML-Ausschnitt wird wohl kaum
> jemand Dein Problem nachvollziehen können. Bitte
> poste doch eine vollständige, auf das Problem
> reduzierte Testdatei (von <!DOCTYPE> bis
> </html>), oder (besser noch:) poste einen
> Link.
> Weißt Du, dass sich die CSS-Eigenschaft »z-index«
> nur auf Elemente auswirkt, die mit der
> »position«-Eigenschaft und einem Wert ungleich
> »static« positioniert sind?
>
>
> Gruß,
> Freddy
Das war eigentlich eine auf das Problem reduzierte Testdatei. Aber hier noch mal neu von anfang an:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Editor</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="de">
<meta name="robots" content="noindex,nofollow">
<link rel="icon" type="image/x-icon" href="../img/icon.ico">
<link rel="shortcut icon" type="image/x-icon" href="../img/icon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="../css/maincss.css">
<link rel="stylesheet" type="text/css" media="print" href="../css/printcss.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="../css/ie7css.css">
<![endif]-->
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="../css/iecss.css">
<![endif]-->
</head>
<body id="editor">
<!-- Hintergrund -->
<div id="hintergrund">
<!-- Inhalt -->
<div class="inhalt">
<div class="ueberschrift">
<h2>Editor</h2>
<div class="uhrzeit2">
<small>
<?php
include "../zeit.inc.php";
?>
</small>
</div>
</div>
<form action="" method="post" name="editor">
<fieldset>
<legend>Editor</legend>
<ul style="position: relative; z-index: 2;">
<li class="bbc">
<div id="size" class="bbc">
<ol>
<li>1</li>
<li>2</li>
</ol>
</div>
</li>
<li class="bbc"><img src="./img/b.gif" onclick="javascript:insert('[b]','[/b]')" class="bbc" title="Fett" alt="Fett"></li>
<li class="bbc"><img src="./img/i.gif" onclick="javascript:insert('[i]','[/i]')" class="bbc" title="Kursiv" alt="Kursiv"></li>
<li class="bbc"><img src="./img/u.gif" onclick="javascript:insert('[u]','[/u]')" class="bbc" title="Unterstrichen" alt="Unterstrichen"></li>
<li class="bbc"><img src="./img/img.gif" onclick="javascript:insert('[img=]','[/img]')" class="bbc" title="Bild" alt="Bild"></li>
<li class="bbc"><img src="./img/url.gif" onclick="javascript:insert('[url=]','[/url]')" class="bbc" title="Hyperlink" alt="Hyperlink"></li>
</ul>
<ol style="position: relative; z-index: 1;">
<li><textarea name="text" id="text" rows="20" cols="88"><?php if (isset($_POST['text'])) { echo htmlspecialchars(stripslashes($_POST['text'])); } ?></textarea></li>
</ol>
</fieldset>
</form>
</div>
</div>
</body>
</html>
Mit dem Style habe ich auch schon viel rumprobiert, und viele Variationen ausprobiert. Aber das beste was bisher rauskam war das hier:
http://img16.imageshack.us/img16/1055/editorf.png
Einen direkten Link zur Seite gibts leider nicht, da ich mit xampp arbeite.
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: z-index mit 2 Listen
Autor: Freddy
Datum: 03.02.2010 19:02:29
Hallo,
<http://sve-fre.de/selfhtml/netiquette/index.php?a=text5_2#text5>
Deine CSS- und Include-Dateien hat keiner.
Gruß,
Freddy
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: z-index mit 2 Listen
Autor: Pikkolini
Datum: 04.02.2010 20:00:55
> Hallo,
>
>
> <http://sve-fre.de/selfhtml/netiquette/index.php?a=text5_2#text5>
>
> Deine CSS- und Include-Dateien hat keiner.
>
>
> Gruß,
> Freddy
Ja sorry, hatte bis eben keine Zeit das wichtige aus diesen aberhundert Zeilen CSS rauszusuchen ;)
Aber ich glaube hier das müsste das richtige sein:
img.bbc {
border: solid 1px black;
padding: 0;
margin: 0 -5px 0 0;
cursor: pointer;
}
img.bbc:hover {
border: solid 1px white;
}
li.bbc {
display: inline;
}
div.bbc {
width: 32px;
height: 50px;
border: solid 1px black;
float: left;
margin: 0 -10px 0 10px;
background-color: #315008;
color: #ef6c0b;
line-height: 32px;
font-size: 1.5em;
cursor: pointer;
}
div.bbc:hover {
border: solid 1px white;
}img.bbc {
border: solid 1px black;
padding: 0;
margin: 0 -5px 0 0;
cursor: pointer;
}
img.bbc:hover {
border: solid 1px white;
}
li.bbc {
display: inline;
}
div.bbc {
width: 32px;
height: 50px;
border: solid 1px black;
float: left;
margin: 0 -10px 0 10px;
background-color: #315008;
color: #ef6c0b;
line-height: 32px;
font-size: 1.5em;
cursor: pointer;
}
div.bbc:hover {
border: solid 1px white;
}
PS: Wenn auch die Grafiken etc. benötigt werden, kann ich mir mal am Wochenende Zeit nehmen. Habe jetzt leider keine Zeit.
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
[Hinweis] Re: z-index mit 2 Listen
Autor: Freddy
Datum: 05.02.2010 02:33:29
Hallo,
ich will jetzt kein Spielverderber sein, aber hast Du Dir den Link aus meinem lezten Post angeguckt? Ich will Dir ja helfen, habe aber ebenfalls wenig Zeit. Bitte poste eine ______vollständige______ Testdatei, wenn diese zu lang sein sollte, lies bitte in der Netiquette nach, was dann zu tun ist.
Gruß,
Freddy
