Kontaktformular Ebene bzw Formularfeld transparent

Marc Otte · 12. Februar 2007

Hallo,

wie gesagt sind wir grad angefangen uns mit html etc. zu beschäftigen.

Ich wollte jetzt eine Kontakt Seite entwerfen. Dabei sind mir 2 Probleme aufgekommen. Habe das was ich geschrieben habe mal hochgeladen.

Hier erstmal die Seite:

Kontaktformular

Problem 1)

Ich habe in der Mitte eine Ebene mit dem Hintergrundbild. Darüber habe ich noch eine gelegt und wollte die gerne etwas transparent haben. Das hat dann so ein Effekt als würde das Formulardatenfeld etwas getöhn sein.

Da ich das nicht hinbekommen habe, habe ich in Photoshop geschaut und einfach ein hintergrund bild transparent erstellt und in die 2te ebene eingefügt. So sieht man in Ebene 2 nur die Formulardaten.

Meine Frage:

Kann man Ebenen Transparent(er) machen? Wenn ja wie, bzw. ich habe Jetzt in dem Formular Feld "Ihre Nachricht" ein Hintergrundbild via css. eingefügt was ich nicht toll finde. Kann man denn die Formularfelder transpart(er) machen? Habe dazu noch nichts gefunden.

Problem 2)

Auf unserem schulungsrechner 1024er auflösung sitzt das formular feld super in der mitte, bei mir zuhause 1280er auflösung schiebt er das nach links oben. Wie kann ich ihm sagen er soll das bild in beiden auflösungen mittig setzen?

Über jegliche Hilfestellung bin ich dankbar.

Liebe Grüße

Marc

Hier mal der Index Quelltext:

<html>
<head>
<title> Arbeiten mit Ebenen</title>

<link rel="stylesheet" type="text/css" href="style.css">



</head>
<body bgcolor="#000000">


<div id="hauptebene-rahmen" style="position:absolute; top:40px; left:109px; width:842px; height:502px; background-color:#FFF8DC;
z-index:0; visibility:visible;"class="news"></div>

<div id="hauptebene" style="position:absolute; top:41px; left:110px; width:840px; height:500px; background-color:#8B0000;
z-index:1; visibility:visible;"class="news"><img src="images/background2.jpg" width="840" height="500" border="0" usemap="#enter">
<map name="enter">
<area shape="rect" coords="190,440,305,490" href="send.html" title="Nachricht verschicken"></map>
</div>





<div align="center" id="nav1" style="position:absolute; top:100px; left:120px; width:500px; height:400px; background:images/transparent.gif;
z-index:2; visibility:visible;" class="normal2">Kontaktformular
<br>
<br>
<table border="0" cellspacing="0" cellpadding="3">

<tr>
<td align="left" class="normal">Name:</td>
<td align="left"><input name="Name" type="text" size="25" maxlength="25"></td>
</tr>
<tr>
<td align="left" class="normal">Email:</td><br>
<td align="left"><input name="Email" type="text" size="25" maxlength="25">
</tr>
<tr>
<td align="left" class="normal" valign="top">Ihre Nachricht:</td>
<td align="right"><textarea class="table" name="Nachricht" cols="49" rows="14"></textarea></td>
</table>

</div>

</body>
</html>

hier der Qelltext aus der css

/* Kommentar: Erste Versuche mit CSS
*/

.normal {
font-family:Verdana,Arial,Helvetica; /* Hier werden die Schriftarten in der Reihenfolge angegeben wie der Browser sie darstellen soll*/
font-size:10pt; /* Angabe der Schriftgröße in pt oder px*/
font-weight:normal; /* Hier wird das Schriftgewicht bestimmt. Angaben sind möglich in: Bold, Bolder, lighter oder in werten: 100(extra dünn) bis 900 (extra-fett) norma=normales Schriftgewicht */
font-style:normal; /* Hier stehen uns 2 Werte zur Verfügung: normal, italic */
color:#FFFFFF; /* Hier wird die Schriftfarbe definiert */
text-align:left; /* Hier wird die Text ausrichtung definiert: left, center oder right */
text-decoration:none; /* Hier kann man Texte unter- oder überstreichen, aber auch durchstreichen oder blinken lassen. (underline, overline, line through, blink) */
}
.normal2 {
font-family:Verdana,Arial,Helvetica; /* Hier werden die Schriftarten in der Reihenfolge angegeben wie der Browser sie darstellen soll*/
font-size:10pt; /* Angabe der Schriftgröße in pt oder px*/
font-weight:normal; /* Hier wird das Schriftgewicht bestimmt. Angaben sind möglich in: Bold, Bolder, lighter oder in werten: 100(extra dünn) bis 900 (extra-fett) norma=normales Schriftgewicht */
font-style:normal; /* Hier stehen uns 2 Werte zur Verfügung: normal, italic */
color:#FFFFFF; /* Hier wird die Schriftfarbe definiert */
text-align:center; /* Hier wird die Text ausrichtung definiert: left, center oder right */
text-decoration:none; /* Hier kann man Texte unter- oder überstreichen, aber auch durchstreichen oder blinken lassen. (underline, overline, line through, blink) */
}

.header {
font-family:Verdana,Arial,Helvetica;
font-size:12pt;
font-weight:Bold;
font-style:normal;
color:#FFFFFF;
text-align:center;
text-decoration:none;
}

.news {
font-family:Verdana,Arial,Helvetica;
font-size:12pt;
font-weight:Bold;
font-style:normal;
color: #C0C0C0;
text-align:center;
text-decoration:none;
}

.table {
font-family:Verdana,Arial,Helvetica;
font-size:10pt;
font-weight:normal;
font-style:normal;
color:#ffffff;
text-align:left;
text-decoration:none;
background-image:url(images/background2a.jpg);
}

.important {
font-family:Verdana,Arial,Helvetica;
font-size:10pt;
font-weight:Bold;
font-style:normal;
color: #FF0000;
text-align:left;
text-decoration:none;
}

a:link { font-family:Verdana,Arial,Helvetica;
font-size:10pt;
font-weight:Bold;
font-style:normal;
color:#808080;
text-align:left;
text-decoration:none;
}

a:visited {
font-family:Verdana,Arial,Helvetica;
font-size:10pt;
font-weight:Bold;
font-style:normal;
color:#FAEBD7;
text-align:left;
text-decoration:none;
}

a:hover {
font-family:Verdana,Arial,Helvetica;
font-size:10pt;
font-weight:Bold;
font-style:normal;
color:#FAEBD7;
text-align:left;
text-decoration:none;
}
a:active {
font-family:Verdana,Arial,Helvetica;
font-size:10pt;
font-weight:Bold;
font-style:normal;
color:#FAEBD7;
text-align:left;
text-decoration:none;
}
a:focus {
font-family:Verdana,Arial,Helvetica;
font-size:10pt;
font-weight:Bold;
font-style:normal;
color:#FAEBD7;
text-align:left;
text-decoration:none;
}

/*
Anmerkungen:
Wird Â»line-throughÂ« innerhalb von Tabellen mit dem <span>-Tag eingesetzt, dann kann es dazu führen, dass NC 4.x
alles durchgestrichen darstellt. Der IE versteht den Wert Â»blinkÂ« nicht - allerdings sollte man mit blinkendem Text
ohnehin sehr vorsichtig sein, so dass das kein großes Problem sein dürfte.*/

ZuVieL · 12. Februar 2007


textarea {

	background-color: #000000;

	opacity: 0.5;

	filter: alpha(opacity=80);

}

Marc Otte · 12. Februar 2007

huhu im ie funktioniert das supi ^^

aber leider nicht im firefox, gibs da auch noch eine lösung für ?

ZuVieL · 12. Februar 2007

soweit ich weiss nein

azett · 12. Februar 2007

Gibts.

-moz-opacity:0.8;

Transparente Hintergründe: Tipps und Tricks auf CSS 4 You - The Finest in Stylesheets

Marc Otte · 12. Februar 2007

Ihr Seid engel ^^

So habe das jetzt geändert

Kontaktformular

wie krieg ich das mit der auflösung hin das der das ganze feld immer mittig anzeigt? bei 1024, siehts klasse aus, aber bei 1280 verschiebt er mir das nach links oben.

azett · 13. Februar 2007

wie krieg ich das mit der auflösung hin das der das ganze feld immer mittig anzeigt? bei 1024, siehts klasse aus, aber bei 1280 verschiebt er mir das nach links oben.

Nimm für das div, was zentriert ausgerichtet werden soll, die absolute Positionierung raus und verwende stattdessen

margin:0px auto;

"Auto weist den Browser an, den Wert automatisch zu berechnen. Das heißt, wenn man zum Beispiel margin: 0 auto; verwendet, wird das Element horizontal zentriert." - margin: Außenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Damit es auch der IE zentriert anzeigt, gibst du dem body (oder dem das zentrierte div umgebende Element) noch ein "text-align:center;" mit.

Marc Otte · 13. Februar 2007

habe um das ganze ein div gesetzt mit <div class="mitte"> ... </div>

.mitte {

margin: 0 auto;

}

in der css aber das ändert gar nichts

Marc Otte · 13. Februar 2007

habe um das ganze ein div gesetzt mit <div class="mitte"> ... </div>

.mitte {
margin: 0 auto;
}

in der css aber das ändert gar nichts

kann es sein das es daran liegt das ich im div für die ebenen gesagt habe:

<div id="hauptebene-rahmen" style="position:absolute; top:40px; left:109px;

wenn ja wie kann ich das dann umgehen ? uns wurde immer gesagt eine ebene muss feste punkte haben.

azett · 13. Februar 2007

uns wurde immer gesagt eine ebene muss feste punkte haben.

Von wem? :hells:

Nach meiner Erfahrung ist absolute Positionierung nur in den seltensten Fällen zu empfehlen, da du ja nicht weißt, welche Auflösung der Client benutzt. Ist sie zu klein, paßt dein Inhalt nicht auf den Schirm; ist sie zu groß, klebt alles links oben in der Ecke.

Nimm mal zur Veranschaulichung das position:absolute; und die darauf folgenden Positionsangaben weg.

Marc Otte · 13. Februar 2007

wenn ich bei jeder ebene position:absolute + die 2 nachfolgenden werte top + left lösche hab ich 3 ebenen die untereinander dargestellt werden - sollen aber übereinander liegen

azett · 13. Februar 2007

Warum machste drei Ebenen - kannst doch alles in eine packen. Damit sparst du dir eine Menge Code und machst es auch schön übersichtlich

div.content {

margin:0px auto; /*zentriert*/

width:840px;

height:500px;

border:1px solid #ffffff; /*rahmen*/

background-image:url(images/background2.jpg); /*hintergrundbild*/

padding-left:80px; /*innenabstand links*/

padding-top:40px; /*innenabstand oben*/

}

<div class="content">...</div>

Marc Otte · 13. Februar 2007

hi azett,

hab mir deinen vorschlag mal angeschaut unser lehrer meinte zu diesem zeitpunkt halt das man ebenen immer die punkte top, left sowie height und width angeben muss.

habe deins mal versucht umzusetzen ^^

Kontaktformular

jetzt zentriert er aber auch die kontaktformular daten unten die ja etwas weiter links stehen sollten. und im IE siehts wieder anders aus als im Firefox...

kannst Du mir da weiterhelfen? Mit Ebenen in CSS zu definieren, soweit sind / waren wir noch nicht :-)

danke im voraus,

Marc Otte · 13. Februar 2007

Edit: das problem die tabelle weiter links auszurichten hab ich mit "align="left" gelöst, dennoch hab ich immer noch 2 probleme ^^

IE

Hintergrundbild wird richtig dargestellt, dennoch ist das formularfeld oben links und nicht mittig

Firefox

Das Formular ist mittig, aber das hintergrund bild ist zerschossen

azett · 14. Februar 2007

IE
Hintergrundbild wird richtig dargestellt, dennoch ist das formularfeld oben links und nicht mittig

IE kennt "margin: 0px auto;" nicht. Deswegen in der CSS-Datei:

body {

 text-align:center;

}

Firefox Das Formular ist mittig, aber das hintergrund bild ist zerschossen

War mein Fehler. Der macht das Element so breit wie width+padding (siehe http://de.selfhtml.org/css/formate/box_modell.htm). Gib also nicht dem div den Innen-, sondern der Tabelle den Außenabstand.

table.kontakt {

 margin-top:40px;

 margin-left:80px;

}

...und dem .content entziehste wieder sein padding-top und padding-left.

Achso, CSS 4 You - The Finest in Stylesheets ist fast schon Pflichtlektüre für CSS...sollte in die Bookmarks

Anmelden

Kontaktformular Ebene bzw Formularfeld transparent

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte