I am trying to write a description below an image on a html page, but the text is automatically aligned to right side of the image.
I am a beginne, please help!
Thamks in advance!
.images {
margin-left: auto;
margin-right: auto;
width: 40%;
}
#my_freaking_id {
color: red;
font-size: 50px;
}
<h1>Pictures</h1>
<div class="images">
<img src="https://picsum.photos/200/200?random">
<p>Image 1</p>
</div>
<div class="images">
<img src="https://picsum.photos/200/200?random">
<p>Image 2</p>
</div>
<div id="my_freaking_id">
It has been a long day, without you my friend and I will tell you all about it when I see you again!<br>I hope our friendship lasts forever!
</div>
Maybe just add to css?
.images img, .images p {
display:block;
}
Related
I'm trying to position two divs next to eachother, and keeping the mobile visitors in mind.
The problem: Instead of floating next to eachother, when there's a good amount of text used in the div, it goes underneath.
Here's an example:
.codeblock {
width:500px;
}
.left{
float: left;
}
<div class="codeblock">
<img src="https://placehold.it/307x322" class="left" style="width:125px">
<div class="left">
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
Why is this happening? Is there a solution, without using fixed values (excluding the image style width)?
Float only the image
.codeblock {
width:500px;
}
.left{
float: left;
margin-right:10px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322" class="left" style="width:125px">
<div >
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
Another option would be to use flexbox instead of float. It will be a little bit more work, but it is a new feature and always good to try new things.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
UPDATE
Like this: no class. You inform the main class that it is flexbox and its son will have a padding do separate them.
.codeblock {
display: flex;
width:500px;
}
.codeblock > * {
padding: 0 10px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322">
<div >
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
Considering mobile users I would do this that way with flex-wrap and min values for content
.codeblock {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
max-width:500px;
}
.codeblock>img {
flex: 0 0 125px;
width: 125px;
height: auto;
margin-right: 20px;
}
.codeblock>div {
flex: 1 1 200px;
min-width: 200px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322">
<div>
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
So this is probably an easy answer, but my image which is supposed to be sitting in the middle of the page is slightly off and it's irritating me a lot.
HTML:
</section>
<section class="img_section">
<div>
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
CSS:
img section{
float:center;
text-align:center;
}
I've tried removing float, and taking it out of a section entirely, but it won't budge.
Any help would be amazing
there's no such thing as float: center;
also img section doesn't style image within section.
you could try either:
1:
img {
display: block;
margin: 0 auto;
}
2:
section div {
text-align: center;
}
section div img {
display: inline-block;
}
depending on your other styles
This is simple to answer.
#div1 {
text-align: center;
}
</section>
<section class="img_section">
<div id="div1">
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
The text-align: center; property is going to make all the elements inside the div centered. Also, it is better if you select the div with a specific class or ID. This is going to go on all div elements on the page.
this is much more simple. just include center tag as
<center>
<section>
<div>
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
</center>
try in css:
.img_section img{
text-align:center;
}
html:
<section class="img_section">
<img src="images/menu.jpg" alt="menu" align="center">
</section>
I like to use
margin: 0 auto;
for centering
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 8 years ago.
Improve this question
Please i have make something but when I add more one line i get the error
Style code
#wrapper {
max-width: 980px;
margin: 0 auto;
padding: 0 5%;
}
#posts {
margin: 0;
padding: 0;
list-style: none;
}
#posts li {
float: left;
width: 28%;
margin: 2.5%;
background-color: #2183B9;
}
#posts li img {
max-width: 100%;
}
#posts li a{
text-decoration: none;
}
#posts li a p{
font-family: 'Gloria Hallelujah', cursive;
color: #ccc;
text-decoration: none;
margin: 0px;
padding: 5%;
font-size: 0.75em;
}
When i delete some words it's back to his place .... Please who can help me to fix the error and thank you all so much
That’s how float works.
If you want them all aligned by their top edge, then don’t use float, but display:inline-block and vertical-align:top.
If you don't mind some of the excess text being hidden you could use a fixed height and set overflow to hidden.
This is happening because the text you are including is increasing the size of the anchor tag used for the text pushing the other post down below. Make the position of the anchor tag that you are using for displaying the text absolute and fix it to the bottom of every post relative to the post bottom:0px; and set a box-sizing property on the post box so that the anchor tag if grows in size grows above and not below.
Here's complete working code for a similar example. Hope this simplifies your problem :)
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 0 auto;
}
.post{
display: inline-block;
margin: 2em;
position: relative;
}
.caption{
position: absolute;
bottom: 0px;
background-color: blue;
width: 100%;
padding: 0 2em;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image and this one is quite long for it.</p>
</div>
</div>
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image and this one is very very very very very long and should be taken care of.</p>
</div>
</div>
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image</p>
</div>
</div>
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image</p>
</div>
</div>
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image</p>
</div>
</div>
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image</p>
</div>
</div>
</div>
</body>
</html>
Keep in mind the images used should be optimised and should be of same sizes otherwise the code will break.
So I'm trying to make a user comment thing in HTML. I would like it to look similar to vimeo's comments, with the user icon and the text aligned to the right of it. Here is my markup(using a bootstrap container but i dont really think that is the problem):
<div class="comment">
<img src="{{comment.poster.profile.avatar.url}}" alt="...">
<span>poster name time</span>
<p>comment body</p>
</div>
and my CSS:
.comment{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
text-align: left;
width: 800px;
padding: 10px;
background-color: #secondary;
img{
width: 55px;
height: 55px;
vertical-align: top;
}
The <span>poster name time</span> aligns with the top right of the image just how I want it to, but the body text ends up under the image, not under the info like where I want it to be. Here is an image of it, arrow is pointing where I want the text to go:
Any idea how I should do this? I'm real bad at aligning things, so sorry if this is a simple mistake. Thanks.
Here is how you canc achieve this:
<div class="pic">
<img src="http://placekitten.com/100/100">
</div>
<div class="pic-meta">
<span>
poster name
time
</span>
<span class="comment">comment</span>
</div>
and css:
.pic, .pic-meta {
float: left;
}
.comment {
display: block;
}
http://jsfiddle.net/p4K7u/
I am trying to align an image and text within a div so it looks like the following
IMAGE TEXT
However when I get them aligned as such, the background colour of the div no longer appears.
Can anyone suggest what I am doing wrong?
HTML:
<div class="introduction">
<div class="image">
<img src="">
</div>
<div class="text">
<p>Text</p>
<p>Good luck!!</p>
</div>
</div>
css:
.introduction {
margin: 0 50px;
padding: 20px;
background-color: #FFFFFF;
color: #000000;
-moz-border-radius: 10px;
border-radius: 10px;
}
.image {
width: 30%;
float: left;
}
.text {
width: 70%;
float: left;
}
Putting the two floats in there side by side makes the parent container's height effectively 0. You can put a div with a style="clear:both;" before the parent's closing tag and you will get your background back.
<div class="introduction">
<div class="image">
<img src="" />
</div>
<div class="text">
<p>
Text
</p>
<p>Good luck!!</p>
</div><div style="clear:both;"></div></div>
Something like this may achieve what you want:
<style>
.introduction{
margin:0px;
padding:5px;
background-color:orange;
}
.introduction img{
float:left;
padding:10px;
}
.introduction p{
padding-left:50px;
background-color:blue;
}
</style>
<div class="introduction">
<img src="img/can_25.png" />
<p>Text</p>
<p>Good Luck</p>
</div>
Since your p's aren't floated, they will hold your div open .. depending on the size of your image.
I would suggest you 2 solutions:
1) If you want to your output look like this:
IMAGE TEXT
IMAGE TEXT
TEXT
HTML:
<div class="whole">
<img class="ib" src="myimg.png" alt="my img" />
<p class="ib">my text my text my text my text my text my text my text is so short I will die alone</p>
</div>
CSS:
.ib{ display:inline-block;}
.whole{ vertical-align:top}
.ib img{width:30%; border:0;}
.ib p{width:70%;margin:0;padding:0;}
2) or like this:
IMAGE TEXT TEXT
TEXT TEXT
HTML:
<img src="myimg.png" alt="my img" class="leftimg" />
<p>my text my text my text is so short I will die alone</p>
CSS:
.leftimg {
float:left;
margin-right:5px;
}
DEMO: http://jsfiddle.net/goodfriend/b66J8/37/