I'm trying to figure out why the div with "コンシェルジュ" has a different top than the divs that contain "警備" and "洗濯". You'll have to actually run the code snippet to see what I mean but on the first row the first row has a top 3 pixels above the second and third div on that row... I'm at a loss for why. Is this a language thing? How do I make them have the same top, in a natural sense? I don't want to use Javascript to force the tops to be the same, because I'm using the top values already to determine what row a content div is in, so that could become circular.
There is an English version of this where only difference is the content's verbiage and in English (and Mandarin and Korean) and I do not have this problem. It seems to be something unique to Japanese lettering, is there something I have to account for with Japanese?
.DemoQuest {
text-align: center;
font-family: Verlag, Arial;
color: white;
background: black;
}
.DemoQuest .Span {
margin-right: 1%;
margin-left: 2.5%;
text-align: center;
}
.ResponseSet {
margin-left: 2%;
margin-right: 2%;
}
.DemoResp {
display: inline-block;
padding-top: .5%;
padding-bottom: .5%;
width: 32%;
}
.ResponseText {
display: none;
}
input {
display: none;
}
.DemoResp .Wrapper {
text-align: center;
vertical-align: top;
background-color: #C4C4C4;
border-radius: 3px;
color: black;
padding: 8px 8px;
padding-top: 8px;
transition-duration: 0.4s;
font-size: 16px;
vertical-align: middle;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
}
.DemoQuest .DemoResp .Selector .Wrapper {
display: grid;
}
<div id="d2929b66837440708d3db2ed658ca0c6" class="DemoQuest">
<div class="Span">以下、ホテル内でご利用いただいたサービスをお選び下さい</div>
<div class="ResponseSet Below">
<div id="96e3902628074785a3065df70c644566" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_96e3902628074785a3065df70c644566" name="cb_96e3902628074785a3065df70c644566" value="1"><div id="123" class="Wrapper"><div class="ResponseContent">コンシェルジュ</div></div></span>
<span class="ResponseText">コンシェルジュ</span>
</div>
<div id="8d69877355cd4f05a4db3539c2f67fd6" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_8d69877355cd4f05a4db3539c2f67fd6" name="cb_8d69877355cd4f05a4db3539c2f67fd6" value="1"><div id="123" class="Wrapper" for="cb_8d69877355cd4f05a4db3539c2f67fd6"><div class="ResponseContent">警備</div></div></span>
<span class="ResponseText">警備</span>
</div>
<div id="de5a147b403f43568d44169142ae4a98" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_de5a147b403f43568d44169142ae4a98" name="cb_de5a147b403f43568d44169142ae4a98" value="1"><div id="123" class="Wrapper" for="cb_de5a147b403f43568d44169142ae4a98"><div class="ResponseContent">洗濯</div></div></span>
<span class="ResponseText">洗濯</span>
</div>
<div id="346cb8895aa34c4ebf879814f197e866" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_346cb8895aa34c4ebf879814f197e866" name="cb_346cb8895aa34c4ebf879814f197e866" value="1" ><div id="123" class="Wrapper" for="cb_346cb8895aa34c4ebf879814f197e866"><div class="ResponseContent" style="height: 52px; top: 13px;">お土産屋</div></div></span>
<span class="ResponseText">お土産屋</span>
</div>
<div id="6750438a3faf49a8afbbca7c23289a42" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_6750438a3faf49a8afbbca7c23289a42" name="cb_6750438a3faf49a8afbbca7c23289a42" value="1" ><div id="123" class="Wrapper"><div class="ResponseContent">バンニャンツリースパ</div></div></span>
<span class="ResponseText">バンニャンツリースパ</span>
</div>
<div id="fd64fa6d551848d18943f7210633045b" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_fd64fa6d551848d18943f7210633045b" name="cb_fd64fa6d551848d18943f7210633045b" value="1"><div id="123" class="Wrapper" for="cb_fd64fa6d551848d18943f7210633045b"><div class="ResponseContent">フィットネスセンター</div></div></span>
<span class="ResponseText">フィットネスセンター</span>
</div>
</div>
</div>
As me understand, you have to add vertical-align: top to your .DemoResp css to fix this problem.
.DemoResp {
display: inline-block;
padding-top: .5%;
padding-bottom: .5%;
width: 32%;
vertical-align: top;
}
.DemoQuest {
text-align: center;
font-family: Verlag, Arial;
color: white;
background: black;
}
.DemoQuest .Span {
margin-right: 1%;
margin-left: 2.5%;
text-align: center;
}
.ResponseSet {
margin-left: 2%;
margin-right: 2%;
}
.DemoResp {
display: inline-block;
padding-top: .5%;
padding-bottom: .5%;
width: 32%;
}
.ResponseText {
display: none;
}
input {
display: none;
}
.DemoResp .Wrapper {
text-align: center;
vertical-align: top;
background-color: #C4C4C4;
border-radius: 3px;
color: black;
height: 30px; /* <-- this is what i have add*/
padding: 8px 8px;
padding-top: 8px;
transition-duration: 0.4s;
font-size: 15px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
}
.DemoQuest .DemoResp .Selector .Wrapper {
display: grid;
}
<div id="d2929b66837440708d3db2ed658ca0c6" class="DemoQuest">
<div class="Span">以下、ホテル内でご利用いただいたサービスをお選び下さい</div>
<div class="ResponseSet Below">
<div id="96e3902628074785a3065df70c644566" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_96e3902628074785a3065df70c644566" name="cb_96e3902628074785a3065df70c644566" value="1"><div id="123" class="Wrapper"><div class="ResponseContent">コンシェルジュ</div></div></span>
<span class="ResponseText">コンシェルジュ</span>
</div>
<div id="8d69877355cd4f05a4db3539c2f67fd6" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_8d69877355cd4f05a4db3539c2f67fd6" name="cb_8d69877355cd4f05a4db3539c2f67fd6" value="1"><div id="123" class="Wrapper" for="cb_8d69877355cd4f05a4db3539c2f67fd6"><div class="ResponseContent">警備</div></div></span>
<span class="ResponseText">警備</span>
</div>
<div id="de5a147b403f43568d44169142ae4a98" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_de5a147b403f43568d44169142ae4a98" name="cb_de5a147b403f43568d44169142ae4a98" value="1"><div id="123" class="Wrapper" for="cb_de5a147b403f43568d44169142ae4a98"><div class="ResponseContent">洗濯</div></div></span>
<span class="ResponseText">洗濯</span>
</div>
<div id="346cb8895aa34c4ebf879814f197e866" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_346cb8895aa34c4ebf879814f197e866" name="cb_346cb8895aa34c4ebf879814f197e866" value="1" ><div id="123" class="Wrapper" for="cb_346cb8895aa34c4ebf879814f197e866"><div class="ResponseContent" style="height: 52px; top: 13px;">お土産屋</div></div></span>
<span class="ResponseText">お土産屋</span>
</div>
<div id="6750438a3faf49a8afbbca7c23289a42" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_6750438a3faf49a8afbbca7c23289a42" name="cb_6750438a3faf49a8afbbca7c23289a42" value="1" ><div id="123" class="Wrapper"><div class="ResponseContent">バンニャンツリースパ</div></div></span>
<span class="ResponseText">バンニャンツリースパ</span>
</div>
<div id="fd64fa6d551848d18943f7210633045b" class="DemoResp">
<span class="Selector"><input type="checkbox" id="cb_fd64fa6d551848d18943f7210633045b" name="cb_fd64fa6d551848d18943f7210633045b" value="1"><div id="123" class="Wrapper" for="cb_fd64fa6d551848d18943f7210633045b"><div class="ResponseContent">フィットネスセンター</div></div></span>
<span class="ResponseText">フィットネスセンター</span>
</div>
</div>
</div>
Related
I have this page, I'm using fleboxes and I need to the boxes be something like
My code now:
<div class="cardActions">
<h2 style="display:inline">Card Actions | <i class="fas fa-home"></i> </h2> >> eCommerce >> Eletronics
</div>
<div class="filters">
<div class="container column">
<p style="margin-top: 8%; margin-bottom: 5%; margin-left: 4% ;font-weight: bold;"> Multi Range
</p>
<div class="checkBoxes">
<input type="radio" name="multiRange" style="display: inline;" id="radio1">
<label for="radio1">$10</label> <br>
<input type="radio" name="multiRange" id="radio2">
<label for="radio2">$10-$100</label> <br>
<input type="radio" name="multiRange" id="radio3">
<label for="radio3">$100-$500</label> <br>
<input type="radio" name="multiRange" id="radio4">
<label for="radio4">$500</label> <br>
<input type="radio" name="multiRange" id="radio5">
<label for="radio5">All</label>
</div>
<p style="font-weight: bold; margin-top: 10%; margin-left: 4%">
Slider<input type="text" id="amount" readonly style="border:0; font-weight:bold; background-color: #ffab00; margin-left: 35%;">
</p>
<div style="background-color: #091e42; width: 80%; margin-left: 5%; margin-right: 5%; margin-top: 10%; margin-bottom: 10%;"
id="slider-range"></div>
<hr class="solid">
<p style="margin-top: 10%; margin-left: 4% ; margin-bottom: 10%; font-weight: bold;"> Category
</p>
<div class="checkBoxes">
<input type="checkbox" id="check1"> <label for="check1">Teste</label> <br>
<input type="checkbox" id="check2"> <label for="check2">Teste</label> <br>
<input type="checkbox" id="check3"> <label for="check3">Teste</label> <br>
<input type="checkbox" id="check4"> <label for="check4">Teste</label> <br>
<input type="checkbox" id="check5"> <label for="check5">Teste</label> <br>
<input type="checkbox" id="check6"> <label for="check6">Teste</label> <br>
<input type="checkbox" id="check7"> <label for="check7">Teste</label> <br>
<input type="checkbox" id="check8"> <label for="check8">Teste</label> <br>
<input type="checkbox" id="check9"> <label for="check9">Teste</label> <br>
<input type="checkbox" id="check10"> <label for="check10">Teste</label>
</div>
<hr class="solid">
<p style="margin-top: 10%; margin-bottom: 10%; margin-left: 4%; font-weight: bold;">
Brand
</p>
<div class="checkBoxes">
<input type="checkbox" id="check1"> <label for="check1">Teste</label> <br>
<input type="checkbox" id="check2"> <label for="check2">Teste</label> <br>
<input type="checkbox" id="check3"> <label for="check3">Teste</label> <br>
<input type="checkbox" id="check4"> <label for="check4">Teste</label> <br>
<input type="checkbox" id="check5"> <label for="check5">Teste</label> <br>
<input type="checkbox" id="check6"> <label for="check6">Teste</label> <br>
<input type="checkbox" id="check7"> <label for="check7">Teste</label> <br>
<input type="checkbox" id="check8"> <label for="check8">Teste</label> <br>
<input type="checkbox" id="check9"> <label for="check9">Teste</label> <br>
<input type="checkbox" id="check10"> <label for="check10">Teste</label>
</div>
<hr class="solid">
<p style="margin-top: 10%; margin-bottom: 10%; margin-left: 4%; font-weight: bold;">
Rating
</p>
<div class="rating">
<span style="color: white;">☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<div class="rating">
<span style="color: white;">☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<div class="rating">
<span style="color: white;">☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
</div> <!--Fim-->
The css:
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 200px;
height: 100%;
background: #091e42;
padding: 30px 0px;
position: fixed;
}
.wrapper .sidebar h2{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #36b37e;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .sidebar .social_media{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrapper .sidebar .social_media a{
display: block;
width: 40px;
background: #36b37e;
height: 40px;
line-height: 45px;
text-align: center;
margin: 0 5px;
color: #bdb8d7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.wrapper .main_content{
width: 100%;
margin-left: 200px;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
}
.header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
margin-top: 1%;
margin-bottom: 1%;
margin-left: 2%;
margin-right: 2%;
}
.filters{
width: 18%;
height: 88%;
background-color: #ffab00;
display: flex;
flex-wrap: wrap;
margin-left: 1%;
margin-top: 1%;
border-radius: 10px;
}
.cardActions{
margin-left: 2%;
}
.wrapper .main_content .info{
margin: 20px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
#media (max-height: 500px){
.social_media{
display: none !important;
}
}
.topIcons{
margin-right: 2%;
}
.container {
margin: 0 auto;
display: flex;
}
.column {
flex-direction: column;
height: fit-content;
width: 100%;
justify-content: flex-start;
}
input[type="radio"]{
margin-left: 4%;
margin-bottom: 5%;
}
input[type="checkbox"]{
margin-left: 4%;
margin-bottom: 5%;
}
hr.solid {
border-top: 1px solid white;
margin-left: 4%;
margin-right: 4%;
}
/* Products */
.products{
width: 78%;
height: 13%;
background-color: #091e42;
flex-direction: row;
display: block;
margin-left: 50%;
}
/* Rating */
/*
Ratings Stars
(with as little code as possible)
*/
.rating {
unicode-bidi: bidi-override;
direction: rtl;
text-align: center;
color: white;
font-size: x-large;
}
.rating > span {
display: inline-block;
position: relative;
width: 1.1em;
}
.rating > span:hover,
.rating > span:hover ~ span {
color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
left: 0;
color: gold;
}
Right now I cant manage to make this, can someone help me?
I need to create boxes like the red ones in the picture.
I tried everything and still can't make this work.
Is there something i'm missing or making wrong?
All you need to do is, put a sibling to your filter div and make their parent display: flex; one did this, then give the remaining width to your right side red-bordered section. for example, you have give filter width: 18%; margin-left: 1%; which makes it 19% and now you have 81% in hand, so distribute it accordingly in width and margin to right side div. Apply other stylings as per you need.
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 200px;
height: 100%;
background: #091e42;
padding: 30px 0px;
position: fixed;
}
.wrapper .sidebar h2{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #36b37e;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .sidebar .social_media{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrapper .sidebar .social_media a{
display: block;
width: 40px;
background: #36b37e;
height: 40px;
line-height: 45px;
text-align: center;
margin: 0 5px;
color: #bdb8d7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.wrapper .main_content{
width: 100%;
margin-left: 200px;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
}
.header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
margin-top: 1%;
margin-bottom: 1%;
margin-left: 2%;
margin-right: 2%;
}
.filters{
width: 18%;
height: 88%;
background-color: #ffab00;
display: flex;
flex-wrap: wrap;
margin-left: 1%;
margin-top: 1%;
border-radius: 10px;
}
.cardActions{
margin-left: 2%;
}
.wrapper .main_content .info{
margin: 20px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
#media (max-height: 500px){
.social_media{
display: none !important;
}
}
.topIcons{
margin-right: 2%;
}
.container {
margin: 0 auto;
display: flex;
}
.column {
flex-direction: column;
height: fit-content;
width: 100%;
justify-content: flex-start;
}
input[type="radio"]{
margin-left: 4%;
margin-bottom: 5%;
}
input[type="checkbox"]{
margin-left: 4%;
margin-bottom: 5%;
}
hr.solid {
border-top: 1px solid white;
margin-left: 4%;
margin-right: 4%;
}
/* Products */
.atul {
display: flex;
}
.rightSide {
display: flex;
flex-direction: column;
padding: 10px;
border: 1px solid red;
border-radius: 4px;
width: 80%;
margin-left: 1%;
}
.subSection{
min-height: 50px;
height: 100%;
margin-bottom: 20px;
padding: 10px;
border: 1px solid red;
border-radius: 4px;
}
.products{
width: 78%;
height: 13%;
background-color: #091e42;
flex-direction: row;
display: block;
margin-left: 50%;
}
/* Rating */
/*
Ratings Stars
(with as little code as possible)
*/
.rating {
unicode-bidi: bidi-override;
direction: rtl;
text-align: center;
color: white;
font-size: x-large;
}
.rating > span {
display: inline-block;
position: relative;
width: 1.1em;
}
.rating > span:hover,
.rating > span:hover ~ span {
color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
left: 0;
color: gold;
}
<div class="cardActions">
<h2 style="display:inline">Card Actions | <i class="fas fa-home"></i> </h2> >> eCommerce >> Eletronics
</div>
<section class="atul">
<div class="filters">
<div class="container column">
<p style="margin-top: 8%; margin-bottom: 5%; margin-left: 4% ;font-weight: bold;"> Multi Range
</p>
<div class="checkBoxes">
<input type="radio" name="multiRange" style="display: inline;" id="radio1">
<label for="radio1">$10</label> <br>
<input type="radio" name="multiRange" id="radio2">
<label for="radio2">$10-$100</label> <br>
<input type="radio" name="multiRange" id="radio3">
<label for="radio3">$100-$500</label> <br>
<input type="radio" name="multiRange" id="radio4">
<label for="radio4">$500</label> <br>
<input type="radio" name="multiRange" id="radio5">
<label for="radio5">All</label>
</div>
<p style="font-weight: bold; margin-top: 10%; margin-left: 4%">
Slider<input type="text" id="amount" readonly style="border:0; font-weight:bold; background-color: #ffab00; margin-left: 35%;">
</p>
<div style="background-color: #091e42; width: 80%; margin-left: 5%; margin-right: 5%; margin-top: 10%; margin-bottom: 10%;" id="slider-range"></div>
<hr class="solid">
<p style="margin-top: 10%; margin-left: 4% ; margin-bottom: 10%; font-weight: bold;"> Category
</p>
<div class="checkBoxes">
<input type="checkbox" id="check1"> <label for="check1">Teste</label> <br>
<input type="checkbox" id="check2"> <label for="check2">Teste</label> <br>
<input type="checkbox" id="check3"> <label for="check3">Teste</label> <br>
<input type="checkbox" id="check4"> <label for="check4">Teste</label> <br>
<input type="checkbox" id="check5"> <label for="check5">Teste</label> <br>
<input type="checkbox" id="check6"> <label for="check6">Teste</label> <br>
<input type="checkbox" id="check7"> <label for="check7">Teste</label> <br>
<input type="checkbox" id="check8"> <label for="check8">Teste</label> <br>
<input type="checkbox" id="check9"> <label for="check9">Teste</label> <br>
<input type="checkbox" id="check10"> <label for="check10">Teste</label>
</div>
<hr class="solid">
<p style="margin-top: 10%; margin-bottom: 10%; margin-left: 4%; font-weight: bold;">
Brand
</p>
<div class="checkBoxes">
<input type="checkbox" id="check1"> <label for="check1">Teste</label> <br>
<input type="checkbox" id="check2"> <label for="check2">Teste</label> <br>
<input type="checkbox" id="check3"> <label for="check3">Teste</label> <br>
<input type="checkbox" id="check4"> <label for="check4">Teste</label> <br>
<input type="checkbox" id="check5"> <label for="check5">Teste</label> <br>
<input type="checkbox" id="check6"> <label for="check6">Teste</label> <br>
<input type="checkbox" id="check7"> <label for="check7">Teste</label> <br>
<input type="checkbox" id="check8"> <label for="check8">Teste</label> <br>
<input type="checkbox" id="check9"> <label for="check9">Teste</label> <br>
<input type="checkbox" id="check10"> <label for="check10">Teste</label>
</div>
<hr class="solid">
<p style="margin-top: 10%; margin-bottom: 10%; margin-left: 4%; font-weight: bold;">
Rating
</p>
<div class="rating">
<span style="color: white;">☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<div class="rating">
<span style="color: white;">☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<div class="rating">
<span style="color: white;">☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
</div>
</div>
<div class="rightSide">
<div class="subSection"></div>
<div class="subSection"></div>
<div class="subSection"></div>
<div class="subSection"></div>
</div>
</section>
<div id='listpage'> //here it should be flex-direction:column
<div class='list'>
<div></div>
<div></div>
<div></div>
</div>
<div class='list'>
<div></div>
<div></div>
<div></div>
</div>
</div>
I'm Having trouble with my radio buttons, I don't want them to entirely fill the circle. Any word of advice. Here is link to what is happening on Codepen.
https://codepen.io/winterlion/pen/LYYJwZP
.item .text {
position: absolute;
display: inline-block;
cursor: pointer;
}
.item .text:before {
content: '';
display: inline-block;
vertical-align: text-bottom;
width: 18px;
height: 18px;
margin-right: 5px;
border-radius: 50%;
border: 2px solid #235b96;
outline: none;
box-shadow: 0 0 5px 0px gray inset;
}
.item input[type="radio"] {
display: none;
}
.item input[type="radio"]:checked+label .text:before {
content: '';
color: #235b96;
background-color: #479623;
}
<div class="item">
<input type="radio" id="r1" name="group1" value="trial1" />
<label for="r1" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Radio Buttons</h1>
<hr class="split-hr">
<br>
<span class="text"></span>
</label>
</div>
<div class="item">
<input type="radio" id="r2" name="group1" value="trial2" />
<label for="r2" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Buttons</h1>
<span class="text"></span>
</label>
</div>
If I understood your question right, you just want to move styles related to a green dot to an ::after pseudo element that must be a bit smaller than ::before.
.item .text {
position: absolute;
display: inline-block;
cursor: pointer;
}
.item .text::before,
.item .text::after {
content: '';
display: inline-block;
margin-right: 5px;
border-radius: 50%;
}
.item .text::before {
width: 18px;
height: 18px;
border: 2px solid #235b96;
box-shadow: 0 0 5px 0px gray inset;
}
.item input[type="radio"]:checked + label .text::after {
width: 12px;
height: 12px;
position: absolute;
left: 5px;
top: 5px;
}
.item input[type="radio"] {
display: none;
}
.item input[type="radio"]:checked + label .text:after {
color: #235b96;
background-color: #479623;
}
<div class="item">
<input type="radio" id="r1" name="group1" value="trial1" />
<label for="r1" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Radio Buttons</h1>
<hr class="split-hr">
<br>
<span class="text"></span>
</label>
</div>
<div class="item">
<input type="radio" id="r2" name="group1" value="trial2" />
<label for="r2" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Buttons</h1>
<span class="text"></span>
</label>
</div>
My image separator covers the whole separator container on my first 2 html. But it doesn't work on the third one. On the third html there are 8 div rows and in each row there are 3 div columns. Some selectors are not found on the given css because i use it for 4 htmls
/*----------------REMINDERS------------------*/
/*Standard rule: Styles and layout of a webpage
should look like itself until window reaches 992px*/
/* To test responsiveness:
> On browser: press f12 to see dev tools
> click on the second icon to toggle responsive layout
> set width to 992px and leave the height to blank to get the max height of current window
(You can also choose desired device to test with.
Just click the dropdown beside current window width)
*/
/*Now on 991px, the design and layout should change to mobile view*/
/*Read more about "CSS Media Queries" to control styles on specific window sizes*/
/*------------------------------------------*/
/*Reset all styles of elements*/
*{
margin: 0;
padding: 0;
}
/*Observe this container on sections*/
.main-container {
width: 80%; /*This will always get the 80% of the body*/
margin: auto; /*To center element*/
}
/*Navigation*/
nav {
font-size: 0;
background-color: #ffdead;
position: fixed; /*Navigation will stay on top even on scroll*/
width: 100%;
box-shadow: -1px -8px 9px 9px; /*Shadow under navigation, this gives illusion that this element float*/
/*The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.*/
z-index:2; /*This will force other elements to stay on lower stack (higher numbers will do)*/
}
nav ul a li {
/*tdisplay: inline-block;o position li horizontally
(if this cause problems, you may use "vertical-align: top;" so it will stay at the same vertical position )*/
display: inline-block;
/*vertical-align: top;*/
padding: 10px;
transition: all .5s; /*animate on hover*/
}
nav ul a li:hover {
color: maroon;
}
nav ul a {
font-family: Garamond;
font-size: 20px;
font-weight: bolder;
color: maroon;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
}
li.active {
border-bottom: 5px solid maroon;
color: black;
}
/*Banner*/
.banner-container {
background-image: url("../images/banner.jpg");
background-size: cover; /*This will cover the whole container even on window resize*/
background-repeat: no-repeat;
background-attachment: fixed; /*To create parallax effect*/
background-position: bottom;
height: 370px;
}
/*Welcome*/
.welcome-container {
font-size: 35px;
padding-top: 70px;
text-align: center;
}
.welcome-container h1 {
letter-spacing: 3px; /*to adjust letter spacing*/
border-bottom: 2px solid #ffdead;
color: maroon;
padding-bottom: 20px;
font-size: 30px;
/*Set texts to uppercase*/
text-transform: uppercase; /*Always rely to set text-transform on styles and not directly to HTML*/
}
.welcome-container p {
margin-top: 20px;
color: maroon;
padding: 15px;
font-size: 18px;
}
/*Articles*/
.articles {
font-size: 0;
padding-top: 200px;
}
.articles h1 {
letter-spacing: 3px;
text-transform: uppercase;
border-bottom: 2px solid #e59866;
color: maroon;
padding-bottom: 20px;
margin-bottom: 20px;
font-size: 30px;
text-align: center;
}
.article-item-container {
width: 33.33%; /*To get 1/3 of the .main-container*/
margin-top: 20px;
display: inline-block;
vertical-align: top;
}
.article-box {
background: #ffdead;
border-radius: 5px;
width: 90%; /*Get 90% width from 33.33%*/
margin: auto;
transition: all .325s; /*Animate on hover*/
}
.article-box:hover {
background: #f0b27a;
color: maroon;
}
/* ".article-content a" (child element of ".article-box") will
change color whenever mouse hovers on ".article-box" (parent element of ".article-content a") */
.article-box:hover .article-content a {
color: maroon;
}
.article-title {
font-size: 20px;
text-transform: uppercase;
text-align: center;
padding-top: 20px;
letter-spacing: 3px;
}
.article-content {
font-size: 13px;
text-align: center;
padding: 20px 5px;
}
.article-content a {
font-size: 12px;
margin-left: 5px;
color: gray;
text-decoration: none;
font-style: italic;
transition: all .325s;
}
div.row.column.text {
text-align: left;
background-color: maroon;
color: darkgray;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.row .column input[type=text] {
background-color: #212121;
border: none;
color: white;
padding: 1px 5px;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 10px;
width: 86px;
height: 35px;
}
div input[type=button] {
background-color: #7b241c;
border: none;
color: white;
padding: 1px 5px;
text-align: center;
text-decoration: none;
font-size: 1px;
width: 85px;
height: 30px;
position: relative;
}
h6 {
text-align: left;
text-transform: uppercase;
font-family: Verdana;
font-size: 10px;
color: maroon;
}
h5 {
font-size: 14px;
font-family: Garamond;
color: black;
text-align: auto;
text-transform: uppercase;
}
h3 {
padding-top: 3px;
text-align: center;
font-size: 15px;
margin-left: 5px;
color: maroon;
text-decoration: none;
font-family: Georgia;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
.row{
display: flex;
padding-top: 20px;
}
.column {
flex: 33.33%;
padding: 5px;
margin:auto;
}
/*Image Separator*/
.separator-container {
margin-top: 40px;
background-image: url("../images/background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Same effect on banner*/
background-position: center;
height: 400px;
}
/*Set dark overlay on separator*/
.overlay {
background-color: ;
opacity: .8; /*To adjust tranparency, this only accept values from .1 to 1*/
width: 100%; /*Get full width of container ".separator-container" */
height: 100%; /*Get full height of container ".separator-container" */
}
/*Contact*/
.contact-container {
font-size: 0px;
margin-top: 40px;
}
.contact-container h1 {
font-size: 30px;
text-transform: uppercase;
color: maroon;
letter-spacing: 3px;
}
.contact-container form {
margin-top: 20px;
}
.contact-field {
width: 33.33%; /*Get 1/3 of .main-container*/
display: inline-block;
vertical-align: top;
}
.contact-field input {
width: 90%; /*Get 90% from 1/3 set of its container ".contact-field" */
padding: 10px;
border: 3px solid #ffdead;
color: black;
/*Try to remove this style "outline: none;" and click on the input*/
/*You should see a color blue outline*/
outline: none; /*use this to remove blue outline*/
margin-bottom: 10px;
transition: all .325s;
}
/* ":focus" executes when user clicks on an input*/
.contact-field input:focus {
border: 3px solid #f0b27a;
color: maroon;
}
.contact-field-full {
width: 100%;
}
.contact-field-full input {
float: right; /*Set to right of container ".contact-field-full"*/
margin-right: 12px; /*Adjust to align to the Message input*/
width: 20%; /*Always get 20% of container ".contact-field-full" */
padding: 10px;
margin-bottom: 10px;
outline: none;
border: none;
transition: all .325s;
cursor: pointer; /*To get a hand cursor*/
background-color: #ffdead;
}
.contact-field-full input:hover {
background: #f0b27a;
color: maroon;
}
<!DOCTYPE html>
<html>
<head>
<title>Shawn Mendes </title>
<!-- Call external CSS file -->
<link rel="stylesheet" type="text/css" href="css/blog.css">
<link rel="stylesheet" type="text/css" href="css/style-media-queries.css">
<!-- Meta tag viewport helps browser window to render webpages for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<!-- Always put title on anchor tags and don't leave blank hrefs -->
<a href="index.html" title="Home">
<li>Home</li>
</a>
<a href="about.html" title="Music">
<li>Music</li>
</a>
<a href="blog.html" title="Tour">
<li class="active">Tour</li>
</a>
<a href="register.html" title="Video">
<li>Video</li>
</a>
</ul>
</nav>
<section class="banner-container">
</section>
<div class="main-container">
<section class="welcome-container">
<h1>ON TOUR</h1>
</section>
<div class="row">
<div class="column">
<input type="text" name="MAR 7" value="MAR 7">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 8" value="MAR 8">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 10" value="MAR 10">
</div>
<div class="column">
<div class="caption">
<h6>ANTWERPS SPORTPALEIS</h6>
<h5>ANTWERP, BELGIUM</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 11" value="MAR 11">
</div>
<div class="column">
<div class="caption">
<h6>MERCEDES-BENZ ARENA</h6>
<h5>BERLIN-FRIEDRICHSHAIN, GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 13" value="MAR 13">
</div>
<div class="column">
<div class="caption">
<h6>OSLO SPEKTRUM ARENA</h6>
<h5>OSLO, NORWAY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 15" value="MAR 15">
</div>
<div class="column">
<div class="caption">
<h6>ERICSSON GLOBE</h6>
<h5>STOCKHOLM, SWEDEN</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 16" value="MAR 16">
</div>
<div class="column">
<div class="caption">
<h6>ROYAL ARENA</h6>
<h5>COPENHAGEN, DENMARK</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 18" value="MAR 18">
</div>
<div class="column">
<div class="caption">
<h6>LANXESS ARENA</h6>
<h5>KOLN,GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<section class="separator-container">
<div class="overlay"></div>
</section>
<div class="main-container">
<section class="contact-container">
<h1>Get Updates</h1>
<form method="GET" action="#">
<div class="contact-field">
<input type="text" name="full-name" placeholder="Email Address" required/>
</div>
<div class="contact-field">
<input type="text" name="email-address" placeholder="Postal Code" required/>
</div>
<div class="contact-field">
<input type="text" name="message" placeholder="Country" required/>
</div>
<div class="contact-field-full">
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
<h3>By submitting this form, you agree to our privacy policy </h3>
<h3> Disclaimer: The owner of this website does not own any of its images and contents. Credits to the rigtful owner. </h3>
</section>
</div>
</body>
</html>
First off let me say, I don't do a whole lot of front end design so please excuse all my inline code etc...
I've built these check boxes to be able to include the image when clicked. I understand it's not inside the parent class but i'm a bit confused at this point on how to move forward. Since it doesn't have a parent class it just looks for the whole web page as it's parent class i presume.
Fairly simple, i think; when i minimize my screen my label positioning removes itself from the boxes and floats off. I'll attach screen shots for more clarity.
I've tried to put a few of them in divs with some success but i'm not 100% sure the right way of doing this and that's why i'm here. I've tried some relative positioning as well.
<div class="interests">
<div class="subHeader">Interests:</div>
<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';
font-size: 18px !important;
text-transform: uppercase;
color: #FFF;
padding-top: 20px;
display: inline-block; z-index: 5; position:absolute; left: 465px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">SKATE</div></label>
<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';
font-size: 18px !important;
text-transform: uppercase;
color: #FFF;
padding-top: 20px;
display: inline-block; z-index: 5; position:absolute; left: 685px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">SURF</div></label>
<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';
font-size: 18px !important;
text-transform: uppercase;
color: #FFF;
padding-top: 20px;
display: inline-block; z-index: 5; position:absolute; left: 906px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">SNOW</div></label>
<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';
font-size: 18px !important;
text-transform: uppercase;
color: #FFF;
padding-top: 20px;
display: inline-block; z-index: 5; position:absolute; left: 465px; top: 1300px;"><div style="position:relative;left:10px; bottom: 8px;"> WOMEN</div></label>
<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';
font-size: 18px !important;
text-transform: uppercase;
color: #FFF;
padding-top: 20px;
display: inline-block; z-index: 5; position:absolute; left: 685px; top: 1300px;"><div style="position:relative;left:10px; bottom: 8px;"> MUSIC/ART </div></label>
<label style="position: relative; top: 90px;">
<input type="checkbox" name="CheckBox.A address.Sk" style="z-index: 1;position: relative; top:4px;">Skate<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width: 205px;">
</label>
<input type="hidden" name="CheckBox.A address.Sk" value="off">
<label style="position: relative; left:140px; top: 90px;">
<input type="checkbox" name="CheckBox.A address.Su" style="z-index: 1;position: relative; top:4px;">Surf<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width: 205px;">
</label>
<input type="hidden" name="CheckBox.A address.Su" value="off">
<label style="position: relative; left:290px; top: 90px;">
<input type="checkbox" name="CheckBox.A address.Sn" style="z-index: 1;position: relative; top:4px;">Snow<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;">
</label>
<input type="hidden" name="CheckBox.A address.Sn" value="off">
<br><br><br><br><br><br><br><br><br><br><br><br>
<label style="position:relative; top: 60px;">
<input type="checkbox" name="CheckBox.A address.Wo" style="z-index: 1;position: relative; top:4px;">Women<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;">
</label>
<input type="hidden" name="CheckBox.A address.Wo" value="off">
<label style="position:relative; left: 130px; top: 60px;">
<input type="checkbox" name="CheckBox.A address.Mu" style="z-index: 1;position: relative; top:4px;">Music<img src="https://stuff/Images/music_thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;">
</label><input type="hidden" name="CheckBox.A address.Mu " value="off">
<label><input type="checkbox" name="CheckBox.A address.Subscribe"></label>
<div style="position:relative; left: 50px; bottom: 33px;">Subscribe</div>
<input type="hidden" name="CheckBox.A address.Subscribe" value="off">
<input type="submit" id="submit" value="Sign Up" style="width: 280px;
height: 45px;
display: block !important;
outline-style: none !important;
outline-width: 0px !important;
color: #fff !important;
font-weight: normal !important;
font-family: 'itc_avant_garde_gothic_ltbold';
text-transform: uppercase;
text-decoration: none;
text-align: center;
border: 1px solid #434242;
background-color: #434242;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#434242), to(#2f2e2e));
background-image: -webkit-linear-gradient(top, #434242, #2f2e2e);
background-image: -moz-linear-gradient(top, #434242, #2f2e2e);
background-image: -ms-linear-gradient(top, #434242, #2f2e2e);
background-image: -o-linear-gradient(top, #434242, #2f2e2e);
-moz-box-shadow: 0 0 1px #bbb;
-webkit-box-shadow: 0 0 1px #bbb;
box-shadow: 0 0 1px #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
vertical-align: middle;
padding: 10px 0;
line-height: 1em;
cursor: pointer;
line-height: 18px;
font-size: 18px;
margin: 40px 0;">
</div>
Any help would be greatly appreciated. Thank you. Screen shots below.
Labels are floating off when i minimize :
Works fine when full screen :
I commented with a few bad practices and falsehoods on another answer, so I really had to make a quick example myself, this is one way to do it with flexbox (there are a lot of solutions to this problem, this is a good one if you don't have to support obsolete browsers):
Example: https://jsfiddle.net/um6fm744/1/
CSS:
* { box-sizing: border-box; margin: 0; padding: 0; }
.interests {
display: flex;
flex-wrap: wrap;
}
.sub-header {
margin: 0 0 24px;
width: 100%;
}
.interest {
align-items: flex-end;
background-color: green;
display: flex;
margin: 0 12px 24px 0;
min-height: 160px;
width: 160px;
}
.interest-info {
background-color: black;
display: flex;
justity-content: space-between;
width: 100%;
}
.interest-checkbox {
height: 30px;
width: 30px;
}
.interest-label {
color: white;
font-family: sans-serif;
flex: 1;
height: 30px;
line-height: 30px;
margin-left: 12px;
}
HTML
<div class="interests">
<h1 class="sub-header">Interests:</h1>
<div class="interest">
<div class="interest-info">
<input class="interest-checkbox" type="checkbox" />
<label class="interest-label">SKATE</label>
</div>
</div>
<div class="interest">
<div class="interest-info">
<input class="interest-checkbox" type="checkbox" />
<label class="interest-label">SNOW</label>
</div>
</div>
<div class="interest">
<div class="interest-info">
<input class="interest-checkbox" type="checkbox" />
<label class="interest-label">WOMEN</label>
</div>
</div>
<div class="interest">
<div class="interest-info">
<input class="interest-checkbox" type="checkbox" />
<label class="interest-label">SURF</label>
</div>
</div>
<div class="interest">
<div class="interest-info">
<input class="interest-checkbox" type="checkbox" />
<label class="interest-label">MUSIC/ART</label>
</div>
</div>
</div>
Please don't use inline styling.
I would tackle it more like this: http://codepen.io/anon/pen/VeEXEv
HTML:
<ul class="items">
<li class="item1">
<button class="add-button">+</button>
<span class="description">box 1</span>
</li>
<li class="item2">
<button class="add-button">+</button>
<span class="description">box 2</span>
</li>
<li class="item3">
<button class="add-button">+</button>
<span class="description">box 3</span>
</li>
<li class="item2">
<button class="add-button">+</button>
<span class="description">box 2</span>
</li>
<li class="item3">
<button class="add-button">+</button>
<span class="description">box 3</span>
</li>
<li class="item1">
<button class="add-button">+</button>
<span class="description">box 1</span>
</li>
</ul>
CSS:
.items > li {
list-style: none;
float: left;
height: 20px;
width: 100px;
margin: 10px;
border: 1px #000 solid;
position: relative;
padding-top: 80px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.items .description {
background: rgba(0,0,0,0.8);
height: 20px;
width: 80px;
color: #fff;
display: block;
float: right;
text-align: center;
}
.items .add-button {
width: 20px;
height: 20px;
border: none;
background-color: #666;
color: #fff;
}
.item1 {
background-image: url(https://pbs.twimg.com/profile_images/586137164188004352/wTK4hjbl.jpg);
}
.item2 {
background-image: url(https://pbs.twimg.com/profile_images/3276050019/f1d244a9f3254f30176922985c761d28.png);
}
.item3 {
background-image: url(https://people.rit.edu/~bmd6715/230/exercises/images/cat.png);
}
I have a textarea message box with 2 rows and 20 columns. I want to keep the label for this box - 'Message' exactly in center outside textarea. What css properties should I use to align it ? I used the following method but it is not helping in my case.
CSS:
.headerImage {
width: 100%;
text-align: center;
}
.footer {
width: 100%;
text-align: center;
border: 0;
}
.page {
margin-top: 42px;
padding: 10px;
width: 866px;
text-align:left;
margin-left: auto;
margin-right: auto;
border: 1px solid #C0C0C0;
border-top: 0px;
margin-bottom: 10px;
}
.main {
margin: 10px;
border-style: groove;
padding: 20px;
}
.borderhead {
z-index: 10;
position: relative;
top:-32px;
left: 2px;
background: white;
}
.commonText {
font-family: arial;
font-size: 11px;
color: black;
text-align: left;
line-height: 16px;
}
.mandatoryStar {
color: red;
padding-right: 5px;
font-size: 12px;
}
.padTxtbox {
padding-left: 5px;
font-family: arial;
padding-bottom: 5px;
text-align: left;
color: black;
font-size: 11px;
display:inline;
position: relative;
}
.contactPad {
margin-left: 300px;
position: absolute;
display: inline;
font-family: arial;
font-size: 11px;
color: black;
text-align: left;
line-height: 16px;
}
.txtBox {
font-family: arial;
font-size: 11px;
width: 150px;
}
.errormsg {
font-family: arial;
font-size: 11px;
color: red;
}
.suggest {
padding-left: 10px;
font-family: arial;
font-size: 11px;
padding-bottom: 4px;
vertical-align: middle;
display: inline-block;
}
.multitxtboxLarge {
width: 420px;
font-family: arial;
font-size: 11px;
height: 80px;
color: black;
}
.cancel {
vertical-align: top;
padding-left: 100px;
}
.textarea {
vertical-align:middle;
display: inline-block;
}
HTML:
<div class ="pa">
<br>
<div class="col-md-6 col-md-offset-2">
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li class="active">Suggestions</li>
<li>Contact</li>
<li>Login/Register</li>
<li>Account</li>
<li>Journals</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
<div class="page">
<div class ="main">
<span class="borderhead">Contact Us</span>
<form name="form1" method="post" action="contact.php" id="form1">
<div id="commonText" class="commonText">
<div style="margin-left: 80px">
<table>
<tr>
<td class="commonText"><b>Mail</b></td>
<td class="contactPad"><b>Phone</b> 800-237-6999</td>
</tr>
<tr>
<td class="commonText">8789 San Jose Blvd #305,Mail,</td>
<td class="contactPad"><b>Fax</b> 800-647-1356</td>
</tr>
<tr>
<td class="commonText">Jacksonville, FL 32217</td>
<td class="contactPad">Submit form below.</td>
</tr>
</table>
</div>
All fields that have (<span class="mandatoryStar">*</span>) are mandatory fields.
<br>
<br>
<div style="padding-left: 46px;padding-bottom: 7px">
<span class="mandatoryStar">*</span>Name
<div class="padTxtbox">
<input name="txtName" type="text" id="txtName" class="txtBox" />
<span id="reqName" class="errormsg" style="color:Red;display:none;"></span>
</div>
</div>
<div style="padding-bottom: 8px">
<span class="mandatoryStar">*</span>E-mail Address
<div class="padTxtbox">
<input name="txtEmail" type="text" id="txtEmail" class="txtBox" />
<span id="reqEmail" class="errormsg" style="color:Red;display:none;"></span>
</div>
</div>
<div style="padding-left: 52px;padding-bottom: 6px"> Phone
<div class="padTxtbox">
<input name="txtPhone" type="text" maxlength="14" id="txtPhone" class="txtBox" />
<span id="regPhone" style="color:Red;display:none;"></span>
</div>
</div>
<div style="padding-bottom: 6px;padding-left: 80px">If you would like someone to contact you by phone, please provide the area code
and phone number to be used between 8:00 AM and 5:00 PM EST, Monday through Friday.</div>
<div class="suggest">
<span class="mandatoryStar">*</span> Message
<div class="padTxtbox">
<textarea name="txtMessage" rows="2" cols="20" id="txtMessage" class="multitxtboxLarge"></textarea>
<span id="reqMessage" class="errormsg" style="color:Red;display:none;"></span>
</div>
</div>
<br>
<div style="padding-left: 90px;padding-top: 6px">
<input type="image" name="imbSubmit" id="imbSubmit" src="images/submit.gif" alt="Submit" onclick="contactSubmit()"/>
<img alt="Cancel" src="images/cancel.gif" style="cursor:hand" onclick="ClearFormData()" class ="cancel"/>
</div>
</div>
</form>
</div>
Here is an example of how to do this :
<form>
<label for="textarea">Textarea:</label>
<textarea cols="50" id="title" name="title" rows="4"></textarea>
</form>
And css property :
label, textarea{
display:inline-block;
vertical-align:middle;
}
well you have to add this to your css
textarea{
display:inline-block;
vertical-align:middle;
}
vertical-align:top; or vertical-align:bottom;
and that's all, i hope i helped you :-D