I have the following snippets of code:
HTML:
<div class="textreview" id="newyorktimes">
<span class="reviewer">New York Times</span>
<span class="rating">NYT's Choice</span>
<img class="reviewlogo" src="../images/logos/newyorktimeslogo.png" alt="metacriticlogo">
</div>
<div class="textreview" id="bafta">
<span class="reviewer">BAFTA Awards</span>
<span class="rating">Best Original Screenplay</span>
<img class="reviewlogo" src="../images/logos/baftalogo.png" alt="metacriticlogo">
</div>
<div class="textreview" id="oscars">
<span class="reviewer">Academy Award</span>
<span class="rating">Best Picture</span>
<img class="reviewlogo" src="../images/logos/oscarslogo.png" alt="metacriticlogo">
</div>
CSS:
.textreview > .reviewer { grid-area: reviewer; text-align: center;}
.textreview > .reviewlogo { grid-area: image; }
.textreview > .rating { grid-area: rating; }
.textreview {
flex-basis: 250px;
flex-shrink: 0;
display: grid;
row-gap: 10px;
grid-template-areas:
"reviewer"
"image"
"rating";
}
Giving the following result:
Why does this not put the image in between the title and rating?
Your code works well, You can clear cache on your browser and see what happens.
Related
I am currently working on a forum project, and had some problems with the CSS styling.
I am trying to position text into a HTML button, I managed to position one part of the text correctly, but the other part can't be positioned as the first, even if the CSS and HTML code is the same.
I tried wrapping the elements in a div, and somehow, I never manage to get them displayed into the button, even with margin-bottom.
Here the HTML Code:
<button>
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Tech, Informatique et autres</h2>
</div>
<div class="forum-list-info">
<h3>5.1k</h3><h3>50.3k</h3>
<p>Posts</p><p>Messages</p>
</div>
</button>
Here is the CSS code:
.forum-container { /* This is wrapped around the button elements */
position:absolute;
left:18%;
margin-top:42em;
font-family: Poppins-SemiBold, FontAwesome;
}
.forum-list-container { /* This is wrapped around the button elements */
margin-top:3em;
}
.forum-list button {
background-color: #172129;
border: 2px solid #212e38;
border-radius: 10px;
padding: 10px 40px;
width:80em;
height: 10em;
font-family: Poppins-SemiBold, FontAwesome;
color:white;
margin-right: 1em;
display:block;
margin-bottom: 2em;
}
.forum-list-header { /* Text aligned left, perfectly placed, won't work with the other text */
display:flex;
align-items:center;
}
.forum-list h2 {
margin-left:2em;
}
.forum-list .forum-list.btn {
margin-bottom:2em;
}
.forum-list-info {
/* Here should be the code to position it. */
}
.forum-list-info {
display: flex;
align-items: center;
justify-content: space-around;
}
//add this style to your css
<button>
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Tech, Informatique et autres</h2>
</div>
<div class="forum-list-info">
<div>
<h3>5.1k</h3>
<p>Posts</p>
</div>
<div>
<h3>50.3k</h3>
<p>Messages</p>
</div>
</div>
</button>
//and replace this html code. you can get what you want.
Should make each of those its own div, then style that div.
<button>
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Tech, Informatique et autres</h2>
</div>
<div class="forum-list-info">
<div><h3>5.1k</h3><p>Posts</p></div>
<div><h3>50.3k</h3><p>Messages</p></div>
</div>
</button>
Fix for this:
I edited my CSS classes to:
.forum-list-info {
grid-column-start: 2;
grid-column-end: 3;
margin-left: 17em;
}
.forum-list-info-numbers {
display:flex;
align-items:center;
}
.forum-list-info-text {
display:flex;
align-items:center;
}
.forum-list-info-numbers h3 {
margin-right:6.3em;
font-size:1.2em;
}
.forum-list-info-text p {
margin-right:5em;
font-size:1.2em;
color:#a6afb6;
}
And my HTML:
<button>
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-rocket fa-2xl"></i></div>
<h2>Account Boost</h2>
</div>
<div class="forum-list-info">
<div class="forum-list-info-numbers"><h3>5.1k</h3><h3>50.3k</h3></div>
<div class="forum-list-info-text"><p>Posts</p><p>Messages</p></div>
</div>
</button>
First, it is a loop in React and assumed as a mobile version.
Within each loop of DIV, it will have a photo(150*150px) on the left-hand side.
On the photo's right-hand side, it will have 3 div and each of the div will have a p (name, car and salary). At the bottom, it will have a line and its length will be the same as the parent div.
One special is that the pof car will have many words, when the width of the phone is not enough, it will go to the next line. If it is still not enough, it will become Tesla, Honda, BMW,...
it is the Sample Image
I really try many methods(float, position,...), but I still cant deal with it,
Here is the HTML part (using React)
<div className='loop'>
<img className='image' src={value.image}></img>
<div>
<p className='title'>{value.name}</p>
</div>
<div class>
<p className='car'>Tesla, Honda, BMW, Porsch,Mitsubishi, Mazda, Toyota, Jaguar, KIA </p>
</div>
<div>
<p>{value.salary}</p>
</div>
<div className='linebreak'></div>
</div>
Try with grid :
.loop {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: .5em;
width: 400px
}
.image {
grid-row: span 3;
}
.linebreak {
margin-top: .5em;
grid-column: span 2;
border: 2px solid #4f86f7;
}
.loop p, img {
border: 2px solid #777696;
margin: 0;
}
.title {
align-self: start;
}
.salary {
align-self: end;
}
<div class='loop'>
<img class='image' src="https://picsum.photos/100" />
<p class='title'>name</p>
<p class='car'>Tesla, Honda, BMW, Porsch,Mitsubishi, Mazda, Toyota, Jaguar, KIA </p>
<p class='salary'>salary</p>
<div class='linebreak'></div>
</div>
I have stack of dragable rows like the following.
and I am being asked to add titles (English keyword, French Keywords) on top of input boxes. like this second image. The major challenge here is to have the title aligned with input box while the screen is resized.(so the input boxes get resized, also there is hamburger, and garbage icons that are in the game)
Here is very simplified HTML codes for one row.
<div class="list-row">
<div class="handle">
<button type="button" class="icon-button">
<span class="sprite-grey-burger"></span>
</button>
</div>
<div class="stretch">
<input type="text" class="form-control"/>
</div>
<div class="stretch">
<input type="text" class="form-control"/>
</div>
<a href="#" class="delete-button">
<span class="sprite sprite-garbage-bin-black"></span>
</a>
</div>
and its simplified version of css
draggable-list .list-row {
display: flex;
}
.draggable-list .list-row .handle {
cursor: move;
display: flex;
}
.icon-button{
background-color: transparent;
border: none;
height: 38px;
}
.sprite-grey-burger {
// css to show a burger sign
}
.draggable-list .list-row .stretch {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
margin: 0 0.4em;
}
draggable-list .list-row .delete-button {
margin-left: 0.4em;
}
.sprite-garbage-bin-black {
// css to show garbage bin
}
I think, there should be flex solution, maybe, a new row on the top with the same flexes?!
but I don't know how!
I'm trying to have all images in my flex container have the same height using a 4:3 ratio, all of this being responsive.
When out of the flex container everything works well, but when put in it, it seems like it's the length of the title that dictates the width. I can't figure out why.
https://jsfiddle.net/ts8Lwp6g/
/* Just copying the guy in vid for now, trying to figure it all out hopefully it won't be too much of a bother responsive eh ffs , somethings I haven't copied, tryna do best */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
background-color: gray;
width: 80%;
margin: auto;
}
#cccccc {
background-color: orange;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.w {
background-color: red;
/* doesnt show hay */
display: block;
}
.views {
float: left
}
.rating {
float: right
}
.parentt {
max-width: 258px;
}
.containertt {
width: 100%;
position: relative;
padding-bottom: 75%;
/* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}
.containertt img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.figcaptionnnn {
/* background-color:red; */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%
}
.figcaptionnnn a {
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tete.css">
</head>
<body>
<div id="cccccc">
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman</a></span></br>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman vdfvdsv dvdfv ddffv dvddv dvdcffc dvdfcd</a></span><br/>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
</div>
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batan" >Tall french maid and batman</a></span></br>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman vdfvdsv dvdfv ddffv dvddv dvdcffc dvdfcd</a></span></br>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
</body>
</html>
Hi everyone Im new to HTML/CSS and was wondering how I can make something like
N_git_commit: 122e1 DC_git_commit: 1231
N_uptime:2190384987128421 DC_uptime: 2193821042141
into
N_git_commit: 122e1 DC_git_commit: 1231
N_uptime:2190384987128421 DC_uptime: 2193821042141enter code here
I currently have it set up so that each line is under one div
such as
<div>
<span> N_git_commit:201213 </span>
<span> DC_git_commit:1231 </span>
</div>
etc...
Any help would be greatly appreciated!
You can try CSS Tables
.random-table {
display: table;
border: 1px solid black;
}
.random-row {
display: table-row;
}
.random-row span {
display: table-cell;
padding: 5px;
}
.random-row > span:first-child {
background: #EEEEEE;
}
<div class="random-table">
<div class="random-row">
<span> N_git_commit:201213 </span>
<span> DC_git_commit:1231 </span>
</div>
<div class="random-row">
<span> N_uptime:2190384987128421 </span>
<span> DC_uptime: 2193821042141enter </span>
</div>
</div>