I am trying to have the text overlap the triangle on my code. Tried z-index but I still can't figure out what the error is.
Ten principles of rapid skill acquisition
by Josh Kaufman
<div class="table_theme_dark">
<div class="table__cell_theme_dark">
<ul>
<li class="table__heading_theme_dark">1</li>
<li class="table__text_theme_dark">Choose a lovable project</li>
</ul>
</div>
.kaufman-triangle {
position: absolute;
overflow: hidden;
width: 660px;
height: 636px;
top: 250px;
right: 0;}
Related
Here is my html:
<div class="rack-label" *ngFor="let product of productsToPrint;let indexOfElement=index;let l=count; " >
// Showing barcodes here
<div *ngIf="(indexOfElement+1)%12==0" class="row-footer">
// And i want to page-break-after works here
// cuz i am showing barcodes
</div>
</div>
`
And here is my css to print page:
#media print {
#page{
margin:3mm 0mm 2mm 3mm;
border: 1px solid red;
/* height: 210mm;
width: 148.5mm; */
size:A4;
margin: 0;
}
html{
border: 1px solid yellow;
}
body
{
width: 210mm;
height: 297mm;
display: grid;
grid-template-columns: 9cm 9cm 9cm;
grid-template-rows:auto auto auto;
}
.row-footer{
clear: both; page-break-before: always;
page-break-inside: avoid;
}
}
Or is there anyway to fix this issue ? Actually all i want to do print 3 col 4 rows barcode to an A5 page.But its not working on ng-print.So i want to do set is as A4 and let space to half of page.
The problem seems to be that absolute positioned elements don't take up any space. Chromium seems to be considering the page essentially blank, so a new page is not necessary.
I've address the issue by giving a minimal size to the relative positioned elements that contain the absolute positioned elements.
I cannot reproduce your example, because I do not know what you are inserting for the barcodes, and your non-printing styles may also be impacting it, but here is an example that produces the problem, and a solution.
Problem, the HTML below will all print on the same page (sometimes, it breaks after first page):
<body style="margin:0">
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
1
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
2
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
3
</div>
</div>
</body>
The divs with relative positioning are all zero size, and the absolute positioned elements inside of it don't impact the size. Adding a 1mm width and height, gives proper page breaks
<body style="margin:0">
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
1
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
2
</div>
</div>
<div style="position:relative;break-after:page;margin:0;padding:0;width:1mm;height:1mm" >
<div style="width: 57.15mm; height: 30.75mm; position: absolute; overflow: hidden; break-inside: avoid; left: 0mm; top: 0mm;">
3
</div>
</div>
</body>
Hello I have one Nivo slider setting question . Currently I have one challenge and can not find the right solution -- trying to make webpage mobile friendly , auto resize image when I view it on mobile device.
here is my code and what I have tried , but still not having the right outcome as I want. does anyone can help me on this? not sure which part I did wrong.
<div id="banner_image">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img class="innerimage" src="image/1.jpg" alt=""/>
<img class="innerimage" src="image/2.jpg" alt=""/>
<img class="innerimage" src="image/3.jpg" alt=""/>
</div>
</div>
</div>
my CSS :
#banner_image {
width: 1024px;
height: 531px;
float: left;
margin-left: 10px;
padding: 0 0 0 0;}
#slider-wrapper {
width: 1024px;
height: 531px;
background: transparent;}
#slider {
background: url("../image/loading.gif") no-repeat scroll 50% 50% transparent;
width: 920px;
height: 400px;
position: relative;}
#slider img {
display: none;
left: 0;
position: absolute;
top: 0;}
I googled and tried below changes but the image still not able to resize on mobile screen. It's appreciate if anyone would help me to understand what I did wrong. thanks
<!--trying 1 -->
#banner_image, #slider-wrapper, .nivoSlide img{
width:100%;
height:auto;}
<!--trying 2 -->
<img class="innerimage" src="image/1.jpg" width="1024px" alt=""/>
<img class="innerimage" src="image/2.jpg" width="1024px" alt=""/>
<img class="innerimage" src="image/3.jpg" width="1024px" alt=""/>
CSS
#banner_image, #slider-wrapper, .nivoSlide img{
max-width:100%;
height:auto;}
Dear fellow stackoverflowers,
I'm having a peculiar problem I can't seem to find the solution for.
I'm trying to apply the width of the largest div to the smaller divs, so that they appear equal in width, through flexboxing. Unfortunately, all the solutions so far have been futile efforts. Do you have any idea why the different divs in the example I've linked to won't display the same width as the largest element? I know the boxes get their width from the content, but I just can't seem to make them behave the way I want.
HTML
<section id="contact" class="wrapper bgfixed">
<div>
<h1>Contact</h1>
<div id="contactholder">
<a href="#">
<div>
<h1 class="icon-mail"></h1>
<h2>EMAIL</h2>
<p>someonesprofessionalemail#gmail.com</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-old-phone"></h1>
<h2>TELEPHONE</h2>
<p>39 88 49 92 91</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-facebook2"></h1>
<h2>FACEBOOK</h2>
<p>www.facebooooooooooooooooooook.com/snowman</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-soundcloud"></h1>
<h2>LOREM IPSUM</h2>
<p>www.loremipsumyesyesyesblahblabhlabh.com</p>
</div>
</a>
</div>
</div>
</section>
CSS
a{text-decoration: none;}
#contact
{
width: 100%;
height: 82vh;
color: whitesmoke;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: #34495e;
}
#contactholder
{
display: flex;
justify-content: space-between;
font-size: 80%;
}
#contactholder div
{
flex: 1;
flex-grow: 1;
font-size: 0.5rem;
}
#contactholder div h1
{
padding: 3rem;
letter-spacing: 0;
display: inline-block;
background-image: linear-gradient(white, 1%, #3498db);
border-radius: 100rem;
box-shadow: 0 1px 1px grey;
transition: 0.3s;
margin-bottom: -0.5rem;
}
#contactholder a:hover h1
{
background-image: linear-gradient(white, 1%, #00A4EB);
text-shadow: 0 1px 1px;
}
Hoping for some brilliant minds!
Best wishes,
Lodott1
I have a problem with safari. I have searched for 6 hours straight for a fix, so exscuse me if my explanation is bad. So the thing is: I have added a hover effect on my thumbnails, it works in all browsers, but the thumbs are not placed correctly in safari and IE.
I have tried to use:
#media screen and (-webkit-min-device-pixel-ratio:0){
img.a {
position: absolute;
top: -500;
z-index: 10;
}
img.b {
position: absolute;
top: -500;
}
}
But this works for webkit browser, meaning chrome as well.
The css I am currently using which works in chrome and firefox:
img.a {
position: absolute;
top: -500;
margin-left: -115px;
z-index: 10;
width: 230px;
height: 120px;
border: none;
}
img.b {
position: absolute;
top: -500;
margin-left: -115px;
width: 230px;
height: 120px;
border: none;
}
If anyone has a solution it would really save my day :)
Here is the site if you need to inspect: www.janthorb.com
Get rid of the CSS
div#thumbnails {
text-align:center;
}
and also get rid of your margin-left: -115px for your images and you will have something that works in both browswers.
You page code is a mess, no alignment. HTML structure is not reasonable, and cause CSS also is very not science. I rewrote your structure, you can reference.
.demo{ width:820px;margin:0 auto;}
.list{ margin-right:-20px; zoom:1;}
.list li{ float:left; width:230px; height:135px; margin:0 36px 25px 0; overflow:hidden; zoom:1;}
.link{ position:relative;width:228px; height:120px; display:block;border:thin dashed #1b1b1b; overflow:hidden;}
.link img{ position:absolute;top:0;left:0; }
.link .gray{ z-index:11;}
.link .hover{ z-index:10;}
<ul class="list">
<li>
<a class="link" href="#">
<img class="gray" src="http://www.janthorb.com/thumb1_bw.jpg" alt="">
<img class="hover" src="http://www.janthorb.com/thumb1.jpg" alt="">
</a>
</li>
<li>
<a class="link" href="#">
<img class="gray" src="http://www.janthorb.com/thumb1_bw.jpg" alt="">
<img class="hover" src="http://www.janthorb.com/thumb1.jpg" alt="">
</a>
</li>
</ul>
and demo is here
I have a simple problem which i cannot figure out. Look at this html code:
<div id="container">
<div id="content">
<div id="menu">
<ul>
<li>pagina's</li>
<li>home</li>
<li>kamers</li>
<li>over ons</li>
</ul>
</div>
<div class="clearfloats"></div>
<div id="cmscontent">
<div id="sidebar">
<ul>
<li>overzicht van de pagina's</li>
<li class="last">pagina toevoegen</li>
</ul>
</div>
<div id="main">
<h1 class="maintitle">
overzicht van de pagina's
</h1>
<div id="maincontent">
sdfsd
</div>
</div>
<div class="clearfloats"></div>
</div>
</div>
</div>
CSS:
#container {
width: 84%;
margin: 0 auto;
}
#content {
margin-top: 50px;
min-width: 1140px;
}
#cmscontent {
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 44px 30px 44px 30px;
position: relative;
z-index: 3;
}
#sidebar{
padding: 14px 24px 14px 24px;
width: 306px;
background-color: #f8f8f8;
float: left;
}
#main {
float: left;
margin-left: 80px;
width: 100%;
}
The problem is that the last container: #main, standard is only as wide as the content it has. So i'm obliged to add a fixed width to it (px). The whole point of my design is that i have floating percentual divs so that's a bummer. Adding 100% width or any other number in %, also has problems of its own..
Is there anyone that a solution for me?
Thank you!
http://www.mathijsdelva.be/cms/
I haven't finetuned anything; i only just html'ed for Safari as of the moment.
The problem is that the last container: #main, standard is only as wide as the content it has.
Tried using display: block for #main ?
What are you actually trying to do here? Are you trying to make a flexible design?