Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've battled with a two column layout for a WP index and got it working.
However on this one site it will not work:
http://justbedroomdesigns.com
You will notice that the third box containing a pic of a bed (or the first box in the second row - bottom left one) is not in its correct place (to the left of the final box with a bed pic).
I've used height auto to try fix it but it's still out of place.
All help hugely appreciated as is all the help I get from this awesome community.
the reason is that your images height is not same so give height to your post-block DIV. Like this:
.post-block{
height:355px;
}
I would suggest using a CSS reset if you dont already use one. http://meyerweb.com/eric/tools/css/reset/ Using and calling one before calling your css file can do wonders with cross-browser consistency. May be a pain to add now being that after you will also have to change your current CSS again but as a last resort, should help remedy your issues. Also by adding the above code by #sandeep as it fixed the issue I was seeing in Ffox.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am working with a React package name 'react-select' that allows me to create dropdown easily. Everything was fine until I create a page where there is multiple divs with several dropdown inside. Weirdly, they go under the next dropdown in the stack.
I can't really copy all my code, so I made something on netlify. Try to open the dropdown under the "Training" section, you should see what I am talking about. There are some empty options, but it's the same behavior anyway.
I tried to put a higher z-index on the "menu" parts (where there is options), but it didn't work.
Here is the link: https://nervous-franklin-89a3d8.netlify.app/#/demo-modify-profile
Thanks!
Seems the problem is the dropdown is trying to overlap the next section(files section in rour example). You need to add a Z-Index to the section containing the dropdown. However Z-index property only works on a positioned element. See docs here
So you want something like this.
<div style="position:relative;z-index:1{higher than other sections};">Container with dropdown in it</div>
<div>Next Section</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Sandbox:
https://codesandbox.io/s/nostalgic-wozniak-mci9l
I'm trying to reproduce an effect similar to the following (with a fixed spacing between each tile):
I almost have the right effect, but as you can see on the sandbox, the boxes are overlapping the further down the right they get. My maths are probably off somewhere, but I don't see where.
Here's what I thought would work:
My implementation didn't take into account that the increment by which each box had to be moved wasn't the domino width, but rather a new amount defined by the following relation:
I discovered it by completely omitting the domino width from the increment, only leaving the margins: the dominos were perfectly aligned on the left side, meaning that the alignment problem on the right side could only come from the width increment.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm seeing some crazy layouts sometimes. One of them is layout where we have boostrap container that has max width, let's say 1120px.
One of columns has 50% width of container, and the second has 50% width, not container but browser.
I've attached 2 screens to clarify my question - and the question is: does anybody has claver solution, that is responsive and will not break things during resisizing ?
So, 2 columns will not collapse ?
I will not provide html / css code, as i have no idea, how to code this right and without javascript.
If any of You have any ideas, i'm saying "thanks for a tip :)"
you can use width: calc() to calculate any width you want.
quick example
https://codepen.io/kupas/pen/Yepadv
PS: for smaller screen use mediaqueries
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Say I want to make a website, and I want the page to have some sort of a main-area, and it's supposed to be something like an open book,
sort of something like that if I want to make my point, I want the left border to be 100% of the height of whatever the page is going to show, and the right border(the one that's intersecting with the left border of the right page) to be say 90% of the height of it... that's sort of the idea of the design.
I was sure there would be some HTML5 features that would support this since I've seen stuff like this around the internet but I realized it wouldn't be that easy.
I hoped that there would be people with proper knowledge of web design that could help me with this thing
This is very good article for page flip functionality with html5 :
http://www.creativebloq.com/html5/create-page-flip-effect-html5-canvas-8112798
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have this unordered list
http://neaen.com/frying/neaen-masterfry-continuous-fryer.html
Whichever combination I tried using FireBug, I can't get the first row to align properly. I am sure this is an easy fix, but I am missing it somehow.
These are caused by line breaks in the list items. Do one of two things. Either remove all spaces between each </li><li> or remove the closing </li> altogether. This is valid.
I would get rid of the unordered list code entirely and use divs to make this work. Then you could put only a single link for each of the boxes and have the entire box be the link for each one.
You will have more options for styling and positioning your content that way.
Here is a source you can look at for that: http://css-tricks.com/creating-clickable-divs/
Apologies if this doesn't answer the specific question.