I have encountered issues as shown in the image when I tried to shift the form on the background image. Issues: All textboxes, dropdown list and button width cannot be changed.
Below codes are css and registration.html page.
Please do help to check the below html and css codes to help me with the issues encountered.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
justify-content: center;
align-items: center;
display: flex;
}
li {
float: left;
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
li a {
display: inline-block;
color: white;
padding: 14px 16px;
text-decoration: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 15px;
font-weight: bold;
letter-spacing: 3px;
}
li a:hover {
background-color: #b0b0b0;
}
#logo {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
/* register.html & feedback.html */
/* The width cannot be changed after moving form to top left */
input[type=text],
select {
width: 21%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
#feedbkdetails {
width: 25%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* The width cannot be changed after moving form to top left */
input[type=number] {
width: 21%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* The width cannot be changed after moving form to top left */
input[type=button] {
width: 20%;
background-color: #111;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover,
input[type=submit]:hover {
background-color: #333;
}
/* Container holding the image and the text */
.container {
position: relative;
text-align: left;
color: black;
}
/* Top left text - trying to put the form to the top left but I think it works only for text
*/
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* CSS code for background image */
.bg-img {
opacity: 0.5;
width: 100%;
height: 100%;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/Ex6.css">
<img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/handstand-pose-1419568-1199014.png" id="logo">
</head>
<body>
<ul>
<li>Home</li>
<li>Register</li>
<li>Feedback</li>
</ul>
<div class="container">
<img src='https://image.shutterstock.com/image-photo/close-man-holding-weight-gym-600w-569605795.jpg' class='bg-img'>
<!-- Encounter issue shifting the form here -->
<div class="top-left">
<h2> Registration </h2>
<form action>
<label for="name">Name :</label> <br>
<input type="text" name="name" value="Enter your name"></input>
<br>
<label for="age">Age :</label> <br>
<input type="number" name="age" min="1"></input>
<br>
<label for="gender">Gender :</label> <br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
<label for="membertype">Types of membership :</label> <br>
<select name="type">
<option value="OneYr">1 Year</option>
<option value="FiveYr" selected>5 Years</option>
<option value="LifeTime">Life Time</option>
</select>
<br>
<br/>
<label for="interests">Interests :</label>
<br>
<input type="checkbox" name="interest" value="Bike"> Travel<br>
<input type="checkbox" name="interest" value="Food"> Food<br>
<input type="checkbox" name="interest" value="Shopping"> Shopping<br>
<input type="checkbox" name="interest" value="Cars"> Cars<br>
</br>
<input type="button" name="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
Do not use img tag for background image, the container/div in which you want to have a background, put the CSS property background-image: url(../img/gym.jpg); in the stylesheet.
An image tag in HTML creates an additional element and to keep the other elements on its top, you will have to do additional styling by making it absolute.
The correct way to have image background set it in CSS.
Only change it and remove image tag from HTML.
.top-left {
background-image:url(../img/gym.jpg);
}
For using img as a background try to use background-image css instead of img tag.
For example like that
.header {
background-image: url("https://image.shutterstock.com/image-photo/close-man-holding-weight-gym-600w-569605795.jpg");
background-color: #000000;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
padding-top: 30px;
padding-bottom: 135px;
min-width: 1200px;
height: 100vh;
}
Related
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed last month.
I have a body background image <body background="img url here"> and I want to add a grayscale effect to it. Tried searching the web but couldn't find a solution. Here is my HTML and CSS
body {
width: 100%;
height: 100%;
text-align: center;
font-family: Helvetica;
color: rgb(255, 255, 255);
font-size: 30px;
}
body {
background-image: url("https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg");
filter: grayscale(100%);
background-repeat: no-repeat;
background-size: cover;
}
label[for="email-label"] {
margin-left: 120px;
margin-right: 120px;
}
label[for="name-label"] {
margin-left: 120px;
margin-right: 120px;
}
label[for="age"] {
margin-left: 350px;
margin-right: 350px;
}
label[for="favorite-time"] {
border-top: 6px solid white;
margin-top: 30px;
padding-top: 20px;
}
input[type=radio] {
font-size: 10px;
}
h1 {
margin: 0 auto;
max-width: 1200px;
text-align: center;
border: 30px solid white;
padding: 30px;
border-radius: 25px;
}
p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: 9px solid white;
margin-left: -200px;
margin-right: -199px;
padding: 30px;
border-radius: 25px;
margin-top: 50px;
margin-bottom: 110px;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
font-size: 25px;
}
select {
margin: 10px 0 0 30;
width: 30%;
min-height: 2em;
font-size: 25px;
}
input,
textarea {
background-color: #3b3b4f;
border: 1px solid #3b3b4f;
color: #ffffff;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
input[type="submit"] {
width: 60%;
margin: 0 auto;
border: 5px solid white;
font-size: 30px;
background-color: #3b3b4f;
min-width: 300px;
border-radius: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Favorite Media Survey</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body background="https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg">
<h1 id="title">Favorite Media Survey</h1>
<p id="description">Thank you for taking the time to share your interests</p>
<form id="survey-form" method="post" action='https://register-demo.freecodecamp.org'>
<fieldset>
<label for="name-label" id="name-label">Name:<input id="name" type="text" name="name-label" placeholder="Bob" required/></label>
<label for="email-label" id="email-label">Email:<input id="email" type="email" name="email-label" placeholder="blank#blank.com" required/></label>
<label for="age" id="number-label">Age:<input id="number" type="number" name="age" min="13" max="120" placeholder="ex.18" required/></label>
</fieldset>
<fieldset>
<label for="tv-movies">Do you like movies or TV shows better?<input type="radio" value="tv-movies" id="tv-movies" name="tv-movies" >Movies</label>
<label for="tv-movies"><input type="radio" value="tv" id="tv-movies" name="tv-movies" >TV</label>
<label for="favorite-media">Do you like books or magazines better?<input type="radio" value="books" id="favorite-media" name="favorite-media">Books</label>
<label for="favorite-media"><input type="radio" value="magazines" id="favorite-media" name="favorite-media">Magazines</label>
<label for="favorite-time">When is your favorite time of the day to interact with media?<input type="checkbox" value="morning" id="Morning" name="Morning">Morning</label>
<input type="checkbox" value="afternoon" id="Afternoon" name="Afternoon">Afternoon</label>
<input type="checkbox" value="night" id="Night" name="Night">Night</label>
</fieldset>
<fieldset>
<label for="genre" id="genre" name="genre">What is your favorite genre?</label>
<select id="dropdown" type="dropdown" name="dropdown">
<option value="0">(select one)</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Romance</option>
<option value="4">Fantasy</option>
<option value="5">Sci-Fi</option>
</select>
</fieldset>
<fieldset>
<label for="favorite-element">What is your favorite and why?
<textarea id="favorite-element" name="favorite-element" rows="3" cols="30" placeholder="I really like movies the best because..."></textarea>
</label>
</fieldset>
<input id="submit" type="submit" value="submit">
<hr></hr>
</input>
</form>
</body>
</html>
I tried adding a filter:grayscale(60%) to the body type selector and nothing happened. Also tried wrapping the background in the body element with a <div> and giving that a class and using a class selector to apply a filter which also did not work. I had a working solution before when I added the image to the HTML using img src="" but when I did things that way I couldn't get my image to layer behind my text.
Delete this body background tag and add in css this:
body {
position: relative;
height:400px; // Added only for presentation purpose
}
body::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url(https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg);
filter: grayscale(100%);
background-size: cover; // Added only for presentation purpose
}
<body>
</body>
This is working snippet :)
I'm trying to make this tribute page and since the box (where the form fields are located) I was making keeps on overlapping the title above, I tried to make the box responsive. However, the background-color disappeared after I've done it, and I don't know how to go from there. This is the HTML code by the way.
<body>
<div id="maintitle-div"><h1 id="maintitle" class="maintitle">atrovska</h1></div>
<div class="box">
<div class="content">
<h1 id="title">💬 Tell us how we're doing! 💬</h1>
<p id="description"> Your feedback matters to us and rest assured we will use this to improve our services even further. </p>
<form id="survey-form">
<label id="name-label">
Name <br> <input type="text" id="name" placeholder="Enter your Name" required> </label><br>
<label id="email-label">
Email <br> <input type="email" id="email" placeholder="Enter your Email" required></label>
<label id="number-label">
<input type="number" id="number" placeholder="Enter your phone number" required max="1" min="5">Number</label>
<p>What services did you avail?</p>
<select name="services" id="dropdown">
<option value="Internet">Internet </option>
<option value="Data">Data</option>
<option value="Post-paid">Post-Paid</option> </select><br>
<p> Please select your service provider.</p>
<input type="radio" name="provider" value="globe">Globe
<input type="radio" name="provider" value="globe">Globe
<input type="radio" name="provider" value="globe">Globe
<p> Please select your service provider.</p>
<input type="checkbox" name="provider" value="globe">Globe
<input type="checkbox" name="provider" value="globe">Globe
<input type="checkbox" name="provider" value="globe">Globe
<textarea></textarea>
<button type="submit" id="submit">Submit</button>
</form>
</div>
</div></body>
And this is the CSS.
#import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root {
--color-darkBlue: rgb(66, 7, 188);
}
body {
background-image: url(https://i.pinimg.com/originals/6d/25/f2/6d25f2bc9f8c59dc9d5fbab6809126f8.jpg);
background-size: cover;
background-attachment: fixed;
margin: 0;
}
#maintitle {
font-family: 'Press Start 2P', cursive;
color: rgb(255, 201, 14);
margin-top: 5px;
font-size: 48px;
margin: 30px 0 30px auto;
text-align: center;
}
.header {
padding: 0 0.625rem;
margin-bottom: 1.875rem;
}
.box {
border-radius: 15px;
position: relative;
width: 50%;
margin: 0 auto;
background-color: white;
}
.box::after {
content: "";
display: block;
padding-bottom; 100%;
width: 100%;
height: 100%;
background-color: white;
}
.content {
position: absolute;
width: 100%;
height: 100%;
background-color: white;
}
#title {
font-family: 'Fredoka One', cursive;
color: var(--color-darkBlue);
margin-top: 5px;
font-size: 24px;
margin-bottom: 2px;
text-align: center;
}
p {
font-family: 'Open Sans', sans-serif;
color: rgb(66, 7, 188);
font-size: 8px;
}
#description {
font-weight: 900;
font-size: 14px;
margin-top: 10px;
}
#survey-form {
margin: 5px 0 5px auto;
}
input {
margin: 6px 0 5px auto;
}
#survey-form {
font-family: 'Open Sans', sans-serif;
color: black;
font-size: 11px;
}
You have a CSS syntax mistake in your code.
.box::after {
content: "";
display: block;
padding-bottom; 100%;
width: 100%;
height: 100%;
background-color: white;
}
Should be:
.box::after {
content: "";
display: block;
padding-bottom: 100%;
width: 100%;
height: 100%;
background-color: white;
}
End then giving .content class to background-color works:
.content {
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
Will paint content background to red.
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 3 years ago.
I've been asked to fix a problem that I don't understand. Can someone be kind enough to have a look at this fiddle?
When shrinking the width of the output pane so that the last question is forced to multi line, the accompanied span .checkmark is no longer round but elliptical.
body {
background-color: white;
color: black;
font-weight: 400;
font-family: telesans_text, Arial, Verdana, Helvetica, sans-serif;
margin: 0px;
}
.header-container {
padding: 1px;
text-align: left;
color: white;
}
.header-txt {
font-size: 15px;
margin: 5px 11px 4px 11px;
display: inline-block;
}
/* Format Question text */
.question-container {
flex: 1 1 auto;
margin: auto;
display: flex;
padding-bottom: 5px;
}
.question-text {
font-size: 17px;
font-weight: 600;
line-height: 22px;
text-align: left;
margin-bottom: 3px;
font-family: telesans_head, Verdana, Arial, Helvetica, sans-serif;
}
/* Format pages */
.question-page {
font-size: 12px;
margin: 10px 10px 10px 10px;
padding-bottom: 10px;
}
/* Question options format */
.option-container {
display: flex;
position: relative;
padding-left: 0px;
margin-bottom: 0px;
cursor: pointer;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.option-container input {
position: absolute;
opacity: 0;
}
.checkmark {
position: relative;
height: 15px;
width: 15px;
background-color: #D3D3D3;
border-radius: 50%;
margin-top: auto;
margin-bottom: auto;
margin-right: 15px;
}
.option-container:hover input~.checkmark {
background-color: #A9A9A9;
}
.option-container:hover {
background-color: #F8F8F8;
}
.option-container input:checked~.checkmark {
background-color: #dd2a30;
}
<div id="survey">
<div class="header-container">
<span class="header-txt">A question for you...</span>
</div>
<div id="question-body" class="modal-body">
<div id="q1" class="question-page">
<div class="question-container">
<span class="question-text">What is your relationship <br> with [brand]?</span>
</div>
<div class="option-container"><span class="checkmark"></span>Not a brand I'm familiar with
<input class="question-option" type="radio" name="q1" value="1">
</div>
<div class="option-container"><span class="checkmark"></span>I'm familiar, but not interested
<input class="question-option" type="radio" name="q1" value="2">
</div>
<div class="option-container"><span class="checkmark"></span>A brand I would consider purchasing
<input class="question-option" type="radio" name="q1" value="3">
</div>
<div class="option-container"><span class="checkmark"></span>My most preferred [product category]
<input class="question-option" type="radio" name="q1" value="4">
</div>
<div class="option-container"><span class="checkmark"></span>I plan to purchase [brand] when next buying [product category]
<input class="question-option" type="radio" name="q1" value="5">
</div>
</div>
</div>
</div>
That's because when the content is more that the space available, by default the flexbox items tries to shrink to the space available - add flex-shrink: 0 to checkmark - see demo below-
body {
background-color: white;
color: black;
font-weight: 400;
font-family: telesans_text, Arial, Verdana, Helvetica, sans-serif;
margin: 0px;
}
.header-container {
padding: 1px;
text-align: left;
color: white;
}
.header-txt {
font-size: 15px;
margin: 5px 11px 4px 11px;
display: inline-block;
}
/* Format Question text */
.question-container {
flex: 1 1 auto;
margin: auto;
display: flex;
padding-bottom: 5px;
}
.question-text {
font-size: 17px;
font-weight: 600;
line-height: 22px;
text-align: left;
margin-bottom: 3px;
font-family: telesans_head, Verdana, Arial, Helvetica, sans-serif;
}
/* Format pages */
.question-page {
font-size: 12px;
margin: 10px 10px 10px 10px;
padding-bottom: 10px;
}
/* Question options format */
.option-container {
display: flex;
position: relative;
padding-left: 0px;
margin-bottom: 0px;
cursor: pointer;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.option-container input {
position: absolute;
opacity: 0;
}
.checkmark {
flex-shrink: 0; /* ADDED */
position: relative;
height: 15px;
width: 15px;
background-color: #D3D3D3;
border-radius: 50%;
margin-top: auto;
margin-bottom: auto;
margin-right: 15px;
}
.option-container:hover input~.checkmark {
background-color: #A9A9A9;
}
.option-container:hover {
background-color: #F8F8F8;
}
.option-container input:checked~.checkmark {
background-color: #dd2a30;
}
<div id="survey">
<div class="header-container">
<span class="header-txt">A question for you...</span>
</div>
<div id="question-body" class="modal-body">
<div id="q1" class="question-page">
<div class="question-container">
<span class="question-text">What is your relationship <br> with [brand]?</span>
</div>
<div class="option-container"><span class="checkmark"></span>Not a brand I'm familiar with
<input class="question-option" type="radio" name="q1" value="1">
</div>
<div class="option-container"><span class="checkmark"></span>I'm familiar, but not interested
<input class="question-option" type="radio" name="q1" value="2">
</div>
<div class="option-container"><span class="checkmark"></span>A brand I would consider purchasing
<input class="question-option" type="radio" name="q1" value="3">
</div>
<div class="option-container"><span class="checkmark"></span>My most preferred [product category]
<input class="question-option" type="radio" name="q1" value="4">
</div>
<div class="option-container"><span class="checkmark"></span>I plan to purchase [brand] when next buying [product category]
<input class="question-option" type="radio" name="q1" value="5">
</div>
</div>
</div>
</div>
I picked a good css/html code for implementation of search box on the web. But I can't move the search box to center. The below css code is about search box.
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search"/>
<input type="button" name="search_button" id="search_button"/>
</form>
</li>
What should I fix the code for aligning the search box?
Thanks.
Try providing text-align: center to your body.
Refer code:
body {
text-align: center;
}
#search {
width: 357px;
margin: 4px auto;
text-align: center;
display: inline-block;
}
#search_text {
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search" />
<input type="button" name="search_button" id="search_button" />
</form>
</li>
If you want to align the text in the center of the textbox than use #nashcheez answer.
If you want to align the searchbox itself to the center of the parent than:
Set the textbox to display block
Give a with to the textbox
Set margin-left to auto
Set margin-right to auto
You may have to set position to relative.
you can try to use:
#search {
width: 357px;
margin-right: auto;
margin-left: auto;
}
if its being overridden, try using:
#search {
width: 357px;
margin-right: auto !important;
margin-left: auto !important;
}
If li#search is all you've got, try this:
#search {
width: 357px;
margin: 4px auto;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search"/>
<input type="button" name="search_button" id="search_button"/>
</form>
</li>
I'm making a form which has little images in them that is either a tick or cross. I want these to appear that they are in the text box so to do this I have added it to the form. This site is a mobile site so I want the form to be centered on what ever sized screen and the images to always be in the same place. My method at the moment feels quite messy and works on small screens unless I actually look at in on the phone then its a mess! So whats the best way to do this? Here was my stab at it
html
<div class="formContainer">
<form action="contact.php" method="post" class="ajax" id="contactForm">
<div class="input">
<input type="text" name="text" placeholder="Name" id="name">
<div class="validation">
<img src="check.svg" class="imageValidation" id="nameImage">
</div>
</div>
<div class="input">
<input type="text" name="email" placeholder="email" id="email">
<div class="validation">
<img src="check.svg" class="imageValidation" id="emailImage">
</div>
</div>
<div class="input">
<select name="subject" id ="subject">
<option value="1">Subject</option>
<option value="Private Hire">Private Hire</option>
<option value="Lost Items">Lost Items</option>
<option value="Work For Us"> Work For Us</option>
<option value="Other">Other</option>
</select>
<div class="validation">
<img src="check.svg" class="imageValidation" id="subjectImage">
</div>
</div>
<div class="input" id="message">
<textarea name="message" placeholder="Your Message"></textarea>
<div class="validation">
<img src="check.svg" class="imageValidation" id="messageImage">
</div>
</div>
<input name="robotest" type="text" id="robotest">
<div class="input">
<input type="submit" value="Submit">
</div>
</form>
<p id="emailConfrimation"> Email Sent </p>
</div>
the css:
.formContainer{
height: 90%;
width: 80%;
margin: 0 auto;
}
form{
width: 100%;
height: 100%;
text-align: center;
}
.input{
width: 100%;
height: 10%;
margin-top: 5%;
}
input{
float: left;
width: 99.9%;
height: 100%;
text-indent: 8%;
background-color: #dedede;
font-family: 'Source Sans Pro', sans-serif;
color: #3a3a3a;
font-size: 1em;
border: none;
-webkit-border-radius:0;
border-radius:0;
}
select{
float: left;
width: 99.9%;
height: 100%;
text-indent: 8%;
background-color: #dedede;
font-family: 'Source Sans Pro', sans-serif;
color: #3a3a3a;
font-size: 1em;
border: none;
-webkit-border-radius:0;
border-radius:0;
}
textarea{
float: left;
width: 98%;
height: 100%;
text-indent: 8%;
background-color: #dedede;
font-family: 'Source Sans Pro', sans-serif;
color: #3a3a3a;
font-size: 1em;
border: none;
-webkit-border-radius:0;
border-radius:0;
resize:none;
}
input[type='submit']{
margin: 0 auto;
display: block;
width: 100%;
height: 100%;
background-color: #bf3737;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius:0;
border-radius:0;
border: none;
color: #ffffff;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.5em;
}
.validation{
float: left;
width: 0.01%;
position: relative;
right: 20%;
top: 0.5em;
}
thanks!
this is the best way to put your div at the center:
#your_div {margin:0 auto;}
but if you want that your div be exactly center horizontally and vertically , you should do this:
#main_div {position:relative}
#main_div #your_div {
position:absolute;
top:50%;
margin-top:-50px; */half of your div height*/
right:50%;
margin-right:-70px; */half of your div width*/
}