I am trying to create a tournament diagram.
This is the blank diagram.
What I am trying to do is to insert the logos from the different teams into the blue spots. What I did is to create a div which contains the diagram and then insert the logos with a relative position to the picture.
<html>
<style>
.head{
position: relative;
left: 10px;
bottom: 90px;
}
</style>
<body>
<div>
<img src="diagram.png">
<img src="logo.png" class="head">
</div>
</body>
</html>
The first logo would then appear in the first spot.
When I resize the diagram with the screen I don't know how to resize the logos in the same way so they stay at the same spot and have the right ratio. Because I would like to fit the diagram on every screen I want to resize the whole thing so it fits on each screen. I don't care about mobile.
Is there a way to resize the whole thing at once?
Provide us with more codes and the clear problem you have. and if you have any other questions feel free to ask in the comment.
What you are doing right now is hard coding every logo to its position that's why when you resize the browser window it doesn't fit as you wanted.
I suggest you read flex-box documentation and here's a good tutorial:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The problem with this method is that you're trying to make the images relatively positioned to the body, meaning if one were to resize the body (or the viewport I should say), the images would become offset from the background tournament diagram. If you want them to stay in place no matter the size of the viewport, there are two option I see:
Create a tournament diagram in pure CSS and place every image into the corresponding div.
Use a 2D design program to create an image with all of the logos already on the tournament diagram.
Here's an example of method 1 using CSS Flexbox.
body {
display: flex;
align-items: center;
flex-direction: column;
}
.team-logo {
width: 50px;
height: 50px;
background: blue;
color: white;
display: flex;
align-items: center;
text-align: center;
margin: 0 10px;
}
.downwards-stem {
width: 10px;
height: 100px;
background: teal;
}
<body>
<div class="team-logo">Insert Logo</div>
<div class="downwards-stem"></div>
<div style="display: flex; margin-top: -20px;">
<div class="team-logo">Insert Logo</div>
<div class="team-logo">Insert Logo</div>
</div>
</body>
Here's an example using a 2D Design program. I prefer to use Figma
Related
I'm learning CSS and got stuck creating a layout that contains a header and an image that fills the rest of the screen. Using the following code, I'm able to achieve what I'm looking for:
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<!-- <div class="image-container"> -->
<img src="https://picsum.photos/500/300"/>
<!-- </div> -->
</div>
</body>
</html>
Now the problem is that I want to wrap the image element into a div as I'd like to position an overlay on top of the image. As soon as I nest the img within a div, the resizing doesn't work properly anymore. If the screen is wide, the image overflows to the bottom, creating a vertical scrollbar.
I've tried a lot of things, but nothing's worked so far. Can you explain to me why introducing the div (image-container) changes the layout and how to make it behave like the version without the div? That'd be great, thanks in advance!
EDIT:
I want the image to be displayed exactly like in the snippet I posted. It should be as large as possible, but only so large that the whole image is still visible and nothing is cropped. For a wide window, there should be blank bars left and right of the image. For a narrow but tall window, there should be blank bars above/beyond the image.
My issue is that as soon as I add the <div class="image-container">, the image always takes the whole width. For a wide window, I get scrollbars and can't see the whole image anymore. I'd like to know how I can get the image to scale like in the version without the additional <div>. I'd also like to understand why adding the <div> changes how the image is scaled.
EDIT 2:
Someone suggested to add overflow: hidden; on .image-container, but deleted their answer. This does in fact work (overflow: hidden/scroll/auto; work, overflow: visible; does not), but now I'm completely confused to why that's the case. I thought that overflow would control if overflow is visible, but wouldn't affect the size of the content being displayed. In this case though, it seems like the overflow property does have an effect on the size of the picture being displayed. That's weird and if anyone knows what's going on, please let me know!
Flex is already helping the image take up as much space as possible, so the height: 100% and width: 100% were causing the image to grow.
For getting something to appear on top of the image, I would recommend looking into position: absolute or position: relative
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
display: flex;
justify-content: center;
}
img {
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<div class="image-container">
<img src="https://picsum.photos/500/300" />
</div>
</div>
</body>
</html>
I am new to CSS and just learned about flexbox. I was trying to design a login page-like screen. To visualize where my content would be I decided to make "boxes".
I made a container for two flex items:
.boxOuter{
display: flex;
flex-wrap: wrap;
background-color: lightpink;
margin-top: 10vh;
height: 536px;
justify-content: center;
align-items: center;
}
The flex items are two boxes:
.box1{
background-color: red;
height: 36vh;
width: 37vw;
flex-shrink: 1;
}
.box2{
background-color: green;
width: 396px;
height: 496px;
flex-shrink: 1;
}
Following is my HTML code:
<div class="globalContainer">
<div class="boxOuter">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</div>
<div class="footer"></div>
The problem I am having is that whenever I try to resize the window into a smaller size, box2 overflows the container. How do I modify my code so that box2 resizes itself into a smaller size to fit its container?
I would also like to ask if this method I am using is a good way to visualize the position of elements of my website since I am very new to front-end development.
Edit: For reference I want these boxes to work the way the Facebook log-in page does, where the green box is the login box and the red box is the Facebook logo along with the text below it
If you want your sizes to be dynamic or adaptive to the size of your system, dont use px. Instead you should use rem/em, since these units are responsive.
Edit: You can also use vw/vh for it ofc
I think this gif explains it very well:
https://gfycat.com/FormalReasonableHagfish
Context: I'm working on a digital catalog (I didn't start the project) for a company that sells TONS of products, sometimes they are small, sometimes big, sometimes wide, etc. They go on a specific area, lets say 400px x 400px.
I did horizontal alignment with flexbox and it works very well but on the vertical axis the products have static values (prod_1 top: 0px, prod_2: top 10px, prod_3 top: 20px...)
EDIT: My question/need is: I want to be able to align (responsively in the horizontal and vertical axis) 1 to 6 images inside 1 div but flexbox only let me choose one axis (flex-direction row or column), what can I do?
The code is something like this:
<div class='container'>
<img class='item_0'>
<img class='item_1'>
<img class='item_2'>
<img class='item_3'>
<img class='item_4'>
</div>
If posible the solution should be in CSS, if it can't be done, then it could be in Javascript or maybe changing a little bit the HTML.
This is because I only have access to CSS and JS. The index.html is generated automatically from a database by an application developed/controlled by another team and it's not that easy/quick to ask them for changes.
The best way I thought is with javascript but it may not be that easy, considering it's a big project and there's A LOT of code already written (not by me).
What do you guys think? I don't need the complete solution but some direction would be really appreciated, thank you!
Ok, so I am not 100% sure about what you need, but here's some code I made that does pretty much what your gif showed. You should be able to tweak it to your liking.
https://codepen.io/AlexWulkan/pen/wmmPvL
HTML:
<div class="container">
<div class="row">
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
</div>
</div>
CSS:
/* Outer container */
.container {
display: flex;
flex-direction: column;
background-color: #eee;
height: 400px;
width: 400px;
}
/* Each row of boxes */
.row {
display: flex;
align-items: center;
flex: 1;
padding: 0 1rem;
}
/* determines the position of the boxes in each row */
.row:first-child {
justify-content: flex-end;
}
.row:nth-child(2) {
justify-content: center;
}
.row:last-child {
justify-content: flex-start;
}
/* Each box */
.box {
background-color: #666;
height: 100px;
width: 100px;
}
Tell me if there's anything you have questions about and I'll try to answer. The code should be quite self-explanatory though. :)
I've been trying to achieve something like this gallery style layout using flexbox: Example of desired outcome
I want images (regardless of size) to sit next to each other in a two column layout until mobile layout where it's only 1 image for each line. When the two images sit next to each other I want them to scale to the size of the largest one of the two without stretching or distorting either picture.
My current attempt can be found here: Codepen
You can see that I've tried two methods, each have resulted in different problems.
I'll stick to the stretched image issue as that's currently closest to my desired outcome.
<div class="wrapper">
<header>
MY HEADER
</header>
<section>
<a href="" class= "unitie">
<img src="http://www.landscapes.org/london/wp-content/uploads/sites/8/2015/09/roadmap-to-landscapes-finance.jpg" />
</a>
<a href="" class= "meow">
<img src="https://s-media-cache-ak0.pinimg.com/originals/bd/99/3e/bd993e9921e1131fef606fcd99a03494.png" />
</a>
</section>
<footer>
2016
</footer>
</div>
CSS:
.wrapper {
display: flex;
flex-direction: column;
}
header {
display: flex;
}
section {
display: flex;
flex-flow: row wrap;
}
a {
width: 48%;
margin-left: 10px;
}
img {
max-width: 100%;
height: 100%;
}
I found this idea online: Using aspect ratio for flex property
But I have no idea how to find the aspect ratio of any image and convert it into the flex grow property value like he did.
Any help would be much appreciated.
Lot going on here.
First, make sure all your html tags close correctly.
Second, its class="name" not class "name"
Finally, the only way to make an html, inline image to fit a container is to have remove it from pageflow and then absolute position it so it is either taller or wider than its container based on the image properties.
The easiest way to do this is to move it into a css background image.
<a href="" class="unitie grid--image" style="background-image:url('image.jpg')>
</a>
.grid--image {
background-size: cover;
}
I am dynamically including an html content in the page.
The content is a tree structure in html which is usually huge in height and width.
I want that after inclusion with AJAX the root node of the tree is visible : the included HTML content is centered.
UPDATE1: in the MWE I just use width:2000px to imitate something wider than the screen page. Point is that to center this huge thing on the page not to change its width (Scaling could be acceptable but how?).
UPDATE2: The root of the included tree should be horizontally centered but its other parts also needs to be available through scroll bars of the browser or some inner scroll bars.
What are the simple and correct ways of doing it (without frames as they are deprecated) by styling?
UPDATE3: Below the screenshot of a real example. After tree is generated and included dynamically in the bottom of the page, it is not visible for a client.
One needs to use scrollbars to see the root of a tree.
UPDATE4: See the one possible option where the included content is placed in a window with scrollbars which needs to be zoomable, via browser or vis additional functionality.
MWE : https://jsfiddle.net/kowalsky/tgkbn8wp/2/
HTML:
<body>
<h1>Test page</h1>
<div>
So here comes a long text that might fill the page and wrap outomatically like this.
Below is a WIDETHING which is supposed to content an HTML loaded dynamically via AJAX.
The loaded content is usually wider and is impossible to fit to the page.
<b>What are the ways to put WIDETHING centered on the page, i.e. CENTER is in the center of the page?</b>
</div>
<div class="frame">
<div class="wideThing">
CENTER
<div class="box">BOX1</div>
<span class="box">BOX2</span>
<span class="box">BOX3</span>
<span class="box">BOX4</span>
<div class="box">BOX5</div>
</div>
</div>
</body>
CSS :
.wideThing {
width: 2000px;
text-align: center;
}
.frame {
width: 100%;
border: solid 2px black;
}
.box {
padding: 40px 100px;
border: solid 1px black;
background-color: red;
}
I would use this:
.wideThing {
position: relative;
width: 2000px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
That first moves the left border to the middle and than moves it back left by 50% of its own width, thereby centering it horizontally.
https://jsfiddle.net/p7d2j323/1/
I would just do this:
.wideThing{
width: 100%;
text-align: center;
}
https://jsfiddle.net/tgkbn8wp/4/
A possible solution is to use jQuery to set the position of the horizontal scrollbar at the center of the tree.
This could be accomplished using the .scrollLeft() method and some calculations to get the new position of the horizontal scrollbar.
But bear in mind that you'd have to execute this script after the tree had finished loading.
Here's a JSFiddle.
And of course you could set the position of the vertical scroll bar similarly using .scrollTop().
More about .scrollLeft() and .scrollTop() on jQuery's website.