I try to use flickity to have a good looking lazy loading image carousel. It works great on chrome and safari but the slide doesn't size correctly to the image in firefox.
Please try the following link with firefox and another browser to get the idea: imagescroll
Does anyone knows how to fix the issue with firefox without losing the ability to have variable slide widths? Thank you very much!
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/flickity#2.0/dist/flickity.css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<style>
* {box-sizing: border-box;}
body { margin: 0; padding: 0;}
.imgc {
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.carousel img {
display: block;
height: 100%;
opacity: 0;
transition: opacity 0.7s;
}
.carousel img.flickity-lazyloaded {
opacity: 1;
}
</style>
<script src="https://unpkg.com/flickity#2.0/dist/flickity.pkgd.min.js"></script>
</head>
<body>
<!-- Flickity HTML init -->
<div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "wrapAround":true,"draggable": true, "pageDots": false, "prevNextButtons": false,"setGallerySize": false,"lazyLoad":true,"lazyLoad": 1}'>
<div class="imgc" style="background-image: url('static/room/image1_small.jpg')">
<img src="static/room/image1_small.jpg" data-flickity-lazyload="static/room/comp/image1.jpg" alt="orange tree" />
</div>
<div class="imgc" style="background-image: url('static/room/image2_small.jpg')">
<img src="static/room/image2_small.jpg" data-flickity-lazyload="static/room/comp/image2.jpg" alt="submerged" />
</div>
<div class="imgc" style="background-image: url('static/room/image3_small.jpg')">
<img src="static/room/image3_small.jpg" data-flickity-lazyload="static/room/comp/image3.jpg" alt="look-out" />
</div>
<div class="imgc" style="background-image: url('static/room/image4_small.jpg')">
<img src="static/room/image4_small.jpg" data-flickity-lazyload="static/room/comp/image4.jpg" alt="One World Trade" />
</div>
<div class="imgc" style="background-image: url('static/room/image5_small.jpg')">
<img src="static/room/image5_small.jpg" data-flickity-lazyload="static/room/comp/image5.jpg" alt="drizzle" />
</div>
<div class="imgc" style="background-image: url('static/room/image6_small.jpg')">
<img src="static/room/image6_small.jpg" data-flickity-lazyload="static/room/comp/image6.jpg" alt="cat nose" />
</div>
</div>
</body>
</html>
Related
The two main problems is the icons aren't close to the corresponding text I tried padding but it didn't work but that could have just been me, The second problem is the text is in the center of the page I think that might be the CSS because I added center so that the text would be centered to the image but maybe it's affecting everything. This is the example I'm trying to make it look like.
[my website][1]
[example website][2]
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<link rel="javascript" href="javascript/script.js">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<style>
Body {
margin: 0;
height: 100vh;
}
canvas {
display: block;
}
.img-with-text {
text-align: center;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
</style>
<!-- <img src="images\Aboutme.png" alt="rorschach">
<img src="images\Contact.png" alt="Holding hands"> -->
<div class="img-with-text">
<img src="images\Folder.png" alt="A folder" />
<p>Projects</p>
</div>
<div class="img-with-text">
<img src="images\Aboutme.png" alt="rorschach" />
<p>About me</p>
</div>
<div class="img-with-text">
<img src="images\Contact.png" alt="Holding hands" />
<p>Contact</p>
</div>
<div class="img-with-text">
<img src="images\Ideas.png" alt="Holding hands" />
<p>Contact</p>
</div>
</html>```
[1]: https://i.stack.imgur.com/nfjQC.png
[2]: https://i.stack.imgur.com/z7BeK.png
It looks like [1] and [2] are the same image, so it doesn't help much.
Regarding the problem of moving the items to the left, I would suggest to wrap all <div class="img-with-text"> items in a <div class="items"> and set for it:
.items {
display: flex;
flex-direction: column;
align-items: flex-start;
}
This way you have more control over your items.
About the distance between the text and image, <p> always comes with a default margin (top and bottom)...so maybe it could be that? If you wanna try it out just put:
.img-with-text p {
margin: 0;
}
A screenshot with your elements being inspected would help to visualize what you want.
I'm trying to nest containers with Twitter Bootstrap to achieve the following in this screen shot. In the PSD the bubble image height is 404px. I need this to look good across all devices, so responsiveness is a must and should scale accordingly without overwhelming the screen.Could somebody please point me in the right direction to nail the CSS down for this?
I have added what I've done so far in Bootstrap to make this happen but it is off and need to get the containers right. I've read that containers in bootstrap shouldn't be nested but "can be".
I have nested containers but can't seem to achieve what is in the screen shots with Bootstrap.
<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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Page Title</title>
</head>
<body>
<div class=".container-fluid">
<div class="row">
<div class="col-lg-12 top">
TOP TRENDING STORY FOR AUGUST 21, 2019
</div>
</div>
<div class="row">
<div class="col-lg-12 bg-top">
<div class="container">
<div class="row">
<div class="col-md-6">
test 1
</div>
<div class="col-md-6">
Test 2
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.top{
background-color: #d42222;
color:#FFFFFF;
font-size:23px;
text-align: center;
}
.bg-top{
background:transparent url('../images/background-top.png') no-repeat center center /cover;
}
This needs some styling to get what you want; You can take a look at the left and right margins which are inserted by Bootstrap .container and may want to override them; to get closer to the image you shared, I added some top and bottom margins myself;
Complete working snippet below:
.redBanner {
background: red;
}
.redBanner p {
margin-bottom: 0;
}
.myExternalContainer {
background-image: url("https://www.akberiqbal.com/Jumbo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: lightblue;
padding-bottom: 5%;
}
.myInternalContainer {
margin-top: 10%;
margin-bottom: 10%;
}
.innerMostContainer {
margin: 10%;
}
.innerMostContainer button {
width: 100%;
}
.container {
background: #fff
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid myExternalContainer">
<div class="row">
<div class="col-lg-12 top redBanner">
<p class="text-center">TOP TRENDING STORY FOR AUGUST 21, 2019</p>
</div>
</div>
<div class="container myInternalContainer">
<h3 class="text-center"> medicare</h3>
<div class="row">
<div class="innerMostContainer">
<div class="row">
<div class="col-lg-12 bg-top">
<img src='https://www.akberiqbal.com/src/images/LinkedIn4.png' class='img-fluid' />
<div class="row">
<div class="col-6">
Author Name
<br/> Published date
</div>
<div class="col-6">
<button type="button" class='btn btn-primary'>Read time</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
very new to HTML and CSS. Can't get my text to move under my images. I have 4 images and under them I want to be a paragraph of text. This is probably a dumb question so please excuse my ignorance. I cant get the text to move where I want(and the values in the CSS file, pixel wise, are wrong but I can't even get 3 of them to show up to try and adjust them as its under my navbar or the images?). The images show up, in the correct order and are formatted correctly.
Trying to get to look like this:
https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8
Thanks in advance
Here is my CSS/HTML files:
.img {
position: relative;
float: left;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
.text2 {
position:relative;
left:200px;
top:400px:
}
.text3 {
position:absolute;
left:300px;
top:400px:
}
.text4 {
position:absolute;
left:400px;
top:400px:
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="about.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Title</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Links</li>
<li>LinkedIn</li>
<li>Github</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xx.jpg" class="img-circle img">
<div id="text1">
<p>TEXT UNDER PIC 1</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 2</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 3</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 4</p>
</div >
</div>
</body>
</html>
http://codepen.io/lostdino/pen/LpKKra
I wasn't sure if you wanted to keep your HTML structure or if it was open to revision so I just worked within the constraints your provided. What I did was remove your floats and instead use display: inline-block which will stack elements horizontally rather than vertically within their container. You can see I've also used [id*="text"] which will allow the capture of any elements with an id that contains 'text'. I'd suggest also moving away from pixels and go for a more responsive unit such as percentages or rem. If you think there is value in me showing you how I would approach this problem I'm more than happy to throw a quick example together for you. I hope this helps.
.img {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
[id*="text"] {
width: 250px;
display: inline-block;
}
With respect to the other answers assuming there is an image and caption relationship between the text and the images then a possible improvement to the solution would be as follows:
http://codepen.io/lostdino/pen/PPrryZ
.gallery img {
position:relative;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.gallery {
padding-top: 100px;
padding-left: 10px;
position:relative;
}
.gallery > figure {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
}
The HTML of the gallery restructured like so:
<div class="gallery">
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 1</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 2</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 3</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 4</figcaption>
</figure>
</div>
The reason your text isn't aligning as you'd wish is because <p> and <div> are block level elements by default, which means they'll fill space and start on new lines. To remedy this, you could change the display property to be inline.
That said, you're approaching this wrong, you're not grouping your image and the caption together. Your structure should be more along these lines:
<div class="container">
<!-- Image One -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Two -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Three -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
You would then set your desired widths on the .image-container class, and your image and captions will follow suite.
Your paragraphs are not nested in the proper order to achieve this. Make sure you place the paragraph tags within the div tag that contains the images.
Also, use the inspect element tool when you refresh your browser. In Google Chrome, go to View, Developer, and select Developer tools. A new window will appear at the bottom of the browser. When you hover over the font-end interface, the page will highlight your html nesting-structure.
Hope this helps, let me know if you have any more questions!
I have two pages that are making use of absolute and relative positioned elements at the top of the page. The issue is that the lower content is coming in sooner than the header content which is causing a flickering effect on these pages:
http://test.icpm.biz/blog/index.html
http://test.icpm.biz/blog/article.html
It is most noticeable in Chrome.
CSS:
.single-article figure {
position: relative;
overflow: hidden;
min-width: 100%;
max-width: 100%;
max-height: 550px;
width: 100%;
background: #black;
text-align: center;
margin-top: 0px;
padding-top: 0px;
-webkit-transform: translate3d(0, 0, 0);
}
.single-article figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 1000;
-webkit-transform: translate3d(0, 0, 0);
}
.block {
position: absolute;
max-height: 1px;
width: 100%;
z-index: 3000;
top: 0%;
left: 0%;
right: 0%;
bottom: 0%;
-webkit-transform: translate3d(0, 0, 0);
}
HTML:
<!DOCTYPE html>
<html class='no-js' lang='en'>
<head>
<meta charset='utf-8'>
<meta content='IE=edge' http-equiv='X-UA-Compatible'>
<!-- Website Title -->
<title>Institute of Certified Professional Managers</title>
<!-- Metatag Info -->
<meta content='' name='description'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<!-- Favicon and Apple Icons -->
<link href='img/favicon.png' rel='shortcut icon'>
<link href='img/apple-touch-icon.png' rel='apple-touch-icon' sizes='57x57'>
<link href='img/apple-touch-icon-72x72.png' rel='apple-touch-icon' sizes='72x72'>
<link href='img/apple-touch-icon-114x114.png' rel='apple-touch-icon' sizes='114x114'>
<!-- CSS Stylesheets -->
<link href='css/style.css' rel='stylesheet'>
<!-- Include Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Neuton:200,300,400,700,800' rel='stylesheet' type='text/css'>
<script charset='ISO-8859-1' src='http://fast.wistia.com/assets/external/popover-v1.js'></script>
<script src='js/modernizr-2.8.3.min.js'></script>
<script src='js/respond.js'></script>
<!--[if lt IE 9]> <script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('figure'); document.createElement('figcaption'); document.createElement('footer'); </script> <![endif]-->
</head>
<body>
<!-- Featured Article -->
<div class='single-article'>
<figure>
<img alt="Article Bg" data-src="<1043:bullet-proof-mobile.jpg, >1044:bullet-proof.jpg" data-src-base="img/article-bg/"/>
</figure>
<div class='block'>
<div class='container'>
<div class='row blog-logos'>
<div class='col-12 show-mobile hide-tablet'>
<div class='icpm-blog-logo'>
<p>
<a href='index.html' title='Return to Homepage'>
<img alt='ICPM Logo' src='img/ICPM-Logo-Home.png'>
</a>
</p>
</div>
</div>
<div class='col-12 col-tablet-6'>
<div class='mgmt-blog-logo'>
<p>
<a href='index.html' title='Return to Homepage'>
<img alt='MGMT Blog Logo' src='img/mgmt-blog-logo.png'>
</a>
</p>
</div>
</div>
<div class='col-12 col-tablet-6 hide-mobile show-tablet'>
<div class='icpm-blog-logo'>
<p>
<a href='index.html' title='Return to Homepage'>
<img alt='ICPM Logo' src='img/ICPM-Logo-Home.png'>
</a>
</p>
</div>
</div>
</div>
<div class='row'>
<div class='col-12 col-desktop-9'>
<h1>Bullet-Proofing your Career and Seeing what a Two Line Title Looks like</h1>
<h4>Susan Mucha, CM</h4>
<p>September, 24 2015</p>
</div>
<div class='col-3 hide-mobile show-desktop'>
<p> </p>
</div>
</div>
</div>
</div>
</div>
<!-- Blog Articles -->
<div class='container wrapper'>
<div class='row'>
<div class='col-12 col-tablet-6 col-desktop-4'>
<div class='articles'>
<figure class='effect-overlay'>
<img alt='Bullet Proof Photo' src='img/article-bg/bullet-proof.jpg'>
<figcaption>
<div>
<h2>Bullet-Proofing Your Career</h2>
<h4>Susan Mucha, CM</h4>
</div>
</figcaption>
</figure>
</div>
</div>
<div class='col-12 col-tablet-6 col-desktop-4'>
<div class='articles'>
<figure class='effect-overlay'>
<img alt='Mid Career Photo' src='img/article-bg/mid-career.jpg'>
<figcaption>
<div>
<h2>Why & How to Make a Mid-Career Job Change</h2>
<h4>Tracey Renzi, CM</h4>
</div>
</figcaption>
</figure>
</div>
</div>
<div class='col-12 col-tablet-6 col-desktop-4'>
<div class='articles'>
<figure class='effect-overlay'>
<img alt='Career Photo' src='img/article-bg/career.jpg'>
<figcaption>
<div>
<h2>Leaving the Military: Now What?</h2>
<h4>Sean Forney, CM</h4>
</div>
</figcaption>
</figure>
</div>
</div>
<div class='col-12 col-tablet-6 col-desktop-12'>
<div class='articles'>
<figure class='effect-overlay'>
<img alt='Military Photo' src='img/article-bg/military.jpg'>
<figcaption>
<div>
<h2>3 Things They Didn't Tell me in College</h2>
<h4>Michael Davis, CM</h4>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
This happens because the image you are loading in the element doesn't have any dimensions. So the solutions would be:
a) Give dimensions to the image loaded inside the figure, eg:
width="100%
height="550"
b) Even better, don't give the figure a max-height:550px, but rather a height:550px and use the image as a background-image and scale it accordingly using background-size:cover.
You can use jquery to initially hide the element that take longer to load and then fade them in nicely.
$(document).ready(function(){
$(".myElement").delay(2000).fadeIn();
});
And in your css
.myElement{
display:none
}
Also many of the relative positioning in there is unnecessary.
I'm currently in the process of creating a HTML/CSS layout for a Kiosk-style site.
However, I am having a few issues making the alignment of the images and text to work exactly how I want.
The logo and header should be fixed in the same place across every page, whereas I might need to expand the amount of buttons on-screen.
Here is the illustration of an example: Example Image, where:
Black box represents logo
Blue boxes represent individual buttons
Current HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="style.css">
<html>
<body background="background.png">
<div id="logo">
<img src="logo.png">
</div>
<br>
<div id="icons1">
<img src="button-wmcweb.png"></a>
</div>
<div id="icons1">
<img src="button-appointments.png"></a>
</div>
<div id="icons1">
<img src="button-prescriptions.png"></a>
</div>
<br>
<div id="icons2">
<img src="button-somccg.png"></a>
</div>
<div id="icons2">
<img src="button-patient.png"></a>
</div>
<div id="icons2">
<img src="button-nhschoices.png"></a>
</div>
</body>
</html>
CSS:
body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}
#icons1 {
display: inline-block;
}
#icons2 {
display: inline-block;
}
Is using inline blocks the best practice for what I'm trying to achieve?
Any help would be much appreciated.
I have created for you a JSFiddle with what you want as a starting point.
Click for the full screen mode for the fiddle.
There is the full code below for the ease of referencing.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="background.png">
<div id="logo">
<div id="logoimg">
<img src="http://cs614926.vk.me/v614926650/93b6/n9S5OGKt8L0.jpg" />
</div>
<div id="logotext">lorem ipsum</div>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
</body>
</html>
style.css:
body {
text-align: center;
}
#logoimg, #logotext, .row > img {
display: inline;
}
#logo, .row {
margin: 30px 10px;
min-width: 1000px;
}
#logotext {
min-width: 320px;
vertical-align: top;
font-size: 36px;
padding: 0 20px;
}
img {
width: 320px;
resize: noresize;
}
a:link {
text-decoration:none;
}
For more info on HTML/CSS, consider checking the following w3school tutorials: HTML and CSS.
Your HTML was wrong in a few places. No opening <a> tag, multiple id's with the same name, and the <link> for the css needs to be inside the <head></head> tags, as shown below.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Is this what you're looking to achieve?
http://jsfiddle.net/Q8gVL/