I've struggling to position these hexagons next to each other on 3 lines, here is the page I'm trying to manipulate http://goo.gl/xpHmw
effect I'm trying to achieve
http://www.queness.com/resources/images/13901.gif
Many thanks for any help and assistance.
There are probably many ways of achieving it. My solution would probably be wrapping the hexagons in a relatively positioned container, assign a position: absolute to all the hexagons and position each of them manually with 'left' and 'top'.
I've abstracted the code for you to better understand.
http://codepen.io/nobitagit/pen/ojvue
ps - next time you ask a question you'd better abstract your problem in jsfiddle.net or codepen so other people will likely find it easier to answer you and the problem + solution will be there for others to see in the future.
Okay so I just checked your website at home.
This isn't something that's very easy to do in CSS because it doesn't fit very well into rectangles or "blocks" like CSS employs.
I have some suggestions. Perhaps it doesn't "answer" your question but it will give you a good start.
Div tags do not hold semantic value and they are "empty" in that regard. In this case, you used numerous div tags inside an unordered list <ul> to create backgrounds for the hexagons. This is fine and all but I would recommend:
Remove the divs completely. An unordered list really shouldn't have divs. It is an "unordered" list afterall. I would either use divs exclusively or better yet:
Use an unordered list and create each hexagon as a background. One box holds -> 1 hexagon. The hexagons do not scale. No reason to have a separate div for the top/bottom.
You don't have to use absolute positioning. You simply need to have some of these hexagons overlap. For the second row of hexagons you can use a negative margins to offset and place them in the correct location. Use .png for transparenencies on the corners!
Pseudo solution:
Each hexagon takes up a square.
Create hexagon backgrounds as .png in photoshop
Hold each in a <li> and float them in a <ul> --> do not use divs
Use a negative top margin to overlap the second row into the cracks of the other hexagons.
Good luck. Post an update with your progress. I'll help you further; but I can't produce a solution for you.
Related
I am about to start a react project and it involves a bit complicated layout and it needs to be responsive.
I have drawn a rough diagram in paint of what I need to do and have marked the places where I am finding it tough to accomplish.
could you tell me if that kind of layout can be accomplished in react with either flexbox or react-css-grid or maybe something else??
if there's a link you could point me to a tutorial or an article which explains this, then that would be very helpful.
Here's the image
Flexbox should be enough. You can use flexbox-direction: column for the base page, and give appropriate CSS classes to the React component you will use to build this layout.
For A, you can use transform: skewY() but the element beneath should accommodate the new space after skewing element A.
Regarding B, it can easily be done using flexbox. Justify items to flex-start (and some padding), and then give the bigger square position: relative. Smaller square should then have the position: absolute, and then you can position it accordingly to the bigger square. That should be it in short lines, but I can throw some demo later if you still need help.
I'm trying to make a list of thumbnails of variable amount be centered while the thumbnails all fit on one line, but then subsequent lines be left-aligned, while the parent element responsively stays centered in the page. width:fit-content works well for one line, but when there are multiple lines it goes to 100% width (in mac chrome anyway). Illustration of the problem:
http://codepen.io/scotthorn/pen/eutAH?editors=110
If there is another way to achieve my desired goal, I wouldn't mind changing any part of the css or html markup. A background that fits the area isn't necessary, it's only in my example to better show what's going on. My primary goal is to have a list that behaves like a centered container of inline-block elements for one-line, but then when a second line has to be created, the first element in it lines up below the first element of the first row rather than being centered by itself.
Hopefully that makes sense, if not I can make a mockup.
I would imagine wrapping the whole thing in a div and centering that with a % width would do what you want. But a mock up would help me understand.
Or you may be able to use margins to squish the inside content.
Your example works well, except you probably want to add a max-width to your UL..
For example, if you wanted to have a max of 7 items per line in your case, you would
add:
ul { max-width:630px}
updated codepen
good luck =)
First I should admit that I'm a beginner and the question might seem awkward to most of you, sorry for that.
My question is - what is the best practice (float or position) to position an element in a 2 or multi column layout assuming the design wont break apart after zooming an website?
I searched through this site and discovered some posts concerning this issue but those are 4/5years old and I could not come out with any conclusion.
Looking forward to have your expert views....
Thanks..
Its really based on how you want your element to be positioned or placed within the page.
CSS Position:
You should be choosing css positions to place your element if you wish the element to appear on top or bottom of any other elements and also if you wish to animate those.
Positioned element does not care for siblings placement.
Floats:
For creating columns, having content aligned to left or right and adjust to its adjacent siblings - you should use CSS floats.
Let us say, you have an image and bunch of texts, you should use floats if you wish to wrap texts around image. If image is not present then texts would cover the space. This wont happen in case of css positions.
i'm having a slight problem which i can't seem to figure out how to solve in a wordpress layout.
I have 3 columns which shows the recent posts with each one being an individual by itself, but as the div increases in height, it pushes the next line of div downwards, but what i wanted is just each div having a 20 px margin with each other.
here's a picture of what is happening
here's a picture of what i want
You might want to consider using Masonry to implement the layout you're trying to achieve.
HTML and CSS alone will not get you the effect that you are looking for. For the full effect, and a well put together tutorial, visit:
http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/
Thanks in advance for any attempted help. Here's my goal.
Current Setup:
I have an image in a DIV that's basically a straight, vertical line. The site is done mainly with PHP.
Goal:
I want to animate either a horizontal line or other small image along the length of this vertical line based on percentage values I pass somewhere.
Possible Options:
- A transparent DIV on top of the DIV with the image that moves up and down based on a % of the height.
An image (line or icon) in an adjacent DIV that accomplishes the same movement based on percentage
If doing this via a percentage is not possible, I could possibly send information when specific points along this path are crossed and use that to update the horizontal line.
Concerns:
- If I can achieve this type of animation in a DIV where do I dynamicly pass the percentage information to in order for the DIV to move?
I'm assuming some solution involving jQuery/Ajax would be needed to update the percentage values so I might have to ask that in another question unless there's a simple method someone could outline.
A solution that works with a DIV whose height is either a percentage of the container or statically set in px would be ideal.
Thanks again for your help.
d -