I am using the code for a Horizontal scroller
What I would like is to be able to add a panel /text at the bottom and a button in the top right-hand corner of each panel. But I can’t work out how to get it to fit.
How scroller look at the moment:
How I would like the panel to look like:
Code below
------
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="description" content="Slider Template">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Template</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><a name="top"></a>
<script>
$(document).ready(function(){
$('#content').load("search-tab.html");
});
</script>
</script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script><script>
$(document).ready(function(){
$('.hamburger').css('cursor','pointer').click(function() {
var status = $('.home').attr('class');
if(status === "home") {
$('#layer_1').show();
$('.home').addClass('display_none');
}
if(status === "home display_none") {
$('#layer_1 , #layer_2 , #layer_3').hide();
$('.home').removeClass('display_none');
}
});
$('.show_layer_1').click(function() {
$('.close_all').hide();
$('#layer_1').show();
});
$('.show_layer_2').click(function() {
$('.close_all').hide();
$('#layer_2').show();
});
});
</script
><style>
:root {
--gutter: 20px;
}
.app {
padding: var(--gutter) 0;
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
}
.app > * {
grid-column: 2 / -2;
}
.app > .full {
grid-column: 1 / -1;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 10px;
grid-template-rows: minmax(50px, 1fr);
grid-auto-flow: column;
grid-auto-columns: calc(20% - var(--gutter) * 2);
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.25 * var(--gutter));
width: 1201px;
}
.hs:before,
.hs:after {
content: '';
width: 10px;
}
ul {
list-style: none;
padding: 0;
}
h1,
h2,
h3 {
margin: 0;
}
.app {
width: 1200px;
height: 234px;
/* [disabled]background-color: #DBD0BC; */
overflow-y: scroll;
}
.event-title {
font-size: 36px;
margin-bottom: -25px;
margin-top: -16px;
padding-top: 11px;
padding-left: 0px;
font-weight: 400;
font-style: italic;
}
.hs > li,
.item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: table;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #CBCBCB;
border-radius: 8px;
max-width: 1px;
background-image: url(../images/3.jpg);
}
.bottom-panel {
background-color: #FF0004;
width: 170px;
height: 42px;
margin-top: 74px;
}
.top-button {
background-color: #FB3437;
width: 29px;
height: 24px;
margin-left: 139px;
margin-top: 4px;
}
.item {
width: 220px;
min-width: 174px;
height: 145px;
margin-left: 1px;
}
.grey-panel {
background-color: #000000;
width: 169px;
height: 54px;
margin-left: 0px;
margin-top: 82px;
padding-top: var(;
padding-bottom: --gutter;
padding-right: --gutter;
}
.side-search-strip {
}
</style>
></head>
<body>
<div></div>
<div class="nav-menu-bar font">
<div class="nav-menu-bar-centre-panel"><div class="scrollable-nav-container">
<div>
<div><div class="scrollable-nav-container">
<div class="arrow-left"></div>
<div class="scrollable-nav-inner">
<nav class="scrollable-nav">
<ul>
<!-- Start main-nav -->
<nav class="main-nav"> </nav>
<!-- end main-nav --></div>
</div>
<div class="container">
</div>
</div>
<section class="content_wrapper">
<div class="home"> </div>
<!-- home -->
<div id="layer_1" class="close_all">
<div class="layer_1_content"> </div>
</div>
<!-- layer_1 --></main>
</div></main>
</div></div>
<!-- Carousel -->
<div class="main-container background-fade">
<div class="menu-strip"><div class="float-right"></div>
<div class="test clear-the-float main-area"> </div></div>
<div>
<div class="app">
<h1 class="event-title font">Event title...</h1>
<ul class="hs full">
<li class="item">
<div class="top-button"></div>
<div class="bottom-panel">
<p>text1</p>
</div>
</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test1</li>
<li class="item">test1</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test1</li>
<li class="item">test1</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test1</li>
<li class="item">test1</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test1</li>
<li class="item">test1</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test1</li>
</ul>
</div>
</div>
</div>
<script src="js/modernizr-3.5.0.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script>
<!-- scroll menu bar script -->
$(document).ready(function(){
$( ".scrollable-nav" ).draggable({ axis: 'x' });
});
<!-- end menu scroll top bar script -->
</body>
</html>
------
Hope you can help
Thanks
Tim
You need below css
li.item {
position: relative;
overflow: hidden;
}
.item .bottom-panel {
bottom: 0;
position: absolute;
width: 100%;
left: 0;
margin:0;
height: auto;
}
.item .bottom-panel p {
margin: 0;
padding: 7px 10px;
}
.top-button {
margin: 0;
position: absolute;
right: 14px;
border-radius: 6px;
}
see demo here
Related
I'm coding my first website but unfortunately there is some unwanted empty space at the bottom that won't go away.
I've checked a lot of solves but they don't seem to be working. Could somebody please take a look at the code (linked below) and let me know what I'm doing wrong?
i can see this problem in all my html, usually if my html has content the problem doesn't but it reappears when i resize the screen with "inspect element" tool of any browser. As I said before, I tried a lot of solutions, even deleting whole lines of code to try to find the solution but I don't get anything...
/* General */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
}
.bodyBg {
background-image: url(../img/bg/bgMain.jpg);
background-position: center;
background-attachment: fixed;
}
/* HEADER*/
.headerMain {
text-align: center;
font-style: italic;
background-color: rgb(30, 3, 68);
font-size: 1.5rem;
overflow: hidden;
position: sticky;
top: 0;
z-index: 100;
}
/* NAV */
.logoNavDiv {
display: flex;
justify-content: center;
margin: -3% auto -4% auto;
}
.logoNavImg {
width: 50%;
height: auto;
}
.navMain {
background-color: rgb(30, 3, 68);
height: auto;
padding-top: 0.5%;
padding-bottom: 0.5%;
}
.navUl {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
.navLi {
list-style: none;
margin-right: 2%;
}
.navLiMobile {
display: none;
}
.navLink:hover {
color: rgb(185, 13, 13);
font-weight: 600px;
}
.navLink {
color: white;
}
/* FOOTER */
.foot {
background-color: rgb(53, 7, 119);
display: flex;
justify-content: center;
}
.footBox {
padding-top: 0.5%;
display: flex;
flex-direction: column;
}
.footIconBox {
display: flex;
justify-content: center;
list-style: none;
}
.footIconLi {
padding-left: 2%;
}
.footIcons {
width: 50px;
height: auto;
}
.footText {
color: white;
text-align: center;
}
/* Noticias.hmtl */
.mainContainerNoticias {
display: grid;
grid-template-columns: 0.5fr 1fr 0.5fr;
grid-template-rows: repeat(3, auto);
grid-template-areas:
"header header header"
"main main main"
"footer footer footer"
;
}
.headerNoticiasGrid {
grid-area: header;
}
.mainNoticiasGrid {
grid-area: main;
background-image: url(../img/bg/bgSec.jpg);
}
.footerNoticiasGrid {
grid-area: footer;
}
/* TOP Section */
.noticiasTopSection {
margin: 0;
}
.noticiasCatUl {
display: flex;
border: 1px rgba(0, 0, 0, 0.048) solid;
justify-content: center;
margin-bottom: 1%;
}
.noticiasCatLi {
list-style: none;
padding: 2%;
font-size: 1.5rem;
}
.noticiasCatLink {
text-decoration: none;
color: black;
}
.noticiasCatLink:hover {
color: rgb(185, 13, 13);
font-weight: 600px;
border: none;
}
/* MID SECTION */
.noticiasMidSection {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.noticiasArtMain {
display: flex;
max-width: 23em;
height: auto;
border: 1px rgba(0, 0, 0, 0.048) solid;
background-color: rgba(0, 0, 0, 0.11);
border-radius: 8px;
margin: 1%;
overflow: hidden;
}
.noticiasArtImgDiv {
width: 100%;
}
.noticiasArtImg {
width: 100%;
height: 13em;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.noticiasArtDiv {
width: 100%;
height: auto;
overflow: hidden;
color: black;
}
.noticiasArtDiv:hover {
color: red;
}
.noticiasArtH3 {
font-size: 1.4em;
font-weight: 600;
padding-bottom: 0.5rem;
text-align: center;
}
.noticiasArtP {
line-height: 1rem;
font-size: 1rem;
font-weight: 400;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PCNEWS-Guias/Trucos</title>
<link rel="shortcut icon" href="img/icons/icono.png" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="bodyBg">
<div class="mainContainerNoticias bg22">
<!-- HEADER -->
<header class="headerMain headerNoticiasGrid">
<div class="logoNavDiv">
<a href="index.html">
<img src="img/icons/logo.svg" alt="logotipo" class="logoNavImg">
</a>
</div>
<nav class="navMain">
<ul class="navUl">
<li class="navLi navLiMobile"><a class="navLink" href="index.html">Inicio</a></li>
<li class="navLi"><a class="navLink" href="noticias.html">Noticias</a></li>
<li class="navLi"><a class="navLink" href="reviews.html">Reviews</a></li>
<li class="navLi"><a class="navLink" href="guias.html">Guias</a></li>
<li class="navLi"><a class="navLink" href="contacto.html">Contacto</a></li>
</ul>
</nav>
</header>
<!-- MAIN -->
<main class="mainNoticiasGrid">
<section class="NoticiasTopSection">
<ul class="noticiasCatUl">
<li class="noticiasCatLi">TODO</li>
<li class="noticiasCatLi">NOTICIAS</li>
<li class="noticiasCatLi">ARTICULOS</li>
</section>
<section class="noticiasMidSection">
<article class="noticiasArtMain">
<a href="">
<div class="noticiasArtImgDiv">
<img src="img/noticias/new1.jpg" alt="GTX-3090-TI" class="noticiasArtImg">
</div>
<div class="noticiasArtDiv">
<h3 class="noticiasArtH3">Mineros están rematando sus tarjetas gráficas, pero muchas
tienen
chips
</h3>
<p class="noticiasArtP">Usuarios que compraron algunas de estas tarjetas descubrieron que las tarjetas fueron
modificadas en algún momento</p>
</div>
</a>
</article>
<article class="noticiasArtMain">
<a href="">
<div class="noticiasArtImgDiv">
<img src="img/noticias/new2.jpg" alt="Fall Guys" class="noticiasArtImg">
</div>
<div class="noticiasArtDiv">
<h3 class="noticiasArtH3">Tras el cambio a free-to-play, Fall Guys vive su mejor momento desde 2020
</h3>
<p class="noticiasArtP">El videojuego gratuito de Mediatonic la rompe en Twitch y Steam a pesar de desaparecer de la misma</p>
</div>
</a>
</article>
<article class="noticiasArtMain">
<a href="">
<div class="noticiasArtImgDiv">
<img src="img/noticias/new3.jpg" alt="GoreMagala" class="noticiasArtImg">
</div>
<div class="noticiasArtDiv">
<h3 class="noticiasArtH3">Publican nuevo trailer de Monster Hunter Rise con Astalos y Gore Magala
</h3>
<p class="noticiasArtP">Es momento de que conozcas cómo te harán sufrir estos iconicos enemigos de antiguas entregas</p>
</div>
</a>
</article>
</main>
<!-- Footer -->
<footer class="foot footerNoticiasGrid">
<div class="footBox">
<ul class="footIconBox">
<li class="footIconLi"> <a href="https://www.instagram.com/lucasdxvid/" target="_blank">
<img src="img/icons/instagram.svg" alt="instagram" class="footIcons"> </a>
</li>
<li class="footIconLi"> <a href="https://www.reddit.com/user/Athloner44" target="_blank">
<img src="img/icons/reddit.svg" alt="reddit" class="footIcons"> </a>
</li>
<li class="footIconLi"> <a href="https://www.youtube.com/channel/UCy_yWEbpB7axwSH3Qlthcnw"
target="_blank">
<img src="img/icons/youtube.svg" alt="youtube" class="footIcons"> </a>
</li>
</ul>
<div>
<p class="footText">www.PCNEWS.com y el logotipo son marcas registradas. Derechos Reservados ©
ATHL.COM
S de R.L. de C.V. </p>
</div>
</div>
</footer>
</div>
</body>
</html>
I can help! The problem is the height of your body, which can be solved with the following CSS:
body {
min-height: 100%;
}
Then to give the appearance of no empty space, you can position your footer element all the way at the base of the page, like so:
footer {
position: fixed;
bottom: 0;
width: 100%;
}
I am working on sample blog design and trying to learn css & html with flex and grid. I am trying to set back ground image to the grid 1,3,5 . I tried giving the class and add url with image but unable to do. I have provided my code for your reference. it silly question but with grid I am unable to get it..
Code pen link : code pen link
I tried something like this :
.bg{
background: url(1.jpg);
}
tried to assign this bg class to div but didnt work. I tried removing the back ground color from inner grid but it didnt work..
CSS :
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: sans-serif;
background-color: seashell;
}
#page {
display: flex; /*display:flex; not flexbox */
height: calc( 100vh - 30px);
flex-direction: row; /* Change flex-direction to column*/
}
#sidebar {
margin-left: 2.5rem;
margin-right: 2.5rem;
width: 100px;
}
#content{
flex:1;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: auto;
background-color: #2196F3;
padding:10px;
}
#inner-grid{
flex:1;
display : grid ;
grid-template-rows:2fr 2fr;
grid-gap:5px;
}
#inner-grid > div {
background: lightgreen;
padding: 8px;
border: black;
}
.one {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
display: grid;
}
.bg{
background-image: url(/image1.jpg);
border: crimson;
display: grid;
}
.two {
background-color: blue;
}
.three {
background-color: purple;
}
.box {
background-color: #444;
grid-template-rows: 5;
grid-template-columns: 10;
color: #fff;
border-radius: 5px;
padding: 30px;
font-size: 150%;
}
.nav-list {
background: #5bb1f9;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
align-items: baseline;
}
.nav-item {
list-style: none;
margin-right: 2rem;
text-align: center;
}
.nav-item a {
text-decoration: none;
color: black;
transition: all 200ms ease-in;
text-align: center;
}
.nav-item a:hover {
color: var(--clr-primary-dark);
}
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blog Post</title>
<link rel="stylesheet" href="common.css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
<style>
</style>
</head>
<body>
<div id="header">
<navbar>
<ul class="nav-list">
<li class="nav-item">
<a
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-show-count="false"
>Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item">
<script src="https://platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script>
</li>
<li class="nav-item">Home</li>
<li class="nav-item">Article</li>
<li class="nav-item">Article</li>
<li class="nav-item">Login</li>
</ul>
</navbar>
</div>
<div id="page">
<div id="sidebar">
<div>
My profile
</div>
<div>
My interest
</div>
</div>
<div id="content">
<div class="one">
<div id="inner-grid">
<div>1</div>
<div>2</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div>3</div>
<div>4</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div>5</div>
<div>6</div>
</div>
</div>
</div>
</div>
<div id="footer">
<navbar>
<ul class="nav-list">
<li class="nav-item">Tweet<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item"> <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script></li>
<li class="nav-item">footer 1</li>
<li class="nav-item">footer 2</li>
<li class="nav-item">footer 3</li>
</ul>
</navbar>
</div>
</body>
</html>
assign bg class to div(1 , 3, 5) and remove the back ground color from inner grid :)
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: sans-serif;
background-color: seashell;
}
#page {
display: flex; /*display:flex; not flexbox */
height: calc( 100vh - 30px);
flex-direction: row; /* Change flex-direction to column*/
}
#sidebar {
margin-left: 2.5rem;
margin-right: 2.5rem;
width: 100px;
}
#content{
flex:1;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: auto;
background-color: #2196F3;
padding:10px;
}
#inner-grid{
flex:1;
display : grid ;
grid-template-rows:2fr 2fr;
grid-gap:5px;
}
#inner-grid > div {
/*background: lightgreen;*/
padding: 8px;
border: black;
}
.one {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
display: grid;
}
.bg{
background-image: url('https://picsum.photos/200/300') !important;
background-repeat: no-repeat;
background-size: cover;
border: crimson;
display: grid !important;
}
.two {
background-color: blue;
}
.three {
background-color: purple;
}
.box {
background-color: #444;
grid-template-rows: 5;
grid-template-columns: 10;
color: #fff;
border-radius: 5px;
padding: 30px;
font-size: 150%;
}
.nav-list {
background: #5bb1f9;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
align-items: baseline;
}
.nav-item {
list-style: none;
margin-right: 2rem;
text-align: center;
}
.nav-item a {
text-decoration: none;
color: black;
transition: all 200ms ease-in;
text-align: center;
}
.nav-item a:hover {
color: var(--clr-primary-dark);
}
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blog Post</title>
<link rel="stylesheet" href="common.css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
<style>
</style>
</head>
<body>
<div id="header">
<navbar>
<ul class="nav-list">
<li class="nav-item">
<a
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-show-count="false"
>Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item">
<script src="https://platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script>
</li>
<li class="nav-item">Home</li>
<li class="nav-item">Article</li>
<li class="nav-item">Article</li>
<li class="nav-item">Login</li>
</ul>
</navbar>
</div>
<div id="page">
<div id="sidebar">
<div>
My profile
</div>
<div>
My interest
</div>
</div>
<div id="content">
<div class="one">
<div id="inner-grid">
<div class="bg">1</div>
<div>2</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div class="bg">3</div>
<div>4</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div class="bg">5</div>
<div>6</div>
</div>
</div>
</div>
</div>
<div id="footer">
<navbar>
<ul class="nav-list">
<li class="nav-item">Tweet<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item"> <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script></li>
<li class="nav-item">footer 1</li>
<li class="nav-item">footer 2</li>
<li class="nav-item">footer 3</li>
</ul>
</navbar>
</div>
</body>
</html>
This is the HTML part
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="top-bar">
<div class="container">
<div class="row">
<div class="top-bar-section">
<p class="top-bar-question">Do you have any questions? Call Us 0774747790 </p>
</div>
<div class="row">
<div class="top-nav-bar">
<img class="logo" src="assets/images/logo.png" alt="">
<ul class="top-nav-options">
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Home</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Appointment</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Treatment</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Facility</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Gallery</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">About Us</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Contact Us</li></a>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="background-image-block">
<img class="background-img1" src="assets/images/background.jpg" alt="">
</div>
</div>
<div class="row">
<div class="box-left">
</div>
<div class="box-mid">
</div>
<div class="box-right">
</div>
</div>
</body>
</html>
This is the CSS
#media only screen and (min-width: 200px) and (max-width: 275px)
{
body
{
background-color: #FFFFFF;
}
.top-bar
{
background-color: #3FA4F6;
width: 500px;
height: 40px;
}
.top-bar-section
{
margin-top: 10px;
width: 375px;
}
.top-bar-question
{
color: white;
font-size: 12px;
padding-left: 12px;
}
.top-nav-bar
{
width: 375px;
height: 100px;
}
.top-nav-bar
{
margin-top: 20px;
}
.logo
{
width: 141px;
margin-bottom: 8px;
padding-left: 15px;
}
.top-nav-option
{
font-size: 17px;
padding: 4px;
font-size: 15px;
list-style: none;
color: black;
}
.background-img1
{
width: 272px;
margin-top: 176px;
height: 180px;
margin-left: 13px;
}
.top-nav-option-link
{
text-decoration: none;
color: black;
}
.top-nav-option-link:hover
{
text-decoration: none;
color: #3FA4F6;
}
.box-left
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
.box-mid
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
.box-right
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
}
The problem is the links are working upto Apartment option. I have figured out problem is with the bootstrap css I'm using.When I remove the bootstrap cdn it works fine but when I put it back It won't work.I need Bootstrap container and row classes cause I have ordered them according to those divs
Remove the margin-top from the class .background-img1 and add margin-top: 176px; to .background-image-block class;
The Links are not working because the div with class .background-image-block was on its top.
I was making the responsive mobile version of a website, when I discovered that the body expands when resizing the window, here's a screenshot of it (the header is pink so I could spot where the error was in pixels, ah yes, it's in Italian but don't worry):
This is the code:
<head>
<meta charset="utf-8">
<title>
Ravenna | Home
</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/zoom-marker.css"/>
<link rel="shortcut icon" type="image/png" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/script.js" async></script>
</head>
<body id="body">
<div id="progressbar"></div>
<div id="scrollPath"></div>
<section id="hd" class="header">
<h2>Ravenna</h2>
<nav>
<ul>
<li class="menu">
Storia
<ul class="ani-menu">
<li><a class="aestr1" href="antica.html">Antica</a></li>
<li><a class="a" href="esarcato.html">L'Esarcato</a></li>
<li><a class="a" href="medioevo.html">Medioevo</a></li>
<li><a class="aestr2" href="dal500aoggi.html">Dal 500 a oggi</a></li>
</ul>
</li>
<li class="menu">
Strutture
<ul class="ani-menu">
<li><a class="aestr1" href="santapollinareinclasse.html">Sant'Apollinare in Classe</a></li>
<li><a class="a" href="museoclassis.html">Museo CLASSIS</a></li>
<li><a class="a" href="portoanticoinclasse.html">Porto Antico in Classe</a></li>
<li><a class="a" href="sanvitale.html">San Vitale</a></li>
<li><a class="a" href="gallaplacidia.html">Galla Placidia</a></li>
<li><a class="a" href="battisteroneoniano.html">Battistero Neoniano</a></li>
<li><a class="a" href="museoarcivescovile.html">Museo Arcivescovile</a></li>
<li><a class="aestr2" href="strutture.html">Altro...</a></li>
</ul>
</li>
<li class="menu">
Banksy
<ul class="ani-menu">
<li><a class="aestr1" href="chie.html">Chi è</a></li>
<li><a class="a" href="cosacomunica.html">Cosa comunica</a></li>
<li><a class="aestr2" href="spuntiperchiacchierare.html">Spunti per chiacchierare</a></li>
</ul>
</li>
</ul>
</nav>
<div id="burgy" class="burgy">
<a id="onclickburgy" onclick="openSlideMenu()">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</a>
</div>
<div id="side-menu" class="side">
<div id="containerside" class="containerside">
Home
Storia
Strutture
Banksy
</div>
</div>
</section>
<section class="wall">
<img src="img/Ravenna.jpg" class="fitBg">
<div class="content">
<h2>Benvenuti a Ravenna!</h2>
<p>N.B. Per esplorare il sito rivolgersi ai punti di cui sopra, una guida più completa può essere trovata qui sotto</p>
<div class="animation">
^
</div>
</div>
</section>
</body>
</html>
and there is the css:
body {
font-family: 'Poppins', sans-serif;
min-height: 200vh;
background: #111;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}
section {
position: relative;
padding: 20px;
}
.header {
position: fixed;
top: 0;
left: 0;
z-index: 1000000;
display: flex;
justify-content: space-between;
width: 100%;
padding: 40px 60px;
transition: 0.35s;
}
.header .logo {
color: #fff;
font-size: 1.2em;
font-family: 'Acme';
margin-top: 8px;
}
.wall {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wall:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 400px;
z-index: 1;
background: linear-gradient(to top, rgb(17, 17, 17),transparent);
}
.wall .content {
position: relative;
max-width: 900px;
text-align: center;
z-index: 1;
}
.wall .content h2 {
color: #fff;
font-size: 5em;
font-family: 'Leckerli One';
}
.wall .content a {
position: absolute;
color: #fff;
font-size: 9em;
font-family: 'Leckerli One';
bottom: -140px;
left: 50%;
transform: translate(-50%, 70%) rotate(180deg);
font-weight: 900;
}
Add this to the top of your CSS and your problems will be solved:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
The issue is that the padding on the .header is making the element expand beyond where you want it to. Changing the box-sizing will modify the way the padding is interpreted and apply it inside the content area instead of expanding it.
Try using overflow-x like this:
html,body{
overflow-x: hidden;
}
For some reason the ul gets display: none, and is not displayed even when the impute element is clicked.
This is the html
When this is clicked:
<input class="input country" type="text"/>
This html should show (but it doesn't):
<ul id='country-list'>
<li id="US">United States</li>
</ul>
This is the jQuery code:
function handleCountries() {
$('#country-list').hide();
$('#country').click(function () {
$("#country-list").show();
});
};
function handleTestOut() {
handleCountries()
};
$(handleTestOut)
This is the html:
<div class="container">
<input class="input country" type="text"/>
<ul id='country-list'>
<li id="US">United States</li>
</ul>
<button>explore</button>
</div>
This is some css:
.container {
position: relative;
display: flex;
flex-direction: column;
height: 200px;
}
.input {
height: 30px;
margin-bottom: 50px;
}
ul {
height: 200px;
width: 18%;
overflow: hidden;
overflow-y: scroll;
position: absolute;
background-color: blue;
top: 20px
}
Here is the full code
Edit: I removed the invalid html, but am getting the same results
You hide it with: $('#country-list').hide();
And what is with this functions calling each other?
You are using jQuery to call handleTestOut function in witch you call handleCountries function. It does not make much sense.
You will get absolutely same result if you just leave it out of functions:
But your main problem was you don't have #country id you have .country CSS class for click calling (or use input.country or .input class, or all of it input.country.input):
$('#country-list').hide();
$('.country').click(function() {
$("#country-list").show();
});
html {
height: 100%;
}
body {
font-family: 'Nunito', sans-serif;
color: #1b4639;
background: #cbe2e4;
height: 100%;
}
.wrapper {
height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
p {
text-align: center;
margin: 0;
font-size: 24px;
}
.container {
position: relative;
display: flex;
flex-direction: column;
height: 200px;
}
.input {
height: 30px;
margin-bottom: 50px;
}
ul {
height: 200px;
width: 18%;
overflow: hidden;
overflow-y: scroll;
position: absolute;
background-color: blue;
top: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<title>Document</title>
</head>
<body>
<div class="wrapper">
<p>Hello World!</p>
<div class="container">
<input class="input country" type="text" />
<ul id='country-list'>
<li id="US">United States</li>
<li id="AF">Afghanistan</li>
<li id="AX">Åland Islands</li>
<li id="AL">Albania</li>
<li id="DZ">Algeria</li>
<li id="AS">American Samoa</li>
<li id="AD">Andorra</li>
<li id="AO">Angola</li>
<li id="AI">Anguilla</li>
<li id="AQ">Antarctica</li>
<li id="AG">Antigua and Barbuda</li>
<li id="AR">Argentina</li>
<li id="AM">Armenia</li>
<li id="AW">Aruba</li>
<li id="AU">Australia</li>
<li id="AT">Austria</li>
<li id="AZ">Azerbaijan</li>
<li id="BS">Bahamas</li>
<li id="BH">Bahrain</li>
<li id="BD">Bangladesh</li>
<li id="BB">Barbados</li>
<li id="BY">Belarus</li>
<li id="BE">Belgium</li>
<li id="BZ">Belize</li>
<li id="BJ">Benin</li>
<li id="BM">Bermuda</li>
<li id="BT">Bhutan</li>
<li id="BO">Bolivia, Plurinational State of</li>
<li id="BQ">Bonaire, Sint Eustatius and Saba</li>
<li id="BA">Bosnia and Herzegovina</li>
</ul>
<button>explore</button>
</div>
</div>
</body>
</html>