display background color for the page & align texts at center
Question
we have page looking like this : link
we want to display like this :
1)we need to display the text and textfields at the center
2)we need to add the background -color for some part of the page
css
<style type="text/css">
.career-page-box .page-title {
margin: 10px 0 0px 0;
padding: 0;
clear: both;
}
.career-page-box .page-title h1 {
margin: 0;
padding: 0 0 8px 0;
}
.career-page-box .fill-out {
border-bottom: #ddd solid 1px;
padding: 0 0 10px 0;
margin: 0px 0 10px 0;
}
.career-page-box .form-panel {
padding: 0;
}
.career-page-box .form-panel .required {
margin: 10px 0 8px;
}
.career-page-box .form-panel .form-group {
float: left;
clear: both;
width: 49.8%;
}
.career-page-box .form-panel .form-group .form-list li {
float: left;
width: 100%;
}
.career-page-box .form-panel .form-group .form-list li label {
line-height: 30px;
padding-right: 30px;
}
.career-page-box .form-panel .form-group .form-list li label em {
color: #df280a;
margin: 0 0 0 2px;
font-style: normal;
}
.career-page-box .form-panel .form-group .custom-select {
float: left;
width: 100%;
margin: 0 0px 0 0;
background-position: 98% 50%;
}
.career-page-box .form-panel .form-group .custom-select select {
margin-top: 0;
}
.career-page-box .form-panel .buttons-set {
border-top: 0;
}
.career-page-box .form-panel .buttons-set button.button {
float: left !important;
margin-right: 5px;
}
.custom-select {
border: 1px solid #ccc!important;
width: 120px;
height: 30px;
overflow: hidden;
background: #fff url("../images/custom-select-downarrow.png") no-repeat 95% 50%;
}
.arrow-up {
background: transparent url("../images/arrow-up-white.png") no-repeat scroll 0 0;
height: 15px;
width: 25px;
position: absolute;
right: 25px;
top: -15px;
}
.custom-select select {
padding: 5px 8px!important;
width: 100%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=text] {
width: 100%;
max-width: 100%;
}
input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=text] {
height: 32px;
padding: 0 8px;
border: 1px solid #d1d1d1;
background: #FFFFFF;
font-size: 13px;
}
.careercv
{
padding-top: 10px;
}
</style>
html
<div class="career-page-box">
<div class="page-title career-title">
<h1><?php echo $this->__('Career') ?></h1>
</div>
<?php $careerForm=Mage::getSingleton('core/session')->getFormData();?>
<form action="<?php echo mage::getUrl('career/index/save'); ?>" id="carrer_form" method="post" name="carrer_form" enctype='multipart/form-data'>
<div class="fill-out"><?php echo $this->__('Please fill out the following information.') ?></div>
<div class="form-panel">
<div class="inner-panel">
<p class="required"><?php echo $this->__('Required Fields') ?><em>*</em></p>
<div class="form-group">
<ul class="form-list">
<li>
<label for="jobtitle"><?php echo $this->__('How did you hear about us') ?><em>*</em></label>
<div class="custom-select">
<select name="jobtitle" id="jobtitle" class="validate-select form-control required-entry">
<option value="">Please Select</option>
<option value="NewsPaper" <?php if($careerForm['jobtitle']=="NewsPaper"){
?>selected="selected"<?php } ?>>NewsPaper</option>
<option value="onlinsite" <?php if($careerForm['jobtitle']=="onlinsite"){?>selected="selected"<?php } ?>>Online Website</option>
<option value="Friends" <?php if($careerForm['jobtitle']=="Friends"){?>selected="selected"<?php } ?>>Friends</option>
</select>
</div>
</li>
<li>
<label for="jobtitle"><?php echo $this->__('Job Type') ?><em>*</em></label>
<?php $jobs=Mage::getStoreConfig('career/career/job_list');
if($jobs!='')
$jobsselected=explode(",",$jobs);
else
$jobsselected='';
?>
<div class="custom-select">
<select name="job" id="job" class="form-control required-entry">
<option value=""> Please Select </option>
<?php foreach($jobsselected as $jobs): ?>
<option value="<?php echo $jobs ?>"> <?php echo $jobs; ?> </option>
<?php endforeach; ?>
</select>
</div>
</li>
</ul>
</div>
<div class="form-group">
<ul class="form-list">
<li>
<label for="firstname"><?php echo $this->__('First Name') ?><em>*</em></label>
<input name="fname" class="form-control required-entry" size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['fname'];?>"/>
</li>
<li>
<label for="lastname"><?php echo $this->__('Last Name') ?><em>*</em></label>
<input name="lname" class="form-control required-entry" size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['lname'];?>"/>
</li>
</ul>
</div>
<div class="form-group">
<ul class="form-list">
<li>
<label for="emailaddress"><?php echo $this->__('Email address') ?><em>*</em></label>
<input name="email_address" placeholder="<?php echo $this->__('') ?>" class="form-control required-entry validate-email" type="text" value="<?php echo $careerForm['email_address'];?>"/>
</li>
</ul>
</div>
<div class="form-group">
<ul class="form-list">
<li>
<label for="telephonenumber"><?php echo $this->__('Telephone Number') ?><em>*</em></label>
<input name="phone" class="form-control required-entry validate-number" type="text" value="<?php echo $careerForm['phone'];?>" />
</li>
</ul>
</div>
<div class="form-group">
<ul class="form-list">
<li>
<label for="cv"><?php echo $this->__('Upload Your Cv') ?><em>*</em></label>
<input name="cv" class="form-control required-file careercv" type="file" />
</li>
</ul>
</div>
<div class="buttons-set">
<button class="button" title="<?php echo $this->__('Submit Your Cv'); ?>" type="submit"><span><span><?php echo $this->__('Submit Cv') ?></span></span></button>
</div>
</div>
</div>
</form>
<script type="text/javascript">
//<![CDATA[
var carrerForm = new VarienForm('carrer_form', true);
//]]>
</script>
</div>
please help me to find solution.
Thanks in advance
3 answers
solution1
1 ACCPTED 2016-05-31 12:49:42
Replace this style and check it
<style type="text/css">
.career-page-box{
width: 90%;
margin: auto;
background: #fff;
}
.career-page-box .page-title {
margin: 10px 0 0px 0;
padding: 0;
clear: both;
}
.career-page-box .page-title h1 {
margin: 0;
padding: 0 0 8px 0;
text-align:center;
}
.career-page-box .fill-out {
border-bottom: #ddd solid 1px;
padding: 0 0 10px 0;
margin: 0px 0 10px 0;
text-align: center;
}
.career-page-box .form-panel {
padding: 0;
text-align:center;
}
.career-page-box .form-panel .required {
margin: 10px 0 8px;
}
.career-page-box .form-panel .form-group {
clear: both;
width: 49.8%;
margin:auto;
text-align:left;
}
.career-page-box .form-panel .form-group label{
text-align:left !important;
}
.career-page-box .form-panel .form-group .form-list li {
float: left;
width: 100%;
}
.career-page-box .form-panel .form-group .form-list li label {
line-height: 30px;
padding-right: 30px;
}
.career-page-box .form-panel .form-group .form-list li label em {
color: #df280a;
margin: 0 0 0 2px;
font-style: normal;
}
.career-page-box .form-panel .form-group .custom-select {
float: left;
width: 100%;
margin: 0 0px 0 0;
background-position: 98% 50%;
}
.career-page-box .form-panel .form-group .custom-select select {
margin-top: 0;
}
.career-page-box .form-panel .buttons-set {
clear:both;
border-top: 0;
}
.career-page-box .form-panel .buttons-set button.button {
}
.custom-select {
border: 1px solid #ccc!important;
width: 120px;
height: 30px;
overflow: hidden;
background: #fff url("../images/custom-select-downarrow.png") no-repeat 95% 50%;
}
.arrow-up {
background: transparent url("../images/arrow-up-white.png") no-repeat scroll 0 0;
height: 15px;
width: 25px;
position: absolute;
right: 25px;
top: -15px;
}
.custom-select select {
padding: 5px 8px!important;
width: 100%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=text] {
width: 100%;
max-width: 100%;
}
input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=text] {
height: 32px;
padding: 0 8px;
border: 1px solid #d1d1d1;
background: #FFFFFF;
font-size: 13px;
}
.careercv
{
padding-top: 10px;
}
</style>
Replace Code
<div class="career-page-box">
<div class="page-title career-title">
<h1><?php echo $this->__('Career') ?></h1>
</div>
<?php $careerForm=Mage::getSingleton('core/session')->getFormData();?>
<form action="<?php echo mage::getUrl('career/index/save'); ?>" id="carrer_form" method="post" name="carrer_form" enctype='multipart/form-data'>
<div class="fill-out"></div>
<div class="form-panel">
<div class="inner-panel">
<p class="required"><?php echo $this->__('Required Fields') ?><em>*</em></p>
<div class="form-group">
<ul class="form-list">
<li>
<label for="jobtitle"><?php echo $this->__('How did you hear about us') ?><em>*</em></label>
<div class="custom-select">
<select name="jobtitle" id="jobtitle" class="validate-select form-control required-entry">
<option value="">Please Select</option>
<option value="NewsPaper" <?php if($careerForm['jobtitle']=="NewsPaper"){
?>selected="selected"<?php } ?>>NewsPaper</option>
<option value="onlinsite" <?php if($careerForm['jobtitle']=="onlinsite"){?>selected="selected"<?php } ?>>Online Website</option>
<option value="Friends" <?php if($careerForm['jobtitle']=="Friends"){?>selected="selected"<?php } ?>>Friends</option>
</select>
</div>
</li>
<li>
<label for="jobtitle"><?php echo $this->__('Job Type') ?><em>*</em></label>
<?php $jobs=Mage::getStoreConfig('career/career/job_list');
if($jobs!='')
$jobsselected=explode(",",$jobs);
else
$jobsselected='';
?>
<div class="custom-select">
<select name="job" id="job" class="form-control required-entry">
<option value=""> Please Select </option>
<?php foreach($jobsselected as $jobs): ?>
<option value="<?php echo $jobs ?>"> <?php echo $jobs; ?> </option>
<?php endforeach; ?>
</select>
</div>
</li>
</ul>
</div>
<div class="form-group">
<ul class="form-list">
<li>
<label for="firstname"><?php echo $this->__('First Name') ?><em>*</em></label>
<input name="fname" class="form-control required-entry" size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['fname'];?>"/>
</li>
<li>
<label for="lastname"><?php echo $this->__('Last Name') ?><em>*</em></label>
<input name="lname" class="form-control required-entry" size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['lname'];?>"/>
</li>
</ul>
</div>
<div class="form-group">
<ul class="form-list">
<li>
<label for="emailaddress"><?php echo $this->__('Email address') ?><em>*</em></label>
<input name="email_address" placeholder="<?php echo $this->__('') ?>" class="form-control required-entry validate-email" type="text" value="<?php echo $careerForm['email_address'];?>"/>
</li>
</ul>
</div>
<div class="form-group">
<ul class="form-list">
<li>
<label for="telephonenumber"><?php echo $this->__('Telephone Number') ?><em>*</em></label>
<input name="phone" class="form-control required-entry validate-number" type="text" value="<?php echo $careerForm['phone'];?>" />
</li>
</ul>
</div>
<div class="form-group">
<ul class="form-list">
<li>
<label for="cv"><?php echo $this->__('Upload Your Cv') ?><em>*</em></label>
<input name="cv" class="form-control required-file careercv" type="file" />
</li>
</ul>
</div>
<div class="buttons-set">
<button class="button" title="<?php echo $this->__('Submit Your Cv'); ?>" type="submit"><span><span><?php echo $this->__('Submit Cv') ?></span></span></button>
</div>
</div>
</div>
</form>
<script type="text/javascript">
//<![CDATA[
var carrerForm = new VarienForm('carrer_form', true);
//]]>
</script>
</div>
solution2
1 2016-05-31 12:51:07
To start with give background color to main container
.main {
margin: 0 auto;
width: 1000px;
background: #fff;
padding:10px;
}
- Remove the negative margin from breadcrumbs
- For the form give a percentage width and use margin:0px auto
- Add 100% width to input element
- Center heading and do other basic styling
solution3
1 2016-06-03 11:30:46
In order to give Page color at particular section you need to apply the .CSS on div or internal div tag.
just say for the following HTML tag.
<div class="career-page-box">
<div class="page-title career-title">
</div
</div>
If i want to give background color to the particular section of the page having div tag with class as page-title, so i will write the .css code like this:
.career-page-box .page-title{
background: red;
}
// This code is for coloring a particular section of any HTML page by using div tag.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap or css: Center align texts
Texts wont align properly to center
Vertically center-align col text with background color in bootstrap 4.1
Center align text while there are other texts on div
Use background image in css along with white color background in center of page
align text to the center of the page
center align button on page
Center Align Contents Of A Page
page will not align center
align the menu to the center of the page
Related Tags