p {
font-size: 150%;
}
body {
background-image: url("images/gg.jpg");
background-repeat: repeat;
}
.rTable {
display: block;
margin-top: 100px;
margin-bottom: 200px;
margin-right: 200px;
margin-left: 450px;
}
.rTableHeading,
.rTableBody,
.rTableFoot,
.rTableRow {
clear: both;
}
.rTableHead,
.rTableFoot {
background-color: white;
font-weight: bold;
}
.rTableHead {
background-color: white;
border: 1px solid #999999;
float: left;
height: 17px;
overflow: hidden;
padding: 3px 1.8%;
width: 36%;
}
.rTable:after {
display: table-cell;
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.rTableHeads {
background-color: white;
border: 1px solid #999999;
float: left;
height: 20px;
padding: 3px 1.8%;
width: 55%;
}
.rTableCell {
background-color: white;
border: 1px solid #999999;
float: left;
height: 17px;
overflow: hidden;
padding: 3px 1.8%;
width: 15%;
}
.rTableCells {
background-color: white;
border: 1px solid #999999;
float: left;
height: 60px;
overflow: hidden;
padding: 3px 1.8%;
width: 15%;
}
.rTableHea {
background-color: white;
border: 1px solid #999999;
float: left;
height: 60px;
overflow: hidden;
padding: 3px 1.8%;
width: 36%;
}
.rTables {
background-color: white;
border: 1px solid #999999;
float: left;
height: 50px;
overflow: hidden;
padding: 3px 1.8%;
width: 15%;
}
<!DOCTYPE html>
<html>
<head>
<title>hey contact </title>
</head>
<body>
<p style="text-align: center">
index
about
media
contact
</p>
<div class="rTable">
<div class="rTableRow">
<form>
<div class="rTableHeads" align="center"><strong>Contact me</strong></div>
</div>
<div class="rTableRow">
<div class="rTableCell"> <label for="Name">Name:</label></div>
<!--label
is to lable name -->
<div class="rTableHead">
<input type="Name" class="form-control" id="name" placeholder="Enter
name" name="name">
</div>
<!--placeholder let the enter name comment come out -->
</div>
<div class="rTableRow">
<div class="rTableCell"><label for="Email">Email_address:</label>
</div>
<div class="rTableHead">
<input type="email" class="form-control" id="email" placeholder="Enter
email" email="email">
</div>
</div>
<div class="rTableRow">
<div class="rTableCell">Subject :
</div>
<div class="rTableHead"> <select name="subject">
<option value="webt">Web Design</option>
<option value="programming">programming</option>
<option value="data">Data management</option>
<option value="math">Math</option>
<option value="MPU">MPU</option>
</select>
</div>
</div>
<div class="rTableRow">
<div class="rTableCells">Message :
</div>
<div class="rTableHea">
<textarea name="comment" rows="5" cols="30">
</textarea>
</div>
</div>
<div class="rTables" align="center"> </div>
<!--<div class="rTableHeads" align="center"><strong>Contact me</strong>
</div> -->
</form>
</div>
</body>
</html>
I want to make a row after the message row , but when I want to make a row it won't let me make the row. Not sure why. Can anyone help me ??
Here is my result :
Why cannot I create a row, but it moves to beside the message part? Can anyone tell me why I cannot enter another row under the message row ?
Add clear:both; to the .rTables class.
Option 2:
You can put rTables class inside the rTableRow div like so:
<div class="rTableRow">
<div class="rTables" align="center"> </div>
</div>
Also, if you want to make a table, please use the html table structure, it will help you a lot.
Related
Trying to figure out how to align some buttons to some input fields and it's tricky as hell. I couldn't figure it out.
I've found a lot of things online:
Align button to input with float?
Align button with input forms with labels
Make form button/text field same height in all browsers?
I know I will get a lot of minuses but I just can't get my head around this and I need help.
I've lost a whole day modifying values and I have no clue on how to position things in CSS. I can't understand it.
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: block;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
display: grid;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<div id="logo"><img url="logo.png"></div>
<div class="big-box">
<div class="box-head">
<div class="title">
<h1>Configuration Page</h1>
</div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class="textbox">
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id="button" type="submit" value="Enter">
<div class="textbox">
<input type="number" placeholder="Brightness" name="getBrightness" value="">
</div>
<input id="button" type="submit" value="Enter">
</form>
</div>
EDIT: This is how I've fixed it:
I've changed from class to ID: #textbox;
I've put #textbox and #button inside div: #box-box;
I've added display: flex; to #box-box and display: grid; to
both #textbox and #button.
Added margin-left: 25px; to #button;
Here is the result.
Thanks #Flavio Caruso for the inspiration.
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url">
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
#logo {
width: 94%;
height: 50px;
background: url(logo.png) left no-repeat;
background-size:contain;
margin: 30px auto;
}
**#box-box {
display:flex;
}**
#textbox {
**display: grid;**
width: 70%;
overflow: hidden;
font-size: 20px;
padding 10px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
#textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
**display: grid;**
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 10px 0;
**margin-left: 25px;**
margin-top: 30px;
}
There is a few changes you have to do, you must insert the input button inside the div class 'textbox' and add a display:flex, then you ajust the css from button to inline-block and float right.
like that:
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: flex;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
margin: 5px 5px;
}
#button {
display: inline-block;
float: right;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
<input id ="button" type="submit" value="Enter">
</div>
<div class = "textbox" >
<input type="number" placeholder="Brightness" name="getBrightness" value="">
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
Extra margin from a paragraph tag is forcing a button downwards. I am trying to understand why.
Here's one answer I tried looking to find an answer from : is it a bug? margins of P element go outside the containig div, however the answer quotes "collapsing margins" but I don't understand why that would be a correct answer, as margins don't seem to be collapsing in this case but expanding.
I understand the problem can be fixed by giving the paragraph tag a margin of 0, but I want to know why the margin is bleeding, and (if is due to margin collapse), a more verbose explanation from the other answer..
.body {
height: 100%;
}
.error {
color: red;
}
#chatbox {
width: 500px;
height: 500px;
background-color: #93ff95;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 350px;
background-color: white;
padding: 5px;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: none;
}
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<span class="error">Invalid Username</span>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
There isn't a problem with the margin of the p-tag.
Your #messagesArea height is too high. You can fix it by decreasing it to height: 338px; as shown in the example below:
.body {
height: 100%;
}
.error {
color: red;
}
#chatbox {
width: 500px;
height: 500px;
background-color: #93ff95;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 338px;
background-color: white;
padding: 5px;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: none;
}
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<span class="error">Invalid Username</span>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
The "login the enter chat" button is supposed to fit inside the messageBox div, but is (visually) way bigger than messageBox. I even made padding and margin 0 but it did not change anything.
What is the culprit here (besides myself)?
#chatbox {
width: 500px;
height: 500px;
background-color: lime;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 350px;
background-color: white;
padding: 5px;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: 0;
}
<h1>Chat with Customer Service</h1>
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
The p element inside your #messagesArea has a margin values.
The #messagesArea has padding.
Remove these two and you are done :)
#messagesArea {
padding: 0;
}
#messagesArea p {
margin: 0;
}
Here is a working example:
#chatbox {
width: 500px;
height: 500px;
background-color: lime;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 350px;
background-color: white;
padding: 0;
}
#messagesArea p {
margin: 0;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: 0;
}
<h1>Chat with Customer Service</h1>
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
Note - if you do need these margin/padding values - make sure you set the container (#chatbox) with the correct height value. In your case - it should be 512px - it will include the padding of the #messageArea and the border of the #messageBox).
Why can't I put icon after the radio button ?
Where am I wrong ? I also would like to put three radio buttons horizontally. How can i make this ? It should look like this http://imgur.com/3FbbAql
JS Fiddle : http://jsfiddle.net/5urfzLg3/
#visa:after {
content: '';
display: block;
width: 32px;
height: 28px;
background: url('img/https://upload.wikimedia.org/wikipedia/commons/1/13/Farm-Fresh_visa.png'); }
Replaced Elements(img,input,area,etc.) cannot have :before or :after(Learn more from this SO answer).
To make them horizontal, just display them inline-block:
.box input[type="radio"]{
display:inline-block;
}
I think this is what you want !! Welcome in advance :)
body {
background-image: url('img/formBackground.jpg');
background-repeat: no-repeat;
}
#wrapper {
width: 420px;
height: 900px;
margin: 20 auto;
}
h2 {
color: white;
font-family: Verdana;
font-size: 18px;
padding: 5px;
margin-top: 5px;
margin-bottom: 0px;
}
.box {
padding: 10px;
margin: 5px;
margin-bottom: 2px;
margin-top: 2px;
border: 1px solid rgb(210, 210, 210);
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.2);
}
.box span {
display: inline-block;
width: 100px;
height: 18px;
}
.box input {
width: 210px;
margin: 0 auto;
padding: 4px;
}
.box textarea {
width: 210px;
height: 130px;
max-width: 210px;
}
#specific {
height: 100px;
vertical-align: top;
padding-top: 5px;
padding-left: 5px;
}
::-webkit-input-placeholder {
color: grey;
}
:-moz-placeholder {
/* Firefox 18- */
color: grey;
}
::-moz-placeholder {
/* Firefox 19+ */
color: grey;
}
:-ms-input-placeholder {
color: grey;
}
#visa:after {
content: '';
display: block;
width: 32px;
height: 28px;
background: url('img/Farm-Fresh_visa.png');
}
.box.cards {
clear: both;
display: table;
}
.box.cards span {
float: left;
}
#cards {
float: left;
clear: none;
}
label {
float: left;
clear: none;
display: block;
padding: 0px 1em 0 0;
}
input[type=radio],
input.radio {
float: left;
clear: none;
margin: 3px 3px 0 2px;
width: auto;
}
<body>
<div id="wrapper">
<h2>Step 1: Your details</h2>
<div class="box">
<span>User</span>
<input type="text" name="username" placeholder="First and last name">
</div>
<div class="box">
<span>Email</span>
<input type="email" name="email" placeholder="example#domain.com">
</div>
<div class="box">
<span>Phone</span>
<input type="text" name="phone" placeholder="eg. +44750000000">
</div>
<h2>Step 1: Delivery adress</h2>
<div class="box">
<span id="specific">Adress</span>
<textarea></textarea>
</div>
<div class="box">
<span>Post Code</span>
<input type="text" name="post-code">
</div>
<div class="box">
<span>Country</span>
<input type="text" name="country">
</div>
<h2>Step 1: Card details</h2>
<div class="box cards">
<span>Card type</span>
<div id="cards">
<input type="radio" name="visa" id="visa">
<label for="visa">visa</label>
<input type="radio" name="AmEx" id="AmEx">
<label for="AmEx">AmEx</label>
<input type="radio" name="mastercard" id="mastercard">
<label for="mastercard">mastercard</label>
</div>
</div>
</div>
</body>
I can't figure out how to get a gap between
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
and
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
How would I go about doing it. I've tried using margin/padding without any luck?
HTML
<div class="bt fbCenter">
<div class="fb">
<div class="info">
<p>Event Starts:</p>
<p>25th December 2014 19:00</p>
</div>
<div class="info">
<p>Event Ends:</p>
<p>25th December 2014 21:00</p>
</div>
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
</div>
</div>
CSS
.bt input {
border: 1px solid #ccc;
color: rgb(60, 60, 60);
display: block;
width: 70%;
padding: 1em;
text-align: left;
margin-bottom: 2.5em;
}
.bt button {
width: 100%;
padding: 1.5em;
background-color: #1f1f1f;
color: #fff;
border: 0;
}
.bt button:hover {
background-color: #818181;
cursor:pointer;
}
.fbCenter {
text-align: center;
}
.bt .fb {
border: 1px solid #818181;
padding: 2em;
color: #585858;
display: inline-block;
text-align: left;
width: 75%;
}
.fb .info {
width: 100%;
margin-bottom: 1em;
}
.fb p {
float: left;
}
.fb p:nth-of-type(even) {
width: 80%;
}
.fb p:nth-of-type(odd) {
width: 20%;
}
.fb p.last {
width: 100%;
font-weight: 100;
}
Fiddle here.
Be aware of margin collapsing and float collapsing.
Add a marging to the top of the from and clear the floats in the info divs
.fb form{
margin-top:2em;}
.fb .info {
width: 100%;
margin-bottom: 1em;
clear:both;
}
.fb form{
margin-top:5em;}
.bt input {
border: 1px solid #ccc;
color: rgb(60, 60, 60);
display: block;
width: 70%;
padding: 1em;
text-align: left;
margin-bottom: 2.5em;
}
.bt button {
width: 100%;
padding: 1.5em;
background-color: #1f1f1f;
color: #fff;
border: 0;
}
.bt button:hover {
background-color: #818181;
cursor:pointer;
}
.fbCenter {
text-align: center;
}
.bt .fb {
border: 1px solid #818181;
padding: 2em;
color: #585858;
display: inline-block;
text-align: left;
width: 75%;
}
.fb .info {
width: 100%;
margin-bottom: 1em;
clear:both;
}
.fb p {
float: left;
}
.fb p:nth-of-type(even) {
width: 80%;
}
.fb p:nth-of-type(odd) {
width: 20%;
}
.fb p.last {
width: 100%;
font-weight: 100;
}
<div class="bt fbCenter">
<div class="fb">
<div class="info">
<p>Event Starts:</p>
<p>25th December 2014 19:00</p>
</div>
<div class="info">
<p>Event Ends:</p>
<p>25th December 2014 21:00</p>
</div>
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
</div>
</div>
Note that the margin on the top of the form needs to be bigger than the margin on the bottom of the .info class. This is due to Margin Collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing & http://www.sitepoint.com/web-foundations/collapsing-margins/)
You should probably also become familiar with Clearfix, how it works, why and when it is needed.
I'm not a fan of float so here as an alterate version that utilises display:table, display:table-row and display:table-cell
You could create another class to insert between both of them like this example http://jsfiddle.net/2kkep4qs/8/
HTML
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
<div class="bt-space"></div>
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
CSS New class
.bt-space{padding:25px;}
you can do <hr> and color it white, or
you could always add an empty div between div and form:
<div class="info">
</div>