I am new to HTML and still learning. I currently have a button and a search bar beside each other and not centered. I am having a problem centering both of them. I have tried several ways but it did not work. What i want is for them to be centered and still beside each other
<!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>button,.mine>table{
display: inline-block;float:left;
}
</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" style="text-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>
<br>
</body>
</html>
button and search bar are inline elements so just put them in a div and give the div text-align: center
<div id="mydiv">
<input type="submit" value="Update"/>
<input type="text"/>
</div>
#mydiv{
text-align: center;
}
https://jsfiddle.net/bdellinger/97xybngh/
Are this the only data on the table ? If Yes. why not put a static width for the div that wraps the table and give a CSS of margin: auto;
See my fiddle
CSS:
.mine{
width: 208px;
height: auto;
overflow: hidden;
margin: auto;
}
Hope it helps.
Related
My html and css is like this :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Data</title>
<style type="text/css">
body {
font-family: 'Arial';
font-size: 9px;
margin-bottom: 100px;
}
div.global{
width: 100%;
font-size: 12px;
}
div.left {
float: left;
width: 50%;
text-align: center;
}
div.right {
margin-left: 80%;
}
div.center {
margin-left: 35%;
width: 485px;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<div class="global">
<div class="left">
<div style="width: 80mm; margin-left: -15px !important;">
data.... <br>
test....
</div>
<hr style="max-width: 80mm; margin-left:0; height:1px; border:none; color:#333;background-color:#333;">
</div>
<div class="right">
<div style="width: 80mm; margin-right: 0 !important">
<table>
<tr style="padding-right:35px">
<td>Lamp</td>
<td align="right">test 1</td>
</tr>
<tr>
<td>No</td>
<td align="right">test 2</td>
</tr>
<tr>
<td>Date</td>
<td align="right">test 3</td>
</tr>
</table>
</div>
<hr style="max-width: 80mm; margin-left:0 height:1px; border:none; color:#333;background-color:#333;">
</div>
</div>
<div class="center">
data 1 2 3<br>
data 4 5 6
</div>
</body>
</html>
..........................................................
I want display table(table in class=right) on the far right
I try
...............
<div style="width: 80mm; margin-right: 0 !important">
..............
But id does not work
Is there anyone who can help me?
Update
Demos is like this :
https://jsfiddle.net/skfd7215/1/
I appreciate this is an older post and I haven't tested this against the code that you have provided (so I can't guarantee it will work for your given scenario at this stage) but I was researching a solution for forcing relative elements to the right hand side via margin-right as well and found this little beauty:
.element {
margin-left: auto;
margin-right: 0;
}
Example codepen here https://codepen.io/jamie-endeavour/pen/GdrZao
Either way I hope you got sorted. It would be cool if you could share your solution since none of the above answers have been accepted!
That's not what margin-right does. margin-right just gives margin to the right hand side of the element. Try inspecting the element in chrome/firefox dev tools to see where the margin is being added.
Assuming your global class spans the width of the page, you can give global:
position: relative;
and right:
position: absolute;
right: 0;
https://www.w3schools.com/css/css_positioning.asp for more about positioning.
You can you flex to send the content right
<div style="width: 80mm; display:flex; justify-content: flex-end">
jsFiddle
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Please help me align my image next to the buttons. I would also like to make the buttons sit on top of each other but next to the image
.body{
background-color:#dbdbdb;
}
button{
width:200px;
height:60px;
margin-right:10px;
}
</div>
<div class="body">
<table>
<tr>
<td><img id="business"src="http://fullhdpictures.com/wp-content/uploads/2016/08/Business-People-Photos-HD.jpg"/></td>
<td> <button id="plan" type="button">PLANNING</button></td>
<td> <button id="strat" type="button">STRATEGY</button></td>
<td> <button id="res" type="button">RESULTS</button></td>
</tr>
</table>
</div>
Use flexbox, less markup, better flexibility and semantically more correct than table
.body {
display: flex;
}
.body > div {
display: flex;
flex-direction: column;
justify-content: center;
}
button {
width: 200px;
height: 60px;
margin-right: 10px;
}
/* for demo purpose I made image smaller so one can see the layout */
.body > img {
display: block;
width: 420px;
height: 276px;
}
<div class="body">
<img id="business" src="http://fullhdpictures.com/wp-content/uploads/2016/08/Business-People-Photos-HD.jpg" />
<div>
<button id="plan" type="button">PLANNING</button>
<button id="strat" type="button">STRATEGY</button>
<button id="res" type="button">RESULTS</button>
</div>
</div>
.body{
background-color:#dbdbdb;
}
button{
width:200px;
height:60px;
margin-right:10px;
}
td {
vertical-align:middle;
}
</div>
<div class="body">
<table>
<tr>
<td><img id="business"src="http://fullhdpictures.com/wp-content/uploads/2016/08/Business-People-Photos-HD.jpg"/></td>
<td>
<div>
<button id="plan" type="button">PLANNING</button>
<button id="strat" type="button">STRATEGY</button>
<button id="res" type="button">RESULTS</button>
</div>
</td>
</tr>
</table>
</div>
Take it out of table and put the nav items in a div with same height as the image and set a vertical-align: middle; this will place the element in the middle of that parent div element
Add this to your style sheet:
Table td
{
Verticale-align: middle;
}
you can try vertical align:top
Example :
.body{
background-color:#dbdbdb;
}
button{
width:200px;
height:60px;
margin-right:10px;
}
<div class="body">
<table>
<tr>
<td><img id="business"src="http://fullhdpictures.com/wp-content/uploads/2016/08/Business-People-Photos-HD.jpg"/></td>
<td style="vertical-align:top;"> <button id="plan" type="button">PLANNING</button></td>
<td style="vertical-align:top;"> <button id="strat" type="button">STRATEGY</button></td>
<td style="vertical-align:top;"> <button id="res" type="button">RESULTS</button></td>
</tr>
</table>
</div>
#plan {
background-color: #B21589;
cursor: pointer;
color: white;
font-size: 9px;
font-weight: bold;
padding: 4px;
margin-top: 2px;
vertical-align: top;
}
link:-Alignment of Buttons Next to Images
Problem:
Div newline is hovering div gallery-preview
I'm trying to make gallerys preview and a have made div with table. gallery-preview div is inline, to be in one line with others. How to make newline div be in bottom of gallery-preview divs line? And why newline is hovering gallery-preview?
My HTML:
<div class="content">
<h1 class="title">New Photosets</h1>
<div class="gallery-preview">
<table>
<tr>
<td>
<img src="image.png" class="gallery-preview-big-image" />
</td>
</tr>
<tr>
<td>
<img src="image.png" class="gallery-preview-small-image" />
<img src="image.png" class="gallery-preview-small-image" />
<img src="image.png" class="gallery-preview-small-image" />
</td>
</tr>
</table>
</div>
<div class="newline"></div>
My CSS:
.newline{
width: 300px;
height: 300px;
border: 1px solid black;
}
/* --------------- */
/* Content Gallery */
.gallery-preview{
padding-right: 1%;
display: inline;
float: left;
}
.gallery-preview-big-image{
width: 166px;
height: 166px;
padding-bottom: 10px;
}
.gallery-preview-small-image{
width: 50px;
height: 50px;
padding-right: 4px;
display: inline;
}
/* --------- */
It is probably because of the float property.
Try to add clear:both; into your .newline style.
If this is what you want
Than you just have to remove float:left from .gallery-preview
I have the following code for the div:
HTML
<div id="input">
<table id="submit">
<tr>
<td>
<form id="one">
<textarea id="one_inside"></textarea>
</form>
</td>
<td>
<input "submit_two" type="button"/>
</td>
</tr>
</table>
</div>
CSS
#input{
border: solid black 1px;
position: fixed;
background-color: white;
bottom:0;
left:0;
width:100%;
height:12%;
}
#submit{
width: 100%;
}
#one_inside{
float: left;
position:relative;
width:100%;
font-size: 15px !important;
}
But the keyboard always gets on the way of the textarea when it is focused and blockes the view. How can I always keep the div at the bottom of the mobile browser but on top of the keyboard not to block the view?
**Please help me remove the white space between my images when rendering the below on a browser - FireFox in my case**
<body>
<form id="form1" runat="server">
<div>
<table style="border:0px;margin:0px;float:left; width:864px">
<tr>
<td style="width:809px">
<table style="margin:0px; border:0px; clear: both; border-collapse: collapse; width:848px; height:120px">
<tr><td style="margin:0px; border:0px; background:url(images/qualhisttop.jpg); width:560px; height:124px; background-repeat:no-repeat;"></td></tr>
</table>
</td>
</tr>
</table>
<table style="border:0px;margin:0px; clear:both; width:864px">
<tr style="margin:0px;">
<!----------------------------------------------------------------------------------------------------->
<!-- B E G I N N A V I G A T I O N -->
<!----------------------------------------------------------------------------------------------------->
<td style="border:0px; margin:0px; vertical-align:top; float:left; width:130px; height:532px">
<img src="images/tp_collagebasedrill.jpg" style="width:130px; height:78px; border:0px;margin:0px;" alt=""/>
<img src="images/meta_swooshbottom.gif" width="109" height="140" alt="" />
</td>
</tr>
</table>
</div>
</form>
</body>
OK so i have provided an example that may help you.`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>remove the white space between my images</title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 0 auto;
}
#image-1{
float: left;
}
#image-1 img{
width: 600px;
}
#image-2{
float: left;
}
#image-2 img{
width: 600px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="image-1"><img src="lostsouls.jpg" alt=""></div>
<div id="image-2"><img src="lostsouls.jpg" alt=""></div>
</div>
</body>
</html>
so if you wanted to stack them then they would be block level elements which are what divs are. Here is how to do that based on the previous example.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>remove the white space between my stacked images</title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 0 auto;
}
#image-1{
border: thin solid #003333;
height: 200px;
}
#image-1 img{
width: 600px;
height: 200px;
}
#image-2{
height: 200px;
}
#image-2 img{
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="image-1"><img src="lostsouls.jpg" alt=""></div>
<div id="image-2"><img src="lostsouls.jpg" alt=""></div>
</div>
</body>
</html>
just make sure that you set the height of the image-1 and image 2 divs to the same size as the image
i provided another code example that should work for you in a previous post. Try that and see if it works. also the reason for the space in between the images is that you must set the height of the image to be the same height as the container or div that the image is inside. So if the image is 400px high then you must set the height of the div to 400px as well. I hope this helps.