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/
Related
I'm making a product landing page and I'm trying to make it so that there's a paragraph with an image on the right. I put float: right; but it doesn't seem to work. It worked with my navbar though.
Here's the code:
.device {
width: 400px;
height: 500px;
margin-bottom: 0x;
float: right;
}
<div class="info">
<h2 id="the-benefits" class="info-header">The benefits<h2>
<p id="the-benefits"> Text about benefits.</p>
<img class="device" src="image.jpg" alt="text">
</div>
float right is designed to do what you want - to float a picture on the right and let any text not just sit to the left of it but to flow underneath it if it is too long.
However, by the time you have the h2 and the div painted it's too late as the content has moved onto a new line. If you put the float before them then the system knows what space to allow for the image and the h2 and div will sit to its left.
.device {
width: 400px;
height: 500px;
margin-bottom: 0x;
float: right;
}
<div class="info">
<img class="device" src="https://picsum.photos/id/1015/400/300" alt="text">
<h2 id="the-benefits" class="info-header">The benefits<h2>
<p id="the-benefits"> Text about benefits.</p>
</div>
I start to learn HTML and on my website in the middle of the top there should be a heading in the center. In the left top corner, there is a picture.
If I want to set the heading with align="center"; into the middle I can only set it into the middle between the right end of the picture and the right end of the Display...
I hope it's understandable and someone can help me!
The code is:
<div style="float:left; width=600px; height=152px;">
<img src="bilder/logo.jpg" height="54px" width="214px" hspace="0" vspace="0"/>
</div>
<p>
<h1 align="center" style="margin-top:15px; margin-bottom:20px;"><u>Peter Möhle</u></h1>
</p>
enter image description here
It should look like the Picture at the Bottom but this was made mith margin-left and isnt a fixed Position if i use another browser or display
I've updated your snippet as you are using deprecated tags. Happy to hear and clear your doubts, if you have any.
Ref: W3 CSS, W3 HTML
.nav {
width: 100%;
}
.logo-holder {
float: left;
height: 50px;
width: 100px;
}
.logo {
height: 100%;
width: 100%;
}
.nav-text {
text-align: center;
text-decoration: underline;
}
<div class="nav">
<div class="logo-holder">
<img class="logo" src="bilder/logo.jpg" />
</div>
<div class="nav-text">
<h1>Peter Möhle</h1>
</div>
</div>
You can use text-align: center; to centre text, but as mentioned in the comments you are using some deprecated tags.
<h1 style="margin-top: 15px; margin-bottom: 20px; text-align: center; text-decoration: underline;">Peter Möhle</h1>
It's even better to remove the style attribute and create a css file to put the styles in.
CSS
h1 {
margin-top: 15px;
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
}
I'd also change the div markup to
<div style="float: left; width: 600px; height: 152px;">
<img src="bilder/logo.jpg" style="height: 54px; width: 214px;">
</div>
I've used padding to the left now using relative value
<div style="float:left; width=600px; height=152px;">
<img src="bilder/logo.jpg" height="54px" width="214px" hspace="0" vspace="0"/>
</div>
<p>
<h1 style="margin-top:15px; margin-bottom:20px; padding-left: 50% "><u>Peter Möhle</u></h1>
</p>
Trying to float an image to the left of some text. The image needs to be linked to something. The link, however, is only working on parts of the image.
See code here: http://jsfiddle.net/JaUXp/
#rightImg {
float: right;
width: 45%;
margin: 0 0 15px 15px;
}
#leftTxt {
position: relative;
}
<div id="rightImg">
<a href="http://google.com">
<img src="myimg.jpg" />
</a>
</div>
<div id="leftTxt">
<p>my text</p>
</div>
The reason my left DIV had a position property set to "relative" was because of normalize.css. My solution was to set the position property on the DIV to "static".
you maybe looking for something as follows:
http://jsfiddle.net/DJruJ/
HTML
<div id="container">
<a href="http://google.com" target="_new">
<img src="http://image.yaymicro.com/rz_512x512/0/4fd/pile-from-dominoes-on-black-background-4fd987.jpg" />
</a>
</div>
<div id="description">
<p>One late author did indeed venture to assert, and to prove, that the tendency to move, the power or force that produces actual motion, is </p>
</div>
css
#container {
float: left;
width: 45%;
margin: 0 10px 15px 0;
}
#container img{
width:100%;
}
#description {
position: relative;
float:left;
width:50%;
}
you are using "rightImg" and "leftTxt" as element id's. Its not recomended to use such kind of naming conventions because in future your left text may become right text and vice versa your image. in that case it might be a bit confusing
hope this helps
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/
I'm tyring to put an 'edit' link on the same line as a heading, off the right of the page and the link text aligned with the bottom of the heading text. I want something like:
want
My first attempt was:
<div>
<div style="float: left; width:600px;background-color: red">
<h1>Something</h1>
</div>
<div style="float: left; background-color: yellow ">
<a href=#>Edit</a>
</div>
</div>
but that gave me:
got
I've tried quite a few things to get the 'Edit' to be aligned along the bottom with the 'Something', but none seem to work.
Has anyone got any suggestions? Is wrapping everything in divs like this the wrong way to go about it?
Thanks in advance for any help.
Edit - arghh, sorry I mixed the two images the wrong way round. The text was correct though, I want the link text to be bottom aligned with the heading text. Fixed now.
Update
Thanks to those who made suggestions and comments.
I've come up with with a few more possibilities (although I realise in stepping back and asking if there's a better approach, in some options I've consequently relaxed the original spec somewhat):
Solution 1: similar to chipcullen's suggestion, but set width in outer div. This has the advantage of bringing the link to within the 600px width:
<div style="position: relative; width: 600px">
<h1>Solution 1</h1>
<a style="position: absolute; bottom: 0; right: 0;href="#">Edit</a>
</div><br/>
Solution 2: as with (1) but, but use my own class rather than H1, and allow the link to float right. This has the advantage (?) of not having to use position: absolute, but you still
need to set margin-top.
<div style="width: 600px">
<span class="myHeader">Solution 2</span>
<a style="float: right; margin-top:14px;" href="#">Edit</a>
</div><br/>
Solution 3: as with (2) but use h1 and override the display attribute. Has the advantage of making using of other attributes defined elsewhere on h1:
<div style="width: 600px">
<h1 style="display:inline;">Solution 3</h1>
<a style="float: right; margin-top:14px;" href="#">Edit</a>
</div><br/>
Solution 4: nest the link element in the h1, and style the link, in this case by specifying a
Twitter Bootstrap button:
<div style="width: 600px">
<h1>Solution 4
<a class="btn" style="margin-top:4px;float: right;" href="#">Edit</a>
</h1>
</div>
They all seem to work, has anyone got any thoughts on which is preferable? Solutions 2 - 4 I guess are a bit more fragile as the hard-wired margin-top setting depends on the h1 line height, but at the same time they feel a bit more concise to me.
You probably don't need the all of the div's. If you really want to get this to behave, you could always use position: absolute;
Markup:
<header>
<h1>Something</h1>
<a class="edit_link" href="#">Edit</a>
</header>
CSS:
header {
position: relative;
}
h1 {
width: 600px;
}
.edit_link {
position: absolute;
top: 0;
right: 0;
}
I'm not saying it's the only right way, but a way.
Try adding this css to the edit float
{
margin:0px;
padding:0px;
border:0px;
}
You could also use two classes for your <div> tag. such as #header and #header-right. It's what I usually use.
Example:
#header {
width: 98%;
min-width: 750px;
height : 45px;
margin : 0 auto;
padding-left: 1%;
padding-right: 1%;
padding-bottom : 4px;
color : #ffffff;
background: #999999;
border-bottom: 1px solid #000000;
}
#header-right {
padding-top: 10px;
padding-right: 10px;
float: right;
}
HTML:
<div id="header">
<h1 >MySite.com</h1>
<p>A site for me. Not you.</p>
<div id="header-right">
<p>Because who wants to share a website...</p>
</div>
</div>
This worked for me:
HTML:
<div class="header">
<h1>Title</h1>
<div>Edit</div>
</div>
CSS:
.header *{
display: inline-block;
}
.header {
text-align: left;
}
You could also set widths etc.
A much simpler way of doing it is:
<div>
<a style="float:right; clear:left" href=#>Edit</a>
<h1>Something</h1>
</div>
Be sure to put the heading after the link, so the link doesn't disappear into the html below that.