I have three form elements which I want to position next to each other.
form.left
{
width:200px;
height:450px;
background-color:#000000;
padding:10px 40px;
}
form.right
{
width:200px;
height:450px;
background-color:#000000;
padding:10px 40px;
}
form.center
{
width:200px;
height:450px;
background-color:#000000;
padding:10px 40px;
}
Is it possible to position them next to each other horizontally and if it is what kind of positioning should I use? The elements should be 20px (the padding) above the container border.
This is the code for my container in which the forms should fit in:
#container
{
width:1010px;
margin:0 auto;
background:#999999;
border-radius:14px;
padding:20px;
border:3px #43b2e6;
border-style:groove;
}
you can do this by two ways:
1st Way
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="left">
Port side text...
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
Middle column text...
</div>
<div id="footer">
Footer text...
</div>
</body>
And here's the CSS code:
body { margin: 0px; padding: 0px; }
div#header { clear: both; height: 50px; background-color: aqua; padding: 1px; }
div#left { float: left; width: 150px; background-color: red; }
div#right { float: right; width: 150px; background-color: green; }
div#middle { padding: 0px 160px 5px 160px; margin: 0px; background-color: silver;}
div#footer { clear: both; background-color: yellow; }
2nd Way
<div id="container">
<div class="leftside" style="float: left;">Left Stuff</div>
<div class="middleside" style="float: left;">Middle Stuff</div>
<div class="rightside" style="float: left;">Right Stuff</div>
<br style="clear: left;" />
</div>
use below css:
.leftside
{
width:200px;
height:450px;
background-color:#000000;
padding:10px 40px;
}
.middleside
{
width:200px;
height:450px;
background-color:#000000;
padding:10px 40px;
}
.rightside
{
width:200px;
height:450px;
background-color:#000000;
padding:10px 40px;
}
#container
{
width:1010px;
margin:0 auto;
background:#999999;
border-radius:14px;
padding:20px;
border:3px #43b2e6;
border-style:groove;
}
If you have just 3 form fields which you are trying to align side by side, use the following code:
<table style="font-family: Calibri; font-size: small">
<tr height="15" style="height:11.25pt">
<td height="15" style="height:11.25pt;width:42pt" width="56" class="style3">
Label 1</td>
<td style="width:42pt" width="56">
<input id="Text1" type="text" class="style2" /></td>
<td style="width:42pt" width="56" class="style3">
Label 2</td>
<td style="width:42pt" width="56">
<input id="Text2" type="text" class="style2" /></td>
<td style="width:42pt" width="56" class="style3">
Label 3</td>
<td style="width:42pt" width="56">
<input id="Text3" type="text" class="style2" /></td>
</tr>
</table>
Related
The blue table data entry won't reside its width. Is there a new html5 way to be able to achieve this feat? The row should be the same width as the photo above it.
<div class="template" style="text-align:center">
<table width="100%" and height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 align="center">
<tr>
<td width='100%' height='100%' bgcolor='#f2f3f4'>
<div style="text-align: center;">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</div>
</td>
</tr>
<!-- Background photo -->
<TABLE width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center">
<TR>
<TD WIDTH="997" HEIGHT="326"
background="https://image.ibb.co/dO1HfQ/dog3edit.jpg" style="background-
image:url(https://image.ibb.co/dO1HfQ/dog3edit.jpg); background-repeat:
no-repeat;">
<!-- <b>WELCOME TO ROVER! </b> -->
<FONT class="titletext" color="white" align="center" style="width: 800px;
font-size: 50px;"><b>WELCOME TO ROVER!</b></FONT><br><br>
<FONT class="subtitletext" color="white" align="center" style="width:
100px;
font-size: 30px;">Ready to get started?</FONT><br><br><br>
<a href="#"><img src="https://image.ibb.co/nvbiLQ/button.png"
alt="Button" border="0"></a>
</TD>
</TR>
<tr>
<td width="80%" bgcolor="#blue" style="width:80%">
</td>
</tr>
</TABLE>
</table>
</div>
article {
width: 100%;
}
#banner {
background: url("https://image.ibb.co/dO1HfQ/dog3edit.jpg") no-repeat no-repeat;
padding: 25px 0;
}
h1 {
font-size: 50px;
margin-bottom: 0;
}
h1, p {
color: white;
width: 100%;
text-align: center;
}
p {
font-size: 30px;
}
button {
width: 200px;
background: #00c55c;
border: none;
padding: 12px 24px;
color: white;
font-size: 24px;
border-radius: 6px;
display: block;
margin: 0 auto;
clear: both;
}
#logo {
background: #f2f3f4;
}
#logo img {
display: block;
margin: 0 auto;
clear: both;
}
<article>
<section id="logo">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</section>
<section id="banner">
<h1>Welcome to Rover!</h1>
<p>Ready to get started?</p>
<button>Search Sitters</button>
</section>
</article>
I'd do something like this. No table for layout. If it has to be inline, just put a <style></style> tag above the HTML block.
For the background color of the button i used the following website.
https://flatuicolors.com/
I also made everything separated into css and html so you could see. No inline CSS. This is the proper way to use tables, and headers.
Use a <div> tag for the headers as it automatically pushes things to a new line after it. No need for the break tag. The break tag is rarely used in design anymore.
Also i made sure that your separator line is blue.
I believe there are better ways of accomplishing this WITHOUT tables, however you said you needed this in table form, so here ya go!
table {
width: 80%;
border: none;
text-align: center;
margin: 0 auto;
color: white;
}
.background {
background: url('https://image.ibb.co/dO1HfQ/dog3edit.jpg');
}
.titletext {
font-size: 50px;
}
.subtitletext {
font-size: 30px;
}
button {
margin: 10px 0;
width: 50%;
border-radius: 15px;
height: 100px;
background: #27ae60;
border: 1px solid rgba(255,255,255,0.8);
font-size: 20px;
color: white;
}
button:hover {
background-color: #2ecc71;
}
.seperator {
width: 80%;
background: blue;
}
<TABLE>
<TR class="background">
<TD>
<div class="titletext">WELCOME TO ROVER!</div>
<div class="subtitletext">Ready to get started?</div>
<button>Search Sitters</button>
</TD>
</TR>
<tr>
<td class="seperator""></td>
</tr>
</TABLE>
You are using inline css,Try this:
<TABLE style="width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"";>
Basically, I have a navigation bar in my website. In the centre of the nav bar, I want my website's name centred. This was easy of course, but now I want my website's logo positioned to the left of it. Float: left does not work, as this simply puts the logo on the far left of the nav bar.
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
}
#name {
text-align: center;
position: relative;
}
#top-left {
position: relative;
float: left;
border: 1px solid black;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name">champion</h1>
</div>
</body>
</html>
You can do this trick:
<table style="background-color:Gray; width:100%;" >
<tr>
<td style="text-align:right; width:45%">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
</td>
<td style="text-align:left; width:30%"">
<h1 id="name">champion</h1>
</td>
<td style="text-align:right; width:25%;">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
</td>
</tr>
<tr style="text-align:right;">
<td colspan="3">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
</td>
</tr>
</table>
I have it running here where the float: left appears to be working. I'm guessing there may be something I'm missing. Could you put a jsfiddle or show a live example by chance.
Here's what I see
You can do something like this. It uses :before to attach the logo to the heading text: http://codepen.io/pageaffairs/pen/bchLo
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
text-align: center;
}
#name {
line-height: 56px;
position: absolute;
width: 100%;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
h1 span {
position: relative;
display: inline-block;
padding: 0 20px;
}
h1 span:before {
content: "";
width: 109px;
height: 56px;
background: url(http://www.webmasterworld.com/gfx/logo.png);
position: absolute;
top: 0;
right: 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name"><span>champion</span></h1>
</div>
</body>
</html>
I would like my "feild labels" to be aligned in the center of their corresponding text fields. I have tried many different ways, and to get it centered on the page, I used tables. I am currently using "display: inline-block;" and "vertical-align: middle;" with no success.
Image Link
My HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>DNA Translator</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<script></script>
</head>
<body>
<div>
<form>
<table valign="center" id="table1">
<tr>
<td class="labels">DNA:</td>
<td class="spacer"></td>
<td><input type="text" name="dna" placeholder="DNA"></td>
</tr>
<tr>
<td class="labels">mRNA:</td>
<td class="spacer"></td>
<td><input type="text" name="mrna" placeholder="mRNA"></td>
</tr>
<tr>
<td class="labels">tRNA:</td>
<td class="spacer"></td>
<td><input type="text" name="trna" placeholder="tRNA"></td>
</tr>
<tr>
<td class="labels">Amino Acids:</td>
<td class="spacer"></td>
<td><input type="text" name="aminoAcids" placeholder="Amino Acids"></td>
</tr>
<tr>
<td></td>
<td class="spacer"></td>
<td class="button"><button id="button_translate" type="button">Tanslate</button>
<button id="button_clear" type="button">Clear</button></td>
</tr>
</table>
<!--<div id="text">
<p>DNA: </p><input type="text" name="dna" placeholder="DNA"><br>
<p>mRNA: </p><input type="text" name="mrna" placeholder="mRNA"><br>
<p>tRNA: </p><input type="text" name="trna" placeholder="tRNA"><br>
<p>Amino Acids: </p><input type="text" name="aminoAcids" placeholder="Amino Acids"><br>
</div>
<div>
<button id="button_translate" type="button">Tanslate</button>
<button id="button_clear" type="button">Clear</button>
</div>-->
</form>
</div>
</body>
</html>
My CSS (as you can see I've tried a lot of things):
div.container {
width:98%;
margin:1%;
}
table#table1 {
margin-left:auto;
margin-right:auto;
/*width:530px;*/
}
td {
height:20px;
}
td.button {
height:40px;
}
td.labels {
width:89px;
display: inline-block;
text-align:right;
vertical-align: middle;
}
td.spacer {
width:15px;
}
#button_translate
{
opacity: 0.7;
display: inline-block;
height:35px;
width:200px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 15px auto;
}
#button_clear
{
opacity: 0.7;
display: inline-block;
height:35px;
width:200px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 15px auto;
}
input[type="text"]
{
width: 390px;
display:/*block;*/ inline-block;
vertical-align:middle;
height:20px;
padding:4px 6px;
margin-bottom:20px;
font-size:14px;
line-height:20px;
color:#555;
vertical-align:middle;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
background-color:#fff;
border:1px solid #ccc;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s
}
#text
{
width: 450px ;
margin-top; 800px;
margin-left: auto ;
margin-right: auto ;
}
You can add padding to your .labels css property, in your case, around 6px should do it!
td.labels {
width: 89px;
display: inline-block;
text-align: right;
padding-top: 6px;
vertical-align: middle;
}
Also, you have way too many elements for something that could be so simple:
DEMO: http://jsfiddle.net/shannonhochkins/d4rLD/2/
The html file is
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patients Detailed Information Page</title>
<link href="test.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
<div id="detailed_div_image">
</div>
<div id="detailed_div_basicinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Basic Info</strong></div>
<div>
<table id="detailed_table_basicinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Birthday</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div id="detailed_div_contactinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Contact Info</strong></div>
<div>
<table id="detailed_table_contactinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Address</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="detailed_div_reminding">
<textarea id="detailed_reminding"></textarea>
<input type="button" class="button" value="update"></input>
</div>
</div>
</body>
</html>
and this is my css file:
body{
margin:0;
padding:0;
}
#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}
#detailed_fistpart {
margin-top: 10px;
}
#detailed_image {
width: 200px;
height: 200px;
}
#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.detailed_div_captain {
font-size: 20px;
height: 40px;
}
#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
.detailed_table_td {
border-bottom: 1px solid #efefef;
}
#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#detailed_div_reminding {
width: 900px;
}
#detailed_reminding {
width: 700px;
height: 70px;
}
.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}
And when I use firebug (the extension), I can see that it is the div with id=detailed_div_reminding includes the div with id=detailed_div_basicinfo and div with id=detailed_div_contactinfo rather than the div with id=detailed_fistpart.
One problem is that if you add magin-top: 20px to #detailed_div_reminding, it doesn't produces margin with #detailed_fistpart
Why?
hi there u need to add this line
<div style="clear:both"></div>
before this line of code <div id="detailed_div_reminding">
Did you mean that you are not getting the margin on top of your last section? It is because you have floats present and and you need to clear them for subsequent section.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patients Detailed Information Page</title>
<link href="test.css" rel="stylesheet" />
<style>
body{
margin:0;
padding:0;
}
#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}
#detailed_fistpart {
margin-top: 10px;
}
#detailed_image {
width: 200px;
height: 200px;
}
#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.detailed_div_captain {
font-size: 20px;
height: 40px;
}
#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
.detailed_table_td {
border-bottom: 1px solid #efefef;
}
#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#detailed_div_reminding {
width: 900px;
margin-top:20px;
}
#detailed_reminding {
width: 700px;
height: 70px;
}
.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
<div id="detailed_div_image">
</div>
<div id="detailed_div_basicinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Basic Info</strong></div>
<div>
<table id="detailed_table_basicinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Birthday</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div id="detailed_div_contactinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Contact Info</strong></div>
<div>
<table id="detailed_table_contactinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Address</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div style="clear:both" ></div>
<div id="detailed_div_reminding">
<textarea id="detailed_reminding"></textarea>
<input type="button" class="button" value="update"></input>
</div>
</div>
</body>
</html>
I currently have two divs that are within another div, one is a table with a list of items that is updated by using a textbox that is positioned next to it, I am trying to position the textbox in the bottom right corner, I have tried floating/positioning and it doesn't seem to have any real effect on it, the first image is how it currently is, the second image is how I would like it to be.
ASP.NET code:
<asp:Content ID="Content1" ContentPlaceHolderID="PrimaryContentPlaceHolder" runat="Server">
<%--<div style="margin-bottom: 20px; width: 300px;">--%>
<table class="Grid" style="width:300px;float:left; margin-right:10px;" >
<tr>
<th>
Banned Domains
</th>
<td runat="server" id="bannedDomains">
</td>
</tr>
</table>
<%-- </div>--%>
<div style="position:relative; bottom:0px;">
<asp:TextBox ID="bannedDomainText" runat="server" Rows="5" TextMode="SingleLine"
Width="150px" Height="19px" />
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" style="padding: 2px 5px 2px 5px;" PostBackUrl="~/admin/bespoke/Green-FreeShipping.aspx"
Text="Add to List" />
</div>
</asp:Content>
css:
#Content table
{
border-collapse: collapse;
}
#Content table.Grid
{
width: 100%;
clear: both;
margin: 12px 0 12px 0;
}
#Content table.Grid th, #Content table.Grid td
{
background-color: White;
border-top: 1px solid #cccccc;
padding: 2px 6px 2px 6px;
}
#Content table.Grid th
{
background-color: #f5f5f5;
}
#Content table tr:hover td
{
background: #f9f9f9;
}
Here you go, use it like this
Demo
CSS
.Grid {
border: 1px solid #ff0000;
height: 400px;
width:300px;
position: relative;
}
div.wrapper {
position: relative;
display: inline-block;
}
textarea {
position: absolute;
bottom: 0;
right: -200px;
}
HTML
<div class="wrapper">
<table class="Grid">
<tr>
<th>
Banned Domains
</th>
<td runat="server" id="bannedDomains"></td>
</tr>
</table>
<textarea></textarea>
</div>
here's one way to do it: http://jsfiddle.net/5DjM9/
<div class="div1">LEFT</div>
<div class="div2"><div>RIGHT</div></div>
.div1 {
width:200px;
height:200px;
background:#ccc;
float:left;
margin-right:10px;
}
.div2 {
width:200px;
height:200px;
background:#ccc;
float:left;
position:relative;
}
.div2 div {
width:200px;
position:absolute;
bottom:0;
background:red;
}
demo : http://jsfiddle.net/nobuts/WzUjr/
<div class="big_box">
<div class="cols"><div id="table">div/table</div></div>
<div class="cols"><div id="textbox">div/textbox</div></div>
<br style="clear:both">
</div>
.big_box{
background:red;
color:#000;
height:250px;
padding:5px;
}
.cols{
height:240px;
float:left;
margin:5px;
position:relative;
}
#table{
background:#ff9900;
height:100%;
width:250px;
}
#textbox{
background:#ff9900;
bottom:0px;
height:30px;
top:auto;
position:absolute;
width:100px;
}
the problem is that the float:left on the <table> element is "stuck" the solution is:
add a <div style="clear:both;"></div> right after the <table> ( it can be empty ).
remove float from table and play with position.
hope it helped :-)