I've created my jquery slider, and now I'm having issues trying to make it responsive. the navigation dots and navigation buttons can be positioned at fixed height. But I want to position next button to the center right of the carousel and wanted to do it in %. so, I give height:100% to its parent body, #container, #carousel. and it worked but the page scaled as you can see in the demo I provided. any suggestion how to position the #next,#prev in percentages?
Here is my work: http://codepen.io/anon/pen/ZpXmQj
html,
body {
position: relative;
background-color: #ccc;
}
Css html,
body {
height: 100%;
position: relative;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
background-color: white;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
background-color: pink
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {} #prev,
#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border: none;
font-size: 2em;
padding: 1%;
color: white;
font-weight: bold;
font-family: 'Baloo Tamma', cursive;
height: 100%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left: 0;
}
#next {
right: 0;
}
.active {
z-index: 1;
}
.indicators {
z-index: 2;
position: absolute;
bottom: 49%;
left: 45%;
}
.circle {
border-radius: 10px;
width: 10px;
height: 5px;
border: 2px solid black;
}
.indicators div {
padding: 8px;
margin: 2px;
display: inline-block;
}
.blip {
background-color: orange;
}
div.indicators:hover {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->
</head>
<body>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="next" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
<div class="indicators">
<div class="circle blip"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>
Check this out. I believe what was happening was that your next and prev were adjusting to the height of the screen and not the height of the images like you were hoping.
So to customize this, first set the height and width of your images to whatever you want, match that same height for your buttons, and as long as they're in the same parent div it should match
<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->
</head>
<body>
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="prev" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
<div class="indicators">
<div class="circle blip"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>
html,body {
height: 100%;
position: relative;
background-color: #ccc;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
background-color: white;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
background-color: pink
}
.slide {
position: absolute;
width: 100%;
z-index: 0;
height: 100%;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 2em;
padding: 1%;
color: white;
font-weight: bold;
font-family: 'Baloo Tamma', cursive;
height: 100%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
.indicators {
z-index: 2;
position: absolute;
bottom:49%;
left: 45%;
}
.circle {
border-radius: 10px;
width: 10px;
height: 5px;
border:2px solid black;
}
.indicators div {
padding: 8px;
margin: 2px;
display: inline-block;
}
.blip {
background-color: orange;
}
div.indicators:hover {
cursor: pointer;
}
Related
I'm trying to create a right floated sidebar in a parent div, with a different background color. The parent has a 3px dashed border, and the sidebar doesn't extend all the way to the edges. Instead, the parent's background color is visible between the dashes.
a view of the body of the site
a closer view of the corner, showing that the background does not meet the edge of the border
I've tried adjusting the positions, changing the order of my elements, changing the height and width, I'm kind of at a loss.
body {
background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}
#font-face {
font-family: 'Smalle';
src: url("https://files.catbox.moe/x368w4.ttf");
}
.main {
position: absolute;
width: 650px;
height: 675px;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -350px;
border: 3px dashed #456655;
background-color: #fff8e5;
font-family: 'Smalle';
}
.sidebar {
position: relative;
height: 675px;
width: 200px;
float: right;
background-color: #FEDA6A;
}
.sidecontent {
text-align: center;
font-family: 'Smalle';
}
.content {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link href="1styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<br>
<div class="sidecontent">
<p>This is where text and links will go... eventually.</p>
</div>
</div>
<div class="content">
<center><span class="title">TITLE</span></center>
<p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
You can do something like this with flexbox. Put outline on the parent and use negative margins to move the child to cover up the outline.
.page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 400px;
outline: 5px dashed green;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
align-items: stretch;
background-color: red;
margin: -5px;
padding: 10px;
}
.column.left {
border-right: 0px;
}
.column.right {
border-left: 0px;
background-color: yellow;
}
<div class='page-wrapper'>
<div class='row'>
<div class='column left'>
Column 1
</div>
<div class='column right'>
Column Two
</div>
</div>
</div>
Try this, is this what you want to achieve?
body {
background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}
#font-face {
font-family: 'Smalle';
src: url("https://files.catbox.moe/x368w4.ttf");
}
.main {
position: absolute;
width: 650px;
height: 675px;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -350px;
border: 3px dashed #456655;
background-color: #fff8e5;
font-family: 'Smalle';
}
.sidebar {
position: relative;
height: 681px;
width: 200px;
float: right;
background-color: #FEDA6A;
top: -3px;
right: -3px;
}
.sidecontent {
text-align: center;
font-family: 'Smalle';
}
.content {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link href="1styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<br>
<div class="sidecontent">
<p>This is where text and links will go... eventually.</p>
</div>
</div>
<div class="content">
<center><span class="title">TITLE</span></center>
<p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
i have a div that i want to place below another div.But i think its getting overlapped and is not visible. I'm trying to get a div below the div that split into 2.
<body>
<div class="split left">
<div class="centered">
<img src="assets/img/tms1.png" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="assets/img/logo.jpg" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
<div class="page2"><img src="assets/img/logo.png" /></div>
the <div class="page2"><img src="assets/img/logo.png" /></div> is not visible.
css:
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 250px;
border-radius: 50%;
}
css for the div that is not getting displayed.
.page2 {
position: relative;
margin-top: 100%;
top: 100%;
width: 100%;
background-color: #111;
}
https://jsfiddle.net/uxfynrmj/
There are a few issues. Most importantly, you need to remove the position: fixed if you want another element statically positioned below your .split divs.
Most notably I removed the fixed position and absolute positioned child and added a wrapping div width display: flex.
Code snippet below:
html {
scroll-behavior: smooth;
/*height: 100%;*/
}
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.splits {
display: flex;
}
.split {
flex: 1 1 50%;
background: black;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.centered img {
width: 100px;
height: 100px;
border-radius: 50%;
}
.page2 {
width: 100%;
background-color: pink;
}
.page2 img {
width: 100%;
background-color: pink;
}
<html>
<head>
<title>THS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="splits">
<div class="split">
<div class="centered">
<img src="http://lorempixel.com/400/200" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="http://lorempixel.com/400/400" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
</div>
<div class="page2"><img src="http://lorempixel.com/400/400" /></div>
</body>
</html>
I am creating the homepage of a website for a school assignment, but my webpage doesn't scroll so the offscreen divs are not visible. I have browsed this forum and the web studying the solutions proposed to other relevant questions, but they don't seem to work for me.
I put my code below (I have removed those parts which are not relevant)... please, can somebody tell me what is wrong?
Thanks in advance for any help.
*{margin: 0; box-sizing: border-box}
body {
height: 100vh;
overflow-y: scroll;
}
.wrap {
width: 59em;
margin: 0 auto;
height: 100%
}
img.resize {
width: 944px;
}
#header {
background: url("...") 100% no-repeat;
background-position: center center;
position: fixed;
right: 0;
left: 0;
top:0;
display: block;
width: 100%;
height: 14.37em;
}
#testo-header{
background-color: white;
height: 4.375em;
width: 50%;
position: absolute;
top: 5em;
left: 0;
text-align: center;
line-height: 4.375em;
z-index: 2;
padding-left: 8em;
}
#testo-header:before {
content: '\0020';
background-image: url(...);
background-repeat: no-repeat;
width: 100%;
height:5.625em;
display:block;
position: absolute;
left: 11.25em;
z-index: -1;
}
ul#nav {
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
right: 0;
font-family: 'Hind', sans-serif;
font-size: 1em;
font-weight: bold;
list-style-type: none;
line-height: 35px;
display: block;
z-index: 5;
}
ul#nav li {
float: left;
text-align: center;
vertical-align: text-top;
padding: 20px;
}
#main {
background-color: white;
position: relative;
top:1em;
}
#title {
height: 15em;
position: relative;
border-top: 1px solid #888888;
width: 944px;
margin: 0 auto;
line-height: 36px;
padding-top: 20px;
padding-bottom: 20px;
}
ul#social {
list-style: none;
display: block;
position: absolute;
top: 20px;
right: 0;
}
ul#social li {
padding: 3px;
float: left;
}
#content {
background-color: white;
display: block;
position: relative;
width: 600px;
height: 400px;
top: 120px;
}
#ingredienti {
height: 300px;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style2.css"/>
<link href="https://fonts.googleapis.com/css?family=Hind|Play" rel="stylesheet">
</head>
<body>
<div id="header">
<div class="wrap">
<div id="testo-header">
<h1>Tomatoes</h1>
</div>
<ul id="nav">
<li>Home</li>
<li>Ricette</li>
<li>Categorie</li>
<li>Blog</li>
<li>Contatti</li></li>
</ul>
</div>
<div id="main">
<div class="wrap">
<div id="title">
Starters
<ul id="social">
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
</ul>
<h2>salad</h2>
<img class="resize" src="...">
</div>
<div id="content">
<div id="ingredients">
<h3>Ingredients</h3>
</div>
<div id="comments"></div>
</div>
<div id="aside">
</div>
</div>
</div>
<footer>
<div class="wrap">
<div class="column">
<h4>Informazioni</h4>
</div>
<div class="column">
<h4>Categorie</h4>
</div>
<div class="column">
<h4>Mangiare fuori</h4>
</div>
<div id="bottom">
<h5>Newsletter</h5>
</div>
</div>
</footer>
</body>
</html>
You are missing a close div starting from where you opened the <div id="header">, add that and the scroll bar will appear
I have a header with an image and an "hamburger" icon for a mobile navigation menu. What I am simply trying to do it display my logo at approx 75% of the available screen with the menu icon to the far right.
I have a master div container and then within it i have 2 divs which has the logo in the left div and menu icon in the right. For some reason I cannot get the menu to stay on the right in the same div container. Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu {
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png"/>
</div>
<div id="menu">
<button type="button"><span>Menu</span></button>
</div>
</div>
<div id="mobileMenu">some content</div>
</body>
</html>
give specific width to both #logoContainer and #menu with display:inline-block;
#logoContainer{
width:75%;
display:inline-block;
}
#menu{
width:25%;
display:inline-block;
text-align: right;
}
#menu button{
margin-right:10px
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
</div>
</body>
</html>
How about using media queries to make the logo appear. With my example, I've set the display on #logo to "none" . With my media query, whenever the page reaches a min-width of 800px it will display the #logo element.
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
display:none;
width: auto;
max-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: black;
display: none;
}
#media (min-width:800px){
#logo{display:block;}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{
margin: 0px;
}
#container {
box-sizing: border-box;
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: red;
}
#logoContainer {
float: left;
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo{
max-width: 75%;
border: 0px;
margin: 0px;
}
#menu{
height: 10px;
width: 25%;
float: right;
background: yellow;
}
#mybtn{
float: right;
}
#mobileMenu {
display: inline;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<button type="button" id="mybtn">
<span>
Menu
</span>
</button>
<div id="mobileMenu">
some content
</div>
</div>
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
</div>
</body>
</html>
I am designing a dashboard interface for myself. I am having some problems with inner divs, my leftpane div is set to 100% height inside the parent but it is overflowing parent div by the amount of 50px which is the height of topbar. Please suggest me why it is overflowing, 100% should mean whatever available space there is, isn't it?
here is my css and html
html, body {
height:100%;
margin: 0px;
}
.wrapper {
width: 100%;
height: 700px;
margin: auto;
border: 1px solid black;
display: table;
}
.topbar {
height: 50px;
background: #353535;
background-color: #353535;
clear:both;
color: white;
width: 100%;
position:relative;
}
.leftpane {
width: 20%;
height: 100%;
background-color: #eee;
float: left;
border-right: 2px solid #353535;
}
.content {
width: 79%;
height: 100%;
float:right;
border: 2px solid red;
}
.content-header {
height: 50px;
background-color: #353535;
width: 100%;
}
.content-area {
height:100%;
width: 100%;
border: 2px solid green;
}
<html>
<head>
<title>GUYACOM - Suivi de la connectivité</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style2.css" />
<!-- <link rel="stylesheet" href="css/bootstrap.css" /> -->
<!--<link rel="stylesheet" href="css/colorbox.css" /> -->
<!-- <script type="text/javascript" src="js/tinybox.js"></script> -->
</head>
<body>
<div class="wrapper">
<div class="topbar"><h1>
</h1></div>
<div class="content-area">
<div class="leftpane">
</div>
<div class="content">
<div class="content-header">
</div>
</div>
</div>
</div>
</body>
</html>
Try this it may help you...
<html>
<head>
<title>GUYACOM - Suivi de la connectivité</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style2.css" />
<style>
html, body {
height:100%;
margin: 0px;
}
.wrapper {
width: 100%;
height: 100%;
margin: auto;
border: 1px solid black;
display: table;
}
.topbar {
height: 50px;
background: #353535;
background-color: #353535;
clear:both;
color: white;
width: 100%;
position:absolute;
}
.leftpane {
width: 20%;
height: 100%;
background-color: #eee;
float: left;
border-right: 2px solid #353535;
}
.content {
width: 79.5%;
height: 100%;
float: left;
border: 2px solid red;
}
.content-header {
height: 50px;
background-color: #353535;
width: 100%;
}
.content-area {
height:100%;
width: 100%;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="topbar"><h1>
</h1></div>
<div class="content-area">
<div class="leftpane">
</div>
<div class="content">
<div class="content-header">
</div>
</div>
</div>
</div>
</body>
</html>