So I'm trying to make a pure CSS3 autoplaying image slider on a web page project I'm doing. So the HTML of the page looks like this:
https://pastebin.com/c0ZiyHGd
<!DOCTYPE html>
<html lang="pt">
<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="css/style.css">
<title>Joelson Querub</title>
</head>
<body>
<header>
<nav>
Portfolio
Sobre
Loja
</nav>
</header>
<main>
<div id="pinto">
<h1>Joelson Querub</h1>
<div id="images">
<img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=92b82a18bf4bfbdfe1bd7eed8cd4ba49&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71d59cd22de21da8d2939bc203617983&auto=format&fit=crop&w=1560&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e79d1986f31127432328ba0b78f0b510&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80"
alt="Pug Fofoso">
</div>
</div>
</main>
</body>
</html>
So what I want is to only one pug image appear at a time, and to make them automatically slide leftwards. The size is important, and the current size is the one I want. Also, notice that there is a text overlaying the image. That text must stay there. I would like to do a smooth slide that is infinite, but that doesn't do that subtle return to the first image.
I tried my luck with some CSS but it din't go very far. You guys can take a look:
https://pastebin.com/S2UZ4uK2
Or for an easier way to see it all:
https://codepen.io/anon/pen/OwWgoX
Though CodePen messes up with the text positioning.
You can use wowslider. Wowslider . Just download the software. You can easily add any picture and also any kind of sliding transformation.
Related
On Safari on Ipad the white X appears on the right hand part of the black. This is the only Safari I have though so unsure if iPad issue or Safari issue or my issue.
https://jsfiddle.net/juvpxa8q/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>title</title>
</head>
<body>
<div id="main">
<div id="piece-info-container">
<div id="piece-info">
<div id="piece-info-top">
<div class="piece-info-row">
<i id="close-piece-info" class="fa fa-window-close unselectable" aria-hidden="true">X</i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add position: relative to #piece-info-container.
It has to do with the resetting of the children's positions.
To be honest, it'd be best to rethink your CSS from the ground up because position:absolute inside of a sticky inside of a fixed is a recipe for trouble.
It's quite common to be wanting to position icons in the top right corner... A good place to start could be taking a look at Bootstrap's modals. Look at the .modal-header separation and using float to position the x it to the right.
Hi im kind of new to coding, but eager to learn, im trying to make a new website from scratch and wanted to set up a picture on the left and then next to it on the right something like this...This is the closest i could find.
i can get the image on the left and the icons and text on the right, just not the text to the right of the icons... and cant seem to find any examples. If someone could give me a hand i would be very appreciated.
https://www.w3schools.com/css/css_float.asp
I think this is what you want. In other words, just add text and img link in the html and in css style sheet, use float: left and padding.
Is this what you are trying to implement ? Lookup Bootstrap grid for more help https://getbootstrap.com/docs/3.4/css/
Also you can show your code to make your question more clear.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap grid system</h1>
<p>select from 12</p>
<br>
<div class="row">
<div class="col-md-4">
<img src="img.png" class="img-responsive">
</div>
<div class="col-md-8">
GG
<h1>GLHF</h1>
</div>
</div>
</div>
</body>
</html>
Hello I am so sorry if this is a stupidly simple question but I am extremely new to html and css. The issue is I am trying to just add style to the div classes I have made in html and css seems to not recognize the file.
.main-content {
background-color: red;
}
<!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">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="second.css">
</head>
<body>
<div class="site">
<header class="masthead">
</header>
<h1 class="page-title">Hello
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div> <!-- .site -->
</body>
</html>
I have tried on both firefox and chrome so it does not seem to be an issue of using an outdated browser. Also copy and pasting the code into codepen.io also yields the same results. The only way I can style is by selecting general elements such as h1. I've also double checked to make sure first.html and second.css are indeed the correct file names.
Any suggestions as to what I am missing? If its something very simple could I also get some advice so that I don't go about asking a ton of really simple questions like this.
As you don't have content inside your main tag, the styling is not visible. Add some content to it and you will see the styles which you have applied.
And also you mentioned that you want to style your div and I see only one. You can style it as follows using its class name.
.site {
background-color: red;
}
I'm having trouble figuring out why the site I'm making is rendering so small on the mobile. In order to figure out why, I've managed to replicate the problem with this very short html:
<html>
<body>
<div style="font-size: 14px">
No look behind the back catch
</div>
</body>
</html>
You can see the live version of that HTML here. This is how that example is rendered on my iPhone. This is how the same phrase ("No look behind the back catch") is rendered with the same font-size, except in a different site, Reddit. Why is my HTML rendered so small on mobile phones?
You need to add a viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This goes in the head of the document:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="font-size: 14px">
No look behind the back catch
</div>
</body>
</html>
I am currently redesigning a site using svg. However I have run into several issues that I have yet to solve. This is a three part question.
How do you make an object which is an svg file dynamically change to fit on screen that are smaller than the viewbox without the file getting cropped. The svg file in this case is diagonal arrow.
How do you keep text in the same location based on this dynamically changing image, so that the arrow always points to the text no matter the screen size, without using vague #media queries throughout the css file (eg. min-width:15 to max-width:40...). Example of the arrow with the apple
When using objects in html, how do I replace an object with another object based on screen size. For example I have an svg of an apple above the arrow and when the screen resolution hits 1000px it shows this arrow and when its below it shows a flipped version of this arrow. It would have been easy using srcset with img, but because I have the to change color of the arrows using svg styling I can't use img.
Thank you for all your help.
Dropbox file of website
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://orgrune.com/style.css">
</head>
<body>
<div class="container">
<header class="clearview col-xs-12 col-md-12 col-lg-12 col-md-12 text-uppercase">
<h1>Home</h1>
<hr class="hr-cl">
</header>
<div class="clearview col-xs-12 col-md-12 col-lg-12 col-md-12">
<div class="svg-container">
<object type="image/svg+xml" data="http://orgrune.com/Untitled-3.svg" class="svg-content "></object>
</div>
</svg>
<a class="photography text-uppercase" href="\" alt="photography">photography</a>
</div>
</div>
</body>
</html>