Develop Reference

CSS set image dimensions to percentages of parent div without having set dimensions of parent div

Proposition:
I have a div containing two elements, a link and an image with an underscore which is supposed to go on the bottom of it.
However I can't find a good way of setting the width of the image since the parent div doesn't have a set width, the width of the parent should depend on the length of the a-link text.
Additionally, vertical padding is introduced for some reason.
Lastly, the parent div is supposed to be centred on the page.
Question:
How would I make the underscore to be set at a fixed distance below the text, like 5px for example?
And, how would I get the boxes to be the same height with the width depending on the containing link's text lengths?
Here is how it looks:
Here's my code:
.navMain {
position: relative;
text-align: center;
padding: 0;
margin: 0;
}
.linkBox {
display: inline-block;
padding-right: 20px;
}
.linkBox a {
position: relative;
text-decoration: none;
color: black;
padding: 0;
margin: 0;
}
.linkBox img {
position: relative;
padding: 0;
margin: 0;
}
<div class="navMain">
<div class="linkBox">
<a routerLink="/ordering"> Place order</a>
</div>
<div class="linkBox">
<a routerLink="/invoices"> Invoice overview</a>
<img src="/static/images/internalnavbardiv/blueFilterLine.svg">
</div>
<div class="linkBox">
<a routerLink="/registerinvoice"> Register invoice</a>
</div>
</div>

Simply use gradient to achieve this and no need for img or svg:
.navMain {
position: relative;
text-align: center;
padding: 0;
margin: 0;
}
.linkBox {
display: inline-block;
padding-right: 20px;
}
.linkBox a {
position: relative;
text-decoration: none;
color: black;
padding-bottom: 5px;
margin: 0;
}
.decorate {
background:linear-gradient(blue,blue) bottom/100% 1px no-repeat;
}
<div class="navMain">
<div class="linkBox">
<a routerLink="/ordering"> Place order</a>
</div>
<div class="linkBox">
<a routerLink="/invoices" class="decorate"> Invoice overview</a>
</div>
<div class="linkBox">
<a routerLink="/registerinvoice" class="decorate"> Register </a>
</div>
</div>
You can also use an image or svg as background:
.navMain {
position: relative;
text-align: center;
padding: 0;
margin: 0;
}
.linkBox {
display: inline-block;
padding-right: 20px;
}
.linkBox a {
position: relative;
text-decoration: none;
color: black;
padding-bottom: 5px;
margin: 0;
}
.decorate {
background:url(https://picsum.photos/200/100?image=1040) bottom/80% 2px no-repeat;
}
<div class="navMain">
<div class="linkBox">
<a routerLink="/ordering"> Place order</a>
</div>
<div class="linkBox">
<a routerLink="/invoices" class="decorate"> Invoice overview</a>
</div>
<div class="linkBox">
<a routerLink="/registerinvoice" class="decorate"> Register </a>
</div>
</div>

Nav Bar doesn't go across whole page

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

Popup slide up from the bottom overflowing other div blocks

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>

Spacing between images

I have 3 images side-by-side, I would like to know how to get some spacing between them. I have tried everything, margins, padding and I don't know what to do.
.content1 {
background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
color: white;
text-align: center;
width: 100%;
height: 20%;
display: block;
float: left;
}
.text1 {
font-family: "Goudy Old Style", Optima, sans-serif;
font-size: 40px;
margin-bottom: 0;
margin-top: 45px;
}
.text2 {
font-size: 30px;
color: #6CB9D9;
}
.album1 {
float: left;
width: 31%;
text-align: center;
}
.album2 {
display: inline-block;
width: 31%;
text-align: center;
}
.album3 {
float: right;
width: 31%;
text-align: center;
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
}
<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash"> / </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
<div class="album">
<div class="album1">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9133-650x385.jpg" alt="album1">
</div>
<div class="album2">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9099-650x385.jpg" alt="album2">
</div>
<div class="album3">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA0373-650x385.jpg" alt="album3" class="album4">
</div>
</div>

You set your wrapping div's to 31% but you didn't change the size of your images so they were flowing outside the wrappers. If you set Overflow: hidden; on your album1, album2 and album3 div's you'll see that your margins are working on the divs but you'll only see part of your images. if you set the imgs themselves to a width of 100% as below you'll see it works.
.content1 {
background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
color: white;
text-align: center;
width: 100%;
height: 20%;
display: block;
float: left;
}
.text1 {
font-family: "Goudy Old Style", Optima, sans-serif;
font-size: 40px;
margin-bottom: 0;
margin-top: 45px;
}
.text2 {
font-size: 30px;
color: #6CB9D9;
}
.album1 {
float: left;
width: 31%;
text-align: center;
margin: 1%;
}
.album2 {
display: inline-block;
width: 31%;
text-align: center;
margin: 1%;
}
.album3 {
float: right;
width: 31%;
text-align: center;
margin: 1%;
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
}
.album img { width: 100%; }
<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash"> / </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
<div class="album">
<div class="album1">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9133-650x385.jpg" alt="album1">
</div>
<div class="album2">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9099-650x385.jpg" alt="album2">
</div>
<div class="album3">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA0373-650x385.jpg" alt="album3" class="album4">
</div>
</div>

In each div tag, just place the following style = "margin-right: 20px;". So for example, for the first image, change it ot this
div style = "margin-right: 20px;" class="album1">

You don't need to use float, you can simply set the display of the albums to inline-block, and set the text-align of their parent to center. Note that the three images there are too wide to be in one line, so you'll have to adjust that yourself.
.album1 img, .album2 img, .album3 img {
//set img width and height here
}
.album1 {
display: inline-block;
//add padding/margin here
}
.album2 {
display: inline-block;
//add padding/margin here
}
.album3 {
display: inline-block;
//add padding/margin here
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
text-align:center;
}

The angular-isotope + isotope don't works well with my grid

I'm building a site with angular. In the main page and search results page has a recipes feed like a pinterest and I use the jQuery isotope plugin and angular-isotope directives, but I have 2 issues/problems.
In the main page a the grid cells do not have a fixed width, I use the min-width css property.
This is my CSS:
.recipe {
width: $grid-width;
min-height: 325px;
height: auto;
margin: $margin-top 0 $margin-bottom $ditter;
float: left;
position: relative;
border: 1px solid #C3C3C3;
#include border-radius(0 0 5px 5px);
.avatar {
position: absolute;
top: -15px;
width: $grid-width;
margin: 0 auto;
img {
display: block;
margin: 0 auto;
}
}
.image {
width: $grid-width - 2px;
margin: 0 auto;
overflow-x: hidden;
img {
width: $grid-width;
margin: 0 auto;
}
}
.name {
font-family: Times;
font-size: 20px;
font-style: italic;
font-weight: bold;
text-align: center;
}
.recipe-controls {
width: $grid-width;
.star {
font-size: 30px;
margin: 15px;
}
}
}
This is my angular template:
<div id="masonry" class="clearfix" isotope-container>
<div isotope-item>
...
</div>
<div class="controls" isotope-item>
...
</div>
<div class="recipe" ng-repeat="recipe in recipes" isotope-item>
<div class="avatar text-center">
<a href="">
<img class="img-circle" ng-src="http://graph.facebook.com/bruno.egermano/picture?type=normal" alt="">
</a>
</div>
<div class="image">
<a href="" ng-click="openRecipe(recipe.id)">
<img ng-src="{{recipe.image}}" alt="{{recipe.name}}">
</a>
</div>
<div class="name">
{{recipe.name}}
</div>
<div class="recipe-controls">
<i class="glyphicon pull-right star" ng-class="{'glyphicon-star-empty': !recipe.star.stared, 'glyphicon-star': recipe.star.stared}">
{{recipe.star.count}}
</i>
</div>
</div>
And that is my screenshoot, the circles is the problems I got.
In this first problem. What am I doing wrong?
The second problem, in the search result page, I have a filters, when the users change one of theirs, I call a ajax request and reload the collection.
When its occurs the isotope put all the items on one another, like that:
The SCSS is the same and the HTML is much similar like the other problem.

I found my mistake in the first problem.
I forgot to set the height of my image and the container.
Now, my SCSS looks like that:
.recipe {
width: $grid-width;
height: auto;
margin: $margin-top 0 $margin-bottom $ditter;
float: left;
position: relative;
border: 1px solid #C3C3C3;
#include border-radius(0 0 5px 5px);
.avatar {
position: absolute;
top: -15px;
width: $grid-width;
margin: 0 auto;
img {
display: block;
margin: 0 auto;
}
}
.image {
width: $grid-width - 2px;
height: 235px;
margin: 0 auto;
overflow-x: hidden;
img {
width: $grid-width;
margin: 0 auto;
}
}
.name {
font-family: Times;
font-size: 20px;
font-style: italic;
font-weight: bold;
text-align: center;
}
.recipe-controls {
width: $grid-width;
.star {
font-size: 30px;
margin: 15px;
}
}
}
But the second problem is still happening.