I'm implementing a slider where I like to display one slide at a time.
I've tried it using flexbox for the display container but unfortunately can't make it. How can I display only one slide at a time?
<div class="viewport">
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<button class="prev-next-btn prev"></button>
<button class="prev-next-btn next"></button>
</div>
*** CSS ***
.viewport {
display: flex;
}
img {
max-width: 100%
}
.prev-next-btn {
position: absolute;
width: 35px;
height: 35px;
background: green;
top: 35%;
}
.prev-next-btn.next {
right: 30px;
}
.prev-next-btn.prev {
left: 30px;
}
.contentCard {
width: 100%
}
Link to the code
Related
I've been using bootstrap framework recently. I'm new to this framework.
so I'm trying to position an image next to some text in landing page. I use grid system of the bootstrap and it work. but when I come to push the image using position: absolute, and left:somePX, it make horizontal scroll and get out of the body of the page. what should I do to prevent this scrolling. I just want to cut the image and position it as I want.
Note: I've applied so many templates using only CSS with out bootstrap and I never get across on same problem.
thank you
here is my html code:
/* landing */
/*this is the image style*/
.landing {
padding-bottom: 100px;
margin-right: 0;
}
.landing .right .image {
position: relative;
}
.landing .right .image .back img {
position: absolute;
left: 100px;
}
.landing .right .image .mockups {
position: absolute;
top: -100px;
left: 100px;
}
/*this is text style I don't think the problem is here but I put it*/
.landing .left {
padding-top: 80px;
padding-left: 80px;
}
.landing .left h1 {
line-height: 1.3;
margin-bottom: 20px;
}
.landing .left p {
font-size: 15px;
margin-bottom: 20px;
}
.landing .left button {}
<div class="landing row">
<div class="col-md-6 left">
<div class="container">
<h1>Next generation digital banking</h1>
<p>Take your financial life online. Your Easybank account<br> will be a one-stop-shop for spending, saving,<br> budgeting, investing, and much more.</p>
<button class="btn linear" type="button">Request Invite</button>
</div>
</div>
<div class="col-md-6 right">
<div class="image">
<div class="back">
<img class="back-image img-fluid" src="images\bg-intro-desktop.svg" alt="">
</div>
<div class="front">
<img class="img-fluid mockups" src="images\image-mockups.png" alt="">
</div>
</div>
</div>
</div>
you can simply add to your body:
<style>
body{
overflow-x: hidden;
}
</style>
I am pretty bad with css, so I was wondering how I can keep my sidebar full height, even though it doesnt have full content.
This is my css:
#wrapper {
display: flex;
flex-wrap: wrap;
background-color: yellow;
}
#wrapper .sideBar {
background-color: green;
width: 200px;
margin-left: 10px;
overflow-x: hidden;
padding-top: 20px;
}
#wrapper .productsBox{
width: 250px;
margin: 3px;
}
But I get this result
However I want a result that looks like this:
Any idea how I can fix this? And I want to have a responsive view, so when a user use phone to browse it displays a decent view. Thats the reason I use the wrapper.
html:
<div id="wrapper">
<form method="get" id="sortForm">
#Html.DropDownList("sort", new SelectList(ViewBag.sortOptions,"Value","Text"), new {#class="form-control", onchange = "sortingChanged()" })
<div class="sideBar">
<strong>Search for products</strong>
<input type="text" class="searchBar" name="SearchString" value="#ViewData["CurrentFilter"]" placeholder="Search.."/>
<hr />
<h6>Price</h6>
<div>
<input type="number" class="priceRangeInput" name="minPrice" value="#ViewData["MinPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Min</span>
</div>
<div>
<input type="number" class="priceRangeInput" name="maxPrice" value="#ViewData["MaxPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Max</span>
</div>
<br />
<hr>
<h6>Types</h6>
<button type="submit" class="btn customGreen" >Set filters</button>
</form>
<br />
</div>
#{
foreach(var p in #Model)
{
<div class="productsBox">
<div class="card">
<a asp-action="Details" asp-route-id="#p.Id">
<img alt="#p.Name" class="contain" src="#p.FilePath" height="300" style="width: 100%;" />
</a>
<h3>#p.Name</h3>
<p class="price">#p.Price kr/#p.Unit</p>
<a asp-action="Details" asp-route-id="#p.Id">
<button class="customGreen">See more</button>
</a>
</div>
</div>
}
}
</div>
html, body {
height: 100%
}
html,
body {
height: 100%; /* to set height to 100% */
}
body {
margin: 0; /* to remove default margins */
}
#wrapper {
height: 100%; /* to set height to 100% */
}
#wrapper {
display: flex;
background-color: yellow;
}
.sideBar {
background-color: #000;
width: 200px;
color: #fff;
overflow-x: hidden;
padding-top: 20px;
}
.product-wrapper {
width: calc(100% - 200px); /* 100% - (sidebar width) */
}
.productsBox {
display: inline-block;
width: 150px;
height: 150px;
color: #fff;
margin: 3px;
background: #2f910f;
}
<html>
<body>
<div id="wrapper">
<div class="sideBar">
Sidebar
</div>
<div class="product-wrapper">
<div class="productsBox">
Item
</div>
</div>
</div>
</body>
</html>
You should take .sideBar out of the #wrapper container and apply width: calc(100% - 210px) to #wrapper (i.e. the width of the container/window minus sidebar minus its left margin). That way both together will be 100% wide, but the contents of #wrapper will not go under the sidebar.
you should add side bar and another containts in different divs and add this code to it:
.wrapper{
display:flex;
flex-direction:row;
}
.sidebar{
background-color:red;
width:50%;
}
.containts{
width:50%;
background-color:green;
}
<div class="wrapper">
<div class="sidebar">
sidebar
</div>
<div class="containts">
containts
</div>
</div>
Add the following code in css it worked for me
height: 100%;
I want to make the same design below
But I have a problem with the floating div which is the camera icon.
It should be clickable. I put z-index so it will be on top of the image that will change. I want to make all div to be clickable.
Hope you guys can help me.
Thanks!
here's my code
<article class="RegistrationInfo__Section media">
<div class="RegistrationInfo__Section--image media-left">
<div class="field">
<span class="file-bg">
<span
class="icon is-large"
v-if="formObject.image"
>
<img v-if src="~#/assets/images/camera.png">
</span>
<img v-else src="~#/assets/images/camera.png">
</span>
<div class="file is-boxed">
<label class="file-label">
<input
class="file-input"
type="file"
name="image"
ref="input"
#change="validateAndProcessImage"
>
<span class="file-cta">
<span class="file-icon">
<img
v-if="formObject.image"
:src="`/api/files/${formObject.image}`"
>
<img v-else src="~#/assets/images/profile_off.png">
</span>
</span>
</label>
</div>
<p v-if="formErrors.imageFiles" class="help is-danger">{{ formErrors.imageFiles[0] }}</p>
</div>
</div>
</article>
Here's my SCSS file.
.RegistrationInfo {
#at-root #{&}__Section {
#at-root #{&}--image {
margin-right: 2rem;
.field {
position: relative;
.file-bg {
position: absolute;
z-index: 1;
right: -10px;
width: 50px;
height: 50px;
.icon i {
cursor: pointer;
margin: auto;
}
}
.file {
&.is-boxed {
.file-icon {
height: 128px;
width: 128px;
margin-right: 0;
}
.file-cta {
padding: 0;
border-radius: 50%;
justify-content: center;
img {
height: 128px;
width: 128px;
border-radius: 50%;
object-fit: cover;
object-position: top;
}
}
}
}
.help {
max-width: 128px;
}
}
}
The problem seems to be with the z-index you did set.
By default, all page elements have a z-index of 1 unless otherwise specified. Provided that .file-bg is your camera icon, changing the z-index to 2 would make your div clickable.
I'm trying to specify content specifically somewhere on the page, How can i do this so that it'll always be in the exact same spot even when screen size changes?
jsfiddle = https://jsfiddle.net/4pkgfgwh/1/
<div class="container">
<img src="http://i.imgur.com/iGIFvH6.png" style="width:354px;height:228px;">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
.container {
text-align: center;
}
.display {
position:absolute;
TOP:45px;
LEFT:350px;
}
Use position: relative on the parent container:
HTML
<div class="container">
<div class="image-container">
<img src="http://i.imgur.com/iGIFvH6.png">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
text-align: center;
}
.image-container {
display: inline-block;
position: relative;
width: 354px;
height: 228px;
}
.container img {
width: 100%;
}
.display {
position: absolute;
top: 10px;
left: 200px;
}
JSFiddle demo: https://jsfiddle.net/ompfnjc5/2/
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
<body>
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
<a href="../../../Downloads/Unnamed Site 2/stem studio.html"><img
src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300"
height="437" /></a>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div><br />
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --><img
src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437"
/>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
</body>
</html>
</body>
</html>
I am trying to align the two div images horizontally.
I borrowed the code for overlaying text on images from this website :
I just added a random pic and text to see if this code works, It works like perfectly well, but they come out vertically. How do I align them horizontally ? Will appreciate any help.
If I understood your problem, you need to have both images side by side. If so, you need to adjust your CSS and HTML to allow that:
See this working Fiddle Example!
HTML
<div class="imageSub" style="width: 300px;">
<a href="../../../Downloads/Unnamed Site 2/stem studio.html">
<img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
</a>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
<div class="imageSub" style="width: 300px;">
<img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
Removed the <br>
CSS
div.imageSub {
position: relative;
float: left;
}
div.imageSub img {
z-index: 1;
}
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
Added float: left; to the div.imageSub
EDITED
A working Fiddle Example based on the previous fix, adapted for a 3x2 visual presentation.
Remove the <br/>
Add css rules
.imageSub { float: left;}
.clear { clear: both; }
Add <div class="clear"/> to the end.
Don't forget step 3 in floating environments.
jsfiddle
Here's simple a 2 x 3 div solution using floats: http://jsfiddle.net/Fb6Jk/