Kontaktformular linksbündig

hartu

Hallo liebes Forum,

wäre jemand so lieb einmal hier rüber zuschauen wo mein Fehler liegt?

#responsive-form{
max-width:600px /*-- change this to get your desired form width --*/;
width:100%;
margin-left:30px;
text-align: left;
float:left;
}
Der Div des Kontaktforumulars heißt wie oben responsive-form. Das ganze soll dann linksbündig sein.
Klappt nur nicht :(

Liebe Grüße

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

link zur Problemstelle?

hartu

Ach verdammt tut mir leid :o

http://wordpress.p154953.webspaceconfig.de/?page_id=92&lang=de

Bittesehr :)

Woogie-Design

Hi Dein #responsive DIV hat Margin-right von 30px, das muss raus und dann haben Deine Formular Felder .column-third alle ein padding von 0.65rem, da müsstest padding-left auf 0 setzen, wenn das Formular links mit dem Text bündig sein soll.

.column-third {
float: left;
position: relative;
width: 33%;
padding: 0.65rem 0.65rem 0.65rem 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

hartu

so habe das mal so ausprobiert, klappt allerdings nichts so ganz,
Ich glaube ich übersehe schon wieder was :/

Aber vielen dank

edit: achso und ja das Formular soll bündig mit dem Text :)

Woogie-Design

Was genau fehlt denn? Wie änderst Du denn die CSS Datei ?
Die class .column-third steht in der Index Datei also muss im Head geladen werden.

hartu

Ich bearbeite das ganze im Avada (Das Theme verwende ich) Custom CSS.
Das Kontaktformular ist so aufgebaut:

HTML

<div id="responsive-form" class="clearfix">




<div class="form-row">
<div class="column-third"><b>Anrede *</b> [select* size:25 Anrede  "Herr" "Frau" "Firma"]</div>
<div class="column-two-third"><b>Name *</b> [text* Nachname]</div>
</div>

im CSS habe ich folgendes eingetragen:

Code

#responsive-form{
	max-width:600px /*-- change this to get your desired form width --*/;
	width:100%;
        margin-left:30px;
        text-align: left;
        float:left;
}
.form-row{
	width: 100%;
}


.column-third {
      float: left;
      position: relative;
      width: 33%;
      padding-left: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box
}
.column-two-third {
      float: left;
      position: relative;
      width: 67%;
      padding-left 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box
}




.column-half, .column-full{
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

Alles anzeigen

Wobei die eine doppelte Klasse denke ich raus kann. Das war nur zum probieren, bin leider noch nicht sooo fit in css :/

Da aber die beiden Paddings auf 0 stehen müsste er sich doch eigentlich an die Seite schieben?

Liebe Grüße
und danke für die Hilfe :))

maxe

#responsive-form bekommt immer noch ein margin.
Und .column-half, .column-full bekommen auch immer noch ein padding.

Code

#responsive-form{
max-width:600px /*-- change this to get your desired form width --*/;
width:100%;
[COLOR="#FF0000"]margin-left:0;[/COLOR]
text-align: left;
float:left;
}


.column-half, .column-full{
float: left;
position: relative;
[COLOR="#FF0000"]padding: 0;[/COLOR]
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

Alles anzeigen

Woogie-Design

Das column-two-third sollte keinen padding-left 0 haben, deshalb rutscht Dir nun das rechte Inputfeld nach links uns stößt an das linke.

responsive-form hat immer noch das margin-left: 30px;
Und wie Maxe schon sagt, den column-half und column-full musst das padding-left auch auf 0 setzen.

Wobei nun dem Dropdown die border-radius fehlen, also die Rundung der Ecken. :/

Soll doch so aussehen oder ?

hartu

Ah danke ich bin doch etwas blind. Genau so sollte es aussehen Woogie-Design, aber noch mit ein bisschen Platz bei Fon/Fax.
Habe jetzt hoffentlich alles richtig eingeben:

Code

#responsive-form{	max-width:600px /*-- change this to get your desired form width --*/;
	width:100%;
        margin-left:0px;
        text-align: left;
        float:left;
}
.form-row{
	width: 100%;
}




.column-third {
float: left;
position: relative;
width: 33%;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}




.column-two-third {
      float: left;
      position: relative;
      width: 67%;
      padding: 0.65rem;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box
}




.column-half, .column-full{
	float: left;
	position: relative;
	padding: 0;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box

Alles anzeigen

Allerdings ist es oben noch ein wenig verschoben. Liegt das an den 0.65rem?
Wenn ich die nicht wegmachen darf, da sonst alles von rechts rüber kommt, was schreibe ich dann hin?

So war das Ursprungsformular, das sollte einfach so gerückt sein das, dass es unterm Logo steht (Padding 30px, ist im Englischen noch nicht mit dem Text über dem Formular gemacht)

Danke für die Mühe :O

Ganz liebe Grüße
hartu :)

hartu

Habe es jetzt nochmal probiert und bin fast beim richtigen Ergebnis angekommen.
Aber minimal verschoben ist es noch, mag jemand nochmal schauen? :(

Liebe Grüße,
hartu

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Kontaktformular linksbündig

Jetzt mitmachen!