Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a problem, I would like to put the qr code close to the margin, but I can't remove that white margin. I'm generating it as follows:
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}">
</td>
</tr>
</table>
How can I do it?
I cropped your qr code by moving it into div, which is smaller and positions image outside its boundary. Thanks to the overflow hidden, the contents of the image, outside div is cropped.
.wrapper {
overflow: hidden;
position: relative;
width: 140px;
height: 140px;
}
.wrapper > img {
position: absolute;
top: -30px;
left: -30px;
}
<table border=1>
<tr>
<td>
<div class=wrapper>
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}">
</div>
</td>
</tr>
</table>
The white space around the QR code is the margin created by default. You can manage it by passing the chld parameter in your URL.
chld=<error_correction_level>|<margin>
The error_correction can be set to "L", which is also by default L, if you don't pass the chld parameter. And the margin can be any number, remember it is rows not pixels.
So by changing your code to the below will get your desired result.
https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}&chld=L|2
Try changing the number after | in the above code and you'll know the difference.
For reference, go to Google Charts and see the chld=<error_correction_level>|<margin> section.
Thanks
<table border=1>
<tr>
<td>
<div class=wrapper>
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}&chld=L|2">
</div>
</td>
</tr>
</table>
img {
object-fit: none;
width: 150px;
height: 150px;
}
I use the same code for generating QR code for my website but i am not getting any margin like that,
instead of using Wrapper and CSS use Style for margins and change chs = 140x140 in the URL.
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={"Link"}&choe=UTF-8" class="card-img" id="myImg" alt="QR Code" style="float:right;margin-right:15px;"/>
.qr {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid green;
width: 150px;
height: 150px;
}
.qr img {
z-index: -1;
}
<table>
<tr>
<td class="qr">
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}">
</td>
</tr>
</table>
This white margin is a part of image which is generated, So If you want to remove white space from image you need to crop that image, and for that you can try this.
.cropImg {
width: 150px; /* width of container */
height: 150px; /* height of container */
overflow: hidden;
border: 5px solid black;
}
.cropImg img {
margin: -35px -35px -35px -25px;
}
<table>
<tr>
<td class="cropImg">
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}">
</td>
</tr>
</table>
Related
What I am trying to do is to have 4 images align in a cross like pattern. I was thinking of using a table, but I do not want the corners, which will be while space to be the same as the image. And I want to be able to use different size images without having the page change if the image is a different dimension. I do not know how to approach this.
Below is an image of a rough sketch of what I am trying to do. One thing is that the images might be taller or longer.
Thanks in advance.
One solution would be to create invisible div elements that occupy the same height as your images, and inject them in the correct locations in the HTML:
div, img {
float: left;
width: 33%;
height: 100px;
}
See the fiddle with same image sizes here.
You can slightly modify this to use variable heights for your images by wrapping each row in its own div, then setting them height of each of those:
.top *, .middle *, .bottom * {
float: left;
width: 33%;
height: 100%;
}
.top, .bottom {
height: 100px;
}
.middle {
height: 200px;
}
See this fiddle for variable heights.
Update:
There's also the option to change the 'inset' of the middle row by giving the div a smaller width and adding margins to the two images in the middle row:
.middle div {
width: 20%;
}
.middle img:nth-of-type(1) {
margin-left: 6.5%
}
.middle img:nth-of-type(2) {
margin-right: 6.5%
}
Fiddle demonstrating this.
You can always play around with the width of the invisible div and the margins in order to get the desired output :)
Note that I've used widths that add up to 99% in these examples. You can get more specific if you'd like, but you'll never be able to reach 100% ;)
Hope this helps!
Here is another option using Flex-box
this solution can accommodate images of different sizes
and you can read more about it here
.wrapper {
font-size: 150px;
/* <-- adjust this to proportiantly scale everything */
outline: 1px dotted red;
}
img {
width: 1em;
}
.container,
.row-container {
display: flex;
width: 3em;
}
.container {
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.row-container {
justify-content: space-between;
flex-direction: row;
}
<div class="wrapper">
<div class="container">
<div>
<img src="http://placehold.it/100x150">
</div>
<div class="row-container">
<div>
<img src="http://placehold.it/150x120">
</div>
<div>
<img src="http://placehold.it/170x110">
</div>
</div>
<div>
<img src="http://placehold.it/190x200">
</div>
</div>
</div>
And here is a table solution
which can also use images of varying size with radius corners
td {text-align:center;vertical-align:center;}
td img {border-radius:4px;}
<table cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td><img src="http://placehold.it/310x120"></td>
<td></td>
</tr>
<tr>
<td><img src="http://placehold.it/175x110"></td>
<td></td>
<td><img src="http://placehold.it/300x150"></td>
</tr>
<tr>
<td></td>
<td><img src="http://placehold.it/280x100"></td>
<td></td>
</tr>
</table>
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
I have searched quiet a bit and found a lot of css that I tested but margin: 0 auto; has not worked and. I cannot get my footer to stay center and also at the bottom. I can get it to the bottom and I can get it centered but not both.
Here is the HTML
<div align="center">
<table class="copyrightbar">
<tr>
<td class="noborder">
<img class="ledge" src="images\lefthalfcircle.png">
</td>
<td class="noborder" >
<img class="copyrightimg" src="images\copyright.png">
</td>
<td class="noborder">
<img class="redge" src="images\righthalfcircle.png">
</td>
</tr>
</table>
</div>
Here is the CSS
.copyrightbar
{
border-collapse: collapse;
border: 0px;
padding: 0px;
float: left;
position: fixed;
bottom: 10px;
display:block;
}
I am not sure why it won't stay centered or what I am doing wrong. Right now the thin is set up to stay at the bottom only.
Try this jsfiddle
I know the images aren't actually showing, but it should display as you required.
HTML:
<div class="wrapper">
<table class="copyrightbar">
<tr>
<td class="noborder">
<img class="ledge" src="images\lefthalfcircle.png">
</td>
<td class="noborder" >
<img class="copyrightimg" src="images\copyright.png">
</td>
<td class="noborder">
<img class="redge" src="images\righthalfcircle.png">
</td>
</tr>
</table>
</div>
CSS:
.wrapper {
position: fixed;
bottom: 10px;
width: 100%;
}
.copyrightbar {
margin: 0 auto;
border-collapse: collapse;
border: 0px;
padding: 0px;
}
What is the point to using float:left ? If you want it centered, floating this entire element to the left serves no purpose since it does the exact opposite of what you want.
However, if you want to keep it, then your wrapper div should be given an id, lets say id="footer" then use this css
#footer {
width:400px (not sure if that is too wide or not, you can play around with it until it is the right width)
margin: 0 auto;
}
Add a class or ID to the wrapper div. Then use CSS to place it at the bottom using `position: fixed'.
Then set a width on your table (via CSS) and use the margin: 0 auto declaration you mention above. (Oh and remove position: fixed from the table)
May be because your CSS file has { float: left; }?
I want to keep the tables but use css to achieve the same positioning result with a strict doctype. This is the design that does exactly what I need.
Notice the <br> tags in the last (bottom) <td> cell. As this area grows, the position of the data within two other <td> cells above it do not change position.
<table cellpadding="0" cellspacing="0" border="1" width="400" height="100%">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td valign="top">ds</td> <----- The position here is important
</tr>
<tr>
<td valign="bottom">ds</td> <----- The position here is important
</tr>
</table>
</td>
<td valign="top">ada adf ad<br><br><br><br><br><br><br><br><br></td>
</tr>
</table>
I made an example for you here to show you how easy it is to duplicate that table with Divs and CSS:
HTML:
<div id="main-div-wrap">
<div class="left-content">
<span class="top">ds</span>
<span class="bottom">ds</span>
</div>
<div class="right-content">
ada adf ad
</div>
</div>
CSS:
#main-div-wrap
{
position: absolute;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.left-content
{
width: 18%;
float: left;
height: 100%;
}
.right-content
{
margin-left; 18%;
width: auto;
float: left;
height: 100%;
border-left: 1px solid #000;
}
.top
{
position: absolute;
display: block;
top: 0;
}
.bottom
{
position: absolute;
display: block;
bottom: 0;
}
All semantic, no hacks, will validate and if you need to change it for browsers, theres more than enough tools out there to help you.
I'm not sure what you mean with "keep the tables for the structure", but I guess you what something like this, however if the content is too short, then the "top" and "bottom" texts will overlap.
http://jsfiddle.net/HsmKA/
Variant with CSS styled tables:
http://jsfiddle.net/JmQ55/
You can find all you want here.
Coming from a tables word myself I've always found the DIV layout a pain in the a$$.
Check out blue print css its a very easy to use CSS framework. Might sort you out