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.
Related
I can not increase the background width of this div. I do not know why, I need help. Please check the image that is on this link
Here is the page link http://1.edbdigital.pro/
I want to lengthen the background horizontally (widght: 100%) and center the content of it
Html
<div class="symple-callout symple-clearfix ">
<div class="symple-callout-caption">Peça agora um orçamento para seu projeto
</div>
<div class="symple-callout-button">
<a href="#" class="symple-button large blue" title="Visit Site" style="border-radius:5px" rel="nofollow" target="_blank">
<span class="symple-button-inner" style="border-radius:5px">PEDIR ORÇAMENTO</span>
</a>
</div>
</div>
Css
.symple-callout { padding: 20px 30px; background: #f1f1f1; position: relative; border-radius: 0px; width: 100%}
.symple-callout-caption { float: left; font-size: 2.6em; font-weight: 400; width: 80%; color: #555; line-height: 100%; }
.symple-callout-button { float: right;}
.symple-callout-caption { text-align: center }
.symple-callout-caption { float: none; font-size: 1.6em; font-weight: 400; width: 100%; color: #555; }
.symple-callout-button { position: inherit; right: auto; top: auto; margin: 20px auto 0; text-align: center; }
.symple-clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
Thanks you
There is a container <div class="section mcb-section"> with a fixed width, which doesn't allow inner blocks to have a width more than 1200px:
#media only screen and (min-width: 1240px)
.section_wrapper, .container {
max-width: 1200px; //this line
}
You can split your container into two wrappers and insert a <div class="symple-callout-caption"> block in there like so:
<div class="section mcb-section">
....
</div>
<div class="symple-callout symple-clearfix">
...
</div>
<div class="section mcb-section">
....
</div>
Here I am trying to create some new Divs. When I press the save button, it fetch the data from text area and create a new div in top of the Add Button. That works Perfectly. Then I create some more divs, the Add Button reach the bottom of the page. And My need is, the Add Button should stop when it reaches the bottom of the page. I don't want to scroll my page. I just need the Created divs should scroll. Not the whole page. Please give some advise. Thank You.
$('.add-list-button').on('click', function() {
$('.add-list-button').hide();
$('.list-create').show();
document.getElementById("SAVE_LIST").focus();
});
$('.save-list').on('click', function() {
var listName = $('.list').text();
if (listName !== "") { //////////////////
$('.list').html("");
$('.add-list-button').hide();
$('.list-create').show();
document.getElementById("SAVE_LIST").focus();
createNewList(listName);
}
});
$('.close-list').on('click', function() {
$('.list-create').hide();
$('.add-list-button').show();
$('.list').html(""); ////////////////////////////////
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="create-list" id=L IST style="display: inline-block; width: 250px; background-color: #e2e4e6; border-radius: 3px; margin-left: 10px; margin-top: 40px; ">
<div class="add-list-button">
<b> Add </b>
</div>
<div class="list-create" style="display: none; min-height: 80px; border-radius: 3px; background-color: #e2e4e6; ">
<div class="list" id="SAVE_LIST" style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; margin-top: 5px; " contenteditable="true" data-placeholder="Add"></div>
<div style="width: 250px; height: 35px; margin-top: 5px;">
<input class="save-list" type="button" value="Save" style="cursor: pointer; width: 60px; height: 30px; background-color: gray; border-color: gray; margin-left: 10px; border-radius: 3px; vertical-align: top;">
<img class="close-list" src="public/media/images/icons/cls.png" width="27" height="27" style="cursor: pointer; margin-top: 3px; margin-left: 5px;">
</div>
</div>
</div>
Give a container class to your list items like this;
<div class="listcontainer">
//items
</div>
With a little bit styling, the container should scroll whenever the content size exceeds its size.
.listcontainer{height:200px;display:block}
change your jquery like this
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 80) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 81) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
html, body {
height: 4000px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width:50%;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="create-list" id=L IST style="display: inline-block; width: 250px; background-color: #e2e4e6; border-radius: 3px; margin-left: 10px; margin-top: 40px; ">
<div id="nav_bar" class="add-list-button">
<b style="color:white;"> Add </b>
</div>
<div class="list-create" style="display: none; min-height: 80px; border-radius: 3px; background-color: #e2e4e6; ">
<div class="list" id="SAVE_LIST" style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; margin-top: 5px; " contenteditable="true" data-placeholder="Add"></div>
I have three different span.class's that I want to show content for whenever they are clicked. Those div classes are:
<div id="one">
<span class="aboutme"> <p>About me</p></span>
<span class="skills"> <p>Skills</p></span>
<span class="goals"><p>My Goals</p></span>
</div>
I do want the span.aboutme to show on page load up, but hide whenever these other classes are clicked.
here's what I have so far in jsfiddle, but it's not working out.
https://jsfiddle.net/ispykenny/m4n8fzfp/
<div class="thirdwrapper">
<div class="wrapperthree">
<div id="one">
<span class="aboutme"> <p>About me</p></span>
<span class="skills"> <p>Skills</p></span>
<span class="goals"><p>My Goals</p></span>
</div>
<div id="two">
<span class="aboutmecontent">
<p>content for about me
</span>
<span class="skillscontent"> <p>content for skills</p> </span>
<span class="goalscontent"> <p>cotent for goals</p></span>
</div>
</div>
</div>
</div>
.thirdwrapper{
width: 100%;
height: auto;
min-height: 400px;
background-color: #F2F2F2;
margin-top: 0px;
padding-top: 0px;
}
.wrapperthree{
max-width: 1050px;
min-height: 400px;
min-width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
overflow: hidden;
margin-top: 0px;
padding-top: 0px;
}
.wrapperthree p{
margin-top: 0px;
padding-top: 0px;
}
#one{
max-width: 525px;
width: auto;
height: auto;
max-height: 400px;
border:1px solid white;
float: left;
font-size: 80px;
padding: 0;
margin: 0;
padding-top: 60px;
font-family: 'Lora', serif;
}
#one p{
text-align:center;
width:400px;
padding: 0;
margin: 0;
}
#two{
max-width: 525px;
width: auto;
height: auto;
min-height: 400px;
overflow: hidden;
margin-top: 0px;
padding-top: 60px;
padding-left: 60px;
}
span.aboutme p {
background-color:#666;
}
.skills p{
background-color: #999;
}
.goals p{
background-color: #333;
}
.skillscontent p{
display: none;
}
.goalscontent p{
display: none;
}
Here, you basically just need to check which class is being clicked, and first hide them, and then show the one you would actually like to show (if the classes always match up.)
fiddle: https://jsfiddle.net/m4n8fzfp/3/
$('#one span').click(function () {
var that = $(this);
var className = that[0].className;
console.log($(this)[0].className);
$('#two').children('span').children('p').hide();
$('#two').find('.' + className + 'content p').show();
})
So you basically want tabs. This can be easily achieved using jQuery:
https://jsfiddle.net/m4n8fzfp/4/
What you're basically doing is associating each content span with it's appropriate link using the data-tab directive and adding and removing the current class with the appropriate display attribute.
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;
}
I asked same question 2 days ago but now i still don't get it.
I have 1 div and i want it to be separate into 3 columns of div. I know how to do this for 2 column but, when i am trying 3 column(right, center and left) i get this:
Problem: The pink square is not in the center
Here is my code:
HTML:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
</div>
<div id="product2">
</div>
<div id="product3">
</div>
</div>
</div>
CSS:
#our_services {
/*height: 450px;*/
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 30%;
height: 75%;
background-color: green;
float: right;
margin: 5px;
}
#product2 {
width: 30%;
height: 75%;
background-color: pink;
float: right;
margin: 5px;
}
#product3 {
width: 30%;
height: 75%;
background-color: blue;
float: left;
margin: 5px;
}
Try with display:inline-block; instead.
exemple
#our_services {
/*height: 450px;*/
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
color: black;
background-color: rgb(224, 224, 224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 30%;
height: 75%;
background-color: green;
float: left;
margin: 1.5%;
}
#product2 {
width: 30%;
height: 75%;
background-color: pink;
float: left;
margin: 1.5%;
}
#product3 {
width: 30%;
height: 75%;
background-color: blue;
float: left;
margin: 1.5%;
}
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
afs
</div>
<div id="product2">
asf
</div>
<div id="product3">
asf
</div>
</div>
</div>
You had float right as well on one of the boxes
use float left to 1st and 2nd div also. and give margin on percentage. I think this will solve your problem.
I don't know of any way you can do this purely with html/css techniques. You can arrange the items with javascript after the dom (or this part at least) has loaded.
On the other hand, this gets you a little closer to what you want, although the distances between rows won't be equal to the distances between firs/last row and beginning/end of the orange rectangle:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div class="smth">
<div id="product1" class="product">
</div>
</div>
<div class="smth">
<div id="product2" class="product">
</div>
</div>
<div class="smth">
<div id="product3" class="product">
</div>
</div>
</div>
<style>
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
overflow: auto;
margin: auto;
}
.smth {
width: 33%;
height: 75%;
float: left;
}
#try{
background-color:orange;
width:50%;
height:50%;
margin:auto;
}
.product {
width: 90%;
height: 100%;
margin: auto;
}
#product1{
background-color:green;
}
#product2{
background-color:pink;
}
#product3{
background-color:blue;
}
</style>
</div>
As far as I understand:
If you don't want any spaces between you'd have to set the width property to (100/3)%
It all depends on your layout of what you want, if you want margin spaces between them all so that they're equally spaced between each other and the edges of their container div you'll have to work out what to do there. So in the case now you have 30% width for each, that leaves you with 10% spacing width which you can spread to 2.5% for margin-left: of your first 2 divs and then for the 3rd div use 2.5% for margin-right: (for a space between the right side and the 3rd div) margin-left:
But as I said, it all depends on what exactly you want for your layout, so if this doesn't answer your question could you tell me more about your expected layout?
If you want a very simple fix based off of what you have at the moment you could set the margin: property to auto and that should center the middle div between what you have now.
Edit: You should also edit the float properties so that they all float one way.
Check the example below:
Code:
#our_services {
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
color: black;
background-color: rgb(224, 224, 224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 31%;
height: 200px;
background-color: green;
float: left;
margin: 1%;
}
#product2 {
width: 31%;
height: 200px;
background-color: pink;
float: left;
margin: 1%;
}
#product3 {
width: 31%;
height: 200px;
background-color: blue;
float: left;
margin: 1%;
}
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
</div>
<div id="product2">
</div>
<div id="product3">
</div>
</div>
</div>
Example
add the following css:
html, body {
width: 100%;
height: 100%;
}
and add the following properties to #our_services css:
width: 100%;
height: 100%;
further set box-sizing: border-box; and margin: 0% 0% 0% 2.5%; (top as you need, right 0%, bottom as you need and left 2.5%) for the prouctu divs. Btw. you should extract common style to a product class and apply the class on the product divs...
One nice solution is to use display:table and display:table-cell. Which will works for 2 and 3 div both.
HTML:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1" class="product">
</div>
<div id="product2" class="product">
</div>
<div id="product3" class="product">
</div>
CSS:
#our_services {
background-color: rgb(224, 224, 224);
color: black;
font-family: "open_sans_hebrewregular","alefregular",arial,"Times New Roman";
height: 450px;
margin: auto;
overflow: auto;
text-align: center;
}
#try {
background-color: orange;
display: table;
height: 50%;
margin: auto;
width: 50%;
border-collapse: separate;
border-spacing: 10px;
}
.product{
display: table-cell;
height: 75%;
margin: 5px;
width: 30%;
}
#product1 {
background-color: green;
}
#product2 {
background-color: pink;
}
#product3 {
background-color: blue;
}
Check Fiddle here.