Good day,
I am trying to make my first responsive layout with the help of the Bootstrap Framework.
As a base layout I have taken an example template and I am now trying to modify this template.
I have added the following:
<div class="row col-xs-12 col-md-6 border1" id="HeadBar">
This is not showing up
</div>
Here I want to place the page header (logo and company title)
My CSS code :
#HeadBar {
background-color: #ffffff;
height: 10%;
width: 100%;
position: relative;
display: block;
}
#HeadBar h1 {
margin: 0px;
padding: 10px;
}
The problem is.. The #HeadBar doesn't show up at all.
Let alone being responsive.
Adding a H1 tag does make it visible. But I want it to be visible without any additions.
I hope that anyone could see my errors.
I know this is very basic. But I need to get a hang of it
https://jsfiddle.net/ferencik/zb50wgve/
Still need some addition, like adding z-index:1001 (or any value more than 1000 because you have class navbar-static-top in your nav - it have z-index:1000 - which overlap your #HeadBar) in #HeadBar
#HeadBar {
background-color: #FFF;
width: 100%;
position: relative;
display: block;
height: 10%;
z-index: 1001;
}
Add z-index: 9999; to the css.
Fiddle
Instead of using z-index, i would recommend fixing your position issues which are the actual cause of the problem.
I would also remove the class .row from the #headBar div. .row is used for margins within a container and shouldn't be use on the parent container itself.
On .navbar, I have set the position back to initial as it was always fixing to the top of the parent instead of finding its place below the previous sibling.
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
margin: 0px;
padding: 0px;
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
position: initial;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 10px;
margin-left: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0;
/* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 0px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}
#HeadBar {
background-color: #ffffff;
height: 10%;
width: 100%;
position: relative;
display: block;
}
#HeadBar h1 {
margin: 0px;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="navbar-wrapper">
<div class="container">
<div class="col-xs-12 col-md-6 border1" id="HeadBar">
This is not showing up
</div>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
JSFiddle
With bootstrap, you have to separate row DIVs with col-... ones, like this:
<div class="row" id="HeadBar">
<div class="col-xs-12 col-md-6 border1">
Something to show
</div>
</div>
Because col-... divs use float system, and row allows to clear your DOM.
By the way, using % for height with a static or relative position does not work. You have to use pixels, em or what you want.
#HeadBar {
background-color: #ffffff;
min-height: 50px; // example
width: 100%;
position: relative;
display: block;
}
or simply use fixed or absolute property to set a pourcentage value:
#HeadBar {
background-color: #ffffff;
height: 10%;
width: 100%;
position: fixed;
left: 0;
top: 0;
display: block;
}
Hope it will help !
CSS
Change
Add the property in class .navbar-wrapper .navbar
float:left;
width:100%
See the fiddle https://jsfiddle.net/zb50wgve/4/
OR
Structural changes
Add wrap up of .row for #HeadBar.
and remove the class row from #HeadBar
Code:
<div class="row">
<div class=" col-xs-12 col-md-6 border1" id="HeadBar">
This is not showing up
</div>
</div>
See fiddle : https://jsfiddle.net/zb50wgve/5/
First, question to solve this is what are you trying to achieve?
this element with text should be fixed? static?
Second, the element with class row must wrap the elements with col-something-number
Thrid, If the nav is static don't break the nav component just add a div on top, see this fiddle https://jsfiddle.net/6evtc3ry/
Simply use a div instead of applying all kind of classes just use #headbar as you are using
<div id="HeadBar" class="">
This is not showing up
</div>
This will work well
You can use this,
#HeadBar
{
display:inline-flex;
height:10%;
width:100%;
}
Related
I want to create a navbar for my Website but if i add transition to the links on mobile mode, it dont animates
My HTML
<header>
<nav>
<span class="navvisible">
<span class="toggler"><i class="fa-solid fa-bars"></i></span>
<span class="header_nav">
Logo
</span>
</span>
<div class="nav_bar">
<a class="active" href="#home">Home</a>
what
ThaHell
</div>
</nav>
My CSS
#media screen and (max-width: 700px) {
.toggler {
font-size: 1.2em;
padding-right: 10px;
display: inline;
}
div.nav_bar {
transition: all 1s;
height: 0;
display: none;
padding: 10px 70px;
}
header nav div a {
display: block;
text-align: center;
font-size: 18px;
}
.nav_bar.activenav{
display: block;
height: auto;
}
header {
width: 100%;
}
.active {
padding-bottom: 2px;
}
.navvisible {
padding-bottom: 10px;
}
}
The funktions of div.nav_bar and .nav_bar.activenav dont work. The class .activenav is toggled by JS.
Navbar active
Navbar
If i click on the 3 Bar Icon, the JS code will add the class .activenav to the div.nav_bar
I just want a transition effect.
I tried it with height and absolute positions but they didnt worked.
Try this
.nav_bar.activenav {
animation: appearing .3s linear;
}
#keyframes appearing {
0% {
height:0;
}
100% {
height:auto;
}
}
so I am doing a challenge for FreeCodeCamp and my Nav Bar is being wonky. If you notice, it doesn't go across the entire screen so there is some white space. The only way I seem to be able to alter the dimensions of the navbar is if I get rid of overflow:hidden, but then the navbar acts really weird.
https://codepen.io/mso122591/pen/boowZv
Thanks!
HTML:
ul {
list-style-type: none;
margin-lef: 100;
padding: 0;
overflow: hidden;
}
li {
display: inline;
float: right;
}
li a {
display: block;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 100px;
font: bold 30px/50px Georgia, serif;
background-color: #66ccff;
}
li a:hover {
background-color: #b3e6ff;
}
.left-middle-text {
margin-left: 150px;
}
.portfolio-text {
margin-left: -200px;
margin-top: -1200px;
text-align: center;
background-color: white;
color: white;
z-index: 5;
}
.background-blue {
background-color: #66ccff;
}
.background-silver {
background-color: silver;
}
.portfolio-placeholder {
background-color: silver;
padding: 20px;
margin: 20px;
width: 300px;
height: 300px;
}
.social-two {
width: 50px;
height: 50px;
display: block;
z-index: 5;
}
.social {
padding-top: 20px;
margin-left: 1400px;
width: 20px;
height: 20px;
display: block;
z-index: 5;
}
.white {
color: white;
}
.ptext {}
h1 {
font-size: 60px;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
margin-top: 100px;
margin-left: 300px;
padding: 60px;
font-family: "Comic Sans MS";
font-size: 40px;
}
.black-box {
background-color: black;
width: 100%;
height: 200px;
margin-top: -150px;
z-index: -1;
}
.col-xs-6 {
text-align: center;
}
dbody {
padding: 20px;
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div.wrapper {
float: left;
/* important */
position: relative;
/* important(so we can absolutely position the description div */
}
div.description {
position: absolute;
/* absolute position (so we can position it where we want)*/
top: 0px;
/* position will be on bottom */
margin-left: 100px;
width: 80%;
height: 90%;
/* styling bellow */
background-color: white;
color: white;
opacity: 0.2;
/* transparency */
filter: alpha(opacity=40);
/* IE transparency */
}
.image-static {
position: fixed;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="background-blue">
<ul>
<li>
<img class="social-two" alt="Facebook page. " src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAclBMVEU6WJf////29/oeRo4sTpKwudAyU5S6wtV3iLJ7i7MtT5M2VZYoTJEYQ43t7/SIl7tIY57N0+JRaqHl6fDa3unDydu0vNK+xdhid6lsf6yosstYb6PS1+Rne6rn6vGDkriapcORnr8SQIzd4epDX5uhrMfw5inQAAAETklEQVR4nO3dW3eiMBSG4dCEjCVBDioe2tp2tP//Lw7YOkPX6BhkSPbO+t4rb3TxLAwIQRBJv31TbErBuXJTNPtvJtF7nZZSaRN6GUdmtJJlelGYKstdd85Ylf4lnNc29HL912w9/y6sZCzr75yRVV+4zkMv0ATl6z/CKkZgS6zOwrkMvSwTJedfwjq2MXjO1J/CNK6taD+bnoQq9HJMmOqEEa/C00oUSRnrKOwyZSIWsW5IP5ML0cQ8DNuB2IhCh16ISdOF2MQ8DNuBuBG8D3hvF7sPIYQQQgghhH5ntM4yZbvkqdNLq1TG/ujd6MzKPKu3xduuWVXPy8NhsVgcDsvlc7VaN+luxpnY4vLy8WN1eEiut+Z6JtRoK7e753/QvvrBU6jl8c1Bx1VobPZ+cOOxFGr5tHLmMRQauVkO8bET2tJx9DEVGrkb6uMlVL+vDolUKIs7fJyEeXMXkI8wH7SLYCi8G8hFKO/8irIRqvs2MnyEp6t6ohbK/W0Ia6H9GAHkIDTlGCAHoRz8Y5uZUG9HARkI8zGbGQ5C/ToOSF84dhWSF+rZSCB5oRx4VoadcNTvNRZCe/8xBROhHA0kLtSPsQttFb1wPJD27NrgL+l+tSu2T0fdTQRbfaxfZsXHK+UZUrseoJun20zaLNPmfM22MUZntGe5pfs57upFKtKWi7kf+u6fJD9eW/buCPyRM/0zgXU8C/zG9i89jsPwnS1QaCdgwxjodIJmz/j/ydmbi/CJ6Uamy2l/X/H9jrZCl2tmXljuB7+S/7pa7asHxqPQ7cBiRfnA4VZOp2g+stCLOSKn84ikD41u5fSrlPW/WzOXWcMjZ6FyOZHIeUPjdmTBeX8vrMPE6ANvocOMBe+75sjFbSHv21m4XGKyZL2lcTnCf+YtdPjhXUFIOhch60MLJ+Ga9Y1znITRr0Pac4O3chHyvr0ThBASSl/up4MwlVfe3Cv8WQDzeLmtyx5/duXNvcKfysluQ0YVfp85tTD8PhNCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBDCWIThZ9fM4+xiTjOk28vv7UVghjT+We5ruVypkPK4UuFKEEJIPwghpB+EENIPQgjpByGE9IMQQvpBCCH9IISQfhBCSD8IIaQfhBDSD0II6QchhPSDEEL6QQgh/SCEkH4QQkg/CCGkH4QQ0g9CCOkHIYT0gxBC+kEI4aDK//Q5g/IoLEWQP+37E5qNKEI8ZdCfUBciyCMI/AlVI4I8/MufUC5EUgYYiN6EpkxEkga4A4o3oU1bYRJgIHoTqqQTBliJvoTtKuyESe19JHoSnh473An9Py3Sk/D0EMJOmFS+n4DtR5hXyVmYrD0TvQjzzyfUfwqTSnodix6ERlZJX5jMa59b1OmFtj4/CFT0PtF6W48TC43tdhN/CdvPPErl5wZhEwqNVvKY9j5HfPvURVNsfBwSTycsN0Xz/WHDvwC3A1K2lfV16AAAAABJRU5ErkJggg==">
</li>
<li>
<img class="social-two" alt="Linkedin page. " src="data:image/png;base64,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">
</li>
<li><a onclick="scrollWin()">Portfolio</a></li>
</ul>
</div>
</div>
<div class="background-silver">
<h2 style="text-align:center;"> Michael Oelbaum </h2>
<h3 style="text-align:center"> Front-End Developer and UX/UI designer with experience in Japanese translation/interpretation
</div>
<!--Itachi background code
-->
<div class='wrapper'>
<!-- image -->
<div id="theFixed" style="position:fixed;top:200px">
<img src="https://images3.alphacoders.com/144/thumb-1920-144565.jpg" alt="Itachi Background. ">
<h1 class="white portfolio-text"> Portfolio </h1>
<div class='description'>
</div>
</div>
<!-- description div -->
<!-- description content -->
</div>
<h1 id=P ortfolio class="white portfolio-text"> Portfolio </h1>
<div class="row">
<div class="col-xs-6">
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
</div>
<div class="col-xs-6">
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
</div>
</div>
<!-- end description content -->
</div>
<!-- end description div -->
There is a wrapper div element called .container-fluid which has padding set to 15px (the whitespace you see) on either side. Either use a different class for this element, or add padding: 0px !important to your css.
I was able to add the following code to the top of the css:
.container-fluid {
padding: 0;
}
As long as this code is below any call to Bootstrap on a live site, you shouldn't need !important.
Added both the navbar and navbar-fixed-top classes to the nav tag according to the Bootstrap 3.3.7 documentation, given it's the version you're using, and added a margin-top: 80px to the background-silver class you're using for your "subnav" element, so it won't get behind your navbar when you scroll to the top.
Also, remember to import the rest of the bootstrap dependecies to your project, aka the bootstrap theme and it's JS functions.
Portfolio Page Link
I am not very good at css, but i believe that the . referse to a class ie, .button I would suggest using inspect element(ctrl-shift-i) to change the div you want to 100%, such as in my example :
My rats html
I am attempting to create an effect using jQuery, where when the user hovers over an image, a piece of text appears over the image. However, there are a few issues when making changes to the code.
If the ".img" on line 3 of the jQuery is replaced with "img", the code works fine, but causes the hover effect to work on a different image
If I remove the semicolon after "opacity: 0.75;" on line 4 of the jQuery, the code works temporarily, but any other interactions with the page causes the effect to break
Apologies for the code being a bit long winded.
Working JSFiddle: https://jsfiddle.net/9dsL2jyL/3/
My Code:
HTML
<div class="workInfo">
<!-- Nav bar open icon -->
<img src="images/icons/navbar.png" id="hamburger" alt="Navigation Menu" onclick="openNav()">
<!-- Nav bar links -->
<div id="mySidenav" class="sidenav">
×
Home
About
Portfolio
Contact
<!-- Facebook Link -->
<a href="#" id="facebook" alt="Facebook Page Link">
<div class="container">
<img src="images/icons/facebookHover.png">
<img class="fadeTop" src="images/icons/facebook.png" style="display: block;">
</div>
</a>
<!-- Instagram Link -->
<a href="#" id="instagram" alt="Instagram Page Link">
<div class="container">
<img src="images/icons/instagramhover.png">
<img class="fadeTop" src="images/icons/instagram.png">
</div>
</a>
<!-- Github Link -->
<a href="#" id="github" alt="Github Page Link">
<div class="container">
<img src="images/icons/githubhover.png">
<img class="fadeTop" src="images/icons/github.png">
</div>
</a>
</div>
<h1>Work</h1>
</div>
<div class="workDisplay">
<a href="#">
<!-- Div to store the text for hover -->
<div id="container">
<!-- Text that appears on hover -->
<h2 class="text">
A Play On Words
</h2>
</div>
<!-- Project image -->
<img class="img" src="images/cardphoto.jpg">
</a>
</div>
CSS
.sidenav {
/* Sets the height to 100% of the page */
height: 100%;
/* Sets the width of the nav bar to 0 */
width: 0;
/* Keeps the nav bar stationary */
position: fixed;
/* Makes the nav bar appear above everything */
z-index: 10;
/* Nav bar Placement stuff */
top: 0;
left: 0;
/* Sets the colour of the nav bar background */
background-color: #141311;
/* Disables horizontal scroll in the nav bar */
overflow-x: hidden;
/* Adds padding above the content */
padding-top: 3%;
/* Adds 0.5 second transition effect to slide in the nav bar */
transition: 0.5s;
}
/* The navigation menu links */
.sidenav a {
/* Sets the font */
font-family: "purista-web",sans-serif;
font-style: normal;
font-weight: 300;
/* Adds padding around the links */
padding: 1vh 1vw 1vh 2vw;
/* Removes all text decoration */
text-decoration: none;
/* Sets the size of the font */
font-size: 1.75vw;
/* Sets the colour of the font */
color: #B8B8B4;
/* Makes the text appear in a block */
display: block;
/* Adds a 0.3s transition to the hover effect */
transition: 0.3s
}
/* Styling for the social media links */
.container {
position: relative;
width: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 5vw;
}
/* Changes the colour when you hover over the link */
.sidenav a:hover, .offcanvas a:focus{
color: #FEFEFA;
}
/* Styling for the top link of the nav bar */
.toplink {
margin-top: 10vh;
}
/* Position and style the close button (top right corner) */
.closebtn {
position: absolute;
top: -4.5vh;
font-size: 8vw !important;
}
/* Styling for the left half of the portfolio page */
.workInfo {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
left: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
background: #FEFEFA;
z-index: 5;
}
/* Styling for Work */
.workInfo h1 {
/* Sets the font */
font-family: "marydale",sans-serif;
font-style: normal;
font-weight: 400;
/* Sets the size of the font */
font-size: 8vw;
/* Sets the positioning for the text */
position: fixed;
top: 50%;
left: 50%;
margin-top: -13vh;
margin-left: -34vw;
/* Sets the colour of the type */
color: #141311;
}
.workInfo #hamburger {
width: 3vw;
position: absolute;
left: 5%;
top: 5.5%;
}
/* Styling for the right half of the portfolio page */
.workDisplay {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
right: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
background: #141311;
line-height: 100%;
z-index: 4;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.workDisplay #container {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
right: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
}
.workDisplay h2 {
color: #FEFEFA;
/* Sets the typeface */
font-family: "skolar-sans-latin",sans-serif;
/* Makes the font italic */
font-style: italic;
/* Makes the font Bold */
font-weight: 700;
/* Sets the size of the type */
font-size: 3vw;
margin-top: 48vh;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 14;
}
.workDisplay img {
display: block;
height: 100vh;
min-height: 100vh;
width: auto;
z-index: 10;
}
jQuery
/* Hover effect for the nav bar */
$(window).load(function(){
$(".container").hover(function() {
//Adds a fade out of 300ms to the top image
$(this).find(".fadeTop").fadeOut(300);
}, function() {
//Adds a fade in of 300ms to the top image
$(this).find(".fadeTop").fadeIn(300);
});
})
/* Hover effect for the span's on the work page */
$(document).ready(function() {
$('.text').hide();
$('.img').animate({
opacity: 0.75
});
$('.img').hover(function() {
$(this).stop().animate({opacity:.4},200);
$('.text').fadeIn();
}, function() {
$(this).stop().animate({opacity:1},500)
$('.text').fadeOut();
});
Using JQuery, images can be selected by image element $("img") or by class or id of a image $(".imageclass") and $("#imageid") respectively.
In your case, you can provide additional class to the images you want to select by JQuery animate function. Then the function will only affect the images who have that class only. Hope this makes it clear.
$(".imageclass").animate({
opacity: 0.75;
});
Try not to use JS
when it can be solved by Css
html,body{
height: 100%;
margin: 0;
}
.box{
width: 100%;
height: 100%;
font-size: 0;
}
.box-item{
display: inline-block;
width: 50%;
height: 100%;
font-size: 16px;
position: relative;
}
.box-item:hover .box-item-text{
opacity: 1;
transform: translate(0, -50%) scale(1);
}
.box-item:hover .box-item-img{
opacity: .8;
-webkit-filter: blur(3px);
filter: blur(3px);
// http://caniuse.com/#search=filter%3A%20blur
}
.box-item-text{
font-size: 30px;
color: white;
text-align: center;
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 50%;
transform: translate(0, -50%) scale(.5);
opacity: 0;
transition: all 500ms linear;
}
.box-item-img{
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
top: 0;
// or background-size: cover !important;
background-size: 100% 100% !important;
-webkit-filter: blur(0px);
filter: blur(0px);
transition: all 500ms linear;
}
<div class="box">
<div class="box-item">
<div class="box-item-text">Lorem ipsum.</div>
<div class="box-item-img" style="background: url(http://dummyimage.com/200x200/000/fff) 0 0 no-repeat;"></div>
</div>
<div class="box-item">
<div class="box-item-text">Lorem ipsum.</div>
<div class="box-item-img" style="background: url(http://dummyimage.com/200x200/000/fff) 0 0 no-repeat;"></div>
</div>
</div>
For anyone who reads this later, I found that the tag surrounding the image in the workDisplay div was causing the issue, as upon removing this tag from my code, the hover effect worked perfectly.
HTML Before:
<div class="workDisplay">
<a href="#">
<!-- Div to store the text for hover -->
<div id="container">
<!-- Text that appears on hover -->
<h2 class="text">
A Play On Words
</h2>
</div>
<!-- Project image -->
<img class="img" src="images/cardphoto.jpg">
</a>
</div>
HTML After:
<div class="workDisplay">
<!-- Div to store the text for hover -->
<div id="container">
<!-- Text that appears on hover -->
<h2 class="text">
A Play On Words
</h2>
</div>
<!-- Project image -->
<img class="img" src="images/cardphoto.jpg">
</div>
I'm trying to make a popup slide up when clicking on the link.
I've prepared an example with elements around the popup under this LINK
There are 2 blocks (block and footer}:
<div id="block">
Some content inside the block.
</div>
<div id="Popup">
<div class="Container">
<div id="tmp"> Popup!
<span id="close">X</span>
</div>
</div>
</div>
<div id="footer">
<span id="FooterLink">Link</span>
</div>
Between them as you can see there is my hidden popup, which I would like to show just above the footer block. When pressing a link in in the footer area, the popup should slowly slide up above the footer overflowing the block above the footer. My popup should have dynamic height because of different content inside depending of a language is chosen by the user. Sorry for my english, hopefully someone can help me with this. I found an example here LINK how should this work (except the clients button is my footer and I can have only popup with absolute position or z-index so I can't really use this example).
The rest of the code:
CSS:
#block {
height: 150px;
color: #FFF;
background-color: #505050;
text-align: center;
}
#Popup {
display: none;
position:absolute;
z-index: 100;
background-color: red;
width: 100%;
min-height: 60px;
}
#close {
width: 20px;
margin-left: 100px;
cursor: pointer;
}
#footer {
height: 50px;
background-color: blue;
color: white;
text-align: center;
}
#FooterLink {
cursor: pointer;
}
JS:
$('#FooterLink').click(function () {
$('#Popup').slideToggle();
});
$('#close').click(function () {
$('#Popup').slideToggle();
});
There's many ways you could accomplish this. What I did was to wrap your footer and popup elements under one wrapping div. This helps in placing and animating their positions in relation to each other. I also wrapped the entire box in one div and called it box.
The footer-container is given a height equal to the and footer element. When you click on the button, bottom with the value of the element's height is applied and since the popup is positioned absolutely, it will animate upwards.
Removing bottom: 60px hides the element again.
This implementation allows for a dynamic height of the popup element as well.
Fiddle
$('#FooterLink').click(function() {
$('#Popup').animate({
top: -$("#Popup").height()
});
});
$('#close').click(function() {
$('#Popup').animate({
top: 0
});
});
#test {
display: inline-block;
}
#block {
height: 150px;
color: #FFF;
background-color: #505050;
text-align: center;
}
#Popup {
position: absolute;
z-index: 0;
background-color: red;
width: 100%;
min-height: 60px;
}
#close {
width: 20px;
margin-left: 100px;
cursor: pointer;
}
#footer-container {
position: relative;
height: 60px;
}
#footer {
position: relative;
z-index: 100;
height: 60px;
background-color: blue;
color: white;
text-align: center;
}
#FooterLink {
cursor: pointer;
}
#box {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="block">
Some content inside the block.
</div>
<div id="footer-container">
<div id="Popup">
<div class="Container">
<div id="tmp">Popup!
<span id="close">X</span>
</div>
</div>
</div>
<div id="footer">
<span id="FooterLink">Link</span>
</div>
</div>
You simple need to change you css #Popup position to relative
Try this solution
$('#FooterLink').click(function () {
$('#Popup').show(2000);
});
$('#close').click(function () {
$('#Popup').hide(2000);
});
#block {
height: 150px;
color: #FFF;
background-color: #505050;
text-align: center;
}
#Popup {
display: none;
position:relative;
z-index: 100;
background-color: red;
width: 100%;
min-height: 60px;
}
#close {
width: 20px;
margin-left: 100px;
cursor: pointer;
}
#footer {
height: 50px;
background-color: blue;
color: white;
text-align: center;
}
#FooterLink {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block">
Some content inside the block.
</div>
<div id="Popup">
<div class="Container">
<div id="tmp"> Popup!
<span id="close">X</span>
</div>
</div>
</div>
<div id="footer">
<span id="FooterLink">Link</span>
</div>
There are 2 img div's on top of each-other, next to a fluid header logo (.svg) also in a div.
The HTML:
<header class="site-header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader"><div class="wrap"><div id="menu_container"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/Hamburger_optimized.svg" alt="menu" class="menu-btn" /><div class="menu_spacer"></div><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/searchicon.png" alt="zoek" class="search_icon" /></div>
<div class="title-area"><h1 class="site-title" itemprop="headline"></h1></div><div class="vr_menu_logo"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/logo_VR_font.svg"></div>
</div></header>
The CSS:
.vr_menu_logo{
max-width:95%;
float:left;
margin-right:20px;
}
#menu_container {
max-width: 5%;
float: right;
}
.menu-btn{
cursor: pointer;
max-height: 30px;
max-width: 30px;
margin-top:2em;
}
.menu_spacer{height:4em;}
.search_icon{
cursor: pointer;
max-height: 24px;
max-width: 24px;
}
.site-header .wrap {
width: 1260px;
}
.site-header .wrap {
margin: 0 auto;
padding: 0;
float: none;
overflow: hidden;
}
Goal:
Scaling the browser window would keep the small hamburger and the search icon's on level with respectively the top and bottom of the logo. Actually the 3 seperate items should act as one logo.
Check the cssdesk here: http://www.cssdesk.com/JDyYQ
I was hoping a spacer div with a max-height would do the trick, or display:table-cell;
But I can't get it to work, anyone have an idea? (javascript can be an option too, but this must be possible with CSS I would think...)
here is an example using flexbox - note in the fiddle that the two div are exactly the same apart from having a different height. This should help you getting what you are trying to achieve. Obviously check what kind of browser support you need to provide as flexbox is a relatively new technology.
http://jsfiddle.net/zn50mmnu/
html:
<div class="flexy f1">
<span class="menu">M</span>
<span class="search">S</span>
</div>
<div class="flexy f2">
<span class="menu">M</span>
<span class="search">S</span>
</div>
css:
.flexy {
float: right;
clear: both;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 2px solid red;
margin: 10px;
}
.f1 {
height: 50px;
}
.f2 {
height: 90px;
}
.menu {
background: red;
width: 1em;
}
.search {
background: blue;
width: 1em;
}