I am currently learning HTML and CSS. My problem is: I have a button and a search bar with the search bar currently below the button. I have tried different solutions but to no avail. What should I do so that the button and the search bar are beside each other
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Sample Dashboard</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
p.pos_right {
position: relative;
left: 20px;
}
img {
display: inline-block;
z-index:-1;
}
#mine{
display: inline;
}
</style>
</head>
<body>
<div style="text-align:center;">
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>
<div class = "mine" align ="center">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>
</body>
</html>
use .mine not #mine (which is for ID.)
give display:inline-block for childer of mine
.mine>button,.mine>table{
display: inline-block;float:left;
}
table, th, td {
border: 1px solid black;
}
p.pos_right {
position: relative;
left: 20px;
}
img {
display: inline-block;
z-index:-1;
}
.mine>button,.mine>table{
display: inline-block;float:left;
}
refer below code snippet.
<div style="text-align:center;">
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>
<div class = "mine" align ="center">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>
One of many ways to achieve this would be to put the button in its own
<td>
tag inside the row of the table. I.e.
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
</td>
...
See https://jsfiddle.net/orndorffgrant/189judf0/
.
The reason that there was a line break is that there is an implicit line break before and after every table.
Related
How do I prevent the div overflow that appears at the top.
I do not want to set static dimensions either.
See it here http://jsfiddle.net/tok5zf35/1/ or below
.panel_white_black {
border:7px solid #56575a;
filter:alpha(opacity=70);
background-color:#56575a;
}
.round_all {
-webkit-border-radius:4px;
-khtml-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.round_top {
-webkit-border-radius:4px 4px 0px 0px;
-khtml-border-radius:4px 4px 0px 0px;
-moz-border-radius:4px 4px 0px 0px;
border-radius:4px 4px 0px 0px;
}
<div class="panel_white_black round_all" Width="200px">
<table width="100%" style="border-collapse:collapse; padding:0;" cellpadding="0">
<tr>
<td>
<div style="background: #353639; padding:7px; float:left; width:100%;" class="round_top">
<div style="float: left;"> <font color="white">{dialog title}</font>
</div>
<div style="float:right;"> <font color="white">{X}</font>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="background: #FFFFFF; padding:7px;">{data here}</div>
</td>
</tr>
</table>
</div>
Use box-sizing attribute:
.round_top {
box-sizing:border-box;
}
Corrected fiddle.
There's a good explanation on how this works here on CSS-tricks.com. Essentially it boils down in this case to that your width:100% now means 100% including my own borders instead of the default just my content, which caused the overflow.
If you are not aware of appending your code with yet another div - here is the solution
http://jsfiddle.net/my0j0mmy/
<div style="background: #353639; padding:7px;" class="round_top">
<div style="float: left;"> <font color="white">{dialog title}</font>
</div>
<div style="float:right;"> <font color="white">{X}</font>
</div>
<div style="clear:both"></div>
</div>
This is my HTML:
<table class='htmlCommentTable'>
<tr>
<td class='thirdtd'>
<img class='clickedFlame' src="image.png" />
</td>
<td class='secondtd'>
name <br /> first comment
</td>
</tr>
<tr>
<td class='thirdtd' style="padding-left:80px"> <!-- NOTE: I added a left padding to this single td -->
<img class='clickedFlame' src="image.png" />
</td>
<td class='secondtd'>
name <br /> second comment
</td>
</tr>
<tr>
<td class='thirdtd'>
<img class='clickedFlame' src="image.png" />
</td>
<td class='secondtd'>
name <br /> third comment
</td>
</tr>
</table>
and this is my CSS:
.htmlCommentTable td {
border-collapse: seperate;
vertical-align: top;
padding: 10px;
border: 1px solid black;
margin: 0;
}
.thirdtd {
width: 90px;
}
.secondtd {
width: 100%;
position: relative;
}
As you can see, all I did was add a left padding to a single td (the first td in the second row) but for some reason when I do this, it gives a left padding to the second td's of the first and third row as well. How come? I want it so that only the first td in the second row gets the left padding and the rest of the table remains the same.
Note: I tested this fir Chrome and IE 8 - IE 10.
The code from your question, to play with: http://jsfiddle.net/We5QF/
If you want the width of the first and third rows (in column 1) to be different than the second row, you'll have to do something tricky as suggested here: html table cell width for different rows
You may want to try using divs instead of a table if you're going after different widths in the same column. Something like this: http://jsfiddle.net/4ZB85/2/
HTML
<div class="htmlCommentTable">
<div class="row">
<div class="col1">
<img class="clickedFlame" src="image.png" />
</div>
<div class="col2">
name <br /> first comment
</div>
</div>
<div class="row">
<div class="col1 extraspace">
<img class="clickedFlame" src="image.png" />
</div>
<div class="col2">
name <br /> second comment
</div>
</div>
<div class="row">
<div class="col1">
<img class="clickedFlame" src="image.png" />
</div>
<div class="col2">
name <br /> third comment
</div>
</div>
</div>
CSS
div.htmlCommentTable {
width: 100%;
}
div.row {
width: 100%;
margin-bottom: 20px;
border: 1px solid #000;
clear: both;
}
div.col1 {
margin: 0;
padding: 10px;
display: inline-block;
vertical-align: top;
background-color: #efefef;
}
div.col2 {
display: inline-block;
vertical-align: top;
padding: 10px;
background-color: #dedede;
border-left: 1px solid blue;
}
div.extraspace {
padding-left: 90px;
}
I'm writing a simple form for sending some data to a database.
I use it in my own company so I don't need to have a perfect style.
I am using a table for the layout (this is okay in this application).
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born <input type="text" name="nato_pf" /></td>
</tr>
</table>
I would like to set the width of the input text to 100% (to the end of the line) , but, if I do that, the input text wraps to a new line.
I have found solutions only using div and they are not for me at the moment.
EDIT: Sometimes I have two input (with different sizes) on the same line, so I think I cannot add other td tags.
http://jsfiddle.net/gmmr7/1
table {
border:1px solid black;
width: 200px;
}
.left {
float: left;
}
.left2 {
overflow: hidden;
padding: 0 4px;
}
.left2>input {
width: 100%
}
<table>
<tr>
<td>
<label class="left">Born</label>
<div class="left2">
<input type="text" name="nato_pf" />
</div>
</td>
</tr>
</table>
<table width="500px" style="border: 1px solid black; verflow: hidden">
<tr>
<td style="width: 50px;">
Born
</td>
<td>
<input type="text" name="nato_pf" style="width: 99%;" />
</td>
</tr>
</table>
99% of width because with 100% the textbox goes over the table's border :)
and also give a width to the first td ;)
jsFiddle http://jsfiddle.net/2yZmB/
you can define another td element
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born </td><td><input type="text" name="nato_pf" /></td>
</tr>
</table>
css
input{
width:99%;
}
I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails.
Here's example-
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}
<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>
Add z-index:-1 and position:relative to .content
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
z-index: -1;
position:relative;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}
<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Use one of those.
In my case i had to move the html code of the element i wanted at the front at the end of the html file, because if one element has z-index and the other doesn't have z index it doesn't work.
Another Note: z-index must be considered when looking at children objects relative to other objects.
For example
<div class="container">
<div class="branch_1">
<div class="branch_1__child"></div>
</div>
<div class="branch_2">
<div class="branch_2__child"></div>
</div>
</div>
If you gave branch_1__child a z-index of 99 and you gave branch_2__child a z-index of 1, but you also gave your branch_2 a z-index of 10 and your branch_1 a z-index of 1, your branch_1__child still will not show up in front of your branch_2__child
Anyways, what I'm trying to say is; if a parent of an element you'd like to be placed in front has a lower z-index than its relative, that element will not be placed higher.
The z-index is relative to its containers. A z-index placed on a container farther up in the hierarchy basically starts a new "layer"
Incep[inception]tion
Here's a fiddle to play around:
https://jsfiddle.net/orkLx6o8/
I have a problem with my html button and checkbox. Whenever I resize page especially making it very small my button and checkbox goes at the bottom. You can check it by running my code. I want the button and checkbox to stay on the same line with the textbox. Please help. Thanks in advance.
compresstest.html
<html>
<head>
<style type="text/css">
table#tblTest {
width: 100%;
margin-top: 10px;
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table#tblTest th {
white-space: nowrap;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table#tblTest td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<div style="width: 100%;">
<input type="text" id="searchCompanyText" name="searchCompanyText" />
<input type="button" id="searchCompanyBtn" name="searchCompanyBtn" value="Search" onclick="searchCompany ();"/>
<input type="checkbox" id="isActive" name="isActive" checked="checked" /> Active
</div>
<table id="tblTest" style="width: 100%">
<tr>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>Tom</td>
<td>UK </td>
</tr>
<tr>
<td>Hans</td>
<td>Germany</td>
</tr>
<tr>
<td>Henrik</td>
<td>Denmark</td>
</tr>
<tr>
<td>Lionel</td>
<td>Italy</td>
</tr>
<tr>
<td>Ricardo</td>
<td>Brazil</td>
</tr>
<tr>
<td>Cristiano</td>
<td>Portugal</td>
</tr>
</table>
</body>
</html>
You can also use white-space: nowrap; on your div.
https://developer.mozilla.org/en/CSS/white-space
I have just added min-width style to the div. Have a look at
http://jsfiddle.net/tariqulazam/wmEYD/
<div style="width: 300px;" >
<input type="text" id="searchCompanyText" name="searchCompanyText" />
<input type="button" id="searchCompanyBtn" name="searchCompanyBtn" value="Search" onclick="searchCompany ();"/>
<input type="checkbox" id="isActive" name="isActive" checked="checked" /> Active
</div>
Your width: 100% makes your element get width related to the parent object. Change it's value to non-relative: px, em...
Give your div a width, something that can contain all of the content you want but not 100% (as you have it now).
Here is your example altered with a width for the search box div:
http://jsfiddle.net/neilheinrich/xUd9k/