I am working on a gallery grid (first block of 6 images) and I cannot for the life of me seeing why not all list items are displaying properly. It mostly displays correctly, however, if you downscale the browser, at about 700px, the items start flicking and not displaying as they should.
I usually use a right padding of 10px for my gallery items, as this didn't work on this occasion I have tried a right border of 10px but still the problem persists.
Can anyone see what the problem is? Live url is here.
Code is:
.feature {
ul {
list-style-type: none;
margin: 0 -10px 30px 0;
padding: 0 !important;
li {
border-right: 10px solid #ffffff;
margin-bottom: 10px;
position: relative;
float: left;
width: 33.33%;
img {
width: 100%;
}
.inner {
position: absolute;
padding: 20px;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
}
}
}
The reason is the (original) width/height ratio of your images: They are all 500x333px, but the third one is 600x400, which makes its automatic height slightly bigger than it is in all other instances. And therefore the 5th li element doesn't float under the third one (when only two fit in a row), but next to it, because the third is about 1px higher than the fourth one.
The easiest solution would be to change the original size of the fourth image to 500x333
Related
http://codepen.io/leongaban/pen/qEzaNr
I have 2 columns, the first column on top section.tags-panel Is the column I'm trying to fix. I don't want the tag's to float like that until something else happens.
However I also need the default column width to be 240px. In order for me to create that pill button style feel, I had to put in float:left.
^ Thus this creates a problem where I have the pill tags looking correct, but floating wrapping when they should be lined up in a single column.
The column below section.tags-panel2 is the look I'm trying to achieve, however I'm cheating because I'm shrinking the width of the panel. The text in the tag pills should never wordwrap too.
How would you achieve this without it looking like:
CSS:
section.tags-panel {
width: 240px;
height: 100%;
background: #f7f7f7;
border: 1px solid #ccc;
overflow: auto;
}
section.tags-panel li { margin-right: 10px; }
.tag {
overflow: hidden;
float: left;
position: relative;
margin: 0 10px 10px 0;
padding: 5px 10px;
width: auto;
border: 1px solid gray;
background: #ccc;
}
Perhaps you could add
clear: both;
to the tags? This should separate them and keep them in a vertical line as no floating elements are allowed on the left or the right side of the div you specify to have the clear attached to.
I have a grid of square images.
I want to put a border on the inside of each of these but not on the outside of the whole box, as in the image below:
Here's the html setup.
<div class="grid-wrapper">
<ul>
<li><img src="[image url]" /></li>
</ul>
</div>
And the CSS
.grid-wrapper {
margin: 0 auto;
}
.grid-wrapper ul {
list-style: none;
display: block;
}
.grid-wrapper ul li {
padding: 5px;
border: 1px solid #F1F1F1;
}
I've tried putting the border all the way round each of the li elements and then adding a white border on the grid-wrapper to put it over the outer borders but that didn't work.
How can I get this without manually setting each one's border-left/border-bottom etc. The squares are dynamically pulled from the database so each one doesn't have a particular class, they're all identical.
UPDATE
The grid is fluid. When you pull the browser window open, it adds more to the top row (if there's room) and less when you pull the browser window inward. There's no fixed number of icons.
You didn't specify what you want to happen when there's a ragged row at the bottom, so I'm not sure if this meets your requirement fully, but this example may accomplish what you need.
http://jsfiddle.net/52LRd/
It works by setting a border on the bottom and left each of each element, then by budging the ul inside the wrapper 1px up and left, making those edges invisible.
.grid-wrapper {
float: left;
margin: 0 auto;
overflow: hidden;
}
.grid-wrapper ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
position: relative;
top: 1px;
right: 1px;
}
.grid-wrapper ul li {
float: left;
padding: 10px;
border-bottom: 1px solid #F1F1F1;
border-left: 1px solid #F1F1F1;
}
This gets you out of having to try to figure out which list items are in the top row, bottom row, left column, and right column, which would require JavaScript.
I have some div containers which expand when the 'view recipe button is clicked, but all 3 across the bottom will hide underneath the footer container, i'm unsure which element to alter to have the expanded containers appear above and not underneath.
live url: http://bit.ly/1hQuzRI
I've attached the css of the elements which are appearing underneath the footer and some from the footer too. I can paste the html but there is loads which will end up showing up. maybe best to just view direct on site.
.box2-container-collapsed {
padding: 10px;
width: 270px;
height: auto;
background-color: #F5F2E9;
display: block;
float: left;
margin-right: 20px;
margin-top: 20px;
position: relative;
}
.box2-content {
margin-left: 0px;
font-size: 0.9em;
min-height: 200px;
display: none;
}
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
bottom: 0;
position: relative;
margin: 0 auto;
width: 100%;
}
Set the z-index in the footer to a negative number. Also try setting the z-index for the div that expands to a higher number.
Edit:
Your div with the class="content-container" has overflow:hidden. I removed that in my Chrome-Dev tools and the expanding div was visible after that. Side Note: It's difficult to see where the recipe ends and the footer begins. You may want to put a light border around the recipe div, too.
I've been trying a few different ways to position 6 different elements in this way:
I've tried using two separate unordered lists stacked on top of each other but I couldn't get them to scale with page stretch properly. I also tried using a table but I can't seem to get the elements to all position in the center of their individual tds.
Here is my css from my unordered lists:
.button ul {
height: auto;
list-style: none;
}
.button li {
display: inline-block;
list-style: none;
margin: 0 18% 0 0;
padding: 0;
vertical-align: top;
}
and these are contained within this:
.newfooterright {
float: left;
width: 33.333333%;
top: 0%;
left: 0%;
height: 250px;
padding: 0 0 0 0;
margin: 0;
font-family: RobotoLight;
text-decoration: none;
text-transform: none;
font-size: 1.5em;
text-align: center;
color: #ffffff;
vertical-align: middle;
}
here's a jsfiddle with this method:
jsFiddle for unordered list
I think an unordered list is probably the way to go... I'm just not sure how to get all of the elements to align in the center of each li. The elements on the bottom seemed to be stuck in the bottom right corner of the li. The bottom elements are also widgets from google+, twitter, and facebook, so I'm not sure if that is affecting their position.
Basically the elements need to be able to do this:
Scale with window width in terms of their spacing (to a point, I don't need an uber small phone layout or something. Something like padding-right or margin-right?)
When the elements scale the bottom element needs to stay aligned with the top element in the center
positioned like in the picture!
Any suggestions on how to get this positioned cleanly would be appreciated!
Thank you so much!
Here is one way you might do it, I am proposing the following HTML scaffolding:
<div class="newfooterleft">
<ul class="button">
<li><a class="twitterbutton" href="#"></a></li>
<li><a class="facebookbutton" href="#"></a></li>
<li><a class="googleplusbutton" href="#"></a></li>
</ul>
<ul class="widget">
<li>(I put the corresponding widget here)</li>
<li>(I put the corresponding widget here)</li>
<li>(I put the corresponding widget here)</li>
</ul>
</div>
and the following CSS:
.newfooterleft {
width: 40%;
border: 1px solid red;
overflow: auto;
}
.twitterbutton {
background: url("http://www.placekitten.com/100/100") no-repeat;
background-size: 100%;
}
.twitterbutton:hover {
}
.facebookbutton {
background: url("http://www.placekitten.com/100/100") no-repeat;
background-size: 100%;
}
.facebookbutton:hover {
}
.googleplusbutton {
background-image: url("http://www.placekitten.com/100/100");
background-size: 100%;
}
.googleplusbutton:hover {
}
.newfooterleft ul {
display: table;
width: 100%;
margin: 0;
padding: 0;
}
.newfooterleft ul li {
display: table-cell;
width: 33.3333%;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
border-left: 1px solid red;
}
.newfooterleft ul li:first-child {
border-left: none;
}
ul.button li {
height: 100px;
}
.button li a {
display: inline-block;
width: 62px;
height: 62px;
}
.button {
border-bottom: 1px solid red;
}
ul.widget li {
background-color: white;
height: 150px;
}
In this case, I am adjusting the unordered lists to behave like tables and table cells.
It works reasonably well except if the width gets too narrow, but this may be okay depending on your application.
You could use a min-width to constrain it.
You could also try some variations with display: table-row.
Demo Fiddle: http://jsfiddle.net/audetwebdesign/2U3D9/
In general, if you want to select every 3 elements, you have to use :nth-child(). In the parenthesis, you can put any combination of n and a digit. There are also some keywords, such as odd and even. So in this case, you are going to have 3 different :nth-child() selectors. It will look like this
li:nth-child(6n+1), li:nth-child(6n+2), li:nth-child(6n+3) {
color:red;
}
The 6n selects every sixth element, and the +1 adds that number. So if you plug in 1, you will get back 7 for the first selector, 8 for the second, and 9 for the third.
Here is a fiddle demonstrating this in use
Here is an article explaining nth-child in more depth
It looks like your li's should be all ready to collapse.You could give your li's a fixed height and width (creating boxes if you will), then add a style for each image to have a relative position and use top and left to get them into position (remember, percentages can scale for you). I've dropped hints on how to accomplish this as you wanted to learn by doing, but let me know if you need the CSS!
Hey I want to put that lower div box beside that upper box with details but when I try to position absolute it I goes down idk why (I made the parent div of all three divs as position rlative ) , how am I supposed to fix this or any other better way to do this .
Here is the screenshot -
http://www.findportugal.com/Untitled.png
Div Description
#user_panel - div around all the other divs ie parent div
#user_details - div with details on top
#user_photos - div with photo heading
#user_current - div at the lower part
CSS :
#user_panel
{
color: white;
position: relative;
}
#user_details
{
padding: 0 0 30px 0;
}
#user_details table
{
padding: 30px 20px 10px 30px;
border: 1px solid grey;
margin: 0 60px 0 40px
}
#user_details table tbody tr td#right
{
padding: 0 0 0 100px;
}
#users_title
{
padding: 20px 0 0 50px;
}
div#user_photos
{
width: 850px;
height: 230px;
border: 1px solid grey;
margin: 50px 0 0 40px;
padding: 0 0 20px 20px;
}
#user_current
{
border: 1px solid grey;
width: 320px;
position: absolute;
}
You want a div OVER another div and you are saying it should NOT OVERLAP which is not possible, instead decrease the size of upper div, use float: left; and this will let the div below shift besides the floated div
Also don't forget to clear floats, or you'll spend other 2 hours thinking what the hell is going on with the element positions as well as background color
And if you want to use position: absolute; than the div will overlap, so in this case, use position: relative; for the container element and than use position: absolute; with top right bottom left properties to set your element correctly.
Don't forget position: relative; else your absolute div will run wild in your page
I'm assuming you want to place that lower div box in the empty space to the right of the upper-left div box, and not actually overlapping the other box? If so, you would be better off using floats.
You haven't shown your html, so let's assume the upper-left box has an id of "details", the bottom box has an id of "current-pic", and the full-width box in the middle in your screenshot as an id of "photos". A starting point for building the layout would then be like the following.
EDITED: Sorry, I wrote the answer before you updated your question with your HTML. The code is rewritten below to show the ids in your original html.
The HTML could be:
<div id="user_details"></div>
<div id="user_current"></div>
<div id="user_photos"></div>
The basic layout CSS would be something like:
#user_details {
float: left;
width: 50%;
box-sizing: border-box;
/* other styling stuff like padding, etc. */
}
#user_current {
float: right;
width: 50%;
box-sizing: border-box;
/* other styling stuff like padding, etc. */
}
#user_photos {
clear: both;
}
This doesn't account for any of the content inside the boxes, or spacing between the boxes, but the box-sizing rule will help you to maintain your layout and build up margins, padding, and borders without them breaking it.