• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hilfe! Positionieren auf Hintergrundbild.

reverseit

Neues Mitglied
Hey, bräuchte unbedingt eure Hilfe!

Geht darum, ich habe ein Hintergrundbild (Schwarz mit Logo zentriert, Maße 1440x900),
und ein Kontaktformular. Problem ist nun folgendes: Wie kriege ich das Kontaktformular mit Abschicken-Button zentriert unter das Logo des Hintergrunds? Alle meine bisherigen Versuche schlugen fehl.

Hier meine HTML:
<html>
<head>
<title>Kontaktformular</title>
<form>
<label for="name">Name:</label>
<input id="name" type="text" name="name" /><br>

<label id="eventname" for=eventname">Eventname:</label><tab>
<input id="eventname" type="text" name="eventname" /><br>

<label id="was?" for=was?">Was?:</label>
<input id="was? type="text" name="was?" /><br>

<label id="wann?" for=wann?">Wann?:</label>
<input id="wann? type="text" name="wann?" /><br>

<label id="wo?" for=wo?">Wo?:</label>
<input id="wo? type="text" name="wo?" /><br>

<label for="email">E-Mail:</label>
<input id="email" type="text" name="email" /><br>

<input id="submit" type="submit" name="submit" value="Abschicken" /><br>
</form>
<body>
<body background="title.jpg">

<link href="design.css" type="text/css" rel="stylesheet">
</body>
</head>
</html>

Und meine CSS:
@font-face {
font-family: 'Century Gothic';
src: url(gothic_0.woff);
src: local('Century Gothic Standard');
local('Century Gothic Standard'),
url('gothic_0.ttf') format('truetype');
}

form {
color: white;
background-color: transparent;
font-family: 'Century Gothic', Arial, sans-serif;
float: left;
text-align: right;
margin-right: auto;
margin-left: auto;
display: block
width: 80px;
border: 0;
margin-bottom: 10px;
height: 160px;
}

input {border:1px solid white; background:transparent;}

.submit input
{
margin-left: 4.5em;
color: FFFFFF;
}

Hoffe ihr könnt mir helfen.
 
Werbung:
Wieso legst du das Bild nicht als background-image auf das Formular und gibst ihm ein background-size: cover oder contain, damit es sich in der Größe anpasst?
 
Werbung:
So hab das Mal versucht, aber so wirklich klappt das nicht :D

@font-face {
font-family: 'Century Gothic';
src: url(gothic_0.woff);
src: local('Century Gothic Standard');
local('Century Gothic Standard'),
url('gothic_0.ttf') format('truetype');
}
form {
color: white;
font-family: 'Century Gothic', Arial, sans-serif;
float: left;
background-image: url("title.jpg");
background-size: contain
margin: 0 auto;
text-align: right;
margin-right: auto;
margin-left: auto;
display: block
width: 1440px;
border: 0;
margin-bottom: 10px;
height: 900px;
}

input {border:1px solid white; background:transparent;}

.submit input
{
margin-left: 4.5em;
color: FFFFFF;
}
 

Anhänge

  • desktop.jpg
    desktop.jpg
    174,1 KB · Aufrufe: 8
Ist ja auch klar. Du sollst ja auch dem body den background geben und nicht dem Kontaktformular. Außerdem hast du noch marin-right, margin-left und margin-bottom und ein float: left drinne. So kannst du das ganze auch nicht zentrieren. Es gibt eine super Seite für HTML-Anfänger, nennt sich selfhtml. Bevor du irgendwelche Angaben einfach kopierst und einfügst, solltest du erstmal wissen wie diese sich auswirken und was sie überhaupt machen.
 
Werbung:
Hab etwas recherchiert und nun anders gelöst, mit margin-left klappt das wunderbar (37% eingeben und das passt).
Problem ist nun, mithilfe von top kann ich nicht positionieren, top ist ja von oben ausgehend, egal was ich da verändere es geschieht nichts.
Zweites Problem: die Schrift in den Boxen bleibt Schwarz, genauso wie im Submit-Button, obwohl ich color: white; gesetzt habe.

Weiß einer rat?
 
Hab etwas recherchiert und nun anders gelöst, mit margin-left klappt das wunderbar (37% eingeben und das passt).
Du weißt schon das margin der Außenabstand eines Elementes ist?

Problem ist nun, mithilfe von top kann ich nicht positionieren, top ist ja von oben ausgehend, egal was ich da verändere es geschieht nichts.
Schau dir mal Positionierung und Anzeige von Elementen an.

Zweites Problem: die Schrift in den Boxen bleibt Schwarz, genauso wie im Submit-Button, obwohl ich color: white; gesetzt habe.
Erstens hast du in deinem input eine Id gesetzt und keine Klasse. Zweitens macht .submit input keinen Sinn.

Als letztes ist noch anzumerken, das du Elemente falsch geschlossen hast und die Form in den body gehört und nicht in den head. Du solltest deine HTML-Kenntnisse dringendst auffrischen.
 
Werbung:
So habe mich sorgfältig eingelesen, alle Tipps von euch befolgt und nun funktioniert alles wunderbar! Danke vielmals! :)
 
Zurück
Oben