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;
}
Related
New to Javascript and have spent hours on this problem :/
I want to implement a smooth scrolling effect to move to different sections of a webpage. I am using this piece of javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main')
.animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
This is the basic structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin-left: 30%; margin-right: 30%">
<main>
<div class="contactme-button">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: grey; display: block;"> </div>
<div class="contactme-button-2">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: blue; display: block;"> </div>
<div class="contactme-section" id="contactme" style="width: 100%; height: 100px; background-color: grey;">CONTACT ME</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: black; display: block;"> </div>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main').animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
</script>
</html>
(there is more content in there but that is the basic structure that is giving me grief)
I discovered that in
.main{
overflow-x: hidden;
}
is stopping the normal operation of the scrolling and cause the second link to scroll to a random spot
There's a CSS declaration that may help here:
.your-anchor-element-class {
scroll-margin-top: 36px; // <-- your value here
}
Browser support: Works natively in Chrome, FF, Edge, Opera. Supported in Safari with scroll-snap-margin-top.
MDN docs.
Credit to Josh Comeau for pointing this out.
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.
I made container with attribute flex. Put inside 3 images with same height 830px but different width:
img 602x830 px
img 613x830 px
img 599x830 px
made for images attribute: width 100%
All seems to look correct until screen size is more then 630px. After the screen became 630 px and less the height of one image (2-img) became less then others two images.
How to made all images the same height no matter what the screen size becomes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Document</title>
<style type="text/css">
.category-block {
max-width: 768px;
margin:0 auto;
overflow:hidden;
}
.flex-block {
display:flex;
flex-direction: row;
align-items: stretch;
}
.flex-block img {
width: 100%;
}
</style>
</head>
<body>
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="1-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="2-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="3-img.jpg"></img>
</div>
</div>
</div>
</body>
</html>
This is an issue I found on Firefox and I haven't found why it fail.
Here is one workaround, using a Firefox CSS hack, making also the flex-block__area a flex container.
The CSS hack is needed to target only on Firefox, or else it will mess up the other browsers instead
Fiddle demo
Stack snippet
.category-block {
max-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
/* Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
.flex-block__area {
display: flex;
}
}
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="http://placehold.it/602x830/f00">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/613x830/0f0">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/599x830/00f">
</div>
</div>
</div>
I have a page with list of 18 links in sidebar, and on clicking a link main section image must change. By default first images is visible. I know it can be done. please help me.
Thanks
kristtee
This should be enough to get you moving in the right direction. This particular example uses jQuery and is only one of many ways to implement something like this.
<!DOCTYPE html>
<html>
<head>
<style>
.main img {
width: 500px;
height: 500px;
}
.thumbs img {
width: 50px;
height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<img src="https://static.pexels.com/photos/20787/pexels-photo.jpg" alt="cat">
</div>
<div class="thumbs">
<img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-24.jpg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-7.jpg" alt="cat">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.thumbs img').on('click', function(){
var src = $(this).attr('src');
$('.main img').attr('src', src);
})
})
</script>
</body>
</html>
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?