PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Inputs designen


raian
18.03.2005, 15:29
Hi!

Ich habe gegoogelt, ja. Ich habe die Boardsuche genutzt, ja. Ich habe nichts gefunden, ja!

Also, ich habe auf einer Seite, die ich auch als beispiel angeben würde wenn sie momentan net kaputt wäre(ist noch im Aufbau), gesheen, das er einen Andersfarbigen rand, und hintergrund gemacht hat.

Meine Frage ist WIE? Ich würde mir ja den quellcode ansehen, aber wie gesagt, die Seite is down...

Ich hoffe ihr könnt mir eine Art sagen, mit der man diese Problem der eintönigkeit ändern kenn^^
dead_orc
18.03.2005, 15:45
Ähm, bitte: Rand und Hintergrund von was?
Um der ganzen Seite einen anderen Hintergrund zu geben kannst du CSS benutzen:

<style type="text/css">
<!--
body {
background-color: #012345;
border: 1px #987654 solid;
}
-->
</style>
raian
18.03.2005, 15:47
ups...von inputs^^

also so is mein code:

<form>
<input...>
</form>

und den input will ich anders designen...


PS: komm gleich wieder...muss holz für den ofen abladen (praktische dinger^^)
dadie
18.03.2005, 15:48
Das ist die Power von CSS ^^




<style type="text/css">
<!--
.input7{
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-bottom: 1px ;
background-color: transparent;
font-family: courier;
font-size:11px;
}
-->
</style>

<input type="text" class="input7" />


vom Prinzip kann man diesen Grund Code erweitern wie man will ande Hintergrundfarbe einen Rand sätzen ihn umfärben (border-bottom: 1px black;) oder den Rand Optisch verändern z.B. mit gestrichelten Linien das siht dan ginial aus für ein Formular ^^

(border-bottom: 1px dashed black;)

Edit: Mehr infos dazu unter meiner Lieblings CSS seite

http://css.fractatulum.net/sample/formformat.htm

Edit2:

Nicht vergessen den Input den du so verändern willst mit der class auszustaten in meinem Beispiel <input class="input7" > thx masterquest ^^
Lukas
18.03.2005, 15:51
Öhm, dadie, wenn die erste Zeile da so steht, müsste man doch <input class="input7"> schreiben, oder? Der . definiert das doch als CSS-Klasse. Wenn man alle input-Felder umdesignen will, muss man (afaik) in der ersten Zeile input{ schreiben.
dead_orc
18.03.2005, 15:55
Das ist allerdings nicht zu empfehlen, weil dadurch auch Checkboxes und Radiobuttons betroffen sind. Besser wäre input[type=text], input[type=password], textarea was aber natürlich vom IE nicht unterstützt wird :rolleyes:
raian
18.03.2005, 15:57
hmm, okay, bis hier alles kalr, aber ich raff das mit dem .input7 usw net...
wenn mir jemand das noch erklärt, dfann bin ich froh...^^
Tomarus
18.03.2005, 16:04
Im Grunde ganz einfach. In der CSS-Definition das:

#mitrand
{
background-color: #000000;
border: 2px outset #CCCCCC;
color: #FFFFFF;
}

Und bei den Inputs, für die dieses Design gelten soll, dann eben:

<input id="mitrand" type="text" />
raian
18.03.2005, 16:06
ähm, ich hab noch nie mit css gearbeitet...also wo muss die css definition hin usw?

Nunja...aber ansonsten is des jetz schon klar...

id gibt an das dann das design von #mitrand (falls so die id heißt) ausgegeben wird...einzige frage: wie erstelle ich diese 'id'?

edit:isses das:

<div id="IDname">
<p>Lorem ipsum dolor sit amet</p>
<p class="CLASSname">Lorem ipsum dolor sit amet</p>
</div>
???
Tomarus
18.03.2005, 16:11
id gibt an das dann das design von #mitrand (falls so die id heißt) ausgegeben wird...einzige frage: wie erstelle ich diese 'id'?
Hä? Indem du sie in die CSS-Definition schreibst. Die kommt am besten dahin, wo auch all deine anderen hinkommen. Auf ceneta.de.vu stehen die im Head-Bereich, schreib sie also einfach dazu bzw. eröffne diese Head/CSS-Bereich, wenn du ihn noch nicht hast.

<head>
<style type="text/css">
<!-- CSS-Definitionen -->
</style>
</head>

[edit] Öh, ja. Was ist denn jetzt noch die Frage? Hatte ich doch eigentlich schon in dem Beispiel oben gepostet ...