I'm trying to make my first custom header.
I want the middle item (eg. the logo) to stay centered regardless of how much content is on either side.
I tried using z-index but I believe that was wrong.
HTML:
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
text-align: center;
}
.image {
z-index: -1;
}
<div id="header_container">
<div id="header">
<ul class="flex-container">
<li class="flex-item">Menu items 1 BHello | seven | eight | nineteen | Fitiyytwooooo
</li>
<li class="image">
<img src="http://www.plankdesign.com/wp-content/uploads/2011/01/html4.jpg" style="width:204px;height:128px;">
</li>
<li class="flex-item">Menu items 2 Blah | Blah | Blah</li>
</ul>
</div>
</div>
Here's my jsfiddle demo.
Try like this: Demo
.image img {
z-index: 1000;
width:18%;
height:128px;
position:absolute;
left:50%;
margin-left:-9%; /* half of the width */
}
HTML:
<li class="image">
<img src="http://www.plankdesign.com/wp-content/uploads/2011/01/html4.jpg" />
</li>
Check this out, you may want to modify the code(col-md-x) as per your requirement.
Related
I'm working on a sidebar using Angular and Flex. It's app-sidebar within the following layout Angular component:
<div fxlayout="row" fxFill>
<app-sidebar fxLayout="column" fxFlex="10%"></app-sidebar>
<div fxLayout="column" fxFlex="100">
<app-top-navbar class="navbar-component" fxLayout="column"></app-top-navbar>
<div class="content" fxLayout="column" fxFlex>
<router-outlet></router-outlet>
</div>
</div>
</div>
I'm trying to get the sidebar to fill the page vertically, the list items within evenly spaced between that expanse. But I'm not having any luck... I've made a simplified version in this JSFiddle. You can see that it stretches horizontally (great, as I want it to fill that 10% of the greater layout), but it doesn't go to the bottom of the page.
I'm new to Angular and Flex, so any help would be appreciated. Here's the Fiddle code (if it makes a difference, anchors are used, because I also have icons not included):
:host {
display: flex;
flex-direction: column;
flex: 1 1 100%;
}
#sidebar-cont-div{
display: flex;
flex:1;
flex-direction: column;
}
#navbar-content-container{
display: flex;
flex: 1;
flex-direction: column;
}
#main-navbar {
background-color: red;
border-radius: 50px 20px 20px 50px;
text-align:center;
}
#nav-list {
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-around;
flex: 1;
margin: auto;
min-width:100%;
height:100%;
}
<div id = "sidebar-cont-div">
<nav id="main-navbar">
<div id="navbar-content-container">
<a href="#">
<h1 id="sidebar-logo">Project<br>Dash</h1>
</a>
<ul id="nav-list">
<li class="sidebar-item" role="presentation">
<a href="#">
<span>Overview</span>
</a>
</li>
<li class="sidebar-item" role="presentation">
<a href="#">
<span>Project Record</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
please try like this
body , html {
height:100% ;
margin : 0px ;
}
#sidebar-cont-div{
display: flex;
flex-direction: column;
height:100%
}
#main-navbar {
background-color: #ffffff;
background-image: linear-gradient(180deg,rgba(127,162,137,0.82) 20%,rgba(39,86,94,0.92));
border-radius: 50px 20px 20px 50px;
text-align:center;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
You can use the rest of the style as it is.By using the styles above your side nav will strech vertically.
working sample in stackblitz
https://stackblitz.com/edit/js-aqedvi
I'll try to align 3 Logos with the same height but with different widths on a row over the hole screen-width: The first image should be aligned at the left end of the screen, the third one should be aligned at the right end of the screen and the second one should float in between the other two images with the same space between them. The space should get smaller when the display gets smaller until it hit a defined minimum space. From there on if the display gets further smaller the hole row should scale down. I hope the image helps in clarify what I have in mind.
how it should look like
It's for a MailChimp Newsletter.
That is how far I got:
.my-logo-container{
width: 100%;
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.my-logos{
flex: 1;
border: 1px solid red;
height: auto;
max-height: 100px;
}
<div class="my-logo-container">
<div class="my-logos">
<a href="https://via.placeholder.com/100x80.png">
<img src="https://via.placeholder.com/100x80.png">
</a>
</div>
<div class="my-logos">
<a href="https://via.placeholder.com/195x80.png">
<img src="https://via.placeholder.com/195x80.png">
</a>
</div>
<div class="my-logos">
<a href="https://via.placeholder.com/175x80.png">
<img src="https://via.placeholder.com/175x80.png">
</a>
</div>
</div>
Any Help is highly appreciated.
I have an alternative for you. Did you mean this?
.my-logo-container{
width: 100%;
margin:0;
}
ul.my-logos{
margin: 0;
padding: 0;
list-style: none;
}
ul.my-logos li{
width: 32.33333%;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin:0;
float: left;
text-align: center;
border:1px solid red;
}
ul.my-logos li a img{
max-width: 130px;
height:80px;
}
<div class="my-logo-container">
<ul class="my-logos">
<li>
<a href="https://via.placeholder.com/100x80.png">
<img src="https://via.placeholder.com/100x80.png">
</a>
</li>
<li>
<a href="https://via.placeholder.com/195x80.png">
<img src="https://via.placeholder.com/195x80.png">
</a>
</li>
<li>
<a href="https://via.placeholder.com/175x80.png">
<img src="https://via.placeholder.com/175x80.png">
</a>
</li>
</ul>
</div>
I came up with this solution: Instead of defining a minimum space in css I added more space into the images themselves. Now they can touch eachother and it still looks good. With display: flex; and justify-content: space-between; I arranged them in a row. With max-width: 100%; and height: auto; the Images auto-resizes on smaller screens. It works for me now.
.logo-container {
display: flex;
justify-content: space-between;
}
.logo {
max-width: 100%;
height: auto;
}
<div class="logo-container">
<img class="logo" src="https://via.placeholder.com/100x80.png">
<img class="logo" src="https://via.placeholder.com/195x80.png">
<img class="logo" src="https://via.placeholder.com/175x80.png">
</div>
My problem is this: I have a flexbox that places a summary section and an image section in a row. The summary section is a nested flexbox that displays the 3 lists as the first column and the horizontal soiltype list as the second column. The problem is that the content of the second column is placed in the center while i want it to align to the left at the same starting position as the lists column above. Here is an image of the current situation:
I have tried using justify-content: flex-start, align-items: flex-start, margin-left: 0px; margin-right: auto; and margin-left:-500px, but everytime the second column remains fixed in the center. Can anyone please tell me what i should do to move the content of the second column to the right? Thank you,
Here is the code:
HTML:
<div class="flexBox flexItem">
<div class="summary">
<div class="flexBox flexItem test">
<ul class="details">
<li><strong>Days until harvest:</strong> {{seedDetails.growthTime}}</li>
<li><strong>Required sun exposure:</strong> {{sunExposure}}</li>
<li><strong>Plant height:</strong> {{seedDetails.plantHeight | measure : distancePipeArgument : true}}</li>
<li><strong>Plant width:</strong> 15 inch</li>
</ul>
<ul class="details">
<li><strong>Germinates after:</strong> 14 days</li>
<li><strong>Germination temperature:</strong> {{seedDetails.growthTemperature | measure: temperaturePipeArgument : true}}</li>
<li><strong>Row spacing:</strong> {{seedDetails.rowSpacing | measure : distancePipeArgument : true}}</li>
<li><strong>Plant spacing:</strong> {{seedDetails.plantSpacing | measure : distancePipeArgument : true}}</li>
</ul>
<ul class="details">
<li><strong>Sow depth:</strong> {{seedDetails.sowDepth | measure : distancePipeArgument : true}}</li>
<li><strong>Life cycle:</strong> {{seedDetails.lifeCycleType | titlecase}}</li>
<li><strong>Hardy at:</strong> {{seedDetails.hardiness | measure: temperaturePipeArgument : true}}</li>
<li><strong>Maximum temperature:</strong> {{seedDetails.maximumTemperature | measure: temperaturePipeArgument : true}}</li>
</ul>
</div>
<div class="soils">
<ul>
<li class="inline"><strong>This plant grows well in:</strong></li><li class="inline">
<mat-chip-list>
<mat-chip style="margin-right:8px; background-color:aquamarine;" *ngFor="let soilType of soilTypes" [selectable]="selectable" (click)="showDialog(soilType)">
{{soilType}}
</mat-chip>
</mat-chip-list></li>
</ul>
</div>
</div>
<figure class="carousel">
<div class="crop shadow">
<input type="image" [src]="seedDetails.imagePreview" class="thumbnail" (click)="showDialog(image)"/>
</div>
<small>Click to view full image</small>
</figure>
</div>
CSS:
.flexItem {
max-width: 1100px;
}
.flexBox{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
ul.details{
margin-left: 0px;
padding-left: 0px;
flex: 1 1 300px;
}
.inline{
display: inline-block;
}
.soils{
align-items: flex-start;
}
.summary{
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items: flex-start;
/* justify-content: flex-start;
text-align: left; */
width:85%;
/* align-items: flex-start; */
/* border: solid grey 1; */
}
.carousel{
width: 250px;
height: 250px;
/* overflow:hidden; */
background-color: gray;
flex: 1 1 250px;
/* margin-left: 0px; */
}
.crop{
width: 250px;
height: 250px;
overflow:hidden;
}
.shadow{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
border: 0.5px solid black;
}
.test{
width:850px;
/* border: solid black; */
}
I am completely new to this so bare with if it's obvious.
I have three images in a row at full screen which I want to realign in accordance to the window size, i.e. go to two, then one (while always centred). The other images then being displayed underneath vertically.
This is what the code looks like (with the image location removed)
<div class="img_container"> <img id="img2" alt="" src="IMAGE">
#im1 {
display: block;
top: 250px;
background-color: white;
width: 250px;
height: 250px;
position: absolute;
left: 558px;
}
thank you!!
use bootstrap and then you can call your image between;
<div class="col-sm-12 col-md-6 col-lg-4">
</div>
More info about col-lg/md/sm/xs
I would recommend you to use flex boxes.
Your code would look something like this:
HTML:
<ul class="flex-container">
<li class="flex-item"><img src="http://placekitten.com/g/200/200"></li>
<li class="flex-item"><img src="http://placekitten.com/g/200/200"></li>
<li class="flex-item"><img src="http://placekitten.com/g/200/200"></li>
</ul>
CSS:
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
The above code snippet is based on an example taken from https://css-tricks.com/snippets/css/a-guide-to-flexbox.
I wanted to create a list of items by displaying a name, a list of properties and an image. Although this seems like quite a common and easy problem, I am struggling to get it right.
After having changed the markup a dozen of times, I chose to represent the list by a ul in which each li consists of a h3(name), a ul(properties) and a img(image).
In order to make it fill the page a bit more, I used CSS's flexbox in order to put the image and the properties next to each other in a responsive way.
img {
max-width: 100px;
}
#example > ul > li {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
h3 {
width: 100%;
text-align: center;
}
div > ul {
border-left: 2px solid red;
}
<section id="example">
<ul>
<li>
<h3>Bulbasaur</h3>
<div>
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</li>
<li>
<h3>Charmander</h3>
<div>
<span>Properties</span>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</li>
<li>
<h3>Squirtle</h3>
<div>
<span>Properties</span>
<ul>
<li>blue</li>
<li>tiny turtle</li>
<li>water</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/3/39/007Squirtle.png" />
</li>
</ul>
</section>
This looks pretty nice when the properties for all elements are equally long, but it kind of looks messy when this is not the case (the property-lists are not properly aligned as indicated by the red lines in the above snippet). I know I could get all the content in a table, causing every table element to be aligned nicely under each other, but then I don't know how I can have my names in a different line than the properties and the image...
My question could thus be formulated as:
How can I align the properties nicely under each other in such a way that they are displayed next to the image (to fill the space on the screen)? Additionally I would like that the image is displayed under the properties when the screen becomes too small (i.e. responsive design) and a separate line for the name.
Any help will be greatly appreciated
Update:
As it turned out that my question is not that clear, I tried to make it more clear by adding the vertical red lines in the snippet. I manage to get the desired result when using a table, but then I have to omit the names (as shown in the attached image) and the responsiveness...
You can just create a simple item element, something like this:
HTML
<li class="item">
<h2>Charmander</h2>
<div class="content">
<h3>Properties</h3>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<div class="image">
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</div>
</li>
I simply divided the element in three main sections: title, properties and the image.
As you can see the properties are still inside a <ul> because they are used like a enumeration.
CSS
#example > ul {
padding: 0;
}
.item {
width: 100%;
background: #CCC;
padding: 20px;
box-sizing: border-box;
/* Padding will be inside the element (will not affect the width/height) */
margin: 20px 0;
overflow: hidden;
/* Used to keep the floated element inside the flow */
}
.item h2 {
text-align: center;
}
.item .content {
width: 60%;
float: left;
padding-left: 20px;
box-sizing: border-box;
}
.item .image {
width: 200px;
float: left;
}
.item img {
width: 100%;
}
.item .content ul {
border-left: 2px solid red;
margin-bottom: 20px;
}
With the first selector (#example > ul) I reset the default padding it has.
The text of the properties will just start on a new-line if it is too long (you can test this by resizing the window).
You can just edit the padding-left of the .content element, to move the properties a little bit more to the right or to the left.
Example JsFiddle
This is just to give you an example of how you want to approach this.
Hope it was helpful!
I have just been so stupid. As an alternative to the helpful answer of nkmol, it could also be as simple as changing the justify-content property to space-between and correct it by setting width and auto-margins.
img {
max-width: 100px;
}
#example > ul > li {
width: 80%;
margin: auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
h3 {
width: 100%;
text-align: center;
}
li > div > ul {
border-left: 2px solid red;
}
<section id="example">
<ul>
<li>
<h3>Bulbasaur</h3>
<div>
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</li>
<li>
<h3>Charmander</h3>
<div>
<span>Properties</span>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</li>
<li>
<h3>Squirtle</h3>
<div>
<span>Properties</span>
<ul>
<li>blue</li>
<li>tiny turtle</li>
<li>water</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/3/39/007Squirtle.png" />
</li>
</ul>
</section>
PS: I'm sorry for my awful question...
You need to break out your items from the primary UL
You can think of it as though you were building a table, but instead, use divs and then use a UL just to list the properties. This way, you can style each of the individual elements as needed.
look here: https://jsfiddle.net/oq04f6pm/2/
<section id="example">
<div class="section-title">Bulbasaur</div>
<div class="section-list">
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<div class="section-image">
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</div>
</section>
img {
max-width: 100px;
}
.section-title {
width: 100%;
text-align: center;
font-weight: bold;
}
.section-list, .section-image {
width: 50%;
float: left;
}
.section-image {
text-align: center;
}
#media screen and (max-width: 400px) {
.section-list, .section-image {
width: 100%;
}
.section-image {
text-align: left;
}
}