I try to create a price tag with dom pdf. The price tag consists of some div containers. One of these containers have a max-height, but this is not working. Because if I change the text of this container to a text with 200 words instead of 100, the price tag is scaling higher.
But I need a fixed height.
Is this an issue?
HTML:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="tag">
<div class="header">
Product
</div>
<div class="article">
<div class="info">Lorem sd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div class="barcode">
<p>Barcode</p>
</div>
</div>
</body>
</html>
CSS:
.tag {
border-style: solid;
min-width:11.5cm;
max-width:11.5cm;
max-height:3.5cm;
margin:0.1cm;
padding:0.1cm;
}
.header {
min-width:11.5cm;
max-width:11.5cm;
font-size:35px;
font-weight:bold;
}
.article {
min-width:11.5cm;
max-width:11.5cm;
}
.info {
float:left;
text-align:left;
min-width:7.5cm;
max-width:7.5cm;
min-height:2.0cm;
max-height:2.0cm;
font-size:10px;
}
.barcode {
text-align:center;
min-width:11.5cm;
max-width:11.5cm;
}`
The .info class and the .tag class are important. max-width is working correctly.
If you want fix height, just use height and give it a fixed value and use overflow: hidden to hide extra data.
Change in CSS:
.info {
overflow: hidden;
float:left;
text-align:left;
min-width:7.5cm;
max-width:7.5cm;
height:35px;
font-size:10px;
}
See working example here: FIDDLE
I found the solution. It is a little bit confusing.
max-height and min-height are not working. If I use a solution only with height it is correctly working.
#Aayushi Jain:
Your solution is working, the only problem was that my browser uses the old css from cache instead of the new version.
Related
What I've done so far
First of all I'm REALLY NEW at laravel. I'm watching a great tutorial on YouTube and following most of the instructions. I uploaded the project to my domain, because I wanted to try out how the database connections worked in a production environment and using MySql (the guy uses sqlite in the video).
Even though I managed to make the project work as its supposed to, when I open up the page, it doesn't look alright, the smaller the screen is, the worst it looks, you can move sideways (it's hideous, really).
It used to work fine
When I created a blank laravel project from hostinger, and I accesed it with my cellphone, for instance, it worked well, and by that I mean that the font that said "Laravel" had margins and everything looked centered and as one is supposed to see a bootstrapped page. After I created a project following the tutorial and uploaded it, the nightmare started.
Showing you the code
The base laravel project says "Laravel" where my project says "gastiGram" (It's commented as "¡¡¡HERE IS THE PROBLEM!!!"); maybe with the less letters it works well on mobile (of course I'm kidding, I must have messed up somewhere). This is the code, guys and gals, so maybe you can help me out. Thanks.
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gastiGram</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
gastiGram <!-- ¡¡¡HERE IS THE PROBLEM!!! -->
</div>
<div class="navbar-brand">
<div>
</div>
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
Vapor
GitHub
</div>
</div>
</div>
</body>
</html>
As no one seemed to find an answer for me...
I tried what others said and my conclusion is that it wasn't a problem with bootstrap nor vue. I guess it was the fact that the classes content and title m-b-md didn't provide the desire responsiveness I expected from the text
<div class="content">
<div class="title m-b-md">
gastiGram <!-- ¡¡¡HERE IS WHERE THE PROBLEM WAS!!! -->
</div>
<div class="navbar-brand">
<div>
</div>
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
Vapor
GitHub
</div>
</div>
I'm willing to accept an answer that demonstrates that what I'm saying is wrong and I can apply other solution to my problem in this project.
Kamlesh Paul suggestions were useful to me... now I have a little bit of a better understanding on how laravel works; still it was insufficient since the font was collapsing sideways applying what he said would work, but didn't, so I just applied the style manually
<h1 style="font-size:20vw;">gastiGram</h1>
<link href="{{asset('css/app.css')}}" rel="stylesheet">
I solved the problem placing this code in head section of welcome.blade.php page.
For some reason, IE-8 doesn't display my menu inline. (see picture attached)
My code is:
#navigation #main-menu {
display: inline-block;
float: none;
margin: 0 auto;
padding: 0;
position: relative;
text-align: center;
line-height: 18px;
font-size: 12px;
list-style: none;
}
I have found the following post IE8 display inline-block not working. Tried adding the Doctype, as well as added this code:
<!-- [if lt IE 8]>
<style type="text/css">
#navigation #main-menu {
display: inline;
}
</style>
<![endif]-->
Still doesn't work, any advice? you can see a picture with the issue here: http://preciseos.com/PreciseOs/Untitled.jpg
Here is the html code:
<ul style="margin-top:20px;margin-right: 10%;" class="nav-collapse collapse" id="main-menu">
<li class="active">Home</li>
<li class="">About</li>
<li>Services</li>
<li>Work</li>
<li>Contact</li>
You can also see the issue at www.preciseos.com.
Thanks,
Oz
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Why dont you add this?? which is the answer of your source. Give it try
IE8 will treat it as a block level element unless you use float
Note:
I posted doctype as comment but it was corrupted, so posting this as answer
Updated:
HTML
<ul id="main-menu">
<li class="actives">Home
</li>
<li class="actives">About
</li>
<li class="actives">Services
</li>
<li class="actives">Work
</li>
<li class="actives">Contact
</li>
</ul>
CSS
.actives {
display: inline;
padding:10px;
float: left;
}
a {
text-decoration:none;
}
Demo
The reason it breaks the layout is IE8 does'nt support HTML5 Elements such as nav.
Instead you can use <div> tag or try including javascript Workaround HTML5shiv to support IE
First, make sure you target the li element with your selector
#navigation #main-menu li
as well try using float instead of display: inline;
#navigation #main-menu li {
display: block;
float: left;
margin-right: 10px;
}
As Surjith SM said, the IE8 doesn't support HTML5 elements such as nav.
The problem was solved by adding the following code:
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
html5shi(m|v) creates doc elements for all the html5 elements so the styles from your CSS can kick in. Default behaviour for IE is to ignore unknown elements. For more info see header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don't support HTML5?
Sorry, May be my tone is not good,
Question:
I am using CSS3 code of opacity background like this
Edit: (adding code)
CSS:
opecity {
opacity:.75;
content:('Hello');
background:#111 url(../img/view.png) no-repeat center;
}
.opecity img:hover{
-moz-opacity: 0.10;
opacity: 0.10;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
background:#000;
}
HTML:
<div class="opecity">
<a class="example-image-link" href="img/port1.png" data-lightbox="example-1">
<img class="example-image" src="img/port1.png" alt="thumb-1" width="250" height="220"/>
</a>
</div>
This code display image only, but not display content 'Hello'. But I want to display image and content together at the same time. I also concern with this
Stackoweflow.com question.
Image and text with opacity background in the same DIV
But I don't get solution.
First line, You've opecity { and you should use .opecity because it's a class.
Separate the Content and place it in his own .classs {}
I.E:
.example-image-link:hover:after {
content:'Hello';
}
It wont work if you use it before or after the image class (Try This)
<\div class="opecity">
<\a class="example-image-link" href="img/port1.png"
data-lightbox="example-1"> <\img class="example-image"
src="http://humor.desvariandoando.com/wp-content/uploads/susto.jpg"
alt="thumb-1" width="250" height="220"/> </div>
.example-image-link:hover:after { content:'Hello'; }
remove the \ and change .example-image-link:hover:after for img:hover:after
The link that you posted they used another method:
try this:
<!DOCTYPE html>
<html>
<body>
<style>
div{
position: relative;
}
span{
background: rgba(0,0,0,0.5);
position: absolute;
bottom: 0;
left: 0;
padding: 6px;
display: block;
}
</style>
<div>
<span>Title</span>
<img src="http://humor.desvariandoando.com/wp-content/uploads/susto.jpg" />
</div>
</body>
</html>
(I took it from your link)
you can test all the html and css here: http://jsfiddle.net/
from W3Schools: "The content property is used with the :before and :after pseudo-elements, to insert generated content."
Try
.opecity:after {
content:'Hello';
}
I'm having a issue with the min-height in firefox, I'm trying to put it at 100% but it is not working. In Chrome it works perfectly.
My code is:
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="../css/main.css"/>
</head>
<body>
<div class="main">
<div class="header">Here is the header</div>
<div class="content ">Here is the content</div>
<div class="footer">Here is the footer</div>
</div>
</body>
</html>
And the css file is
.header {
height:160px;
}
.content{
min-height: 100%;
height: auto !important;
height: 100%;
}
.footer{
margin: -215px auto 0 0;
height: 55px;
}
All I'm trying to do is to keep the footer at the bottom of the page, in Chrome it is working, but in firefox it takes no height for the content.
I've been looking for the solution and in many people say to put
#page{min-height:100%;}
html, body{min-height:100%;}
but it makes the same, it still works in chrome but not in firefox.
Can somebody help me?
Thanks
if you're just trying to keep the footer at the bottom you could use
.footer{
position:fixed; /*or absolute, or whatever*/
bottom:0px;
height: 55px;
}
I have a problem with IE8 in quirks mode. I have an outer div element that wraps two inner divs.
<div style="margin-left:160px; margin-top:10px; margin-right:0px; height:10px; background:blue;">
<div style="position:relative; float:left; width:10px; height:10px; background:orange;"></div>
<div style="position:relative; margin-left:10px; margin-right:0px;height:10px; background:green;"></div>
</div>
The inner divs should span the whole of the wrapper div, and it works fine in firefox and chrome. But when I view this in IE8 there is a strange gap between orange div and the green div. Does anyone know how to fix this (or to work around it)? Also, I can't put a doctype declaration anywhere in the document.
Use absolute positioning on the content and relative positioning on the container for quirks mode:
<html lang="en">
<head>
<title>Quirksmode Tests</title>
</head>
<body>
<div style="position:relative; margin-left:160px; margin-top:10px; margin-right:0px; height:10px; background-color:blue;">
<div style="position:absolute; top:0; width:100%; right:0; height:10px; background-color:green;"></div>
<div style="position:absolute; top:0; left:0; width:10px; height:10px; background-color:orange;"></div>
</div>
</body>
</html>
References
CSS - Quirks mode and strict mode
What happens in Quirks Mode in web browsers?