The image is basically exactly what I want. However, I need the text paragraph to be aligned with the top of the image. There must be an easy way to get it to move up. I have no idea what it is though? Thanks!
#homePost {
width:50%;
height:auto;
box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
margin-right: 25px;
margin-bottom: 20px;
}
<div class="well well-sm" style="border: 2px solid chartreuse; background: white;">
<div class="row">
<div class="col-sm-12">
<p><h4>Toronto Maple Leafs Sucking again this year.</h4></p>
<p>Date Posted: 24th of June, 2016</p>
<p style="padding-top: 5px;"> </p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p style="padding-left: 20px; padding-right: 20px;">
<img style="float:left" src="http://i.stack.imgur.com/E0kmH.png" id="homePost">
<span style="float:right">
<p>TEXT GOES IN HERE </p>
</span>
</p>
</div>
</div>
</div>
add margin-top: 20px;
Like this:
#homePost {
width: 50%;
height: auto;
box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
margin-right: 25px;
margin-bottom: 20px;
margin-top: 20px;
}
See This Image
add a class to the text like align-top then use vertical-align: text-top; which will look like this .align-top {
vertical-align: text-top;
}
Related
I am trying to create 3 cards that stand at the bottom of the webpage but the 3 cards are overlapping. Can you help me find my mistake please? :)
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
height: 455px;
cursor: pointer;
position: absolute;
margin-left: 4%;
bottom: 10px;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
The problem was caused by the position: absolute; style in your CSS. Basically, you set all 3 cards to the same position which is why they overlapped.
I also changed your card's height to min-height. This is because the text was flowing out of the card and min-height would prevent this.
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
min-height: 455px;
cursor: pointer;
margin-left: 4%;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
remove "position: absolute" and things would work fine. Or if you're trying to display somethign else?
i was making a page of products and i'm having some difficulty, the text makes the box bigger and then disturbs the rest and looks just like the picture. I thank anyone who can help, as long as loyate remains responsive, that aligns according to the resolution.
thanks
normal
decreases resolution and changes position
<section class="col-xs-10 col-xs-offset-1 boxContent destaques">
<div class="col-xs-12">
#foreach ( $produtos as $produto )
<div class="col-xs-12 col-sm-4 col-md-3 boxProduto">
<!--<a href="{{ route('produto', $produto->id_produto) }}">-->
<a href="{{ route('produto', $produto->id_produto) }}">
<div class="col-xs-12 imgProd ">
<img src="{{ $produto->url_imagem }}" class="img-responsive" >
</div>
</a>
<span style=" overflow-wrap: break-word;
padding: 15px;
word-wrap: break-word;
margin: center;">
{{ $produto->nome }}
</span>
<div class="col-md-12 preco">
<p>{{ $produto->pvp }}€</p>
</div>
<div class="col-xs-12 detalhes">
DETALHES
</div></div>
</div>
#endforeach
<!--</a>-->
</section>
<style>
.boxProduto {
padding: 0px !important;
margin: 10px 1%;
border: 1px solid #ccc;
border-radius: 2px ;display: block;
text-align: center;
}
.destaques {
h1 {
width: 60%;
}
.hr {
width: 21%;
}
.boxContent {
padding: 15px 25px !important;
margin-bottom: 15px;
background: white;
box-shadow: 0px 0px 11px #ddd;
width: 100%;
float: left;
margin-bottom: 0px;
text-align: center;}
</style>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I trying to make a 2 parallel div in center to show the user info. Left div contain the user image and the name while the right div show the login details such as login name, position, department and etc. I been try set the line height same as my div height but the result is not what i want, or may be the line height doesn't fix the issue or i using the wrong way to achieve this. Beside this, I have try set the both div to inline-flex and make the 2 div float left. This can make the 2 div in parallel but not in the center of the page. Any better way to achieve this?
my code
<div style="text-align: center; width: 80%; margin: auto;">
<div
style="
display: inline-block;
width: 240px;
height: 270px;
text-align: center;
box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);
"
>
<img
id="pf-img"
style="display: block; text-align: center; margin: 21px 45px 0px; border-radius: 50%; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);"
src="/assets/images/avatar_v3.png"
alt=""
width="150px"
/>
<div style="margin: 40px 0px;">
<span>Name</span>
</div>
</div>
<div style="display: inline-block; margin-left: 30px;">
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
</div>
</div>
My result:
my result image
I am not sure why you are bringing up flex when you are not using such CSS feature.
Adding the CSS property vertical-align: top; to left column should do the trick.
<div style="text-align: center; width: 80%; margin: auto;">
<div
style="
display: inline-block;
width: 240px;
height: 270px;
text-align: center;
vertical-align: top;
box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);
"
>
<img
id="pf-img"
style="display: block; text-align: center; margin: 21px 45px 0px; border-radius: 50%; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);"
src="/assets/images/avatar_v3.png"
alt=""
width="150px"
/>
<div style="margin: 40px 0px;">
<span>Name</span>
</div>
</div>
<div style="display: inline-block; margin-left: 30px;">
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
</div>
</div>
Okay, before that I have some tips:
1 ° Avoid in-line styling
This makes the HTML code confusing, difficult to read
2 ° Use CSS classes
Classes allow you to apply the same style to several elements at the same time
3 ° Use correct marking
Divs are generic containers for other elements. They serve to group and separate elements of the page. You have only used divs to structure the entire page, not taking advantage of the semantic meaning of other elements of HTML.
Having made these observations, the solution I propose is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.user-info-container {
display:flex;
}
.user-img {
margin-right: 1rem;
}
.user-img img {
width: 100%;
height: auto;
}
.user-info-badge {
display:flex;
align-items:center;
box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);
padding: 0.5rem 1rem;
margin-bottom: 1rem;
}
.user-info-badge:last-child {
margin-bottom: 0;
}
.user-info-badge h3 {
width: 150px;
text-align:left;
}
</style>
</head>
<body>
<div class="user-info-container">
<div class="user-img">
<img src="/assets/images/avatar_v3.png">
</div>
<div class="user-info-badges">
<div class="user-info-badge">
<h3>Username</h3>
<span>teste183</span>
</div>
<div class="user-info-badge">
<h3>Email</h3>
<span>teste.teste#teste.com</span>
</div>
<div class="user-info-badge">
<h3>Nascimento</h3>
<span>05-02-2020</span>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 5 years ago.
I'm working on a page that uses Bootstrap and have used this to define columns on this Codepen pen: https://codepen.io/smifaye/pen/GmeQrV
However one thing I can't seem to figure out is how to keep the height of the boxes uniform. I've set a min-height value for these boxes but my mind has gone blank as to how to make all divs resize at once.
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0;
min-height: 250px;
}
Also I'd like the buttons to stay at the bottom of the div but can't figure this out either :(
Any help would be massively appreciated.
(The menu area on the right is part of the design of the website and can't be changed)
Used Flexbox you can set equal height in div
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0;
//min-height: 250px;
height: 100%;
}
.button {
min-height: 36px;
height: auto;
width: auto;
padding: 0 36px 0 36px;
border: 2px solid #00019F;
font-size: 1em;
color: #FFFFFF;
background-color: #00019F;
border-radius: 5px;
text-decoration: none;
}
.button:hover {
background-color: #2D389C;
cursor: pointer;
}
.button:focus {
border: 2px solid #FF9900;
outline: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row " style="margin: 0px;">
<div class="col-md-4">
Menu area that can't be removed
</div>
<div class="col-md-8">
<div class="row row-eq-height">
<div class="col-sm-6 col-md-4">
<div class="recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Your property</h3>
<p style="padding: 10px 10px 0px;"><strong>Find</strong> your collection days</p>
<p style="padding: 0px 10px;"><strong>Report</strong> a missed collection</p>
<p style="padding: 0px 10px;"><strong>Order</strong> a new recycling bin, box or bag</p>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/property"> <button class="button">Find, report, order</button> </form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class=" recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Cleansing issues</h3>
<p style="padding: 10px 10px 0px;"><strong>Report</strong></p>
<ul>
<li>Dumped rubbish</li>
<li>Dog fouling</li>
<li>Graffiti</li>
<li>Other</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/street"> <button class="button">Report</button> </form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Additional information</h3>
<ul style="padding-top: 10px;">
<li>Frequently asked questions</li>
<li>Communal collections</li>
<li>Large household item collections</li>
<li>More</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="http://www.camden.gov.uk/ccm/content/environment/waste-and-recycling/recycling-rubbish-and-reuse/"> <button class="button">View</button> </form>
</div>
</div>
</div> </div>
</div>
you can use display:flex on col-md-8 to equal the heights of the col-md-4 then add height:100% to recycling plus some padding-bottom to make 'room' for the buttons
then add position:absolute and position the form at the bottom of every recycling box
P.S. your HTML is a mess. inline styles, col-12 inside col-8 . columns inside columns without any rows that's not correct . see here > http://getbootstrap.com/examples/grid/ . columns should be nested inside ROW's and then inside other columns eg
<div class="col-md-8">
.col-md-8
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
for your solution see snippet below or jsFiddle
.col-md-8 {
display: flex;
}
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0 0 60px;
height: 100%;
position: relative;
}
.button {
min-height: 36px;
height: auto;
width: auto;
padding: 0 36px 0 36px;
border: 2px solid #00019F;
font-size: 1em;
color: #FFFFFF;
background-color: #00019F;
border-radius: 5px;
text-decoration: none;
}
.button:hover {
background-color: #2D389C;
cursor: pointer;
}
form {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 15px;
text-align: center;
}
.button:focus {
border: 2px solid #FF9900;
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row" style="margin: 0px;">
<div class="col-md-4">
Menu area that can't be removed
</div>
<div class="col-md-8">
<div class="col-sm-6 col-md-4">
<div class="col-md-12 recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Your property</h3>
<p style="padding: 10px 10px 0px;"><strong>Find</strong> your collection days</p>
<p style="padding: 0px 10px;"><strong>Report</strong> a missed collection</p>
<p style="padding: 0px 10px;"><strong>Order</strong> a new recycling bin, box or bag</p>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/property">
<button class="button">Find, report, order</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="col-md-12 recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Cleansing issues</h3>
<p style="padding: 10px 10px 0px;"><strong>Report</strong></p>
<ul>
<li>Dumped rubbish</li>
<li>Dog fouling</li>
<li>Graffiti</li>
<li>Other</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/street">
<button class="button">Report</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="col-md-12 recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Additional information</h3>
<ul style="padding-top: 10px;">
<li>Frequently asked questions</li>
<li>Communal collections</li>
<li>Large household item collections</li>
<li>More</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="http://www.camden.gov.uk/ccm/content/environment/waste-and-recycling/recycling-rubbish-and-reuse/">
<button class="button">View</button>
</form>
</div>
</div>
</div>
</div>
If you do not want:
Javascript
CSS3
Then you can use this:
.table {
display: table;
width: 100%;
border-spacing: 10px 0;
}
.cell {
position: relative;
display: table-cell;
border: 1px solid #f00;
padding: 15px 15px 40px;
}
button {
position: absolute;
bottom: 15px;
right: 15px;
}
<div class="table">
<div class="cell">
<div class="inner">
<strong>Title</strong>
<p>Some text.</p>
<button>Button</button>
</div>
</div>
<div class="cell">
<div class="inner">
<strong>Title</strong>
<p>Some text.</p>
<button>Button</button>
</div>
</div>
<div class="cell">
<div class="inner">
<strong>Title</strong>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<button>Button</button>
</div>
</div>
</div>
Of course, you can target the table and cell class with media queries to disable it for phones for example.
If you cannot use JS/jQuery, then you should set both min-height and max-height for these div's.
e.g.
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0;
min-height: 250px;
max-height: 250px;
}
Im trying to display 4 pictures with a title, description and a delete link on it. I cannot get the link to float right in the box I have.
here's the html
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info alignright">Delete</span>
</div>
</div>
</div><!--end container -->
here's the css
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.img-info {
display: block;
}
.alignleft {
float:left;
}
.alignright {
float:right;
}
The html of the picture box gets repeated 3 more times. How can I get the third span link float to the left? Any help would be great.
Adding margin-top: -29px; should achieve this.
DEMO http://jsfiddle.net/4RZJx/1
HTML:
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info">Delete</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
</div><!--end container -->
CSS:
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.img-info {
display: block;
}
.alignleft {
clear: both;
float:left;
}
.alignright {
float:right;
margin-top: -29px;
}
First of all, where are you using .alignleft in your code provided?
Secondly, the .alignright span has two classes: img-info and alignright. For img-info you have display-block. This is redundant, as the float property will make an element display-block.
All you need to do is add overflow: hidden to your main div (image-container). The float applied to the link makes it act as though it's not in the same "layer". Adding overflow-hidden will fix this problem. Jsfiddle - http://jsfiddle.net/piedoom/6jTyD/
Try this really quick fix, however, you may want to modify the widths and such:
DEMO: http://jsfiddle.net/4RZJx/
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<div class="info-container">
<div class="alignleft">
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete
</span>
</div>
</div>
</div>
</div><!--end container -->
CSS:
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.info-container{
overflow: hidden;
}
.img-info {
display: block;
}
.alignleft {
float:left;
}
.alignright {
float:right;
}
Use text-align:
.alignleft {
text-align: left;
}
.alignright {
text-align: right;
}
float is better used for when you want a image to go to the right, and want text to flow around it etc. As it also cause other layout problems, you might as well try text-align.
http://jsfiddle.net/4RZJx/3/