Jak poprawnie ułożyć formularz kontaktowy

Dla specjalistów Webmastering
#1

Witam, mam następujący problem. Wykonałem już praktycznie cały projekt poniżej zamieszczonego layout’u - do wykonania pozostał mi sam formularz. 

 

  1. Jednym z moim problemów polega na tym, że nie mam zielonego pojęcia jak wystylizować go tak by wyglądał jak na projekcie.

 

  1. Następnym zmartwieniem jest trudność jaką mi sprawia ustawienie go na trapezie.

 

Proszę o szybką pomoc.

PS. Zakładam nowy temat, ponieważ w tamtym nie chciałem robić zamieszania.

 

Pozdrawiam

 

http://i62.tinypic.com/11rg3lt.png

 

http://i58.tinypic.com/14aldti.png

+48 000 000 000
kontakt@kbdesign.pl
Jesteś zainteresowany naszymi
usługami?
Skontaktuj się!

#yellowcontactbox
{
width: auto;
height: 550px;
background-color: #ffe13b;
position: relative;
z-index: 1;
}

#trapez
{
height: 0;
width: auto;
border-bottom: 631px solid #2d2d2d;
border-right: 15px solid #2d2d2d;
border-left: 370px solid transparent;
margin-right: 0 auto;
margin: 4% 0 0 0%;
margin-left: 13%;
position: relative;
z-index: 2;
bottom:-1089px;
}

#formularz
{
margin: -53% 0 0 0%;
}

#tekstkontaktowy
{
width: 478px;
high: 64px;
line-height: 1.333;
}

#uslugi
{
position: absolute;
margin-top: 5%;
margin-left: 5%;
font-family: LatoLight;
font-size: 25px;
}

#skontaktuj
{
position: absolute;
margin-top: 7.4%;
margin-left: 13%;
font-family: latoblack;
font-size: 25px;
}

.icon-phone:before {
content: “\e604”;
font-size: 48px;
position: absolute;
top: 25%;
left: 5%;
}

.icon-mail:before
{
content: “\e602”;
font-size: 48px;
position: absolute;
top: 35%;
left: 5%;
}

#numer
{
font-family: LatoLight;
font-size: 20px;
position: absolute;
top: 27%;
left: 9%;
}

#mail
{
font-family: LatoLight;
font-size: 20px;
position: absolute;
top: 37%;
left: 9%;
}

input, textarea
{
padding: 10px;
border: 1px solid #E5E5E5;
width: 200px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px;
}

textarea
{
width: 697px;
height: 253px;
max-width: 697px;
max-height: 253px;
line-height: 18px;
}

input:hover, textarea: hover,
input:focus, textarea:focus
{
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px;
}

.submit input
{
width: 170px;
height: 53px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #ffe13b;
color: black;
font-family: latoblack;
font-size: 16.667px;
}

___________________________________________________________________________________________

Proszę zapoznać się z regulaminem, a szczególnie z fragmentem dotyczącym maksymalnych rozmiarów grafik wklejanych do posta.

Pozdrawiam,

Dimatheus

#2

Strasznie tu namieszałeś. Na twoim miejscu zaczołbym jeszcze raz to pisać. Formularz powinien być w środku sekcji trapez i odziedziczyć pozycjonowanie po nim, a nie na odwrót, pozatym masz tam jakieś klasy w paragrafie “name” a w stylu nic do niej nie ma. Najprościej można zrobić tabelke i do niej powstawiać elementy formularza. Według mnie lepiej przy osadzaniu elementów na stornie byłoby Ci operować na px a nie na % szybciej byś to ogarnoł.

#3

Zacznij od nowa, powoli to pisać. 

 

PS: Oferujecie tworzenie stron WWW, a sami nie potraficie zrobić tego? Proszę…