I am using CarouFredSel as my carousel and I want to visually vertically align the text content within this carousel to my body content. I know you can do this with javascript (I have commented it out) by adjusting the left property of #carousel based on the browser width but I am looking for a CSS solution.
The blue screenshot on the left is displaying the website when the browser is maximized, and the 'link3' in the carousel appears to be aligned with 'content'. The red screenshot on the right is displaying the website when the browser is minimized, and 'link1' is not visually aligned with 'content'.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reset.css">
<script type="text/javascript" language="javascript" src="<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>"></script>
<script type="text/javascript" language="javascript" src="http://www.sfu.ca/~jca41/stuph/jquery.carouFredSel.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#carousel').carouFredSel({
items: 1,
scroll: {
fx: 'crossfade',
duration: 1000
},
pagination: {
container: '#pager',
duration: 500
}
});
/*$(window).resize(function() {
var winW = $(window).width();
var carouselWidth = $('#carousel .slide').css('width');
carouselWidth = carouselWidth.replace(/[^0-9]/g, '');
if (winW > carouselWidth) {
$('#c-carousel').css('left', (winW-carouselWidth)/2 + 'px');
} else {
$('#c-carousel').css('left', '0px');
}
}).resize();*/
});
</script>
<style type="text/css" media="all">
#heroicCarousel {
height: 100%;
padding: 0;
margin: 0 auto;
min-height: 250px;
position: relative;
z-index: 1000;
text-align:center;
max-width:600px;
}
.caroufredsel_wrapper {
width: 100% !important;
height: 100% !important;
}
#carousel {
position: absolute !important;
}
#carousel .slide {
width:600px;
height:250px;
overflow: hidden;
float: left;
}
#carousel .slide .content {
font-size: 55pt;
position: relative;
top: -100px;
left: 150px;
z-index: 5;
}
#carousel .slide img {
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
#pager {
position: relative;
top: -700px;
left: 0;
z-index: 10;
display: block;
text-align: center;
}
#pager a {
background-color: #356;
display: inline-block;
width: 15px;
height: 15px;
margin-right: 6px;
border-radius: 10px;
box-shadow: 0 1px 1px #cef;
}
#pager a.selected {
background-color: #134;
}
#pager a span {
display: none;
}
#content {
background: yellow;
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
z-index: 20px;
top: -520px;
font-size: 60pt;
}
</style>
</head>
<body>
<div id="heroicCarousel">
<div class="caroufredsel_wrapper">
<div id="carousel">
<div class="slide">
<img src="http://www.placehold.it/600x250/ff0000/999999">
<div class="content">link1</div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/00ff00/999999">
<div class="content">link2</div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/0000ff/999999">
<div class="content">link3</div>
</div>
<div class="slide">
<img src="http://www.placehold.it/600x250/f0f0ff/999999">
<div class="content">link4</div>
</div>
</div>
</div>
<div id="pager">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<div id="content">
content
</div>
</body>
</html>
I usually do it with a wrapping elem around the divs. This elem is as wide as your widest div and any children with margin:0 auto; are centered to it. Example http://jsfiddle.net/5LJhC/1/
Very simple example but shows how as the carousel width changes the content div is centered
Related
This is my css:
.modal-backdrop {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100%;
z-index: 1;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.96);
transition: width 1s ease-out;
}
.buttonBar {
right: 0;
height: 20px;
color: red;
}
.theImage {
position: absolute;
top: 0;
right: 0;
width: 350px;
height: 350px;
}
.button {
float: left;
}
Here is the html:
<head>
<link rel="stylesheet" href="styles.css">
</head>
<div class="button">
<button id="open">Test</button>
</div>
<div class="modal-backdrop">
<img class="theImage" src=index.png />
<div class="buttonBar">button bar</div>
</div>
<!-- page 108 -->
<script type="text/javascript">
var button = document.getElementById('open');
var drawer = document.getElementsByClassName('modal-backdrop')[0];
var height = drawer.scrollHeight;
var width = drawer.scrollWidth;
button.addEventListener('click', function (event) {
event.preventDefault();
drawer.style.setProperty('width', '350px');
drawer.style.setProperty('height', height + 'px');
});
</script>
The button bar doesn't have any buttons in it yet and the text is just a placeholder. I want that button bar to go under the img tag but all it does is overlap the img. Any ideas on how to get this working?
You don't need to add position absolute or fixed to .theImage or .buttonBar.
Just use flex-direction: column; and buttonBar div will be under image.
jsfiddle: https://jsfiddle.net/aof6ysmn/
This question already has answers here:
Fixed header, footer with scrollable content
(7 answers)
Closed 2 years ago.
I'm coding a website and i want to split a page in 3 different section:
one for the title+a button,
one for the content,
one for the text input.
.
The problem is that the divs don't fill the height and the width of the screen. The second div also need a scrollbar because of his content that can vary.
I'd like to resolve the problem with CSS, but everything is accepted
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Server Messaggistica</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="width:100vh; height: 100vh;">//container of the 3 divs
<div style="width:100%; height: 15%;">//div1
<h1>Bentornato utente</h1>
<button class=button>LOG OUT</button>
</div>
<hr>
<div style="width:100%; height: 70%; overflow-y: scroll; overflow-x: hidden;">//div2
//php content
</div>
<hr>
<div style="width:100%; height: 15%;">//div3
<textarea name="messaggio" rows="3" cols="100"></textarea>
</div>
</div>
</body>
</html>
You can do this with the vh unit in CSS, which allows you to specify the height of containers in relation to the height of the viewport.
body {
margin: 0;
}
.vh-15 {
min-height: 15vh;
}
.vh-70 {
min-height: 70vh;
}
/* for illustration */
.bg-red { background: red; }
.bg-green { background: green; }
.bg-blue { background: blue; }
div { color: white; }
<div class='vh-15 bg-red'> 1: 15% </div>
<div class='vh-70 bg-green'> 2: 70% </div>
<div class='vh-15 bg-blue'> 3: 15% </div>
I would solve this using flexbox. The flex children values are relative to each other. I've based mine out of 100. The numbers are arbitrary though. Instead of 70 and 15, you could use 700 and 150.
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.top,
.bottom {
flex: 15;
}
.middle {
flex: 70;
}
/******************
Presentational
******************/
.middle { background-color: green; }
.middle::after { content: '2: 70%'; }
.top { background-color: red; }
.top::after { content: '1: 15%'; }
.bottom { background-color: blue; }
.bottom::after { content: '3: 15%'; }
.container > div { position: relative; }
body { margin: 0; }
.container > div::after {
position: absolute;
top: 50%;
left: 2rem;
transform: translateY(-50%);
color: white;
display: block;
font-family: sans-serif;
}
<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#slider {
height: 350px;
width: 70%;
margin: auto;
overflow: hidden;
background: #CCC;
}
.slide {
height: 350px;
float: left;
text-align: center;
border: 1PX SOLID #000;
line-height: 8em;
font-size: 40px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>
<script>
$(document).ready(function () {
// you can set this, as long as it's not greater than the cv.slides length
var show = 3;
var w = $('#slider').width() / show;
var l = $('.slide').length;
$('.slide').width(w);
$('#slide-container').width(w * l)
function slider() {
$('.slide:first-child').animate({
marginLeft: -w
}, 'slow', function () {
$(this).appendTo($(this).parent()).css({marginLeft: 0});
});
}
var timer = setInterval(slider, 2000);
$('#slider').hover(function() {
clearInterval(timer);
},function() {
timer = setInterval(slider, 2000);
});
});
</script>
</head>
<body background="../background2.png">
<h1 style="text-align:center; margin-top:60px; color:#fff; fb f font-size:60px">Slider</h1>
<div id="slider">
<div id="slide-container">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
<div class="slide">Slide 5</div>
<div class="slide">Slide 6</div>
</div>
</div>
</body>
</html>
This is the full code for making the slider.
This is a linear type of slider which can be use for to display the products or all about its categories.
How to make this Slider Responsive?
Update the css .
Take out the absolute height value from the slide class and add width: 100%
The reason you want to take out the height is so you do not have a fixed height that becomes a problem when resizing or on smaller devices.
In the slider ID
#slider {
width: 100%;//add this
}
This will have all your slides lined up vertically and responsive.
Here's what you should have for what it seem you are trying to do.
#slider {
width: 100%;
margin: auto;
overflow: hidden;
background: #CCC;
}
.slide {
width: 100%:
height: 350px;
float: left;
text-align: center;
border: 1PX SOLID #000;
line-height: 8em;
font-size: 40px;
}
Trying to get the header and images under it right in the middle of the page but am having a lot of trouble figuring out how to do that. Tried manipulating the box model with no luck. I'm really new to this stuff so any advice helps.
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition:all 1s;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 400px;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script src="app.js"></script>
</body>
</html>
You could use flexbox for this
body {
height: 100vh;
background: radial-gradient(gold, goldenrod);
font-family: monospace;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
Try something like this:
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
.container {
width: auto;
margin: auto;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script src="app.js"></script>
</body>
</html>
Issue is positioning and use of property left, top which even hide top text when you reduce screen size, instead you can change it's position to relative and then use margin to align that at center of page,
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
.container {
position: relative;
min-height: 400px;
background: red;
margin: auto;
display: inline-block;
}
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="http://via.placeholder.com/100x100" alt="rock">
<img src="http://via.placeholder.com/100x100" alt="paper">
<img src="http://via.placeholder.com/100x100" alt="scissors">
<p></p>
</div>
Alright, so this can be done by a dirty little trick i learned when i started. Before i get to that, i would like to make some changes to your code:
A) No need for setting position: relative; for body because all the elements automatically move in relation to the body of your page. Setting the position to relative means that you are confining the position element of everything inside the body as relative. So it will ignore the absolute of the .container class.
B) Second, i don't see a reason why if you want to keep the header and the images together, you do not keep them under a single class. It makes it easier to move them around together rather than shifting one by one.
Now to the trick, for starters, you need to set the min-heightand min-width
of the container class in pixels. Once you have done that, you can position the class at the middle by:
top: 50%;
left:50%;
margin-top: -200px; /*half of the height of the container*/
margin-left: -200px; /*half of the width of the container*/
So, now your code, all summed up must something like this:
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition:all 1s;
}
.container {
position: absolute;
min-width: 400px;
min-height: 200px;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
<body>
<div class="container">
<h1>Choose Your Weapon</h1>
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script>
</script>
</body>
and guess what, it's even responsive :)
I am struggling with getting the layout of the header i have in mind together.
Here is the html so far:
<div id="header">
<img src="/img/headerBg.jpg" alt="" class="headerBg" />
<img src="/img/logo.png" alt="Logo" class="logo" />
<div id="loginBox">
other code
</div>
</div>
And the css so far:
#header {
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
}
#loginBox {
float: right;
width: 23.5%;
height: 128px;
font-size: 75%;
}
.headerBg {
}
.logo {
width: 50%;
height: 120px;
float: left;
display: block;
padding: 5px;
}
What I am trying to accomplish, is have the image "headerBg.jpg" display to 100% width of the div "header", so essentially it will be the background of the div itself. Then have the image "logo.png" and the div "loginBox" display above "headerBg.jpg".
The logo should be floated to the far left end and the loginBox floated to the far right as in the css.
With the image removed, the logo and div are placed correctly, but when the image is introduced they two floated items are placed after the image in the flow.
I have tried various additions and reconfigurations but none have proven to work out how I want them to.
I have added the image in the css as a background to the header div, but it does not stretch 100% that way.
Would anyone be able to provide some insight on this?
Also any tutorials covering things like this would be a great addition to my collection!
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
#header {
position:relative;
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
}
#loginBox {
position:relative;
float: right;
width: 23.5%;
height: 128px;
font-size: 75%;
}
.headerBg {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.logo {
position:relative;
width: 50%;
height: 120px;
float: left;
display: block;
padding: 5px;
}
</style>
</head>
<body>
<div id="header">
<img src="img/headerBg.jpg" alt="" class="headerBg" />
<img src="img/logo.png" alt="Logo" class="logo" />
<div id="loginBox">
other code
</div>
</div>
</body>
</html>
.header {
position: relative;
}
.headerBg {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
}
Note that this will scale the image to fit the width of the <div>; if you only want it to resize horizontally then you should set the height explicitly.
You could also try max-width: 100%; if you only want the image to scale on large windows.
Just make the header background image the true background of that div. Float does not ignore other objects the way that position: absolute does.
#header {
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
background: url(headerBg.jpg);
}
Set the div class which will not show any extra parts.
div {
overflow: hidden;
}
These settings worked perfect for me.. it will size ur photo for all pics..
#headerBg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<!--link rel="stylesheet" href="#"-->
<style>
.mySlides {
display: none;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
height: 195px;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
}
.img2 {
float: center;
display: inline-block;
}
</style>
<style type="text/css">
.c4 {
max-width: 500px
}
.c3 {
width: 100%
}
.c2 {
display: inline-block;
text-align: center;
width: 100%;
}
.c1 {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2 class="c2">Automatic Slideshow</h2>
<div id="header" class="c2">
<img class="img2 c1" src="./img/16px/avi.png" alt="Pineapple">
<h1 class="c2">
I want to be
</h1>
<div class="c4">
<img id="carousel" src="" class="c3">
</div>
</div>
<script>
//set up things
var images = [];
images[0] = "./img/16px/avi.png";
images[1] = "./img/16px/bmp.png";
images[2] = "./img/16px/cpp.png";
var n = images.length - 1;
var carouselimg = document.getElementById("carousel");
var header = document.getElementById("carousel");
// preload all images
carouselimg.style.display = "none";
for (var i = 0; i < n; i++) {
carouselimg.src = images[i];
}
carouselimg.style.display = "block";
//prepare first round
var carouselIndex = 0;
// start show
rotate();
function rotate() {
var dr = header.getBoundingClientRect();
carouselimg.style.width = dr.width;
carouselimg.src = images[carouselIndex];
//index is a global variable
//so its state will be kept and we can load the first / next image
carouselIndex++;
// increment image array index
if (carouselIndex > n) {
// do we rech the end
carouselIndex = 0
// start from begin
}
setTimeout(rotate, 2000);
// restart rotation every 2 seconds
}
</script>
</body>
</html>
try using in your css:
max-height:100%;