Anpassung

Fragen zu HTML, CSS, eigenen Erweiterungen etc.
old
Beiträge: 2
Registriert: 06.06.2010, 10:05

Anpassung

Ungelesener Beitrag von old » 06.06.2010, 10:14

Hallo zusammen,

ich weiss nicht, ob ich das hier richtig an dem Platz ist? (hoffe ich mal!)

Ich baue einen kleinen chat und möchte unten stehenden Login nehmen.

Wie kan ich denn hier die Schriftart,, Farbe-, Größe und die Abstände einstellen und auch den Button anders machen? ich habe so ein Programm wo ich für alles so classen eingeben kann und das Programm ändert mir das automatisch dann, so wie im Programm angegeben. Kann man die Felder auch nebeneinander schieben, und dann die Abstände irgendwie anpassen?
<table style="text-align: left; width: 100%;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td></td>
<td style="width: 100px;">
<div style="text-align: center;">
<form name="formular" method="post"
action="http://serverXwebkicks.de/CHATNAME/">Name:<br>
<input name="user" maxlength="20" type="text"><br>
Passwort
<input name="pass" maxlength="15"
type="password"><br>

Raum:
<select class="input" name="raum"
style="width: 100px;">
<option value="Hauptchat">Hauptchat</option>
<option value="ANDERER RAUM">ANDERER RAUM</option>
</select>
<input name="job" value="ok" type="hidden"><input
name="cid" value="CHATNAME" type="hidden"><br>
<br>
<input class="submit" name="login"
value="Login" type="submit"></form>
</div>
</td>

Dank für die Hilfe.

Old

Knuddelmonster
Beiträge: 69
Registriert: 11.02.2010, 18:10
Wohnort: Österreich
Kontaktdaten:

Re: Anpassung

Ungelesener Beitrag von Knuddelmonster » 07.06.2010, 11:01

hallöchen ...
du hast zwei möglichkeiten die Eingabefelder zu gestalten ...
Beispiel:
1. -> mit einen Style der dann in der Zeile so drin steht ... (also mit class="??")
Script:Zeigen
<style type="text/css">
.eingabefeld_guest {
text-align: center;
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-weight: bold;
color: #000066;
}
</style>
<input class="input" type="text" name="guest" maxlength="20" size="13" class="eingabefeld_guest">
oder mit
2. -> direkteingabe in der betreffenden Zeile ... (also ohne class="??")
Script:Zeigen
<input class="input" type="text" name="guest" maxlength="20" size="13" style="font-family: 'Comic Sans MS', Helvetica, Sans-Serif; color: #000066; font-size: 14px; background-color: #FFFFFF">
welche möglichkeit du nimmst bleibt dir überlassen, beides funktioniert :wink:

Gruss vom Knuddelmonster ...

old
Beiträge: 2
Registriert: 06.06.2010, 10:05

Re: Anpassung

Ungelesener Beitrag von old » 07.06.2010, 13:04

boah SUPER - knuddelmonster, vielen, vielen Dank das funktioniert! Klasse!!!

Leider habe ich noch eine Frage!? Die Anpassung für die Eingabefelder funktioniert, aber ich kriege den Text vor den Eingabefelder nicht verändert (User, Password und Raum)! Mist...sorry, wie kann man den denn nach den eigenen Wünschen verändern (genauso wie die Eingabefelder)?

Sorry das ich nochmals nachfrage, aber ich kenne mich nicht so gut aus.....habe zwar selber probiert, aber es gibt keine Veränderung des Textes vor den Eingabefelder!?!?

Vielen Dank nochmals!

Viele Grüße Old

Knuddelmonster
Beiträge: 69
Registriert: 11.02.2010, 18:10
Wohnort: Österreich
Kontaktdaten:

Re: Anpassung

Ungelesener Beitrag von Knuddelmonster » 08.06.2010, 12:58

re: old

da ich selber gerade meine loginseite umgestalte zeig ich dir mal meinen code wie ich das mit den classen mache ...

ich verwende auf meiner neuen seite 2 loginfenster !!! eine nur für gäste und eines nur für angemeldete user ! der gezeigte code zeigt meine login für die gäste !!! mit klick auf die schaltfläche "Gast - Login" öffnet sich der chat in einem "Popup-Fenster" ...
Script:Zeigen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>

<head>
<meta http-equiv="Content-Language" content="de-at">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ohne_Titel_1</title>
<style type="text/css">
.text_loga {
margin: 2px 5px 5px 5px;
font-family: "Comic Sans MS";
font-size: 14px;
font-weight: bold;
text-align: left;
color: #000066;
}
.text_loga_eingabe {
margin: 3px 5px 0px 10px;
font-family: "Comic Sans MS";
font-size: 14px;
font-weight: bold;
text-align: left;
color: #000066;
}

.text_loga_botton {
margin: 1px 5px 1px 15px;
font-family: "Comic Sans MS";
font-size: 10px;
font-weight: bold;
text-align: left;
color: #000066;
}.zentrieren {
text-align: center;
}
</style>

</head>
<script language="javascript" type="text/javascript">
var win=null;
onerror = stopError;
function stopError(){
return true;
}
function indenchat(){
myleft=20;
mytop=20;

settings="width=1000,height=700,top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no";
win=window.open("http://server4.webkicks.de/deinChat/","mypopup",settings);
win.focus();
}
function regnick(){
myleft=100;
mytop=100;
settings="width=400,height=350,top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no";
win=window.open("http://server4.webkicks.de/deinChat/register","regpopup",settings);
win.focus();
}

</script>

<body style="margin: 0; background-color: #F9F7E1">
<form name="formular" method="post" action="http://server4.webkicks.de/deinChat/" target="mypopup">
<p class="text_loga">Login Gäste:</p>
<table style="width: 200px" cellspacing="0" cellpadding="0">
<tr>
<td><p class="text_loga_eingabe">Nick:</p></td>
<td><input class="input" type="text" name="guest" maxlength="20" size="13" style="font-family: 'Comic Sans MS', Helvetica, Sans-Serif; color: #000066; font-size: 11px; background-color: #FFFFFF"></td>
</tr>
<tr>
<td><p class="text_loga_eingabe">Raum:</p></td>
<td><select name="raum" style="font-family: 'Comic Sans MS', Helvetica, Sans-Serif; color: #000066; font-size: 11px; background-color: #FFFFFF">
<option value="Hauptchat">Eingangshalle</option>
</select></td>
</tr>
<tr>
<td colspan="2" style="height: 12px">
<p class="text_loga_botton">Problemmodus Ja/Nein&nbsp;&nbsp;&nbsp;
<input name="pm" type="checkbox" value="1"></p></td>
</tr>
<tr>
<td colspan="2" class="zentrieren">
<input class="submit" type="submit" name="login" value="Gast - Login" onClick="indenchat();" style=" font-family: 'Comic Sans MS', Verdana, Arial, Helvetica, Sans-Serif; font-size: 12px; color: #000066; font-weight: bold"></td>
</tr>
<tr>
<td style="height: 3px" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="zentrieren">
<input type="button" value="Nick registrieren" onClick="regnick();" style=" font-family: 'Comic Sans MS', Verdana, Arial, Helvetica, Sans-Serif; font-size: 12px; color: #000066; font-weight: bold"></td>
</tr>
</table>
<p class="text_loga_botton">
<input name=job type=hidden value="ok">
<input name=cid type=hidden value="deinChat">
</p>
</form>
</body>
</html>
die für dich interesanten teile im quellcode hab ich dir mal "blau" makiert :wink:
wer das ganze probieren möchte, den sei schon mal vorweg gesagt, der chat im popup-fenster geht erst richtig wenn das ganze online ist !!!
im offlinemodus kommt zwar das popupfenster, allerdings ist hier ein neuerlicher login erforderlicht !!! ( getestet im "FireFox - Internet Explorer - Opera - Safari - Google Chrome" )

viel spass beim testen -> knuddelmonster

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 14 Gäste