Allgemeiner Fragethread

**Blakkeight** · 09.04.2007 16:40

Ohhohh gefaehrlich, dobbelbosd! xD

Ich hab da mal ne frage zu CSS und <fieldset> + <legend>.

Wenn ich <fieldset> mit CSS Formatiere und eine Background Farbe mache, sieht ja noch alles jute aus.

Wenn ich dann aber das Element <legend> hinzufuege, kommt im !€ nur soße bei raus. Soll heißen, ueber dem <legend> Element bildet sich nun die Background Farbe vom <fieldset> Element weiter aus, ueber die gestrichelte Linie.

Was nicht zum Design passt und scheiße aussieht.

Hier mal die Klassen wie ich die beiden Elemente Formatiert habe.

HTML-Code:

.fieldset{
	border: 1px dashed #876625;
	background-color: #e1d2b5;
	margin: 1em auto; padding: 1em;
}
.legend{
	font: bold 10pt Verdana;
	margin: 0; padding: 0.5em;
}

Hier noch ein Bild wie es im !€ aussieht:
Bild von Fieldset+Legend

Aso, die frage hab ich ganz vergessen, wie kann ich obiges im !€ vermeiden ohne es Komplikationen bei anderen Browsern gibt!

e:
So und gleich noch ne frage Hinterher.

Kann es moeglich sein das die:

HTML-Code:

*{
	color: #000000;
	font: normal 7pt Verdana;
	margin: 0; padding: 0;
}
body{	
	background-color: #e2c890;
	margin: 0; padding: 1em;
}

beiden sich gegenseitig in die quere kommen?
Denn eigentlich soll ja * alle Elemente Formatieren, macht er aber nicht. -.-
Wenn ich body nach oben setze, geht zwar die Formatierung von * aber body wird ignoriert. -.-
Gibt es da ne Loesung fuer?

**Tessio** · 09.04.2007 16:48

Schau mal da ab Post #143.

**Blakkeight** · 09.04.2007 17:03

Ok aber nun ist immer noch hinter dem Text was <legend> ausgibt eine gestrichelte Linie. -.- Die muss auch noch weg.
Im Opera sieht es auch Komisch aus, da ist jetzt der <legend> Text unter der Gestrichelten Linie. ;(

**Bluescreen** · 16.04.2007 16:31

Guten Nachmittag!

Wie bzw. woher bekommt man eigentlich solche Text-Formatierungs-Hilfen für die eigene Website:

ich denke, ihr wisst was ich meine!^^

Gibt es sowas irgendwo zum downloaden?

FF · 16.04.2007 16:58

öh, lad dir phpbb oder eine andere Forensoftware, und such die stelle da im quellcode, copier das, fertig.

das dürfte aber mit JS recht leicht zu lösen sein, denk ich.
Dauert nur lange, wenn du das selbst schreiben musst.
Insofern ist o.g. Lösung ne ganz gute denk ich.

**Blakkeight** · 16.04.2007 17:50

Vlt hilft das: tutorials.de
oder hier:
google.de

**Bluescreen** · 18.04.2007 14:30

Also, tutorials.de hilft hier schonmal nicht weiter, da:

Zitat

Gleich mal ein Wort vorneweg: Die hier beschriebenen Methoden funktionieren in der vorliegenden Form nicht mit Mozilla-Browsern. Nur MSIE-Benutzer ab Versionsnummer 5.5 kommen in den Genuss dieses Features.

Na, dann werd' ich mich mal auf die Suche machen...

**Tessio** · 18.04.2007 19:25

Obwohl man dann in Frage stellen müsste, ob dieses "Feature" dann auch das richtige für deinen Einsatz wäre, wenn es nur für IE >= 5.5 verfügbar ist...

FF · 19.04.2007 14:30

wo ist bitte das problem, phpBB ist open source, wenn du ein wenig html kannst, und einen texteditor mit suchfunktion besitzt, kannst du den teil aus dem original phpbb source kopieren.
das ist dann garantiert genau das was du willst.>_>

**Bluescreen** · 23.04.2007 06:02

Nun, gut, ich dachte eigentlich einfach nur, ich könnte euch mal' fragen, vielleicht habt ihr ein paar persöhnliche Tipps. Ein solcher Formator per Java wäre auch nicht schlecht gewesen.

Egal, nun zu einem anderen Problem:

Auf meiner Website tritt ein JS-Problem auf, das der Firefox folgendermaßen beschreibt:

Der Script-Container:

Code:

<script type="text/javascript"><!--
function kat1(objKat){
  var objFirst = document.getElementById("navigation").getElementsByTagName("li")[0];
  var objKat = objKat.parentNode;

  // Alle Menuepunkte der obersten Navigationsebene durchlaufen
  while(objFirst){
    // Falls es sich um ein LI-Tag handelt, nichtt aber um die aktive Kategorie
    if((objFirst.nodeName.toLowerCase()=="li") && (objFirst!=objKat)){
      objFirst.getElementsByTagName("ul")[0].className = "toggleOff";
    }
    // Nächstes Element auf gleicher Ebene holen
    objFirst = objFirst.nextSibling;
  }

  // Aktives Element anhand des aktuellen Zustandes ein- bzw. ausblenden
  with(objKat.getElementsByTagName("ul")[0])
    className = (className=="toggleOn")?"toggleOff":"toggleOn";
}
//--></script>

Sollte das Problem so nicht zu finden sein, das ganze Dokument:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Ferienendversion: 25.02.07 - Version 0.2.3.1 - Schema 2</title>
<meta name="author" content="Erik T.">
<meta name="fileversion" content="0.2.3.1">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-language" content="de">
<style type="text/css">

.untergrnormal, .normaleinfach, .gruppenormal {
   background-color:#55C;
   color: #fff;
   font: bold 0.94em sans-serif;
   text-decoration: none;
   display:block;
   padding: 3px 10px;
   border: 1px solid #05b;
   margin: 0;
   width: 165px;
   -moz-border-radius:5px;
/*   border-radius:5px; */
}

.normaleinfach {
    background-color:#65C;
}

.untergrnormal {
   background-color:#5252B5;
   /*   background: #ccc; */
}

.untergruppeaus {
 display:none;
}

/* Klassen zum Ein- bzw. Ausblenden der Unterkategorien */
.toggleOff{ display: none; }
.toggleOn{ display: block; }


#navigation LI {
   background-color: transparent;
   padding: 0;
   margin: 0;
   list-style: none;
   width: 165px;
   }

#navigation UL {
   background-color: transparent;
   padding: 0;
   margin: 0;
   }

#navigation A:link, #navigation A:visited {
   border: 1px solid #333399;
   }

#navigation A:hover, #navigation A:focus {
   border: 1px solid #c7c88d;
  }

#maincontent {
   background-color: #e3e0c6;
   padding: 1em;
   border-left: 1px solid #002c88;
   margin: 0 0 0 210px;
   color: #000;
   position: absolute;
   top: 0px;
   left: 0px;
   }

</style>

<script type="text/javascript"><!--
function kat1(objKat){
  var objFirst = document.getElementById("navigation").getElementsByTagName("li")[0];
  var objKat = objKat.parentNode;

  // Alle Menuepunkte der obersten Navigationsebene durchlaufen
  while(objFirst){
    // Falls es sich um ein LI-Tag handelt, nichtt aber um die aktive Kategorie
    if((objFirst.nodeName.toLowerCase()=="li") && (objFirst!=objKat)){
      objFirst.getElementsByTagName("ul")[0].className = "toggleOff";
    }
    // Nächstes Element auf gleicher Ebene holen
    objFirst = objFirst.nextSibling;
  }

  // Aktives Element anhand des aktuellen Zustandes ein- bzw. ausblenden
  with(objKat.getElementsByTagName("ul")[0])
    className = (className=="toggleOn")?"toggleOff":"toggleOn";
}
//--></script>

</head><body lang="de" style="color:#000;background-color:#339;">
<noscript>&nbsp;</noscript><noscript>
	<p>Diese Seite benötigt JavaScript. Ihr Broswer interpretiert anscheinend aber kein JavaScript, oder sie haben die Interpretation abgeschaltet. <br>
	      Um den vollen Komfort dieser Website zu nutzen sollten sie dies wieder aktivieren, oder einen JavaScript-fähigen Broswer wie z.B. den kostenlosen <a href="http://www.mozilla-europe.org/de/" title="Zur Website des Mozilla Firefox gehen">Mozilla Firefox</a> zulegen.<br>
  </p><p>Falls ihnen das alles nicht zusagt, können sie auch unsere <a href="#">Version ohne JavaScript</a> ansehen (NOCH IM BAU).
  </p><p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
  </noscript>
<div style="width:210px; position: absolute; top: 7px; left: 7px;">
<ul id="navigation" style="padding:0; margin:0;">
	<li><a title="Kategorie 1" class="gruppenormal" id="gruppe1" onclick="kat1(this)" href="#">Kategorie 1</a>
	  <ul class="toggleOff">
	    <li><a title="Unterkategorie 1-1" class="untergrnormal" id="gruppe1a_0" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.1</a></li>
	    <li><a title="Unterkategorie 1-2" class="untergrnormal" id="gruppe1b_0" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.2</a></li>
	    <li><a title="Unterkategorie 1-3" class="untergrnormal" id="gruppe1c_0" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.3</a></li>
	    <li><a title="Unterkategorie 1-4" class="untergrnormal" id="gruppe1d_0" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.4</a></li>
             <li style="visibility:hidden;" title="Platzhalter">&nbsp;</li>
	  </ul>
	</li>
	<li><a title="Kategorie 1" class="gruppenormal" id="gruppe2" onclick="kat1(this)" href="#">Kategorie 2</a>
	  <ul class="toggleOff">
	    <li><a title="Unterkategorie 1-1" class="untergrnormal" id="gruppe1a_1" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.1</a></li>
	    <li><a title="Unterkategorie 1-2" class="untergrnormal" id="gruppe1b_1" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.2</a></li>
	    <li><a title="Unterkategorie 1-3" class="untergrnormal" id="gruppe1c_1" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.3</a></li>
	    <li><a title="Unterkategorie 1-4" class="untergrnormal" id="gruppe1d_1" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.4</a></li>
             <li style="visibility:hidden;" title="Platzhalter">&nbsp;</li>
	  </ul>
	</li>
	<li><a title="Kategorie 1" class="gruppenormal" id="gruppe3" onclick="kat1(this)" href="#">Kategorie 3</a>
	  <ul class="toggleOff">
	    <li><a title="Unterkategorie 1-1" class="untergrnormal" id="gruppe1a_2" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.1</a></li>
	    <li><a title="Unterkategorie 1-2" class="untergrnormal" id="gruppe1b_2" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.2</a></li>
	    <li><a title="Unterkategorie 1-3" class="untergrnormal" id="gruppe1c_2" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.3</a></li>
	    <li><a title="Unterkategorie 1-4" class="untergrnormal" id="gruppe1d_2" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.4</a></li>
             <li style="visibility:hidden;" title="Platzhalter">&nbsp;</li>
	  </ul>
	</li>
</ul>
</div>



<div id="maincontent">
<p>Version 0.2.<b>3</b>! - Aktuell seit 25.02.07 - 20:31 <b>Achtung:</b> Benötigt JavaScript, NOSCRIPT Container vorhanden.<br>
<!-- TEXT -->
</p></div>

</body></html>

Danke!

**dead_orc** · 23.04.2007 12:05

Um nochmal zu deiner "Formatierungshilfe" zu kommen: Willst du eigentlich einige Buttons die einfach die BB-Codes in das Feld einfügen oder einen WYSIWYG-Editor? Ersteres sollte sich zumindest als Basisversion auch selbst realisieren lassen, muss man sich nur n bisschen JS angucken, letzteres kann man sich auch fertig besorgen, z.B. FCKeditor

**Crash-Override** · 23.04.2007 13:45

Zitat von Bluescreen

Code:

[...]
var objKat = objKat.parentNode;
[...]

Ergibt ja auch wahnsinnig viel Sinn, denkst du nicht? Du greifst auf eine Eigenschaft eines Objektes zu, die du ihm selbst zuweist, was theroretisch ja ginge, allerdings erzeigst du das Objekt gerade erst, also kann die Eigenschaft nicht existieren.

Was du wohl meintest war:

Code:

var objKat = objFirst.parentNode;

oder?

edit: Ok, du hast es als Übergabeparameter, in dem Fall ist der Fehler noch trivialer. Nimm einfach einen anderen Namen oder lass das "var " davor weg.

**Bluescreen** · 25.04.2007 12:25

Zitat von dead_orc

Um nochmal zu deiner "Formatierungshilfe" zu kommen: Willst du eigentlich einige Buttons die einfach die BB-Codes in das Feld einfügen oder einen WYSIWYG-Editor?

EIgwentlich kam ich nur darauf, weil ich ein solches System ganz einfach umgesetzt habe. Da werden die Formatierungselemente, die man per Mauskick einfügt aber immer ans Ende im Textfeld gestellt. Deswegen wollte ich mal schauen, ob's da nicht noch bessere Versionen gibt...

Zitat von Crash-Override

edit: Ok, du hast es als Übergabeparameter, in dem Fall ist der Fehler noch trivialer. Nimm einfach einen anderen Namen oder lass das "var " davor weg.

Natürich!

Sowas kommt davon wenn man das Problem als viel kompizierter einschätzt, als es eigentlich ist! Danke nochmal!^^

**dead_orc** · 25.04.2007 19:19

Zitat von Bluescreen

EIgwentlich kam ich nur darauf, weil ich ein solches System ganz einfach umgesetzt habe. Da werden die Formatierungselemente, die man per Mauskick einfügt aber immer ans Ende im Textfeld gestellt. Deswegen wollte ich mal schauen, ob's da nicht noch bessere Versionen gibt...

Es gibt bessere Versionen, ziemlich sicher

Hier kann man ja z.B. auch Text markieren und dann als fett formatieren. Aber ein Script für sowas hab ich noch nich gesehen irgendwo (also als Download)

**drunken monkey** · 25.04.2007 21:00

Zitat von dead_orc

Es gibt bessere Versionen, ziemlich sicher

Hier kann man ja z.B. auch Text markieren und dann als fett formatieren. Aber ein Script für sowas hab ich noch nich gesehen irgendwo (also als Download)

SelfHTML.
Mit Formatieren von markiertem Text und Einfügen an Cursorposition in praktisch allen Browsern.

**mitaki** · 25.04.2007 21:13

Zitat von drunken monkey

SelfHTML.
Mit Formatieren von markiertem Text und Einfügen an Cursorposition in praktisch allen Browsern.

Wobei man anmerken sollte, dass der Artikel geschrieben wurde, als es noch keinen Internet Explorer 6 (!) gab.

FF · 26.04.2007 13:46

na und, er funktioniert ja trotzdem (immer noch^^)

**mitaki** · 26.04.2007 14:01

Ich wollte damit nur sagen, dass man heute wohl nicht mehr so stark auf Browserspezifisches eingehen muss wie damals, weil man bessere Browserübergreifende Techniken verwenden kann (und da gabs von IE 5 auf IE 6 ja durchaus was neues).

**Drakes** · 29.04.2007 15:57

Wie kann man einen Button mit einem Bild darauf machen? Man kann im value ja kaum ein <img> Element einfügen.(Sollte man bei XHTML kein Javascript verwenden, da es nicht valide ist? Ich meine, weil es das Attribut onClick "nicht gibt".)

**Crash-Override** · 29.04.2007 16:32

Code:

<input type="image" src="z" width="x" height="y" alt="Submit" />

funktioniert bei mir, valide hab ich jetzt nicht getestet, sollte aber gehen, schätze ich.

Thema: Allgemeiner Fragethread

Themen-Optionen

Anzeige

Nachrichten-Eingabe-Hilfen

Kleines JS Problem

Berechtigungen