I'm trying to make a menu responsive menu which will change orientation with the page marge, smoothly if it's possible (it would be perfect if I can use some css translation to animate it)
The icons should fill the marge but not impinge on the text.
I have currently made this with inline-block, margin and #media only screen and (max-width:XXX) but it's not smooth at all
I want to know if there is a better way to do that, with flex box maybe? I'm not as good as I want to in advenced css, so if you have some clue or advice to how to do that, I would be grateful.
The html is basic :
<aside id="menu-right">
<div class="icon-float icon-white">
Up
</div>
<div class="icon-float">
Home
</div>
<div class="icon-float">
Search
</div>
<div class="icon-float">
Down
</div>
</aside>
My css is pretty ugly so... retart from penuts seems to be a good idea...
Thanks for your reading!
#menu-right {
display: flex;
flex-flow: row wrap-reverse;
justify-content: flex-end;
align-content: flex-end;
}
.icon-float {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
}
<aside id="menu-right">
<div class="icon-float icon-white">
4
</div>
<div class="icon-float">
3
</div>
<div class="icon-float">
2
</div>
<div class="icon-float">
1
</div>
</aside>
Related
I was stay far from coding for a very long time but today I start to do some code, and have fun with html and styling, lol. My goal was to create a simple card gallery which is very simple and every 6 year old child can do in a few lines of some css and html. As you can see I failed and ended up here in stackoverflow looking for some help.
The problem accured when I tried to change my div card into an a link, back in the days it worked well as I can remember. Since there was an premade class with styles, you simply changed the tag and everything was well, except you should change colors on that a may be. But today when I did it, my card... it just messed up... I got really confused. I also tried some different approaches, for example wrap the div into a and it looks wierd too. So the main questions are:
Why everyting is messed up, when simply change tag to a from div (we have premade css class!)? But the card is like became divided into 2 parts...
When I tried to wrapped div card with a. In my DOM I can see that this a is like duplicate itself inside DOM on every element inside itself.
Can anyone explain what is going on here and what is a good approach nowadays?
https://jsfiddle.net/49Lj8dxz/2/
.my-cards-container {
display: flex;
justify-content: center;
align-items: center;
}
.my-card {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
text-align:center;
max-width: 228px;
margin-left: 10px;
background: grey;
}
.my-img-container {
width: 100%;
display: block;
}
.my-img-container img {
display: block;
max-width: 100%;
overflow: hidden;
vertical-align: top;
}
<div class="my-cards-container">
<div class="my-card">
<div class="my-img-container">
<img src="https://via.placeholder.com/300" alt="fishy-img">
</div>
<div class="my-content-container">
<h2>Fishy title 1</h2>
<div>Fishy text 1</div>
<div class="my-links-container">
link 1
link 2
</div>
</div>
</div>
<a class="my-card">
<div class="my-img-container">
<img src="https://via.placeholder.com/300" alt="fishy-img">
</div>
<div class="my-content-container">
<h2>Fishy title 2</h2>
<div>Fishy text 2</div>
<div class="my-links-container">
link 1
link 2
</div>
</div>
</a>
<a href="#">
<div class="my-card">
<div class="my-img-container">
<img src="https://via.placeholder.com/300" alt="fishy-img">
</div>
<div class="my-content-container">
<h2>Fishy title 3</h2>
<div>Fishy text 3</div>
<div class="my-links-container">
link 1
link 2
</div>
</div>
</div>
</a>
</div>
How can I go about splitting the screen like in the screenshot? The website in the screenshot is mine and I've designed it in Elementor but now I want to code it. How can I do that with css and maybe Boostrap?
Visit mateusrdesign.com to check it for yourself.
Screenshot
Screenshot #02 (notice how the screen is smaller and there is no horizontal scroll bar
Here's what I've tried:
<div class="container">
<div class="row">
<div id="left" class="col-3">
<p>Place holder</p>
</div>
<div id="right" class="col-9">
<p>Place holder</p>
</div>
</div>
</div>
You can achieve this with a flex box:
.row {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.row #left {
background: yellow; /** Just to emphasize vertical split visually. You can remove this */
width: 50%;
}
.row #right {
background: green; /** Just to emphasize vertical split visually. You can remove this */
flex: 1;
}
<body style="height: 100vh;">
<div class="row w-100 h-100">
<div class="col bg-info">Left side</div>
<div class="col bg-dark">Right side</div>
</div>
</body>
This is one of the bootstrap way. Dont forget to import bootstrap cdn to html.
I am making a site that will have three cards and to create them I'm using flex box. I am using justify-content: space-between which works perfectly when the three columns are all on the same row, as their margins are perfect with the container, and the space in-between them is great.
However, when the columns wrap, the column that is now on the new row is at the same left margin as the first, which is expected with space-between, but in my scenario, space-around's wrap behavior would look much better, as I have and odd number of cards.
Is there a way for me to get space-between's outer margin alignment with space-around's wrapping behavior?
Here is a codepen that gives a quick example of what I have now.
https://codepen.io/anon/pen/xdrpEo
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: spacing-between;
}
.file-links-flex-container {
max-width: 400px;
flex-grow: 1;
background-color: red;
}
.container-content {
justify-content: flex-start;
padding: 0 30px;
max-height: 600px;
}
<div class="flex-row space-around">
<div class="file-links-flex-container col">
<div class="container-header">
<h5>A</h5>
</div>
<div class="container-content">
<p>I AM TEST CONTENT!</P>
</div>
</div>
<div class="file-links-flex-container col">
<div class="container-header">
<h5>B</h5>
</div>
<div class="container-content">
<p>I AM TEST CONTENT!</P>
</div>
</div>
<div class="file-links-flex-container col">
<div class="container-header">
<h5>C</h5>
</div>
<div class="container-content">
<p>I AM TEST CONTENT!</P>
</div>
</div>
</div>
Try adding margin: 0 auto, You get that.
.file-links-flex-container{
margin: 0 auto;
}
I think this one helped you. :)
Even you can solve this one using justify-content:center; but margin will be the good one.
I'm pretty new to HTML and CSS so perhaps this is a crazy easy question to answer.
The question is:
How to do this using only divs and css?
I don't want to use <table> <tr> <th> <td>....
Here's a basic setup of what you're asking using the flexbox property.
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices. For many applications, the
flexible box model provides an improvement over the block model in
that it does not use floats, nor do the flex container's margins
collapse with the margins of its contents.
Read more about it at MDN and experiment with it so you feel comfortable using it. The setup might not be pixel perfect, but it gives you a good start for the desired layout. Trial and error, that's the best way to learn.
div {
box-sizing: border-box;
border: 1px solid black;
min-height: 20px;
}
.container {
display: flex;
flex-flow: row-wrap;
width: 100%;
}
.column {
flex: 1 1 100%;
}
.middle {
flex-basis: 200%;
}
.middle-top,
.right-top,
.right-bottom {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.language,
.search,
.login,
.signup,
.some-text,
.avatar {
flex: 1 1 50%;
}
<div class="container">
<div class="column left">
<div class="social">
Social icons
</div>
<div class="logo">
Logo
</div>
</div>
<div class="column middle">
<div class="middle-top">
<div class="language">
Language
</div>
<div class="search">
Search
</div>
</div>
<div class="slogan">
Slogan
</div>
<div class="menu">
Menu
</div>
</div>
<div class="column right">
<div class="right-top">
<div class="login">
Login
</div>
<div class="signup">
Signup
</div>
</div>
<div class="right-middle">
Welcome guest
</div>
<div class="right-bottom">
<div class="some-text">
<div class="something">
Some text
</div>
<div class="something">
Some text
</div>
</div>
<div class="avatar">
Avatar
</div>
</div>
</div>
</div>
I have some slides where I'm trying to equally space content using display: flex but it's adding a large empty area below my content and above the navigation.
When the screen shrinks to the mobile size the empty area becomes much more apparent.
I have no idea why it's doing this, or why switching display: flex to display:table messes things up even more.
After spending two days I've come for some guidance.
Here's a test link to what I have. Click on 1 - 4 to get to a screen using flex.
<div class="slide" id="slide-one" data-slide="1">
<p class="deck">You don’t have to wait until bad weather is imminent to prepare for a power outage. Take some time to get organized with these tips.</p>
<div class="row">
<div class="section" id="emergency-kit">
<div class="rollover center">
<div class="button-container">
<div class="button"></div>
</div>
<div class="text">Create an Emergency Kit</div>
</div>
<div class="container">
<img src="img/emergency-kit.png" alt="" />
</div>
</div>
<div class="section" id="food-prep">
<div class="rollover center">
<div class="button-container">
<div class="button"></div>
</div>
<div class="text">Prep Your Food</div>
</div>
<div class="container">
<img src="img/fridge.png" alt="" />
</div>
</div>
</div>
</div>
.row {
display: flex;
width:100%;
flex-direction: row;
margin-top: 20px;
}
#emergency-kit {
width:40%;
display: inline-block;
.container {
max-width: 263px;
}
}
#food-prep {
width:40%;
display: inline-block;
.container {
max-width: 167px;
}
}
Also, using flexslider for the slideshow animations.
The source of the gap has nothing to do with flexbox. Your flex container (.row) is nested within a larger container.
div.row
... is a descendant of div.flex-viewport
... which takes up all the height to the bottom navbar.
On the smaller screen, div.row isn't even a flex container anymore. It's switched to a block element:
Possible options for closing the gap:
Reduce the height of one of the containers
Define heights for all container elements between .flex-viewport and .row
Apply display: flex to all containers, so children can expand the full height of their parent