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
Related
I'm trying to create a table where in every cell, there is a small coloured square next to a text.
However, I want the square and the text to be on the same line, and I cannot do it.
Sadly I'm not a css or html master, I've tried many alignment options I found on this and other sites, but none of them worked.
You can look at a minimal example below to understand what I'm talking about.
Is there any way to do it in css? Thank you
.badge{
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
}
<html>
<body>
<table border="1">
<tr>
<td>
<div class="badge"></div> not horizontally aligned text
</td>
</tr>
</table>
</body>
</html>
Instead of nesting a <div> for the badge, you could create a ::before pseudo element for each <td> and make it inline-block so the pseudo element stays inline with the text content. This way you can ensure each table data element will have the small colored square before the cells text content.
.badge::before {
content: "";
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
display: inline-block;
vertical-align: middle;
}
/* Optionally, give the cells different colors */
.badge.two::before {
background-color: #ae7;
}
.badge.three::before {
background-color: #f06;
}
<html>
<body>
<table border="1">
<tr>
<td class="badge one">
some text in cell 1
</td>
<td class="badge two">
some text in cell 2
</td>
<td class="badge three">
some text in cell 3
</td>
</tr>
</table>
</body>
</html>
If you instead want to keep the same HTML structure, you could make the <td> a flexbox with display: flex to ensure the content is aligned in a row format (side-by-side). Using align-items will define how items are aligned along the cross axis.
.badge{
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
}
td {
display: flex;
align-items: center;
}
<html>
<body>
<table border="1">
<tr>
<td>
<div class="badge"></div> not horizontally aligned text
</td>
</tr>
</table>
</body>
</html>
Use flexbox:
.badge {
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
margin-right: 1em;
}
td {
display: flex;
align-items: center;
}
<html>
<body>
<table border="1">
<tr>
<td>
<div class="badge"></div>horizontally aligned text
</td>
</tr>
</table>
</body>
</html>
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?
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.
I'm struggling to get my 3 tables to be centered in the page.
Here's a picture of what it looks like currently:
Basically (from look at the image), I want the second/middle table ("Work" table) to be the only table in center, and the other 2 tables ("About" and "Collaborate" tables; left and right from the middle, respectively) to have spread out a bit (using margin, I would assume).
Here's my HTML:
.fixedWidth2 {
margin: 0 auto;
width: 1000px;
height: 350px;
background-color: green;
border: 2px solid yellow;
}
.tableProp1 {
width: 200px;
float: left;
margin-left: ;
}
.tableProp1 tr td {
height: 200px;
color: red;
}
.tableProp2 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp2 tr td {
height: 200px;
color: pink;
}
.tableProp3 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp3 tr td {
height: 200px;
color: blue;
}
<div id="mainContent">
<div class="fixedWidth2">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
<!-- Fixed Width 2 DIV for Main Content DIV -->
</div>
<!-- mainContent DIV -->
Since you are using fixed widths for your tables and you're floating them, I would wrap them in a container, set the width on that to match all three tables+margin and set margin: auto on the container
.table-wrapper{
width: 680px;
margin: auto;
}
JSFIDDLE
Alternatively you can just use display: inline-block instead of float:left and add text-align: center to .fixedWidth2
ALT FIDDLE
I would not use <table> at all... table are good for tabular content, not for templating....
I would use DIV or even HTML5's <article> and <section>.
Think also about SEO, <h2> is a better mirror to your website semantic toward search engines than table's TH ...
To center three elements you can simply set them display: inline-block; with some vertical-align, than just setting the <div class="centered"> to text-align: center; will center-align your inner elements. You can also use float:left; but I've not covered that example.
http://jsbin.com/roruqo/1/
<div id="container">
<div id="slider"></div>
<div id="mainContent">
<div class="centered">
<div class="fixedWidth2">
<h2>About</h2>
<p>Learn more about me and my accomplishm...</p>
</div>
<div class="fixedWidth2">
<h2>Work</h2>
<p>I tend to get involved with a lot of d...</p>
</div>
<div class="fixedWidth2">
<h2>Collaborate</h2>
<p>Have a brand new or idea of a project?...</p>
</div>
</div>
</div><!-- mainContent DIV -->
</div>
h2, p{
padding:15px;
margin:0;
}
#container{
width:960px;
margin:0 auto;
background:#eee;
}
#slider{
background:blue;
height:400px;
}
.centered{
text-align:center;
}
.centered > div{
text-align:left;
}
.fixedWidth2{
min-height:170px;
background:#ddd;
display:inline-block;
vertical-align:top;
width: 250px;
margin: 15px;
}
.fixedWidth2 h2{
text-align:center;
background:#aaa;
}
<div id="mainContent">
<div class="fixedWidth2">
<div class="row">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
</div>
</div>
add this style in style sheet
.row {
margin: 0 auto;
width: 680px;
}
add "row " division and apply this style then check it's working properly.
How can I make a table in css/html like this:
I want to use only div, not <table> tags.
Code, yet:
<style>
.tab_in {
display: table-cell;
border: 1px dotted red;
padding: 4px 6px;
}
</style>
<div style="text-align:center;">
<div class="tab_in">
<div>a</div>
<div>b</div>
</div>
<div class="tab_in" style="vertical-align:middle;">c</div>
<div class="tab_in" style="vertical-align:middle;">d</div>
<div class="tab_in" style="vertical-align:middle;">e</div>
</div>
Use fluid grid system which uses percents instead of pixels for column widths. and handle the external width of it using a external container.
You can do something like:
JSFiddle Demo
HTML:
<div class="box">
<div class="row-fluid show-grid">
<div class="span4">
<div class="rowspan2">
<span class="valign-helper"></span>
a
</div>
<div class="rowspan2">
<span class="valign-helper"></span>
b
</div>
</div>
<div class="span4">
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
</div>
<div class="span4">
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
</div>
</div>
</div>
Note: to vertically align text you can also do using "display: table-cell" css property to the class 'rowspan2'. and remove the tag with class "valign-helper"
CSS:
body {
margin: 50px;
}
.box {
width:500px;
padding: 0 10px;
background-color: #000;
}
.show-grid [class*="span"] div {
background-color: #fff;
text-align: center;
min-height: 40px;
line-height: 40px;
margin-left: 0;
margin-top: 10px;
margin-bottom: 10px;
}
.show-grid [class*="span"] .rowspan2 {
height: 90px;
margin-bottom: 0;
}
.valign-helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Here's an example of one way you might accomplish this:
http://jsfiddle.net/mori57/cDEGw/1/
html:
<table class="tab_out">
<tr>
<td rowspan="0" class="col">
<div class="tab_in">a</div>
<div class="tab_in">b</div>
</td>
<td><div class="tab_in">c</div></td>
<td><div class="tab_in">g</div></td>
</tr>
<tr>
<td><div class="tab_in">d</div></td>
<td><div class="tab_in">h</div></td>
</tr>
<tr>
<td><div class="tab_in">e</div></td>
<td><div class="tab_in">i</div></td>
</tr>
<tr>
<td><div class="tab_in">f</div></td>
<td><div class="tab_in">j</div></td>
</tr>
</table>
CSS:
.tab_out {
width: 800px;
margin-bottom: 20px;
text-align:center;
}
.tab_out td {
border:1px dotted red;
padding: 4px 6px;
margin-bottom: 0;
vertical-align:middle;
}
.tab_in {
display: block;
border: 1px dotted green;
}
Is this any closer to what you're looking for? I really don't see an efficient way to accomplish your layout without using a table, at this point. Mind you, the div inside each TD is optional, I just used it to show you where the element actually appears inside the table.