I have a section part on the website where I want four products being displayed in the middle, right and left arrows on both sides of the screen and a title in the middle above the displayed products, I think I have all of the HTML and CSS good but the position isn't working properly, can someone have a look and help me feature it out?img of the sections I am talking about
ps: the background color doesn't feel the space that the items and buttons are in, why does it happens too?
edit: this is a pic of how i wish it would look
HTML:
<section class="one">
<div><span class="title">New products</span></div>
<br>
<button class="left">
<span class="Lmain"></span>
<span class="Lside"></span>
</button>
<div class="items">
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image1.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image2.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image3.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image4.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
</div>
<button class="right">
<span class="Rmain"></span>
<span class="Rside"></span>
</button>
</section>
CSS:
.title {
text-align: center;
position: absolute;
margin: auto;
border: 1px solid goldenrod;
font-size: 40px;
}
.one {
background-color: hotpink;
position: relative;
}
.two {
background-color: rgb(255, 0, 128);
}
/*items appearance*/
.items {
position: relative;
margin: auto;
}
.item {
border: 1px solid rgb(255, 170, 0);
float: left;
position: absolute;
top: 0px;
margin: 0px 8px;
left: 12%;
width: 350px;
height: auto;
}
.itemImg {
width: 100%;
height: auto;
}
/*end of item appearance*/
.right {
right: 0px;
top: 0px;
position: absolute;
}
.left {
left: 0px;
top: 0px;
position: absolute;
}
Utilize flexbox to make this layout easy:
body {
margin: 0;
background: #1a1a1a;
color: #fff;
font-family: sans-serif;
}
h1#title {
padding: 1rem;
text-align: center;
}
main {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
#products {
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0;
}
.product {
padding: 2rem 1rem;
background: #fff;
color: black;
margin: .5rem;
}
<body>
<h1 id="title">Items</h1>
<main>
<div class="arrow" id="arrow-left">←</div>
<div id="products">
<div class="product">
Product
</div>
<div class="product">
Product
</div>
<div class="product">
Product
</div>
<div class="product">
Product
</div>
</div>
<div class="arrow" id="arrow-right">→</div>
</main>
</body>
Here a list of problem I see:
the .title element is position:absolute, so it doesn't fill any space and other elements will position weirdly. Solution: remove position: absolute
the .title is a <span> element witch is an inline-element who doesn't behave like a block element (<div>, <p>, <h1>, etc.), so the text-align: center doesn't take effect. Solution: remove the span and give the .title class to the parent <div>
the left and right buttons should be wrapped in a <div> with position:relative
Here is a jsfiddle with the fixed code.
I didn't fix the image positioning because i think those will be positioned by js, anyhow it dipends by the images dimensions and is a very weak method. So I strongly suggest using flexbox that is widely supported by browsers.
You can follow the #yerme example or this guide on flexbox.
Related
I have a set of columns each containing a square box that fills to the column width and maintains a square height ratio.
The entire box needs to be clickable, with the content inside that also centered within the box. I can't figure out a way of getting the inner <a> element to fill out the space inside the parent div and have its own content centered.
Here is an editable Fiddle
The entire square should be red, entirely clickable, and with a centered download button within.
I've reviewed a bunch of similar questions about making square boxes with CSS but didn't find anything about the inner elements filling out the box like this.
Thanks
.block {
width: 100%;
height: 0;
padding-bottom: 100%;
border: 2px solid #600;
}
.block a {
display: flex;
justify-content: center;
align-items: center;
background: #C00;
text-decoration: none;
}
.block span {
padding: 1em;
border: 2px solid #FFF;
text-align: center;
color: #FFF;
}
/* Demo only */
.row {
display: flex;
justify-content: space-between;
}
.column {
width: 20%;
}
<div class="row">
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
</div>
Setting the parent .block to position: relative allows us to set .block > a to position: absolute, with dimensions that fill its parent; I only added 3 css rules, they're commented so you know which ones:
.block {
position: relative; /* change #1 */
width: 100%;
height: 0;
padding-bottom: 100%;
border: 2px solid #600;
}
.block a {
position: absolute; /* change #2 */
left: 0; right: 0; top: 0; bottom: 0; /* change #3 */
display: flex;
justify-content: center;
align-items: center;
background: #C00;
text-decoration: none;
}
.block span {
padding: 1em;
border: 2px solid #FFF;
text-align: center;
color: #FFF;
}
/* Demo only */
.row {
display: flex;
justify-content: space-between;
}
.column {
width: 20%;
}
<div class="row">
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
<div class="column">
<div class="block">
<a href="#">
<span>Download</span>
</a>
</div>
</div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm trying to align multiple inline-blocks at the top of my page, but for reasons that are baffling to me, it's not working. The CSS could hardly be cleaner or less, but the top isn't aligning properly. I thought it could be a floating issue, but even after applying a clear:both it doesn't fix this.
Please see the program here:
https://jsfiddle.net/yezwocta/
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
Add vertical-align: top; to your .article CSS (the default is baseline):
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
vertical-align:top;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
I would like to create a right aligned navbar. Each link item should contain an image and a text. When having text only this code works fine
#navbar {
height: 60px;
display: grid;
justify-content: end;
padding: 20px;
background: red;
align-items: center;
}
a {
text-decoration: none;
margin: 0 10px;
color: white;
background: black;
}
<div id="navbar">
<div>
Home
About
Projects
Contact
Imprint
</div>
</div>
Now I added images and texts to the link item and built a wrapper around these elements.
#navbar {
height: 60px;
display: grid;
justify-items: end;
padding: 20px;
align-items: center;
background: red;
}
#navbarLinkContainer {
margin: 0 60px;
}
.navbarItemContainer {
text-align: center;
text-decoration: none;
margin: 0 10px;
}
.navbarItemImg {
width: 64px;
height: 64px;
}
<div id="navbar">
<div id="navbarLinkContainer">
<a class="navbarItemContainer" href="/">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Home</div>
</div>
</a>
<a class="navbarItemContainer" href="/about">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">About</div>
</div>
</a>
<a class="navbarItemContainer" href="/projects">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Projects</div>
</div>
</a>
</div>
</div>
Unfortunately the CSS breaks now. How can I fix it so that each link item is aligned to the right, centered vertically and is placed along the navbar?
I achieved it using flexbox
https://jsfiddle.net/q48tyuac/
but maybe there is a better solution using the grid attribute. Because when you lower the screen size these elements are fixed and I would like them to break to the next row if there is no space left.
use flex-wrap:wrap;
#navbar {
/* height: 60px; */
display: flex;
justify-content: flex-end;
padding: 20px;
flex-wrap:wrap;
align-items: center;
background: red;
/* margin: 0 60px; */
}
https://jsfiddle.net/6p03s5cm/
if you dont want to use flexbox with grid you can target #navbarLinkContainer and do it with columns
#navbar {
display: grid;
justify-items: end;
padding: 20px;
align-items: center;
background: red;
}
#navbarLinkContainer {
display:grid;
grid-template-columns:repeat(3 , 1fr) ;
}
.navbarItemContainer {
text-align: center;
text-decoration: none;
margin: 0 10px;
}
.navbarItemImg {
width: 64px;
height: 64px;
}
<div id="navbar">
<div id="navbarLinkContainer">
<a class="navbarItemContainer" href="/">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Home</div>
</div>
</a>
<a class="navbarItemContainer" href="/about">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">About</div>
</div>
</a>
<a class="navbarItemContainer" href="/projects">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Projects</div>
</div>
</a>
</div>
</div>
I'm trying to align 3 items in Flexbox.
To make things easier, here's the current layout
The goal here is to keep the numbers ( 1, 2, 3 etc.. ) on the left, strictly aligned, the texts strictly aligned too ( so that the up arrows are vertically aligned ), and the right icon should go wherever it must go as long as it's in the div.
Here's the code :
.div-container .form-div-container .small-text,
.div-container .form-div-container .longer-text,
.div-container .form-div-container .even-longer-text,
.div-container .form-div-container .longer-longer-longer-text,
.div-container .form-div-container .small-text-two {
display: flex;
justify-content: space-between;
}
The HTML :
<div class="div-container">
<div class="form-div-container">
<div class="small-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="even-longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="longer-longer-longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="small-text-two">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
</div>
</div>
The thing is the icons are not all of the same width, so they push the middle item. How can I make things the way I want ? Thanks !
You could set the widths of the elements that contain the numbers and icons to a fixed percentage value like below:
.box__icon,
.box__number {
width: 15%;
text-align: center;
}
See a full demo below:
/*IGNORE STYLE RULES FROM HERE......*/
body {
margin: 0;
}
i {
font-style: normal;
}
.box {
color: white;
font-family: sans-serif;
font-size: 2rem;
font-weight: bold;
padding: 30px;
}
.box:nth-child(1) {
background: firebrick;
}
.box:nth-child(2) {
background: darkturquoise;
}
.box:nth-child(3) {
background: chocolate;
}
.box:nth-child(4) {
background: midnightblue;
}
.box__text::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent #ffffff transparent;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
/*.... TO HERE*/
.box {
align-items: center;
display: flex;
justify-content: space-between;
}
.box__icon,
.box__number {
width: 15%; /*Change this to whatever value you want*/
text-align: center;
}
.box__text {
color: white;
font-family: sans-serif;
text-align: center;
}
<div class="container">
<div class="box">
<div class="box__number">1</div>
<p class="box__text">Small Text</p>
<i class="box__icon">Icon---</i>
</div>
<div class="box">
<div class="box__number">2</div>
<p class="box__text">Longer Text</p>
<i class="box__icon">Icon</i>
</div>
<div class="box">
<div class="box__number">3</div>
<p class="box__text">Even Longer Text</p>
<i class="box__icon">Icon--</i>
</div>
<div class="box">
<div class="box__number">4</div>
<p class="box__text">Longer Longer Longer Text</p>
<i class="box__icon">Icon---</i>
</div>
</div>
Hello,
As you can see from the photo above, I am trying to achieve a grid system. First grid is 3 images, second grid is a column, and third grid is a large image floated to the right of the 2nd grid. You can see this photo on my portfolio website: http://www.irwinlitvak.com
I have three images in the first grid that have a width of 31.33% and the first and second img have a margin-right of 3.005% to full up the container width.
In the next grid (grid-2), I have a two of my images floated left in a column and (grid-2-of-3) is floated right with a width of 65.556%.
I would like the top and bottom of the larger image to take up the full height of the grid, so the bottom of the big image aligns with the self-destructing box.
Here is the HTML & CSS:
.projects-grid {
margin: 100px auto 0;
width: 90%;
}
.projects-grid .title {
margin-bottom: 20px;
text-align: center;
}
.projects-grid h1 {
display: inline-block;
font-family: "Montserrat";
}
.grid-1 {
margin-bottom: 4%;
}
.grid-1-of-3 {
position: relative;
width: 31.33%;
float: left;
overflow: hidden;
}
.grid-2-of-3 {
position: relative;
width: 65.556%;
float: right;
}
.grid-1-of-3:first-child,
.grid-1-of-3:nth-child(2) {
margin-right: 3.005%;
}
.grid-3 {
position: relative;
display: inline-block;
width: 33%;
margin-bottom: 60px;
vertical-align: bottom;
}
.grid-5 {
position: relative;
display: inline-block;
width: 20%;
margin-bottom: 60px;
vertical-align: bottom;
}
.box-1 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.grid-1-of-3:first-child {
margin-left: 0;
}
.grid-1-of-3:last-child {
margin-right: 0;
}
.big-box {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.grid-2 {
width: 31.33%;
float: left;
}
.grid-2 .box-cont {
width: 100%;
}
.grid-2 .box-cont:first-child {
margin-bottom: 4%;
}
.grid-2 .box-cont {
position: relative;
}
<section class="projects-grid clearfix">
<div class="row title">
<h2>Projects</h2>
</div>
<div class="grid-1 clearfix">
<div class="grid-1-of-3">
<div class="box-1">
<a href="">
<img class="bdgt-app" src="assets/budget-app-x-ps.jpg" alt="budget-app pic">
</a>
<a href="https://budget-app-x.herokuapp.com/" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Budget-App-X</h3>
<p>Manage your incomes and expenses in a fun and easy app.</p>
</div>
</div>
</a>
</div>
<h3>
Budget-App-X
</h3>
</div>
<div class="grid-1-of-3">
<div class="box-1">
<a href="">
<img src="/assets/dice-game-x-ps.jpg" alt="dice-game">
</a>
<a href="https://dice-game-x.herokuapp.com/" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Dice-Game</h3>
<p>Roll the dice. Test your luck and see who racks the most points.</p>
</div>
</div>
</a>
</div>
<h3>
Dice-Game
</h3>
</div>
<div class="grid-1-of-3">
<div class="box-1">
<a href="">
<img src="/assets/pomodoro-timer-x-ps.jpg" alt="pomodoro-app-timer">
</a>
<a href="http://pomodoro-app-timer.herokuapp.com" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Pomodoro-Timer</h3>
<p>A quick and easy solution to being productive. Set the time and get things done.</p>
</div>
</div>
</a>
</div>
<h3>
Pomodoro-Timer
</h3>
</div>
</div>
<div class="grid-2 clearfix">
<div class="box-cont">
<div class="box-1">
<a href="">
<img src="/assets/cucumberme-x-ps.jpg" alt="cucumber me">
</a>
<a href="http://www.cucumberme.com" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>CucumberMe</h3>
<p>CucumberMe is your way of anonymously sending cucumbers to a friend, ex or anyone you want.<br><br> Go and send one today! </p>
</div>
</div>
</a>
</div>
<h3>
CucumberMe
</h3>
</div>
<div class="box-cont">
<div class="box-1">
<a href="#">
<img src="/assets/self-destruct-x-ps.jpg" alt="to do list">
</a>
<a href="http://todos-irwin.herokuapp.com/" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Self Destructing To-Do-List</h3>
<p>A to-do-list that will delete itself within 10 seconds. How many chores can you list within that time? </p>
</div>
</div>
</a>
</div>
<h3>
<a href="http://todos-irwin.herokuapp.com/" target="_blank">
Self Destructing To-Do-List
</a>
</h3>
</div>
</div>
<div class="grid-2-of-3 clearfix">
<div class="box-cont">
<div class="big-box">
<a href="#">
<img src="/assets/omnifood-x-ps.jpg" alt="omnifood">
</a>
<a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank">
<div class="box-overlay big-overlay">
<div class="text-overlay">
<h3>Omnifood</h3>
<p>My version of the food app Blue Apron. Take a look! </p>
</div>
</div>
</a>
</div>
<h3>
<a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank">
Omnifood
</a>
</h3>
</div>
</div>
</section>
What you can do is as I show in the snippet below. You have a container for all your divs you want at the same height, which you give a set height. You then give the items on the left a container (with height: 100%) and make a div for the right item (height: 100%).
By doing this, you have a container for the items on the left, so you can make them, say, 50% each, and you have a right item that's the same height as the container on the left.
In order to make an image fit a div, either use background-size: cover or something similar. height:100%; width: auto also works for responsive images.
Hope it helps.
.outer {
background: blue;
width: 600px;
height: 200px;
}
.leftwrap {
width: 30%;
float: left;
height: 100%;
}
.left1 {
background: purple;
width: 100%;
height: 50%;
}
.left2 {
background: orange;
width: 100%;
height: 50%;
}
.right {
background: teal;
height: 100%;
width: 70%;
float: left;
}
/** New code **/
.image {
height: 80%;
width: auto;
border: 1px solid black;
}
.imagetext {
color: white;
text-align: center;
border: 1px solid black;
}
.left {
box-sizing: border-box;
padding-bottom: 30px;
}
<div class='outer'>
<div class='leftwrap'>
<div class='left left1'>
<div class="image">My image here</div>
<div class="imagetext">Some text</div>
</div>
<div class='left left2'>
<div class="image">My image here</div>
<div class="imagetext">Some text</div>
</div>
</div>
<div class='right'>3</div>
</div>