Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am looking for a way to stack card images one over another with CSS:
My code:
<ul class="stack">
<li class="card"><img src="4h.png"/></li>
<li class="card"><img src="9c.png"/></li>
<li class="card"><img src="5c.png"/></li>
</ul>
Is it possible to make it with just CSS?
You could use margin or padding to move the cards to the left.
Here is an example codepen
.card {
min-height: 300px;
width: 200px;
padding-left: 40px;
}
#card1 {
background-color: blue;
}
#card2 {
background-color: red;
}
#card3 {
background-color: green;
}
<div id="card1" class="card" />
<div id="card2" class="card" />
<div id="card3" class="card" />
You can use CSS to give your cards absolute positioning. For each card in the HTML, use inline CSS to assign a left position and a z-index position in the stack (e.g. 0 for bottom card, 1 for the card above it, etc.). Make sure you remove your list bullets if you see them.
.stack {
list-style-type: none;
}
.card {
position: absolute;
}
<ul class="stack">
<li class="card" style="left:25px;z-index:0;"><img src="https://picsum.photos/seed/1/150/200"></li>
<li class="card" style="left:50px;z-index:1;"><img src="https://picsum.photos/seed/2/150/200"></li>
<li class="card" style="left:75px;z-index:2;"><img src="https://picsum.photos/seed/3/150/200"></li>
</ul>
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 days ago.
Improve this question
Is it preferable to use selectors or classNames for nested code in CSS? In the example below, where there are parent divs with text inside, is it better to just use selectors to style the children? Or should they have classNames? Does it matter? And if it matters, is it because of readability/clean code, performance/optimization or something else?
Example 1 - using className:
Html
<div className="flexbox-parent">
<div className="flexbox-header">
<h1 className="primary-title">Title</h1>
</div>
<div className="content">
<h3 className="tertiary-title"> Tertiary title </h3>
<p className="text-content"> A paragraph with some text</p>
<br/>
<p className="text-content"> A paragraph with some text</p>
</div>
</div>
Css
.flexbox-parent {
display: flex;
justify-content: center;
.flexbox-header {
display: flex;
justify-content: center;
.primary-title {
font-size: 2rem;
color: grey;
}
}
}
Or example 2 - using selectors:
Html
<div className="flexbox-parent">
<div className="flexbox-header">
<h1>Title</h1>
</div>
<div className="content">
<h3> Tertiary title </h3>
<p>A paragraph with some text</p>
<br/>
<p>A paragraph with some text</p>
</div>
</div>
css:
.flexbox-parent {
display: flex;
justify-content: center;
.flexbox-header {
display: flex;
justify-content: center;
h1 {
font-size: 2rem;
color: grey;
}
p {
font-size: 0.8rem;
color: green;
}
}
}
Which is better?
One thing I would say, is that you should read up on specificity within CSS. Try to avoid nesting classes at all costs.
There isn't really a wrong or right way of doing what you want to achieve, it'll be opinions, but read here: https://css-tricks.com/specifics-on-css-specificity/
It'll help you avoid running into problems later.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I successfully created the grid, with the CSS display:grid; property, like this:
1 2
3 4
5 6
But I'm struggling with creating the offset, like this:
http://share.activ.is/Yjy8xZ
Anyone?
Here is the code:
.grid-container {
display: grid;
grid-template-columns: auto auto;
padding: 10px;
}
.grid-item:nth-child(2n) {
border: 2px dashed red;
margin-top: 10px;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I'm super new to the world of coding, so please bear with me ;)
I want to know if I could use a flexbox around an image to make it responsive rather than the "img-responsive" class?
I would imagine this would also be the better option for resizing a box that has an image and text in it?
B.
Responsive image manipulation with flex properties
For production level code we have to add CSS Reset Code
.container {
max-width: 1200px;
display: flex;
align-items: center;
-webkit-justify-content: center;
/* Safari */
justify-content: center;
}
.item {
padding: 10px;
}
img {
width: 100%;
height: auto;
display: block;
}
<div class="container">
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image1">
</div>
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image2">
</div>
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image3">
</div>
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image4">
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I want to have a paragraph of text on the right hand side of my page. And floating up against it an image like in this picture.
My logic was to give "Left div" a float:left and a defined width, And give Right div a float:right and a defined width. Then give my image a float:right.
What I end up with however is the image appears to the right of the text. This doesnt make sense to me as the image is outside the defined width of the div its in.
here's the answer: http://jsbin.com/iCowUPo/1/edit
Screen Capture:
HTML:
<div class="main">
<div class="left">
<img src="http://placekitten.com/200/200" />
</div>
<div class="right">
</div>
<div style="clear:both;"></div>
</div>
CSS:
.main{
background-color:#eee;
width:500px;
height:300px;
overflow:auto;
}
.left{
width:300px;
float:left;
height:300px;
background-color:#aaa;
overflow:auto;
}
.left img{
float:right;
}
.right{
width:200px;
float:right;
height:300px;
background-color:#bbb;
}
Concept:
The trick is that if you float:right your image, you need to clear that float too. I did that by applying overflow:auto; to my left div which makes perfect sense.
Like this http://jsfiddle.net/XmWKw/?
The html:
<div class="main">
<div class="left">
<img src="http://placehold.it/200x200" />
</div>
<div class="right">blah blah blah</div>
</div>
The css:
.left {
float: left;
width: 79%;
margin-right: 1%;
}
.left img {
float: right;
}
.right {
float: right;
width: 20%;
}
I'm displaying a list of links for voting, similar to Hacker News. I want the following layout for each link:
The gray boxes highlight the four divs for each link listed.
The key thing I need to do is get the "other text" div to be left-aligned with the link headline text.
I could define the width of the rank and arrow divs (the two little boxes), of course, and then indent the other text div accordingly. But this implementation has some downsides relative to my specific needs -- which I won't go into -- and more importantly, I just feel like there should be a more elegant way to achieve this. Something like a clear bottom for the rank and arrow divs, or maybe a property of the link headline div that tells the following div to appear directly below it.
Any ideas?
Why not just put the two right containers in one?
<div class="rank">9</div>
<div class="arrow">arrow</div>
<div class="content">
<div class="row1">Link headline text</div>
<div class="row2">other text</div>
</div>
<br class="clear" />
style:
.rank, .arrow, .content {
float: left;
}
.clear {
clear: left;
}
EDIT: Demo on jsfiddle
Solution 1
It seems that all four boxes for each item are in one bigger box (li maybe), so I would use:
<li>
<span class="num"></span>
<span class="upvote"></span>
<span class="main">main text</span>
<span class="add">more text</span>
</li>
and
.add { clear: both; float: right; }
Solution 2
Other solution would be padding on parent of each group of four and then negative margin-left together with float: left on number and upvote links.
Anything better can be tailored to your needs, but we need to see HTML :)
I'd go for a combination of the answers given by #Adam and #Czechnology, and use a list to display the content, and put the Link headline text and other text boxes into a single parent div. Like so:
HTML:
<ol class="headlines">
<li class="news-item">
<div class="rank">9</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
<li class="news-item">
<div class="rank">10</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
</ol>
Style:
ol.headlines {
display:block;
list-style-type:none;
list-style-position:outside;
margin:0;
padding:0;
}
div {
border:1px solid #00F;
}
ol.headlines .rank, ol.headlines .arrow, ol.headlines .content {
float:left;
}
.news-item {
clear:left;
}
ol.headlines h2,
ol.headlines .additional-content {
display:block;
}
You can find a sample of this here: http://jsfiddle.net/DEWtA/
Note that you'll need to alter the CSS to your needs with regards to the size of the divs and such.
Why not provide a wrapper element for the link headline text and the other text? Then float the wrapper instead.
http://jsfiddle.net/userdude/H3qPt/
HTML
<div class="linkblock">
<span class="score">100</span>
<span class="arrow">^</span>
<div class="linkdata">
<div class="linkurl">Link headline</div>
<div class="linktext">Other text</div>
</div>
<br/>
</div>
CSS
Some of this is just for demonstration.
.linkblock .score,
.linkblock .arrow,
.linkblock .linkdata {
float: left;
}
.linkblock br {
clear: both;
}
div, span {
border: 2px solid #ddd;
margin: 4px;
padding: 3px;
}
div.linkdata {
border: none;
padding: 0;
margin: 0;
}
You can contain the those two things into divs and then for the left div with the voting stuff, label the div with a class, "vote", and have the following CSS:
.vote {
margin: 0 0 100%;
}
I haven't tested it, but it should work like a charm.
Caveat: Doesn't work well with responsive design :(
The best solution would probably be to wrap 'link headline text' and 'other text' within a 'div' and use 'overflow: hidden;' on it.