Pereiti prie turinio

Keli paprasti klausymai su HTML ir CSS

MrDBVids

Sukūrė MrDBVids
Programuotojų kampas

 Dalintis Sekėjai 0

Rekomenduojami pranešimai

MrDBVids

MrDBVids 42

Sukurta
Sukurta

Sveiki. Yra tokia forma:

 

http://www.part.lt/img/79122b5e52436eaa8962131cabe791d09.png

 

 

Tuo tarpu mano forma atrodo taip:

 

http://www.part.lt/img/178dcec5d356fe918465193948e8d124712.png

 

 

Kaip matot, turiu problemą su viršuje esančiu subTitle How can we help you?. Nesuprantu kai pten tą viršų apskritai sutvarkyti, neišeina man to tarpo panaikinti tarp tarp title ir jo. Tai čia pirma problema, o antra tai ten kur yra Please describe in detail what happened? * ir apačioje toks Note yra ir man reikia padaryti(kaip matot), kad tas tekstas lygiuotusi su viršuje esančiu fieldu. Mano .html failo kodas:

 

<!DOCTYPE HTML>
<html>
<head>
   <title>Support Request Form</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
	/* Structural */
	body{width:500px;margin:0 auto;font-family:Arial,Helvetica,Sans-serif;font-size:12px;}
	div,input,form{margin:0;padding:0;}
	.cb{clear:both;}
	.labels{margin-top:5px;}

	/* Fields */
	#fldFirstName{width:70px;height:23px;}
	#fldLastName{width:130px;height:23px;}
	#fldEmail{width:170px;height:23px;}
	#fldProblem{width:290px;height:23px;}
	.fldPhoneShort{width:40px;height:23px;text-align:center;}
	.fldPhoneLong{width:55px;height:23px;text-align:center;}
	#fldDescribtion{width:290px;height:120px;}	
	.fldSubmit{margin-top:15px;}

	/* Labels */
	#lblFirstName{width:75px;}	
	#lblLastName, #lblFirstName{float:left;color:#aaaaaa;}
	.lblPhoneShort{float:left;margin:0px 20px 0px 10px;color:#aaaaaa;}
	.lblPhoneLong{float:left;margin:0px 25px 0px 10px;color:#aaaaaa;}
	.lblOption{width:13px;height:8px;padding:0;margin-left:18px;vertical-align:top;position: relative;top:-17px;}
	#lblHelper{float:left;color:#aaaaaa;font-style:italic;}

	/* Texts */
	#subTitle{font-size:14px;color:#aaaaaa;margin-top:0px;}
	#title{font-size:20px;height:50px;margin-bottom:0px;padding-top:10px;}	
	#dots{border-bottom:1px dotted rgb(204,204,204);padding-bottom:15px;padding-top:0px;}
	.bold{font-size:13px;height:20px;padding-top:20px;font-weight:bold;}
	.text{font-size:12px;color:#888888;}
	.fieldTitle{margin:30px 0 5px 0px;font-weight:bold;}
	.red{color:red;}	
</style>
</head>
<body>
<div id="title">Support Request Form</div>
<div id="subTitle">How can we help?</div>
<div id="dots"></div>
   <form method="post">
	<div>
		<div class="fieldTitle">Name</div>
		<input type="text" name="fldFirstName" id="fldFirstName"/>
		<input type="text" name="fldLastName" id="fldLastName"/>
	</div>
	<div class="labels">
		<div id="lblFirstName">First</div>
		<div id="lblLastName">Last</div>
		<div class="cb"></div>
	</div>
	<div>
		<div class="fieldTitle">Email</div>
		<input type="text" name="fldEmail" id="fldEmail"/>
	</div>
	<div>
		<div class="fieldTitle">Phone number</div>
		<input type="text" name="fldPhone1" class="fldPhoneShort" /> -
		<input type="text" name="fldPhone2" class="fldPhoneShort" /> -
		<input type="text" name="fldPhone3" class="fldPhoneLong" />
	</div>
	<div class="labels">
		<div class="lblPhoneShort">###</div>
		<div class="lblPhoneLong">###</div>
		<div class="lblPhoneLong">####</div>
		<div class="cb"></div>
	</div>
	<div>
		<div class="fieldTitle">Where did you run into the problem? <span class="red">*</span></div>
		<input type="text" name="fldProblem" id="fldProblem"/>
	</div>
	<div>
	<div>
		<div class="fieldTitle">Please describe in detail what happened? <span class="red">*</span></div>
		<textarea name="fldDescribtion" id="fldDescribtion"></textarea>
	</div>
	<div class="labels">
		<div id="lblHelper">Please be as specific as possible. Basically, tell us what steps we need to take to create the bug, 
		what you expected to happened and what actually happened.</div>
		<div class="cb"></div>
	</div>
	<div class="fldSubmit">
		<input type="submit" name="fldSubmit" value="Submit" />
	</div>
</form>
</body>
</html>

 

Būtų šaunu jei atsirastu, kuris galėtu padėti su šiom problemom. Žinau, kad paprastai viskas, bet nesuprantu aš :unsure:

Nuoroda į pranešimą
Dalintis kituose puslapiuose
TomasAchmedovas

TomasAchmedovas 17

Atrašyta
Atrašyta (redaguota)

1 problema

#title height:50px; per didelis bus greiciausia.

 

Pakeisk i 30px

 

2 problema:

 

#lblHelper{float:left;color:#aaaaaa;font-style:italic;}

 

pakeisk i:

 

#lblHelper{width: 296px;float:left;color:#aaaaaa;font-style:italic;}

gali keist ta width kiek reikia.

 

<!DOCTYPE HTML>
<html>
<head>
   <title>Support Request Form</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <style>
               /* Structural */
               body{width:500px;margin:0 auto;font-family:Arial,Helvetica,Sans-serif;font-size:12px;}
               div,input,form{margin:0;padding:0;}
               .cb{clear:both;}
               .labels{margin-top:5px;}

               /* Fields */
               #fldFirstName{width:70px;height:23px;}
               #fldLastName{width:130px;height:23px;}
               #fldEmail{width:170px;height:23px;}
               #fldProblem{width:290px;height:23px;}
               .fldPhoneShort{width:40px;height:23px;text-align:center;}
               .fldPhoneLong{width:55px;height:23px;text-align:center;}
               #fldDescribtion{width:290px;height:120px;}      
               .fldSubmit{margin-top:15px;}

               /* Labels */
               #lblFirstName{width:75px;}      
               #lblLastName, #lblFirstName{float:left;color:#aaaaaa;}
               .lblPhoneShort{float:left;margin:0px 20px 0px 10px;color:#aaaaaa;}
               .lblPhoneLong{float:left;margin:0px 25px 0px 10px;color:#aaaaaa;}
               .lblOption{width:13px;height:8px;padding:0;margin-left:18px;vertical-align:top;position: relative;top:-17px;}
               #lblHelper{width: 296px;float:left;color:#aaaaaa;font-style:italic;}

               /* Texts */
               #subTitle{font-size:14px;color:#aaaaaa;margin-top:0px;}
               #title{font-size:20px;height:30px;margin-bottom:0px;padding-top:10px;}  
               #dots{border-bottom:1px dotted rgb(204,204,204);padding-bottom:15px;padding-top:0px;}
               .bold{font-size:13px;height:20px;padding-top:20px;font-weight:bold;}
               .text{font-size:12px;color:#888888;}
               .fieldTitle{margin:30px 0 5px 0px;font-weight:bold;}
               .red{color:red;}        
       </style>
</head>
<body>
       <div id="title">Support Request Form</div>
       <div id="subTitle">How can we help?</div>
       <div id="dots"></div>
   <form method="post">
               <div>
                       <div class="fieldTitle">Name</div>
                       <input type="text" name="fldFirstName" id="fldFirstName"/>
                       <input type="text" name="fldLastName" id="fldLastName"/>
               </div>
               <div class="labels">
                       <div id="lblFirstName">First</div>
                       <div id="lblLastName">Last</div>
                       <div class="cb"></div>
               </div>
               <div>
                       <div class="fieldTitle">Email</div>
                       <input type="text" name="fldEmail" id="fldEmail"/>
               </div>
               <div>
                       <div class="fieldTitle">Phone number</div>
                       <input type="text" name="fldPhone1" class="fldPhoneShort" /> -
                       <input type="text" name="fldPhone2" class="fldPhoneShort" /> -
                       <input type="text" name="fldPhone3" class="fldPhoneLong" />
               </div>
               <div class="labels">
                       <div class="lblPhoneShort">###</div>
                       <div class="lblPhoneLong">###</div>
                       <div class="lblPhoneLong">####</div>
                       <div class="cb"></div>
               </div>
               <div>
                       <div class="fieldTitle">Where did you run into the problem? <span class="red">*</span></div>
                       <input type="text" name="fldProblem" id="fldProblem"/>
               </div>
               <div>
               <div>
                       <div class="fieldTitle">Please describe in detail what happened? <span class="red">*</span></div>
                       <textarea name="fldDescribtion" id="fldDescribtion"></textarea>
               </div>
               <div class="labels">
                       <div id="lblHelper">Please be as specific as possible. Basically, tell us what steps we need to take to create the bug, 
                       what you expected to happened and what actually happened.</div>
                       <div class="cb"></div>
               </div>
               <div class="fldSubmit">
                       <input type="submit" name="fldSubmit" value="Submit" />
               </div>
       </form>
</body>
</html>

Redagavo TomasAchmedovas
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 0
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

×
×
  • Pasirinkite naujai kuriamo turinio tipą...