Hello i have a next html code and CSS:
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.teaser {
width: 100%;
height: 25vh;
background-image: url("http://www.1zoom.me/big2/365/321125-alexfas01.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
a.menuButton {
padding: 0;
margin: 0;
width: 49.7%;
height: 33.33%;
float: left;
background-color: white;
border-collapse: collapse;
border: 1px solid #E6F0F0;
text-decoration: none;
position: relative;
color: black;
}
.rectangle {
padding: 0;
width: 70px;
height: 7px;
background: blue;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.menuButtonContent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
height: 50%;
width: 50%;
background-color: red;
margin: auto;
}
.menuButtonContent h1 {
text-align: center;
}
.buttonsWrapper {
width: 100%;
height: 73vh;
}
.rectangle#citizenship {
background-color: #38CCBA;
}
.rectangle#fastsearch {
background-color: #00899B;
}
.rectangle#forillegals {
background-color: #D80C00;
}
.rectangle#soonillegals {
background-color: #FF8A00;
}
.rectangle#aboutapp {
background-color: #B8B8B8;
}
.rectangle#settings {
background-color: #626262;
}
<div class="teaser"></div>
<div class="buttonsWrapper">
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>Citizenship</h1>
<div class="rectangle" id="citizenship"></div>
</div>
</a>
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>Fast search</h1>
<div class="rectangle" id="fastsearch"></div>
</div>
</a>
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>For illegals</h1>
<div class="rectangle" id="forillegals"></div>
</div>
</a>
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>Soon illegals</h1>
<div class="rectangle" id="soonillegals"></div>
</div>
</a>
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>About app</h1>
<div class="rectangle" id="aboutapp"></div>
</div>
</a>
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>Settings</h1>
<div class="rectangle" id="settings"></div>
</div>
</a>
</div>
I have 2 problems:
1) I cannot find an apropriate solution to center the .menuButtonContent, it is centered horizontaly, but not vertically, on some screen sizes it gets centered vertically, but not at all - how can i center it?
2) The background-image: url doesn't get rendered, why?
To make an element vertically align centered, set the display property of the parent element as display:table; then set the element that has to be centered as display:table-cell; and vertical-align:midlle;.
.parent{
display:table;
}
.child-element-centered{
display:table-cell;
vertical-align:midlle;
}
Try using the calc() function in CSS
lets say the parent div is called "a" and its child was "b"
<div id="a" style="width:400px;height:400px;position:relative;">
<div id="b" style="position:relative;top:calc(25% - 100px);left:calc(25% - 100px);width:50%;height:50%;"></div>
</div>
first set the display of child divs to inline-block
then set the parent text-align to center. This will horizontally center your divs
and then use a "hack" to accomplish vertically aligning your child divs. See this fiddle for an example
Related
I want to have a similar effect like on this page: https://melaniedaveid.com/ (half of the page is scrollable).
I can make a sticky box, but there are certain things that I don't know how to make, such as the text. The text must be bigger than the box, but if overflow: hidden, then it is not scrollable. If it's overflow: scroll, it scrolls only if the mouse is hovering over the section, but I want the mouse to be able to scroll anywhere on the page.
body {
display: flex;
}
.example {
width: 50%;
}
.block {
background: #888888;
height: 300px;
/* margin: 1em; */
border: 1px solid black;
}
.block.one {
height: 100px;
}
.box {
width: 100%;
height: 100px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.sticky {
position: sticky;
top: 10px;
}
.orange{
background: orange;
}
<div class="example">
<div class="block one"></div>
<div class="block">
<p class="box sticky"> </p>
</div>
<div class="block"></div>
</div>
<div class="example">
<div class="block one"></div>
<div class="block orange"></div>
<div class="block"></div>
</div>
Is this how you want it?
To create the sticky effect use position: sticky.
Code:
#wrapper {
display:flex;
flex-direction:row;
}
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 50%;
height: 300px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
#para{
width:50%;
margin:10px;
}
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id="para">
This is a para
</div>
</div>
I have a sidebar with a position fixed that can vertically scroll. But why when I scroll it, I just can scroll to half of the content of the sidebar I cant scroll until to the bottom of the sidebar.
As you can see in the first pic, there's still text follow us, but I cant scroll anymore. the second image is the image of the full sidebar
First image
second image
$(document).ready(function () {
//OPEN FOR SIDEBAR MOBILE
$(".toggle-menu button").click(function () {
$(".menu-list-container").addClass("show");
$(".menu-list").css("width", "275px");
$(".notify").addClass("hide");
$(".livetv").addClass("hide");
$(".close-mobile").css("display", "block");
});
//SCRIPT FOR CLOSING SIDEBAR MOBILE
$(".close-mobile").click(function () {
$(".menu-list-container").removeClass("show");
$(".menu-list").css("width", "0px");
$(".notify").removeClass("hide");
$(".livetv").removeClass("hide");
$(".close-mobile").css("display", "none");
})
})
/* SCSS */
.navbar-mobile {
position: sticky;
top: 0;
right: 0;
left: 0;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
padding-top: 15px;
padding-bottom: 15px;
background-color: $white;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
z-index: 100;
.toggle-menu {
position: relative;
width: 10%;
}
.logo {
width: 50%;
position: relative;
img {
position: absolute;
transform: translateY(-18px);
max-width: 134px;
}
}
.navbar-right {
width: 40%;
display: flex;
flex-flow: row nowrap;
div {
width: calc(200px - 20px);
}
.livetv {
a {
color: $black;
text-decoration: none;
text-align: center;
img {
display: block;
margin: 0 auto;
}
span {
display: block;
font: $small;
}
}
}
.notify {
position: relative;
button {
position: absolute;
top: -50%;
transform: translateY(25px);
background: none;
border: none;
}
}
.close-mobile {
display: none;
position: relative;
button {
background: none;
border: none;
position: absolute;
right: 32px;
top: 12px;
}
}
}
.menu-list-container {
position: relative;
max-width: 275px;
height: auto;
.menu-list {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 0px;
//width: 275px;
overflow-y: scroll;
background-color: $white;
transition: ease-out 300ms;
z-index: 1;
.header {
background: url("../../asset/header.png") no-repeat;
background-size: cover;
color: $white;
.flex {
position: relative;
display: flex;
flex-flow: row nowrap;
.image-container {
display: flex;
justify-content: center;
align-items: center;
img {
width: 65px;
height: 65px;
border-radius: 8px;
border: solid 2px $white;
}
}
.header-info {
width: auto;
p {
font: $heading6;
}
a {
color: $white;
opacity: 0.7;
text-decoration: none;
}
}
}
}
.form-search {
position: relative;
border-bottom: solid 1px $gray1;
input {
width: 100%;
height: 50px;
border: solid 1px $gray3;
border-radius: 8px;
}
button {
position: absolute;
top: 37px;
right: 30px;
background: none;
border: none;
}
}
.menu-content {
border-bottom: solid 1px $gray1;
ul {
list-style: none;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
li {
a {
color: $black;
text-decoration: none;
}
}
.live-tv {
a {
color: $secondary;
font: $heading4;
}
}
.live-tv:before {
content: url("../../asset/icons/livetv-icon.svg");
position: relative;
top: 2px;
}
.foryou::before {
content: url("../../asset/icons/check.svg");
position: relative;
top: 2px;
}
.saved::before {
content: url("../../asset/icons/save.svg");
position: relative;
top: 2px;
}
.tv-schedule::before {
content: url("../../asset/icons/check.svg");
position: relative;
}
.livetv-regular::before {
content: url("../../asset/icons/livetv.svg");
position: relative;
}
.brandconnect::before {
content: url("../../asset/icons/brandconnect.svg");
position: relative;
}
li:last-child {
margin-bottom: 0 !important;
}
}
}
.program {
border-bottom: solid 1px $gray1;
p {
font: $heading4;
margin-block-start: 0;
}
ul {
padding-inline-start: 0;
margin-block-end: 0;
margin-block-start: 0;
list-style: none;
li {
display: flex;
.image {
width: 48px;
border-radius: 8px;
img {
width: 100%;
object-fit: cover;
border-radius: 8px;
}
}
.image:last-child {
background-color: $gray1;
}
.pl-20 {
width: 70%;
a {
color: $black;
text-decoration: none;
}
}
}
li:last-child {
.image {
display: flex;
justify-content: center;
align-items: center;
background-color: $gray1;
border-radius: 50%;
height: 48px;
img {
width: auto !important;
}
}
a {
font: $heading4;
}
}
}
}
}
.social {
border-bottom: solid 1px $gray1;
p {
font: $heading4;
}
.social-list {
display: flex;
flex-flow: row nowrap;
.social-item {
width: calc(100px - 20px);
height: 43.75px;
border-radius: 50%;
img {
display: block;
position: absolute;
margin: 0 auto;
transform: translate(13px, -7px);
}
}
.facebook img {
transform: translate(15px, -11px) !important;
}
.social-item:last-child {
margin-right: 0 !important;
}
}
}
.signout {
a {
color: $black;
text-decoration: none;
}
a:before {
content: url("../../asset/icons/signout.svg");
position: relative;
}
}
}
.show {
visibility: visible !important;
}
.hide {
visibility: hidden !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar-mobile">
<div class="toggle-menu pl-10">
<button type="button" class="btn">
<img src="../asset/icons/menu.svg" alt="menu icon" />
</button>
</div>
<div class="logo">
<a href="#">
<img src="../asset/logo.png" alt="logo" />
</a>
</div>
<div class="navbar-right">
<div class="livetv pr-20">
<a href="livetv.html">
<img src="../asset/icons/livetv.svg" alt="live tv" />
<span>Live TV</span>
</a>
</div>
<div class="notify">
<button type="button">
<img src="../asset/icons/bell-black.svg" alt="notify icon" />
</button>
</div>
<div class="close-mobile">
<button type="button">
<img src="../asset/icons/close-black.png" alt="close-icon" />
</button>
</div>
</div>
<div class="menu-list-container">
<div class="menu-list">
<div class="header p-20">
<div class="flex">
<div class="image-container">
<img src="../asset/avatar.png" alt="avatar" />
</div>
<div class="header-info pl-20">
<p>muhammad Rojali hernandez</p>
<span><img src="../asset/icons/" ></span>Setting
</div>
</div>
</div>
<form class="form-search pt-20 pb-20 ml-20 mr-20" method="post">
<input type="text" name="search" required />
<button type="submit">
<img src="../asset/icons/search-icon.svg" alt="Search Icon" />
</button>
</form>
<div class="menu-content pt-20 pb-20 ml-20 mr-20">
<ul>
<li class="live-tv mb-20">
<a class="pl-10" href="livetv.html">LIVE TV</a>
</li>
<li class="foryou mb-20">
<a class="pl-10" href="foryou.html">For You</a>
</li>
<li class="saved mb-20">
<a class="pl-10" href="#">Saved Video</a>
</li>
</ul>
</div>
<div class="program pt-20 pb-20 ml-20 mr-20">
<p>PROGRAM</p>
<ul>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program4.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Kick Andy
</div>
</li>
<li class="browse">
<div class="image">
<img src="../asset/icons/add.svg" alt="browse icon" />
</div>
<div class="pl-20 pt-10">
Browse Program
</div>
</li>
</ul>
</div>
<div class="menu-content pt-30 pb-30 ml-20 mr-20">
<ul>
<li class="tv-schedule mb-20">
<a class="pl-10" href="livetv.html">TV Schedule</a>
</li>
<li class="livetv-regular mb-20">
<a class="pl-10" href="foryou.html">For You</a>
</li>
<li class="brandconnect mb-20">
<a class="pl-10" href="#">Saved Video</a>
</li>
</ul>
</div>
<div class="social mt-30 mb-30 ml-20 mr-20">
<p>FOLLOW US</p>
<div class="social-list">
<div class="social-item facebook mr-20">
<a href="#">
<img src="../asset/icons/facebook.svg" alt="facebook icon" />
</a>
</div>
<div class="social-item twitter mr-20">
<a href="#">
<img src="../asset/icons/twitter.svg" alt="twitter icon" />
</a>
</div>
<div class="social-item instagram mr-20">
<a href="#">
<img src="../asset/icons/instagram.svg" alt="instagram icon" />
</a>
</div>
<div class="social-item youtube mr-20">
<a href="#">
<img src="../asset/icons/youtube.svg" alt="youtube icon" />
</a>
</div>
</div>
</div>
<div class="signout pt-30 pb-30 ml-20 mr-20">
Sign Out
</div>
</div>
</div>
</nav>
I have a div tag in which i have a panel which is accordion. Now my div tag height is dynamic it depends on data and panel is fixed on top of div which will expand with some sub data on click. I want to set the height of my panel equals to its parent div. Note div height is dynamic.
.menuboxcontent {
background-color: deepskyblue;
color: white;
text-align: center;
margin: 10px 0px;
position:relative;
height: 100%;
padding: 20px ;
color: #fff;
}
.collapse {
text-align: left;
height: auto;
padding: 20px 10px;
margin: 0;
}
var boxheight = $('.menuboxcontent').height();
$('.collapse').on('show.bs.collapse', function() {
$(this).parent().find('.glyphicon-menu-down').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-up');
$(this).parent().('.collapse').css('height', boxheight + 'px');
})
$('.collapse').on('hide.bs.collapse', function() {
$(this).parent().find('.glyphicon-menu-up').removeClass('glyphicon-menu-up').addClass('glyphicon-menu-down');
$(this).parent().('.collapse').css('height', (boxheight * 0.1) + 'px');
})
.menuboxcontent {
background-color: deepskyblue;
color: white;
text-align: center;
margin: 10px 0px;
position: relative;
height: 100%;
padding: 20px;
color: #fff;
}
.collapse {
text-align: left;
height: auto;
padding: 20px 10px;
margin: 0;
}
.submenupanelgroup {
padding: 0;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
}
.sub.sub-subitem {}
.sub-subitem li a,
.submenudropdown a {
color: white;
}
.submenudropdown a {
padding: 0;
margin: 0;
line-height: 14px;
}
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<div class="menuboxcontent">
<div id="accordion" class="panel panel-group submenupanelgroup">
<div class=" collapse panel-collapse" id="panelbody">
<ul class="sub-subitem">
<li>
<a href="#">
Auth
</a></li>
<li>
<a href="#">
Auth with claim
</a></li>
<li>
<a href="#">
Auth with other claim
</a>
</li>
</ul>
</div>
<div class="panel-heading submenudropdown">
<a href="#panelbody" data-toggle="collapse" data-parent="#accordion">
<div class="panel-title arrow">
<span class="glyphicon glyphicon-menu-down">
</span>
</div>
</a>
</div>
</div>
<span class="glyphicon glyphicon-home">
</span><br />
<h2>SAP</h2>
</div>
enter image description here
You could always just set the panel's height to inherit like height: inherit;
This makes your panel inherit the height of it's parent, which is the div with the menuboxcontent class. Your panel would have a height of 100% because you set it's parents height to 100%
I have the following css:
# this is the grey line
ul.timeline-list > li.media:before {
position: absolute;
display: block;
top: 0;
content: '';
height: 100%;
margin-left: 58px;
border-left: 5px solid #e8e8e8;
z-index: 1;
}
#media (max-width: 480px) {
ul.timeline-list > li.media:before {
margin-left: 50%;
}
}
#this is the image icon
ul.timeline-list > li.media > .media-left {
text-align: center;
position: relative;
z-index: 2;
}
Html looks like:
<ul ng-app="edgeFeed" class="timeline-list ng-scope">
<li class="media media-clearfix-xs">
<div class="media-left">
<div class="user-wrapper">
<img ng-src="myimage.jpg" class="img-circle" width="80" src="myimage.jpg">
<div>some entry</div>
<div class="date"></div>
</div>
</div>
</li>
</ul>
As you can see the image goes behind the grey vertical line but should be behind it like the image above. Also the image should aligned:
How can I get the image to stay above the grey line?
At my home page in slider code i want to fix width for first image. Is it possible from css or html. Because i tried but not work. My current slider css code are bellow.
#slider {
background-attachment: scroll;
background-color: #FFFFFF;
background-image: url("http://silverharmony.in/wp-content/uploads/2012/10/Slider_bg.png");
background-position: 50% 0;
background-repeat: repeat;
display: block;
float: left;
width: 100%;
}
.inner, .wrapper {
display: block;
height: 100%;
margin: 0 auto;
position: relative;
width: 960px;
z-index: 0;
}
ul.kwicks {
background-color: #333333;
border-radius: 3px 3px 3px 3px;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
ul.kwicks li {
background: url("../images/icons/ajax_loader.gif") no-repeat scroll 50% 50% transparent;
display: block;
overflow: hidden;
padding: 0;
}
.kw_img {
display: block;
}
.kw_img img {
vertical-align: middle;
}
.kw_shadow {
background: url("../images/icons/overlay.png") repeat-y scroll 0 0 transparent;
border-right: 1px solid rgba(255, 255, 255, 0.3);
height: 100%;
position: absolute;
right: 0;
width: 40px;
z-index: 2;
}
.last .kw_shadow {
background: none repeat scroll 0 0 transparent !important;
border-right: 0 none;
}
My current Slider HTML Code Bellow.
<div id="slider">
<div class="inner">
<ul style="width:960px; height:400px; margin:15px 0;" data-width="960" data-max="660" class="kwicks" id="kwicks-1">
<li class="kwick" style="left: 0px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/2.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 192px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-2.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 384px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/3.png&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 576px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-1.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick last" style="right: 0px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img"><img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/1.jpg&h=400&w=960&zc=1&q=100"></div>
</li>
</ul>
</div>
Currently my slider looking like this. http://silverharmony.in/
And i actual want to like below link.
http://silverharmony.in/wp-content/uploads/2012/10/slider-screenshoot.png
Slider is using Kwicks jQuery plugin. I added first li item .kwicks-selected class to achive what you are looking for.
Example here jsFiddle