I'm trying to make an icon fit nicely between text in HTML/CSS.
It seems like this should be possible with display:inline-block;. However this always seems to go wrong due to phantom padding:
<div style="">
<div style="display:inline-block;">Text here</div><img style="height:24px;display:inline-block" src="{{ url_for('static', filename= 'images/icon-unsorted.png' ) }}" />
</div>
As you can see the outer div becomes 25.64px high, while both its child elements are 24px high.
Moreover the image is aligned at the bottom, whereas the text is aligned to the top of the outer div.
I however want both of them to be vertically (center) aligned.
If i try to force the outer div to 24px: <div style="height:24px;">, contents remain incorrectly aligned, and the icon simply overflows below its parent.
So I suppose my question is this:
How do i make an image fit nicely inside a line of text, where the image has the same height as the text, or both are center aligned vertically?
I might try a more css oriented approach. I made a small example below.
.btnStyle {
position: relative;
display: inline-flex;
width: 110px;
height: 24px;
text-align: left;
font-family: Helvetica, sans-serif;
color: black;
background-image: url(https://extortionguild.com/images/icon-unsorted.png);
background-size: 17.5px 100%;
background-position: right center;
background-repeat: no-repeat;
margin-right: 20px;
}
table {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: calc(100% - 20px);
font-size: 18px;
}
table td {
vertical-align: middle;
}
<div style="display:inline-block; width: 100% height: 40px;">
<div class="btnStyle"><!-- Button 1-->
<table>
<tr>
<td>
Text here
</td>
</tr>
</table>
</div>
<div class="btnStyle"><!-- Button 2-->
<table>
<tr>
<td>
Text here
</td>
</tr>
</table>
</div>
<div class="btnStyle" style="width: 200px;"><!-- Button 3 - wider-->
<table>
<tr>
<td>
Even More Text here
</td>
</tr>
</table>
</div>
</div>
• Using classes will also allow you to make changes to all the buttons via the btnStyle class, instead of having to change each individually.
• Tables have a "built-in" vertical-align: middle; option and it's a really simple method of aligning any cell content centered vertically. -- Documentation
• You will need to edit background image url to background-image: url(images/icon-unsorted.png); to load your image file.
development-ninja was also on the right track with "flex", but it needs to be "inline-flex" or they will try to stack. -- For inline-flex browser support info click here
Related
I'm trying to get my text to align with the top of the image in the cell beside it. Vertical-align top doesn't seem to be working? I think currently it's trying to center itself relative to the other cell. Maybe there's a better way to do this with floats or something?
Here's the CSS:
table#body1 {
padding: 0px;
vertical-align: top;
margin-bottom: 10px;
margin-top: 5px;
}
td#images {
width: 30%;
}
td#text {
width: 70%;
padding-left: 15px;
text-align: justify;
vertical-align: top;
}
And the HTML: (all the divs are inline-block elements if that makes a difference)
<table id="body1">
<tr>
<td id="images"><img class="halfimg1" src="titania2.jpg" alt="Queen Titania"><br></td>
<td id="text">
<div id="header">Wander in these woods.</div><br>
This is some Text.<br>
<div id="caption"><br>This is my caption.</div>
</td>
</tr>
</table>
Thanks in advance for helping!
Add vertical-align: top; to td#images as well.
Keeping in mind the comment I made above, you probably want to move the vertical-align: top; rule from td#text to td#images
jsFiddle example
I am making a game for a school assignment (mastermind), but i'm having trouble getting the divs to do what I want. I have a board div, with multiple other divs inside it ( 5 each row). I am now planning on making a second div next to it to have it display scores. However I can't seem to get the "scoresheet" div next to the "board" div. I have just picked up programming so my code may be really primitive or ineffecient. this is what I have thus far:
<div id="board">
<div id="turn0">
<div id="space0.0" class="spacex"></div>
<div id="space0.1" class="spacex"></div>
<div id="space0.2" class="spacex"></div>
<div id="space0.3" class="spacex"></div>
<div id="table0">
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
this is one row of the board, this code is copied with each row of the board.
the table is for displaying white or black pins based on the amount of colors you guessed correctly, the first four divs are previous displays for showing the colors you chose for the previous turn. the "board" div is used for displaying previous turns.
this is my CSS code on the "board" div:
#board{
width: 335px;
height: 600px;
margin: auto;
background-color: darkgrey;
left: 50%;
overflow: hidden;
}
this is the CSS for the first four squares inside the "board" div:
.spacex {
float: left;
width: 50px;
height: 50px;
margin: 6px;
vertical-align: center;
}
and lastly the CSS for the small table:
table, td {
border: 1px solid black;
height: 22px;
width: 50px;
margin; 4px;
}
I was thinking of having the "scoresheet" div stick to the right side of the page, up against the scrollbar.
I also don't know if using a table to display the amount of white and black pins is the best course of action, if you know a more efficiënt or smarter piece of coding then please let me know.
I am not at all familiar with more intricate pieces of coding, so if you could explain the steps, and function of each piece of code that would be much, much appreciated.
Thanks in advance for all the help.
I have now managed to get another div that will display highscores and other usefull information, which was the struglle I was having: to get a div that displays information to be placed to the right of the "board" div. It turned out be simpler than i thought, I just had to give the div a top and right value and posistion. While you all have been a great help, I still have two more issues remaining concerning the placement of my divs. Right now i have a button that is going to check if the guessed colors match the coputer generated color code, however I cant get the position of the button to change. I also have a problem with the the divs inside the "board" div not showing correctly. The whole concept behind the code is hard to explain, so I will copy the code I have thus far below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title> Master Mind </title>
<meta charset="UTF-8">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
<h1> Master Mind </h1>
</p>
<div id="turn-interactive">
<div id="choosecolor0" class="colorfield"></div>
<div id="choosecolor1" class="colorfield"></div>
<div id="choosecolor2" class="colorfield"></div>
<div id="choosecolor3" class="colorfield"></div>
<form> <input type="button" value="Check!"name="button" class="button"></form>
</div>
<div id="board">
<div id="turn0">
<div id="space0-0" class="spacex"></div>
<div id="space0-1" class="spacex"></div>
<div id="space0-2" class="spacex"></div>
<div id="space0-3" class="spacex"></div>
<div id="table0">
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
<div id="board">
<div id="beurt0">
<div id="space0_0" class="spacex"></div>
<div id="space0_1" class="spacex"></div>
<div id="space0_2" class="spacex"></div>
<div id="space0_3" class="spacex"></div>
<div id="table0">
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
<aside><div id="infobar" class="infobar"></div></aside>
CSS:
body {
overflow: auto;
background-color: lightgrey;
height: 99%;
width: 99%;
}
div {
border: 2px solid black;
}
.infobar{
height: 600px;
width: 200px;
right: 50%;
overflow: hidden;
position: absolute;
top: 40%;
right: 0%;
background-color: white;
}
.button{
display: block;
height: 100px;
width: 300px;
background: #34696f;
border: 2px solid rgba(33, 68, 72, 0.59);
position: static;
top: 50%;
left: 75%;
}
}
.spacex {
float: left;
width: 50px;
height: 50px;
margin: 6px;
}
.colorfield {
float: left;
width: 120px;
height:120px;
background-color: white;
margin: 10px;
left: 50%;
}
#board{
width: 350px;
height: 600px;
margin: auto;
background-color: darkgrey;
left: 50%;
overflow: hidden;
}
#turn-interactive{
width: 1000px;
height: 150px;
background-color: red;
margin: auto;
margin-bottom: 10px;
top: 15%;
}
table, td {
border: 1px solid black;
height: 22px;
width: 50px;
margin; 4px;
}
the idea is to later (when I start coding the javascript) to have the values of the four colorfields displayed copied down below inside the "Board" div. The table inside the board div is for displaying the amount of white and black pins ( four colorfields, four squares inside the table). If you run the current code you can see that the four divs that are supposed to be displayed inside the "board" div before the table are not showing correctly, and are just creating a big black border inside the board." I have no clue of how I'm supposed to fix this. The four divs did show up correctly when i had just one row of "four colordivs-one table" ofcourse there is going to be a history of turns so I need muliple rows of four colordivs followed by a table displaying pins. Since it did work with only one row that had a table I'm guessing that the table is the troubleshooter. I translated the div ID's and class names from Dutch to English so it's clear what's what.
Again, thanks a bunch for the help.
PS. Since the website also is going to need a javascript code later on I thought that i should add the tag. Sorry about that, since my question indeed wasn't javascript related.
I think using a table to host your score is a god idea.
You could use position: absolute to position you table according to another element. This element is its Containing Block and you can indicate it is your board game by adding a position: relative to it.
If you do so, you can add left: 100% to your score sheet to make it stick on the right of your board.
#board {
position: relative;
width: 335px;
height: 600px;
margin: auto;
background-color: darkgrey;
}
#scoresheet {
position: absolute;
left: 100%;
width: 52px;
border-collapse: collapse;
}
#scoresheet td {
border: 1px solid black;
width: 22px;
height: 22px;
}
<div id="board">
<table id="scoresheet">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
I made a CodePen of your example: http://codepen.io/angeliquejw/pen/MyJGaz?editors=1100
As #GCyrillus pointed out, you're going to want to swap the points/periods in your IDs with hyphens/dashes or underscores. I've used dashes here, but do what you want.
It's not clear from your question if you want the score table to appear inside the board (which is how it's coded) or at the upper right corner, regardless of the board. I added the following CSS to your example:
#table0 {
position:absolute;
top:0;
right:0;
}
If you want the table to be inside the board, you just need to add position:relative to the #board. I've added that already, but commented it out. I also commented out the left:50% which isn't doing anything at all in the current code and just mucks things up if/when you change the position of #board.
The reason that you can't put the scoresheet table next to the gameboard div, is because the table tag is nested inside of the gameboard div. So the gameboard div wraps around the table. Here is how to solve this issue: "However I can't seem to get the "scoresheet" div next to the "board" div."
Change this:
<div id="board">
...
<table>
...
</table>
</div>
To this: jsfiddle
<div id="board">
...
</div>
<table id="scoresheet">
...
</table>
To make them appear side-by-side, apply a left float to both of them:
#board,
#scoresheet {
float: left;
}
You can use that same float:left trick to horizontally align the spacex div tags into a row of squares. This would solve this issue: "I have a board div, with multiple other divs inside it ( 5 each row)." To create multiple rows, wrap them in a row div, which doesn't have a float applied to it.
<div id="row1" class="rows">
<div id="space0.0" class="spacex"></div>
<div id="space0.1" class="spacex"></div>
<div id="space0.2" class="spacex"></div>
<div id="space0.3" class="spacex"></div>
<div id="space0.4" class="spacex"></div>
</div>
<div id="row2" class="rows">
<div id="space1.0" class="spacex"></div>
<div id="space1.1" class="spacex"></div>
<div id="space1.2" class="spacex"></div>
<div id="space1.3" class="spacex"></div>
<div id="space1.4" class="spacex"></div>
</div>
.spacex {
float: left;
}
Try giving .spacex a border, background-color & margins/padding to style them up! Good luck! :)
I'm trying to get away from using the table layout to do specific layouts. I know it's sloppy programming so I'm redoing it. I can't seem to recreate something like this using the div tag:
<table border=10 cellpadding=10 width="90%">
<tr>
<td align="center" width="143">
<img src="http://blah.com/images/133widepixelimage.jpg">
</td>
<td align="center">
Some text describing the image
</td>
</tr>
</table>
I've got the border, padding, width and alignment all done in a CSS file, and that works fine. But setting the width of the centered image still doesn't allow the centered text to show up to the right of the image. It still wraps to the next line. If I center the image left, and set float: left, that works. But not two centered even if the parent div is wide enough to accommodate.
Try this snippet:
.container{
margin-top: 30px;
width: 90%;
display: flex;
border: 10px solid black;
height: 50px;
border-left-color: gray;
border-top-color: gray;
}
.img{
width: 143px;
}
.img > img{
width: 100%;
}
.container > div {
vertical-align: middle;
line-height: 40px;
text-align: center;
margin: 1px;
border: 1px solid black;
display: inline-block;
}
.text{
flex: 1;
}
<div class="container">
<div class="img">
<img src="http://blah.com/images/133widepixelimage.jpg">
</div>
<div class="text">
Some text describing the image
</div>
</div>
You can do it with divs, using flexbox like the example showed above
How can I get three divs to look as they are shown below with only HTML and CSS? Is it possible to align them in a way that the bottom text will stay under the text which is the longest?
<html>
<div id=1>
Short text
Bottom text?
</div>
<div id=2>
Long text
Bottom text?
</div>
<div id=3>
Not so long text
Bottom text?
</div>
</html>
As #Ruddy pointed outThanks for that, I used Flexbox approach for this, with CSS Positioning, so am using display: flex; for the parent element, and wrapping the bottom text in a span, and than am positioning the span to bottom using position: absolute; also, you don't have to assign fixed height to the containers, as we are using display: flex;
Flex Demo
div.parent {
display: flex;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
float: left;
position: relative;
padding-bottom: 30px; /* Make sure you tweak this, to the
highest height of your bottom content*/
}
div.parent > div > span {
position: absolute;
bottom: 0;left: 0;
}
Well, obviously you can use position: absolute; with bottom: 0; with padding-bottom: 30px;(approx) and wrap the bottom text in span and use position: relative; on the container element but again, you won't be able to stretch the other two containers which doesn't have height and thus it will fail.
So you need to use display: table-cell; with vertical-align: bottom;, it will keep pushing the text to the bottom which has content, also, vertical-align: bottom; will see to it that even the other containers text stick to the bottom
Demo
div.parent {
display: table;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
display: table-cell;
vertical-align: bottom;
}
Yes, this is possible. But first: give the three a wrapper. Beside that, you can't use numbers as ID's.
Here you go: http://jsfiddle.net/SP68r/
<div class="wrapper">
<div id="first">
Short text
Bottom text?
</div>
<div id="second">
Long text
Long text
Long text
Long text
Long text
<div class="bottom">bottom text</div>
</div>
<div id="third">
Not so long text
</div>
</div>
The CSS
.wrapper { width: 350px; }
#first, #second, #third { float: left; width: 100px; }
#first { margin-right: 10px; }
#second { padding-bottom: 40px; margin-right: 40px; }
div.bottom { position: absolute; bottom: 0; }
<div id="1" style="border: 2px black solid; width: 120px;
height: 160px; position: relative;">
<div style="text-align: left;" id="1-1">
Not so long text
</div>
<div style="left: 17%;position: absolute; bottom:0px;" id="1-2">
Bottom text?
</div>
</div>
You can use position:absolute
DEMO
Simple Solution : Use a table.
<table border="1" width="100">
<tr valign="top">
<td>DIV 1</td>
<td>DIV 2<BR/>THIS IS A BIG, BIG, LONG PARAGRAPH, WHICH WILL GO DOWN THAN THE OTHER TWO CELLS.</td>
<td>DIV 3</td>
</tr>
<tr>
<td>BOTTOM TEXT</td>
<td>BOTTOM TEXT</td>
<td>BOTTOM TEXT</td>
</tr>
</table>
fiddle here.
<table>
<tr>
<td class="left"><div class="c">centrated<br>on<br>lef side</div></td>
<td>middle-td</td>
<td>right-td</td>
</tr>
</table>
Here is the CSS:
td.left {
width: 200px;
left-padding: 0;
}
div.c {
text-align: center;
}
Now everything is centered.
I want to place the div on left side and everything inside the div should be centered. I've tried everything that I can do but I was unable to do what I want.
use the float:left property on the div