I have a header that consists of three parts. The header is set to display: flex and justify-content is set to space-between.
I want the input element to increase when focused without moving other elements in the header.
.header {
display: flex;
justify-content: space-between;
padding: 30px;
}
.search__input {
width: 60px;
transition: width 0.1s ease;
}
.search__input:focus {
width: 200px;
}
<header class="header">
<div>Left</div>
<div>Center</div>
<div class="header__search">
<input class="search__input" placeholder="Search" />
</div>
</header>
I was thinking about position: absolute when focused, but I don't know how to realize it.
I believe you need to set an explicit width on the children if you don't want them to re-size dynamically.
This solution also requires setting additional classes and properties on the other children to get them to behave exactly as you want to. There may be a more elegant flexbox-based solution available.
.header {
display: flex;
justify-content: space-between;
padding: 30px;
}
.header div {
width: 20vw;
text-align: center;
}
.header div:first-child {
text-align: left;
}
.search__input {
width: 60px;
transition: width 0.1s ease;
float: right;
}
.search__input:focus {
width: 200px;
}
<header class="header">
<div>Left</div>
<div>Center</div>
<div class="header__search">
<input class="search__input" placeholder="Search" />
</div>
</header>
I set the input box to float to the right; you could achieve this with positioning and directional properties if you want, instead.
I also set the text-alignment for the other two divs to have them display the way you have them set in your code above.
I solved this problem myself using position: absolute and float: right.
.header {
display: flex;
justify-content: space-between;
padding: 30px;
}
.header__search {
position: relative;
width: 60px;
}
.search__input {
position: absolute;
right: 0;
width: 60px;
transition: width 0.1s ease;
}
.search__input:focus {
width: 200px;
}
<header class="header">
<div>Left</div>
<div>Center</div>
<div class="header__search">
<input class="search__input" placeholder="Search" />
</div>
</header>
Related
I have tried changing a bunch of things in the CSS with classes and id's, but nothing seems to make it so that both images will be on the far side of the screen (logo on the far left and profile on the far right).
Tried lots of different things like text-align and different justify-contents but nothing appears to work.
Here is the code:
.top-nav {
display: flex;
position: absolute;
background-color: blue;
opacity: 0.5;
height: 10%;
top: 0;
width: 100%;
left: 0;
padding: 0;
border: 0;
margin: 0;
list-style: none;
}
.top-nav div {
display: flex;
justify-content: space-between;
height: 100%;
margin: 0px;
padding: 0;
border: 0;
margin: 0;
}
<div class="top-nav">
<div style="flex-grow: 1"><img src="/textures/logo.svg"></div>
<div style="flex-grow: 1"><img src="/textures/profile.svg"></div>
</div>
justify-content right now does nothing, because it's set on a div that doesn't have display:flex on it.
If you want want the divs with images separeted, then put the justify-content:space-between on the div that has them i.e. the top-nav div.
The obvious answer is that you set the flex-items the top-nav div elements – the parents of the <img> elements – to expand to fill the availlable space; this means the <div> elements fill that space, and the <img> elements are aligned via the default text-align for the language defined by your browser.
Instead you could either remove the <div> elements, as they do little to help and bloat the HTML for no reason, and specify justify-content: space-between on the .top-nav element:
.top-nav {
display: flex;
background-color: blue;
justify-content: space-between;
}
<div class="top-nav">
<img src="https://placekitten.com/300">
<img src="https://via.placeholder.com/300">
</div>
Or, you could either retain the <div> elements and simply omit the flex-grow statement:
.top-nav {
display: flex;
background-color: blue;
justify-content: space-between;
}
<div class="top-nav">
<div><img src="https://placekitten.com/300"></div>
<div><img src="https://via.placeholder.com/300"></div>
</div>
Or simply use text-align on those <div> elements:
.top-nav {
display: flex;
background-color: blue;
justify-content: space-between;
}
.top-nav div:first-child {
text-align: left;
}
.top-nav div:last-child {
text-align: right;
}
<div class="top-nav">
<div><img src="https://placekitten.com/300"></div>
<div><img src="https://via.placeholder.com/300"></div>
</div>
References:
display.
flex-grow.
justify-content.
text-align.
Looking for a result similar to this?
.top-nav {
display: flex;
position: absolute;
background-color: blue;
opacity: 0.5;
height: 10%;
top: 0;
width: 100%;
left: 0;
padding: 0;
border: 0;
margin: 0;
list-style: none;
}
.top-nav .brand {
margin-right: auto; /* Push element to the left*/
}
.top-nav .profile {
margin-left: auto; /* Push element to the right */
text-align: right;
}
<div class="top-nav">
<div class="brand">
<img src="/textures/logo.svg">
</div>
<div class="profile">
<img src="/textures/profile.svg">
</div>
</div>
I want to make this - when you hover over each image, the text is different. it's for company bios. this has been driving me insane. it seems if text is in not in the image CSS can't do it? is the only solution javascript? sorry if this is a silly question, I am self-taught, probably like most of us here :)
I have tried flex, div, lists, but it seems that if the text is in a different than the photos, CSS won't let me do it? (I've made the code super simple to portray the idea)
if I do
<div id="headshot-row">
<div id="headshot-1">headshot1</div>
<div id="headshot-2">headshot2</div>
<div id="headshot-3">headshot3</div>
<div id="headshot-4">headshot4</div>
</div>
<div id="bios">
<div id="bio-1">bio1</div>
<div id="bio-2">bio2</div>
<div id="bio-3">bio3</div>
<div id="bio-4">bio4</div>
</div>
I would like
#headshot-row {
margin: 0 auto;
display: flex;
justify-content: space-around;
}
#bios {
margin: 0 auto;
display: none;
}
#headshot-1:hover #bio-1 {
display: block
}
You can do this with CSS with a slight change to the HTML structure - the images need to have some sort of relationship with the bios and this can be achieved if the images and the bios element are siblings.
This snippet spells out the individual hover conditions for demo purposes. You could shorten things in the CSS by using its [...] facilities to look for e.g. ids starting bio-, or you could just use CSS nth-child.
The snippet also uses grid just because that is more suited to 2dimensional layouts.
.container {
display: flex;
justify-content: center;
}
#headshot {
display: grid;
gap: 5vw;
grid-template-columns: repeat(4, 1fr);
}
#headshot>* {
background: black;
width: 100%;
height: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
#bios {
grid-column: 1 / span 4;
}
#bios>* {
display: none;
}
#headshot-1:hover~#bios #bio-1 {
display: block;
}
#headshot-2:hover~#bios #bio-2 {
display: block;
}
#headshot-3:hover~#bios #bio-3 {
display: block;
}
#headshot-4:hover~#bios #bio-4 {
display: block;
}
<div id="headshot">
<div id="headshot-1">headshot1</div>
<div id="headshot-2">headshot2</div>
<div id="headshot-3">headshot3</div>
<div id="headshot-4">headshot4</div>
<div id="bios">
<div id="bio-1">bio1</div>
<div id="bio-2">bio2</div>
<div id="bio-3">bio3</div>
<div id="bio-4">bio4</div>
</div>
.wrapper {
position: relative;
}
.wrapper img {
height: 100%;
width: 100%;
object-fit: cover;
}
.wrapper span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: red;
color: white;
opacity: 0;
transition: opacity 350ms ease;
}
.wrapper:hover span {
opacity: 1;
}
<div class="wrapper">
<img src="https://via.placeholder.com/350x150" />
<span>Text</span>
</div>
I'm trying to build a product landing page as a certificate project for freeCodeCamp.
I can't understand how to fix the icons to the left, while fixing the feature and price to the center. And I can't understand why my li items are overflowing over their container.
I tried all the overflow and wrap tags I know but I can't work it out.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
}
#logo {
position: absolute;
width: 25%;
left: 0;
height: auto;
image-resolution: 100%;
}
header {
width: 100%;
display: flex;
justify-content: space-evenly;
}
.navspace {
justify-content: end;
position: relative;
right: -15%;
}
nav {
positio: relative;
}
ul {
display: flex;
list-style: none;
}
li {
margin: 40px;
}
.product {
position: absolute;
top: 15%;
}
#leads {
width: 100vw;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
}
.title {
padding: 2%;
}
#logo-green {
width: 5vw;
height: auto;
margin-right: 5vw;
}
#Features {
margin-left: 27%;
display: flex;
align-items: left;
justify-content: left;
text-align: left;
padding: 5%;
}
#Price {
display: flex;
align-items: center;
justify-content: left;
text-align: center;
padding: 3%;
margin-left: 27%;
}
.price {
display: flex;
flex-direction: column;
text-align: left;
}
.pricelist {
width: 100%;
max-height: 400px;
text-align: center;
position: absolute;
display: inline-flex;
justify-content: center;
}
.class {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 20px;
}
.class>h1 {
width: 100%;
height: 10%;
background-color: blanchedalmond;
padding: 2%;
font-size: large;
}
#medium,
#pika,
#base {
display: flex;
flex-direction: column;
}
.class>h2 {
margin: 5% 0 5% 0;
}
.class>ul {
display: grid;
display: flex;
justify-content: center;
flex-direction: column;
gap: 2px;
}
.class>li {
position: relative;
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<!-- tabella nav -->
<header>
<div>
<img id="logo" src="img/LIGHTSPEED.png" alt="" />
</div>
<!-- bhr -->
<div class="navspace">
<nav id="nav-link">
<ul>
<li>Features</li>
<li>Price</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<main class="product">
<!-- form -->
<section id="leads">
<h2 class="title">Most efficient way to light your life</h2>
<form action="">
<input class="email" type="email" required placeholder="Enter your email" columns="10">
<input class="submit" type="submit" value="Get Shocked">
</form>
</section>
<!-- features -->
<section>
<div id="Features">
<div id="green">
<img id="logo-green" src="img/294432.png" alt="">
</div>
<div class="feature">
<h2>Only from renovable energy</h2>
<p>Coming from water and earth termal energy</p>
</div>
</div>
</section>
<!-- price -->
<section>
<div id="Price">
<div id="cheap">
<img id="logo-green" src="img/low-price.png" alt="">
</div>
<div class="price">
<h2>Prices you have never seen</h2>
<p>With our funding system you might get some solar panels</p>
<p>and who knows... we might pay you your energy.</p>
</div>
</div>
</section>
<div class="pricelist">
<div class="class" id="base">
<h1>BASE LEVEL</h1>
<h2>49€</h2>
<ul>
<li>Standart power transmission</li>
<li>Change power output by your personal profile</li>
<li>Client Support 10am-20am</li>
</ul>
</div>
<div class="class" id="medium">
<h1>MEDIUM LEVEL</h1>
<h2>59€</h2>
</div>
<div class="class" id="pika">
<h1>PIKACHU LEVEL</h1>
<h2>149€</h2>
</div>
</div>
</main>
A few things right off the bat, i've added some comments to your CSS. There's a lot going on here, and I think a lot of your styling is just working against you.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
}
#logo {
position: absolute;
width: 25%;
left: 0;
height: auto;
image-resolution: 100%;
}
header {
width: 100%;
display: flex;
justify-content: space-evenly;
}
.navspace {
justify-content: end;
position: relative;
right: -15%;
}
nav {
position: relative; /* <- mispelled positio[n] */
}
ul {
display: flex;
list-style: none;
}
li {
margin: 40px;
}
.product {
position: absolute; /* I hate position absolute. Hate it deeply. Basically refuse to use it. It never works the way I want it to. More on this in response below */
top: 15%;
}
#leads {
width: 100vw;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
}
.title {
padding: 2%;
}
#logo-green {
width: 5vw;
height: auto;
margin-right: 5vw;
}
#Features {
margin-left: 27%;
display: flex;
align-items: left;
justify-content: left;
text-align: left;
padding: 5%;
}
#Price { /* be careful, classes and Ids are case sensitive*/
display: flex;
align-items: center;
justify-content: left;
text-align: center;
padding: 3%;
margin-left: 27%;
}
.price {
display: flex;
flex-direction: column;
text-align: left;
}
.pricelist {
width: 100%;
max-height: 400px;
text-align: center;
position: absolute;
display: inline-flex; /* technically, unless this object has a sibling, making it inline-flex while it is position: absolute; won't really change anything... though it could in unexpected ways. More below*/
justify-content: center;
}
.class {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 20px;
}
.class>h1 {
width: 100%;
height: 10%;
background-color: blanchedalmond;
padding: 2%;
font-size: large;
}
#medium,
#pika,
#base {
display: flex;
flex-direction: column;
}
.class>h2 {
margin: 5% 0 5% 0;
}
.class>ul {
display: grid;
display: flex;/* display grid is just being overridden by display flex here, so there's no point in keeping it */
justify-content: center;
flex-direction: column;
gap: 2px;
}
.class>li {
position: relative;
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<!-- tabella nav -->
<header>
<div>
<img id="logo" src="img/LIGHTSPEED.png" alt="" />
</div>
<!-- bhr -->
<div class="navspace">
<nav id="nav-link">
<ul>
<li>Features</li>
<li>Price</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<main class="product">
<!-- form -->
<section id="leads">
<h2 class="title">Most efficient way to light your life</h2>
<form action="">
<input class="email" type="email" required placeholder="Enter your email" columns="10">
<input class="submit" type="submit" value="Get Shocked">
</form>
</section>
<!-- features -->
<section>
<div id="Features">
<div id="green">
<img id="logo-green" src="img/294432.png" alt="">
</div>
<div class="feature">
<h2>Only from renovable energy</h2>
<p>Coming from water and earth termal energy</p>
</div>
</div>
</section>
<!-- price -->
<section>
<div id="Price">
<div id="cheap">
<img id="logo-green" src="img/low-price.png" alt="">
</div>
<div class="price">
<h2>Prices you have never seen</h2>
<p>With our funding system you might get some solar panels</p>
<p>and who knows... we might pay you your energy.</p>
</div>
</div>
</section>
<div class="pricelist">
<div class="class" id="base">
<h1>BASE LEVEL</h1>
<h2>49€</h2>
<ul>
<li>Standart power transmission</li>
<li>Change power output by your personal profile</li>
<li>Client Support 10am-20am</li>
</ul>
</div>
<div class="class" id="medium">
<h1>MEDIUM LEVEL</h1>
<h2>59€</h2>
</div>
<div class="class" id="pika">
<h1>PIKACHU LEVEL</h1>
<h2>149€</h2>
</div>
</div>
</main>
First off, while it is somewhat a personal choice and somewhat just the way most people use CSS these days: I hate position: absolute. It never acts the way you want it to, it's very difficult to get it to be responsive, and there are better ways to do it these days. The problem with absolute is that it simultaneously breaks an object out of the standard flow of the document, but it also gets rid of the object's ability to affect other objects in the document. This means that a div with position:absolute will no longer push down its sibling objects (things next to it), hold space within the parent object (the thing holding it will act like it has nothing inside it). While it's more complicated, using grid to break objects out of the normal document flow is more predictable.
Let's take a look at your code simply without position: absolute:
https://jsfiddle.net/slingtruchoice/sye5wbmu/
already, things aren't breaking outside of your boxes.
Your best bet to get things to align is to use use margin and display:block. Remember, inline items don't hold their own line in a document, they allow other inline items to butt up next to them in the same line, so they won't be affected by margin and padding in the same way. display:inline-block fixes some of that, but not everything.
i literally have this as a poster in my office. I've been doing this for ten years and still use it daily: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
if an item is overflowing out of the container, it's because the container isn't recognizing that it needs to be affected by the child's size. This either means that the parent has a fixed size that overrides the child's desire to make the parent bigger (like a pregnant lady wearing a corset, as my teacher always said... such a weird image).
It may also mean that the child's size isn't affecting things around it, such as a position:absolute or display:inline item that is acting weird. If you have display:flex and flex-wrap: nowrap on the parent, but the children are set to have a size larger than the parent object, then they will overflow.
I'm sure about what icons you are talking about, I would be happy to help you If can clarify the issue. Now about the why your li items are overflowing over their container.
In your CSS on the line number 94 and 103 you set max-height: 400px; and height: 300px; because of that your li items are overflowing.
One way you can fix this bye removing fix height and set the value height: auto; that will make the parent container automatically grow based on their child element, or you can give your ul element a class or ID and then set overflow-y: scroll; to that ID or class.
This is the code freecodecamp is using to design the middle section with the icon.
.grid {
display: flex;
}
#features .icon {
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;
}
#features .desc {
display: flex;
flex-direction: column;
justify-content: center;
height: 125px;
width: 80vw;
padding: 5px;
}
<!-- Wrapper -->
<div class="grid">
<!-- Icon -->
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<!-- /Icon -->
<!-- Description -->
<div class="desc">
<h2>Premium Materials</h2>
<p> Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase. </p>
</div>
<!-- /Description -->
</div>
<!-- /Wrapper -->
Now let me explain what is going on here. The div with the class name grid is the parent element for both icon and the desc So they set display of grid to display: flex; and give both child element fix width width: 20vw; and width: 80vw;
And I like to add one little note, That If you are using position: absolute; to any element then It's a good idea to set Its parent to position: relative; That would make working with position a lot easier.
I've got some problems with specific element positioning. Could you give me any advice how to make it works?
It seems that buttons should be a part of content div but I don't really know how to do this. I tried many ideas but without any result.
Thanks in advance :)
My current code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<div class="item" style="background-color: red; height: 65px;">
<button>test</button>
</div>
<div class="item"></div>
</div>
I have no clue how to set div with buttons to be above header div. I tried with position relative but without success.
I know that it can be achieved by setting maring-top in container div. But is there any more elegant solution?
Well if you wanted to make a template as you mentioned above in the attached picture, I would say you won't need to define a new div above your container as the independent div and you should wrap all your header items into one division and make them flex with related justify-content and align-items, the flexbox with reacting to this as two different items that two of them (first button and header item) are wrapped into one div and the other one is a simple button (you can wrap it into another div too if you wanted) then with the justify-content: space-between they will force to the two endpoints of the division with space between them. Then you should do the same with your first wrapped items in div but in this one, you should add specific width to the division to make the justify-content: space-between work properly.
I add the simple code snippet below for more illustration, you can use it freely.
.header {
background-color: red;
padding: 10px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header button {
background-color: yellow;
font-weight: bold;
border: none;
}
.header span {
color: white;
}
.header-left {
width: 130px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container {
max-width: 100%;
}
.item {
width: 200px
min-height: 400px;
margin: 0 40px;
padding: 100px;
background-color: lightgrey;
}
.item > p {
text-align: center;
}
<div class="header">
<div class="header-left">
<button>btn</button>
<span>header</span>
</div>
<button>btn</button>
</div>
<div class="container">
<div class="item">
<p>content</p>
</div>
</div>
If I am not getting it wrong, then you want the code of the button to be inside of container and on web page it should be shown on header. If this is what you are looking for then you can try the below code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: relative
}
.container button {
position: absolute;
top: -30px; // you can change it accordingly
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<button>test</button>
<div class="item"></div>
</div>
I'm trying to create a simple header and I'm having problems with the logo image because it's taking more space than needed.
.wrapper {
display: flex;
flex-direction: row;
height: 50px;
}
.logo {
padding: 5px;
}
img {
height: 100%;
}
.content {
padding: 5px;
}
<div class="wrapper">
<div class="logo"><img src="http://placehold.it/350x150"/></div>
<div class="content">content</div>
</div>
As you can see, the "content" text isn't placed near the logo, because the logo wrapper has a width equal to the size of the image before it gets resized by CSS.
I noticed that if I set height: 100% to the .logo element the situation is a bit better, but doing so, the "content" text overlaps a bit the image.
How can I fix it?
Here are two ways to fix the problem:
Method #1 – Remove the extra wrapper. Make the image itself the flex item.
.wrapper {
display: flex;
flex-direction: row;
height: 50px;
}
img {
height: 100%;
}
.content {
padding: 5px;
}
<div class="wrapper">
<img src="http://placehold.it/350x150"/><!-- div wrapper removed -->
<div class="content">content</div>
</div>
Method #2 – Define a height for the image wrapper. (No changes to the HTML.)
.wrapper {
display: flex;
flex-direction: row;
height: 50px;
}
.logo {
height: 100%; /* new */
border: 1px dashed red;
}
img {
height: 100%;
}
.content {
padding: 5px;
margin-left: 5px;
border: 1px dashed red;
}
<div class="wrapper">
<div class="logo"><img src="http://placehold.it/350x150" /></div>
<div class="content">content</div>
</div>
You have to explicitly set image height in pixels. height: 100% will use the image original height, NOT its container height.
I added justify-content and align-items to the flex container so things get properly positioned.
.wrapper {
display: flex;
flex-direction: row;
height: 50px;
justify-content: flex-start;
align-items: flex-start;
}
.logo {
padding: 5px;
}
img {
max-height: 50px
}
.content {
padding: 5px;
}
<div class="wrapper">
<div class="logo"><img src="http://placehold.it/350x150"/></div>
<div class="content">content</div>
</div>