This is the layout that I want to achieve
But for some reason when I add the paragraph right next to the picture, it breaks the whole div, and I'm left with this:
Also, you can see that instead of overflowing, it tries to concatenate it. It even adds a ruler at the bottom.
This is my code:
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
Let me note that there is enough space to fit the text, it just breaks the moment it reaches the end of the screen.
You can use flexbox to solve this probplem. Just add 'display: flex;' property to the container element:
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div style="display: flex;">
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top;">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
For long paragraph issue:
Add word-break:break-all style inline body tag.
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="word-break:break-all; background-color:#f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
If I understood your issue correctly, you want the text to overflow to the next line instead of creating a horizontal scrollbar?
For this you'll need to give the div a defined width and add word-wrap: break-word;
#overflow{
width:100vw;
word-wrap: break-word;
}
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div id="overflow">
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
There is a much simpler way to add text next to an image: just put them in the same div, and add the style float: left; to the image, like this:
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div>
<img src="./images/karta_small.jpg" width="180" height="280" hspace="60" style="float: left;">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div style='word-break: break-word;'>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
To wrap the single word paragraph to the next line, add style='word-break: break-word;' to the div that contains it.
Related
I'm trying to make my own bar chart which i imported it to pdf using Dom PDF. i have minus number on my result so i need to fill my bar from right to left. This is my current code right now
<td width="400px">
<div style="width:100%; margin-bottom: 2px; margin-top:10px;">
<div
style="width:50%;display:inline-block;text-align:right">
<div class="w3-light-grey w3-round-large"
style="margin-bottom: 2px; margin-top:2px;text-align:right;">
<div class="w3-container w3-blue w3-round-large"
style="width:40%;text-align:right;float:right">0</div>
</div>
</div>
<div
style="width:50%;display:inline-block;text-align:right">
<div class="w3-light-grey w3-round-large"
style="margin-bottom: 2px; margin-top:2px;text-align:left">
<div class="w3-container w3-blue w3-round-large"
style="width:50%;text-align:center;">{{$sjt}}</div>
</div>
</div>
</div>
</td>
and the result goes like this.
Is it possible to achieve that?
Thank you
Try this:
<td width="400px">
<div style="width:100%; margin-bottom: 2px; margin-top:10px;">
<div style="width:50%;display:inline-block;text-align:right">
<div class="w3-light-grey w3-round-large" style="margin-bottom: 2px; margin-top:2px;text-align:right;">
<div class="w3-container w3-blue w3-round-large" style="width:40%;text-align:right;float:right">0</div>
</div>
</div>
<div style="width:50%;display:inline-block;text-align:right">
<div class="w3-light-grey w3-round-large" style="margin-bottom: 2px; margin-top:2px;text-align:left;display:flex;justify-content:flex-end;">
<div class="w3-container w3-blue w3-round-large" style="width:50%;text-align:center;">{{$sjt}}</div>
</div>
</div>
</div>
</td>
Is this what you were looking for?
All my pictures must meet the following criteria:
1). Whenever using computer or cell phone to view, must appear 4 items on same line, without RWD function.
2) No matter what the height and width measurements all outer frame must be identical, I spent days to adjust like this, but I found distance from picture to picture (https://drive.google.com/file/d/1fsUN5ms1U4hfSoXl-oNcvEiwBwfVNpoZ/view?usp=sharing) are different, please advise how to adjust all spaces between pictures to be exactly the same.
Another question is how to control ever line's spacing? If I key in xxx, every line's space height will be too wide, need to shrink the height, I still cannot solve through setting, can anyone lend a helping hand? Appreciate it very much.[problem][1]
website URL
<table class="table table-borderless" style="margin:0px 0px;" cellpadding="3">
<tr>
<td>
<div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/001.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/002.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/003.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/004.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
<tr>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/005.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/006.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/007.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/008.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
<tr>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/009.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/010.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
</table>
You should not be using table.
You should be using the grid layout.
Here is a great guide.
EDIT:
Does this work for you?
.grid-container {
display: grid;
/* Use % instead of px for it to be proportionnal to the frame width */
grid-template-columns: 20% 20% 20% 20%;
grid-gap: 15px;
padding: 0px;
}
.grid-item {
background-color: lightgreen;
}
.grid-item>img{
/* make it so the image take up the whole grid-item width */
width: 100%;
}
<div class="grid-container">
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="">
IMAGE
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
</div>
I am trying to make a little game to learn some javascript.
Ok, so I was using untill now a table for my content (image):
Now, what I am trying to do, is to use divs instead of table. But I want to position them to look similar to the image above.
This is what i have now:
My code for the Lemonade stand div (its similar for the others):
<div style="background: url(images/texture.png); display: table; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
<div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
<div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
<div><b><font color="brown">Level:</font></b> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
<div><b><font color="green">Production:</font></b> <span id="production"> 1 </span> $ </div>
<div> <font style="font-size: 15px">(Prod. per click) </font> </div>
<div><b><font color="red">Level price:</font></b> <span id="pretlevel"> 0 </span> $ </div>
</div>
I am beginner, trying to learn. Thanks!
div will like as table if you add next styles:
display:table; to div table-analog
display:table-row; to div tr-analog
display:table-cell; to div td-analog;
<div style="display: table;">
<div style="display: table-row;">
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
<div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
<div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
<div><b><font color="brown">Level:</font></b> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
<div><b><font color="green">Production:</font></b> <span id="production"> 1 </span> $ </div>
<div> <font style="font-size: 15px">(Prod. per click) </font> </div>
<div><b><font color="red">Level price:</font></b> <span id="pretlevel"> 0 </span> $ </div>
</div>
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
<div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
<div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
<div><b><font color="brown">Level:</font></b> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
<div><b><font color="green">Production:</font></b> <span id="production"> 1 </span> $ </div>
<div> <font style="font-size: 15px">(Prod. per click) </font> </div>
<div><b><font color="red">Level price:</font></b> <span id="pretlevel"> 0 </span> $ </div>
</div>
DEMO http://jsfiddle.net/o7jarr8n/
HTML
<div class="row">
<div class="box">1</div>
<div class="box">2</div>
</div>
<div class="row">
<div class="box">3</div>
<div class="box">4</div>
</div>
CSS
.row {
margin: 0 auto;
text-align:center;
display:block; // change line
}
.box {
display:inline-block; // same line
background:red;
width:100px;
height:50px;
margin:5px;
}
inline-block, will make div next to each other
Well, you have different options here.
You can use inline-block as display.
You can use float: left with width: 40% for example.
So, for diversity here it is with floated divs.
Also, notice I've placed the css as an external thing so you can have a good base to really learn how to do things.
I've used class selectors, and if you don't know what it is I advice you to look for them. They are the basic of CSS.
.item {
background: url(images/texture.png);
border: solid black 2px;
padding: 10px;
width: 40%;
float: left;
}
.line {
padding-bottom: 7px;
}
.item-container {
max-width: 300px;
}
<div class="item-container">
<div class="item">
<div class="line">
<b>Lemonade stand</b>
</div>
<div class="line">
<button id="countButton" style="padding: 2px;">
<img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px">
</button>
</div>
<div><b>Level:</b><span id="displayLevel"> 1 </span>
<img src="images/plus.png" id="buyLevel" width="20px" height="18px">
</div>
<div><b>Production:</b><span id="production"> 1 </span> $</div>
<div>(Prod. per click)
</div>
<div><b>Level price:</b><span id="pretlevel"> 0 </span> $</div>
</div>
<div class="item">
<div class="line">
<b>Lemonade stand</b>
</div>
<div class="line">
<button id="countButton" style="padding: 2px;">
<img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px">
</button>
</div>
<div><b>Level:</b><span id="displayLevel"> 1 </span>
<img src="images/plus.png" id="buyLevel" width="20px" height="18px">
</div>
<div><b>Production:</b><span id="production"> 1 </span> $</div>
<div>(Prod. per click)
</div>
<div><b>Level price:</b><span id="pretlevel"> 0 </span> $</div>
</div>
</div>
And I've placed both item inside item-container and you can manipulate the width of the parent to achieve a grid system if you desire.
Just a quick note also, if you use float look what is a clearfix. What is a clearfix?
Or using table, table-row, table-cell for display divs
div container isn't centered vertically, only horizontally... You can use, for example, margin:100px auto; ....
JSFiddle example (not centered vertically :( )
You can use either display: table (which has some browser compatibility issues) and display: inline-block (which I preffer):
<div style="background: url(images/texture.png);display:inline-block;width:45%; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
<div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
<div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
<div><b><font color="brown">Level:</font></b></td> <td> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
<div><b><font color="green">Production:</font></b> </td> <td> <span id="production"> 1 </span> $ </div>
<div> <font style="font-size: 15px">(Prod. per click) </font> </div>
<div><b><font color="red">Level price:</font></b> </td> <td> <span id="pretlevel"> 0 </span> $ </div>
</div><div style="background: url(images/texture.png);display:inline-block;width:45%; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
<div style="padding-bottom: 7px"><b><center>Restaurant</center></b></div>
<div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
<div><b><font color="brown">Level:</font></b></td> <td> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
<div><b><font color="green">Production:</font></b> </td> <td> <span id="production"> 1 </span> $ </div>
<div> <font style="font-size: 15px">(Prod. per click) </font> </div>
<div><b><font color="red">Level price:</font></b> </td> <td> <span id="pretlevel"> 0 </span> $ </div>
</div>
.bloc {
background: url(images/texture.png);
display: inline-block;
margin-left: auto;
margin-right:auto;
border: solid black 2px;
padding: 10px
}
.bloc-title {
padding-bottom: 7px;
font-weight : bold;
text-align : center;
}
.bouton-count {
padding: 2px;
}
.bloc-main-image {
padding: 2px;
width : 50px;
height : 50px;
}
.bloc-level-name {
font-weight : bold;
color : brown;
}
.bloc-image-plus {
width : 20px;
height : 18px;
}
.bloc-production {
font-weight : bold;
color : green;
}
.bloc-prod-per-click {
font-size : 15px;
}
.bloc-level-price {
color : red;
font-weight : bold;
}
.custom-table {
display : table;
width : 100%;
}
.custom-cell {
display : table-cell;
vertical-align : middle;
}
.custom-cell-right {
text-align : right;
]
<div class="custom-table">
<div class="custom-cell custom-cell-right">
<div class="bloc">
<div class="bloc-title">
Lemonade stand
</div>
<div class="bloc-title">
<button id="countButton" class="bouton-count">
<img src="images/lemonade.png" class="bloc-main-image">
</button>
</div>
<div>
<span class="bloc-level-name">Level:</span>
<span id="displayLevel">1</span>
<img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
</div>
<div>
<span class="bloc-production">Production:</span>
<span id="production">1</span>
$
</div>
<div class="bloc-prod-per-click">
(Prod. per click)
</div>
<div>
<span class="bloc-level-price">Level price:</span>
<span id="pretlevel"> 0 </span> $ </div>
</div>
</div>
<div class="custom-cell">
<div class="bloc">
<div class="bloc-title">
Lemonade stand
</div>
<div class="bloc-title">
<button id="countButton" class="bouton-count">
<img src="images/lemonade.png" class="bloc-main-image">
</button>
</div>
<div>
<span class="bloc-level-name">Level:</span>
<span id="displayLevel">1</span>
<img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
</div>
<div>
<span class="bloc-production">Production:</span>
<span id="production">1</span>
$
</div>
<div class="bloc-prod-per-click">
(Prod. per click)
</div>
<div>
<span class="bloc-level-price">Level price:</span>
<span id="pretlevel"> 0 </span> $ </div>
</div>
</div>
</div>
<div class="custom-table">
<div class="custom-cell custom-cell-right">
<div class="bloc">
<div class="bloc-title">
Lemonade stand
</div>
<div class="bloc-title">
<button id="countButton" class="bouton-count">
<img src="images/lemonade.png" class="bloc-main-image">
</button>
</div>
<div>
<span class="bloc-level-name">Level:</span>
<span id="displayLevel">1</span>
<img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
</div>
<div>
<span class="bloc-production">Production:</span>
<span id="production">1</span>
$
</div>
<div class="bloc-prod-per-click">
(Prod. per click)
</div>
<div>
<span class="bloc-level-price">Level price:</span>
<span id="pretlevel"> 0 </span> $ </div>
</div>
</div>
<div class="custom-cell">
<div class="bloc">
<div class="bloc-title">
Lemonade stand
</div>
<div class="bloc-title">
<button id="countButton" class="bouton-count">
<img src="images/lemonade.png" class="bloc-main-image">
</button>
</div>
<div>
<span class="bloc-level-name">Level:</span>
<span id="displayLevel">1</span>
<img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
</div>
<div>
<span class="bloc-production">Production:</span>
<span id="production">1</span>
$
</div>
<div class="bloc-prod-per-click">
(Prod. per click)
</div>
<div>
<span class="bloc-level-price">Level price:</span>
<span id="pretlevel"> 0 </span> $ </div>
</div>
</div>
</div>
I put your css away and I used 2 div container to simulate a table behaviour.
Here I "packed" your bloc in 2 <div>, one with the CSS property display : table which render a table row, and the sub <div> with the property display : table-cell which render a table-cell.
I want to print 3 tables in each A4 paper.
My Html code is this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: tahoma;
color: #333333;
-webkit-print-color-adjust: exact;
}
body {
font-size:4.5mm;
margin-left: 2mm;
margin-top: 2mm;
margin-right: 2mm;
margin-bottom: 2mm;
}
#page {
width:210mm;
height:297mm;
padding:0px;
margin:0px;
-webkit-print-color-adjust: exact;
}
#container{
border:1mm #000000 solid; float:left; height:80mm;
width:195mm; margin-bottom:2mm;
}
-->
</style>
</head>
<body>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
</body>
</html>
In print preview some pages are correct ( 3 tables in A4 page ) and some pages are wrong ( more/least than 3 tables in A4 page )
I want to print exactly 3 tables in each A4 page.
Excuse me for my English.
Please guide me with code.
How are you trying to printing it - #page property might not be supported by all browsers. You could use an HTML to PDF converter like Weasyprint where you can supply your HTML and generate a PDF which you could print. You need to do this after each table(assuming the table itself is less than a A4 sheet):
<div style="page-break-after:always"></div>
I'm very new to programming but so far I'm addicted to it! I've looked on this site before posting my own question. I have found part of what I looked for but after trying few codes around, it didn't work so I thought about breaking the ice and asking for help!
Note: I'm using Kompozer.
What I try to attempt: I want the header and the footers to be full width while keeping the rest centered. I also want the white space below the footer to be full width just like at the top of the header. See this example.
Compared to that website, my website is yes centered but there is white space on each side and a bit of it below my footer. I hope I'm being clear enough for you to give me a hand! Thanks a lot!
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
#wrap {
margin: 0 auto;
width: 1156px;
}
<body>
<div id="wrap">
<div id="headers">
<div id="left">
<div id="h1">
<div style="text-align: left;">
<div style="text-align: left;">
<img style="width: 27px; height: 27px;" alt="" src="images/phone-icon-hi.png" align="top" vspace="5">+1-844-Meb-Zone
<img style="width: 27px; height: 27px;" alt="" src="images/icon-mail-grey-150x150.png" align="top" vspace="5">support#meb-zone.com
<br>
</div>
</div>
<br>
</div>
</div>
<div id="right">
<div style="text-align: right;" id="h2">
<img style="width: 33px; height: 33px;" alt="" src="images/lightbulb-grey.png" align="top" vspace="5">Try Our Customer Rewards Program & Save Money on every order!
<img style="width: 33px; height: 33px;" alt="" src="images/lightbulb-grey.png" align="top" vspace="5">
<br>
</div>
</div>
</div>
<div id="menus">
<div id="left">
<div id="m1">
<div style="text-align: center;">
<div style="text-align: left;">
<img style="width: 384px; height: 76px;" alt="" src="logo/LGO2015_2.png" align="middle">
<br>
</div>
<br>
</div>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div id="right">
<br>
</div>
</div>
<div id="navigations">
<div id="left">
<div style="text-align: center;" id="nav1">
<div style="text-align: left;">HomeStoreBlogContactFAQ
<br>
</div>
<br>
</div>
</div>
<div id="right">
<div style="text-align: right;" id="n2">
<img style="width: 18px; height: 18px;" alt="" src="images/user.png" align="top" vspace="5">My Account
<img style="width: 18px; height: 18px;" alt="" src="images/basic1-136_heart_favorite_list-128.png" align="top" vspace="5">My wishlist
<img style="width: 24px; height: 24px;" alt="" src="images/36.png" align="top" vspace="5">Checkout
<img style="width: 21px; height: 21px;" alt="" src="images/checkout-empty-128.png" align="top" vspace="5">Cart
<img style="width: 18px; height: 18px;" alt="" src="images/protection_lock-512.png" align="top" vspace="5">Login
<br>
<br>
<br>
</div>
</div>
</div>
<div style="text-align: left;">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<br>
</div>
<br>
<br>
<br>
<br>
<div id="store_content">
<div id="left_st">
<div id="category">category left</div>
</div>
<div id="right_st">
<div id="products">products left</div>
</div>
</div>
<div id="footers">
<div id="left">
<div style="text-align: center;">
<div style="text-align: left;">SERVICE
<br>Contact Us
<br>Blog
<br>FAQ's
<br>Customer Rewards Program
<br>
</div>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div id="right">
<div style="text-align: right;" id="f2">ABOUT MEB ZONE
<br>Shipping & Payment
<br>Terms Of Service
<br>Return Policy
<br>Privacy Policy
<br>Company Information
<br>
</div>
</div>
</div>
<div id="bottom_footer">
<br>
<div style="text-align: center;">
Copyright © 2015 Meb Zone.com All rights Reserved.
<br>
</div>
<br>
</div>
</div>
</body>
I think your problem is from the body.
Try this:
body {
padding:0;
margin:0;
}
or this..
<body style="margin:0; padding:0">
(all your stuff here)
</body>