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

Inhalt mittig plazieren aber linksbündig

B

boersencoach.com

Neues Mitglied
Hallo,

ich würde gerne dieses Kontakformular mittig ausrichten, aber sodas alles noch linksbündig ist. Leider habe ich es trotz unendlicher Versuche bisher nicht geschafft....

Hier der HTML_Code:


HTML: 
<html>
  <head>
      <title>Einfaches Kontaktformular mit HTML und PHP</title>
  </head>
  <body>
      <form action="kontaktformularverarbeitung.php" method="post">
<p>
          Name: <input name="name" size="40"/><br />
<p>
          E-Mail: <input name="email" size="40"/><br />
<p>
          Betreff: <select name="betreff"size="1">
              <option>Hilfe</option>
              <option>Kritik</option>
              <option>Linktausch</option>
              <option>Werbung</option>
              <option>Sonstiges</option>
          </select><br />
<p>
          Nachricht: <br />
          <textarea name="text" cols="50" rows="10"></textarea>
          <br />
<p>
          <input name="submit" type="submit" value="absenden"/>
      </form>

<p>
 
Gib dem <form>-Element eine feste Breite, mache es mit "display: block;" zu einem Blockelement und zentriere es per "margin: 0 auto;". Die Inhalte des Formulars werden davon nicht berührt, aber es steht dann in der Mitte.
 
Kann ich nicht mit einer Art <center> arbeiten welches das Objekt mittig ausrichtet, blos eben rechtsbündig?

Ich will das einfach in den HTML-Code einbauen....:oops:
 
Guck dir mal das style-Attribut und CSS an, dann verstehst du den Post von threadi der zum Erfolg führt.

Oder auch "CSS nutzen".
 
Hi,

ich habe gesehen das ich im ersten Step was im CSS ändern muss. Mir ist nur nicht klar wo genau ich "margin: 0 auto" eintragen/abändern muss damit NUR das Formular sich zentriert. Hier der CSS:


body, html
{
border: 0px none;
margin: 0px;
padding: 0px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
text-align: center;
background-color: #000000;
color: #ffffff;
}

.reset
{
border: 0px none;
margin: 0px;
padding: 0px;
float: none;
clear: both;
width: 0px;
height: 0px;
line-height: 0px;
font-size: 0px;
}
.fl
{
float: left;
}
.clr
{
color: #0083bb;
}

p, img, table, tr, th, td, h1, h2, h3, h4, h5, ul, li
{
border: 0px none;
margin: 0px;
padding: 0px;
}
body
{
padding: 0 0 30px 0;
}
a
{
color: #ffffff;
text-decoration: none;
}
a:hover
{
color: #ffffff;
text-decoration: underline;
}
#header
{
margin: auto;
width: 980px;
height: 300px;
background-image: url(img/header.jpg);
background-repeat: no-repeat;
background-position: center top;
text-align: left;
}
#main
{
margin: auto;
width: 980px;
min-height: 200px;
}
#footer
{
margin: auto;
width: 980px;
height: 100px;
background-image: url(img/footer.jpg);
background-repeat: no-repeat;
background-position: center bottom;
text-align: center;
border: 1px solid #000000;
}
#footer p
{
margin: 50px 0 0 0;
line-height: 20px;
color: #7e7e7e;
}
#footer a
{
color: #7e7e7e;
}
#content
{
width: 680px;
text-align: left;
color: #d8d8d8;
}
#content h1
{
margin: 30px 0 10px 0;
font-size: 25px;
font-weight: normal;
}
#content h2
{
margin: 20px 0 10px 0;
font-size: 20px;
font-weight: normal;
color: #ffffff;
}
#content p
{
text-align: justify;
margin: 10px 0 10px 5px;
line-height: 20px;
}
#content img.fl
{
margin: 0 10px 5px 0;
}
#content ul
{
margin: 0 0 10px 40px;
}
#content ul li
{
margin: 7px;
}
#name
{
width: 380px;
height: 300px;
text-align: center;
border-top: 1px solid black;
font-family: Times New Roman;
}
#name strong
{
font-size: 20px;
margin: 120px;
display: block;
}
#menu
{
width: 550px;
height: 30px;
margin-top: 270px;
}
#menu ul li
{
list-style-type: none;
display: inline;
font-weight: bold;
text-transform: uppercase;
margin-right: 20px;
}
 
Selektoren - Einführung in CSS - Buch - Artikel und Einführungstexte zu Webstandards und Interaktionsdesign

Das Form Element soll die Eigenschaften bekommen.. such dir eine der vielen Möglichkeiten aus, dein form-Tag anzusprechen und weise entsprechende Eigenschaften zu.

Nochwas: Das Forum hier bietet BB-Codes zur Codeformatierung an.. damit sieht HTML (und andrer Code) nicht so unleserlich aus. Wäre super, wenn du das in Zukunft nutzen könntest. Außerdem haben wir eine Bearbeitungsfunktion, dadurch spart man sich 3 Antworten am Stück zu schreiben sobald einem noch was einfällt. ;)

edit:
Ja, so nutzt man das style Attribut. Wenn man es allerdings dem Form-Tag zuweisen will, sollte man es auch zum Form-Tag hinschreiben und nicht zum a-Tag. Eleganter macht man das über angesprochene Selektoren in der allgemeinen CSS Datei, die du schon gepostet hast.
 
Vielen Dank für die Hinweise. :D

Ich habe den vorhandenen Form-Tag wie folgt ergänzt (style="display:block; margin: 0 auto;" ). Aber nichts passiert.....? :cry:


HTML: 
      <form action="kontaktformularverarbeitung.php" method="post"  style="display:block; margin: 0 auto;"  >
<p>
          Name: <input name="name" size="40"/><br />
<p>
          E-Mail: <input name="email" size="40"/><br />
<p>
          Betreff: <select name="betreff"size="1">
              <option>Hilfe</option>
              <option>Kritik</option>
              <option>Linktausch</option>
              <option>Werbung</option>
              <option>Sonstiges</option>
          </select><br />
<p>
          Nachricht: <br />
          <textarea name="text" cols="50" rows="10"></textarea>
          <br />
<p>
          <input name="submit" type="submit" value="absenden"/>
      </form>
 
Danke für den Hinweis? Aber was????

Dem Element die feste Breite geben? Aber WIE mache ich das? Ich habe gegoogelt ohne Ende....

Kannst du mir bitte nicht zeigen wie der Quellcode ausehen muss? Ich habe es jetzt wie folgt versucht, klappt aber nicht:

HTML: 
<form action="kontaktformularverarbeitung.php" method="post" width="368" height="383" style="display:block; margin: 0 auto">
 
Ok im CSS.... bei Body oder wo? :oops:

Hier ist der Code, kannst du mir zeigen wo ich eine Anpassung machen muss...

HTML: 
body, html
{
 border:  0px none;
 margin:  0px;
 padding: 0px;
 font-family: "Arial", sans-serif !important;
 font-size: 12px !important;
 text-align: center;
 background-color: #000000;
  color: #ffffff; 
}
 
.reset
{
 border:  0px none;
 margin:  0px;
 padding: 0px;
 float: none;
 clear: both; 
 width: 0px;
 height: 0px;
 line-height: 0px;
 font-size: 0px;
}
.fl
{
  float: left;
}
.clr
{
  color: #0083bb;
}
 
p, img, table, tr, th, td, h1, h2, h3, h4, h5, ul, li
{
 border:  0px none;
 margin:  0px;
 padding: 0px;
}
body
{
  padding: 0 0 30px 0;
}
a
{
  color: #ffffff;
  text-decoration: none;
}
a:hover
{
  color: #ffffff;
  text-decoration: underline;
}
#header
{
  margin: auto;
  width: 980px;
  height: 300px;
  background-image: url(img/header.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: left;
}
#main
{
  margin: auto;
  width: 980px;
  min-height: 200px;
}
#footer
{
  margin: auto;
  width: 980px;
  height: 100px;
  background-image: url(img/footer.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  text-align: center;
  border: 1px solid #000000;
}
#footer p
{
  margin: 50px 0 0 0;
  line-height: 20px;
  color: #7e7e7e;
}
#footer a
{
  color: #7e7e7e;
}
#right
{
  width: 270px;
  margin: 0 0 0 20px;
  text-align: left;
  padding: 70px 0 0 0;
}
#right h3
{
   background-color: #0083bb;
   padding: 5px 0 5px 5px;
   font-size: 15px;
}
#right ul
{
  margin: 10px 0 20px 0;
}
#right ul li
{
  margin: 5px 0 0 30px;
  list-style-image: url(img/arrow.gif);
}
#content
{
  width: 680px;
  text-align: left;
  color: #d8d8d8;
}
#content h1
{
  margin: 30px 0 10px 0;
  font-size: 25px;
  font-weight: normal;
}
#content h2
{
  margin: 20px 0 10px 0;
  font-size: 20px;
  font-weight: normal;
  color: #ffffff;
}
#content p
{
  text-align: justify;
  margin: 10px 0 10px 5px;
  line-height: 20px;
}
#content img.fl
{
  margin: 0 10px 5px 0;
}
#content ul
{
  margin: 0 0 10px 40px;
}
#content ul li
{
  margin: 7px;
}
#name
{
  width: 380px;
  height: 300px;
  text-align: center;
  border-top: 1px solid black;
  font-family: Times New Roman;
}
#name strong 
{
  font-size: 20px;
  margin: 120px;
  display: block;
}
#menu
{
  width: 550px;
  height: 30px;
  margin-top: 270px;
}
#menu ul li
{
  list-style-type: none;
  display: inline;
  font-weight: bold;
  text-transform: uppercase;
  margin-right: 20px;
}
 
HTML: 
<form action="kontaktformularverarbeitung.php" method="post" style="display:block; margin: 0 auto; width:368px;">
Man man man... ein bisschen Eigeninitiative ist schön wünschenswert.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben