I want to make a CSS layout for comments.
So basically a comment block consists of 3 parts:
User photo on the left
Comment header (consisting of user name floated left and comment data floated right)
Comment body (floating user photo)
http://dabblet.com/gist/10660127 this is what I have so far.
The problem that I cant make a proper comment heading. Obviously I want to align it properly, like if I put many brs after .comment-title (but not the best solution, here I show the desired result: http://dabblet.com/gist/10660333).
Any good solution for that markup?
You need to add clear: both (or maybe clear: right, depending on how it behaves with the avatar image) to your body class.
You can give it some padding-top, too.
I believe you're just looking to float user-photo left? Here's what I came up with real quick: http://dabblet.com/gist/10661017
Separate left content from right content explicitly: user-photo | user-info.
Apply margin-left: width(.user-photo) + some px
Make .title display: table
See example in Fiddle
HTML:
<div class="user-photo"></div>
<div class="user-info">
<div class="title">
<h3 class="pull-left">User name</h3>
<h3 class="pull-right">11.02.2014</h3>
</div>
<div class="body">
Aenean vel ornare sapien. Suspendisse cursus pulvinar mattis. Donec magna odio, feugiat sed blandit vitae, fermentum eget ante. In iaculis nulla pretium malesuada porttitor. Ut adipiscing purus at pulvinar ultricies. Vestibulum lacinia erat felis, vitae faucibus justo dictum quis. Proin at erat ut turpis mollis aliquet. Aenean ornare nunc non elit sodales bibendum. Donec ac blandit turpis. Nunc faucibus in sapien in vehicula. Sed quam arcu, bibendum in imperdiet consequat, suscipit quis metus. In non est porttitor, adipiscing justo vitae, tempus nisi.
</div>
</div>
Diff CSS:
.comment .user-info {
margin-left: 120px;
}
.comment .title {
display: table;
width: 100%;
}
Related
Totally new to HTML/CSS. I've got the top image/logo done, and the header. How do i get that text formatted like in the picture (3 columns)?
I only tried using table with 3 columns. However i think its harder to style it considering its a table. Like max column width/height etc.
Thanks in advance!
Click for the image
perhaps the easiest way to do this is with the css columns attribute:
div{
column-count:3;
column-gap:100px;
}
<div>this is some random text we want to enter into our html page
</div>
but the better way to do this is with flex
#container{
display:flex;
justify-content:space-between;
}
<div id = 'container'>
<div class='cols'>this is some text</div>
<div class='cols'>we want to add</div>
<div class='cols'>to our html page</div>
</div>
if you want to add a header and a footer you can try:
#container{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#cols{
display:flex;
justify-content:space-between;
width:100%;
}
<div id='container'>
<div id = "header">my Header</div>
<div id='cols'>
<div>some random</div>
<div> we want to add</div>
<div>to out html page</div>
</div>
<div id ='footer'>my Footer</div>
</div>
For the three text sections, you need three child divisions in one parent division.
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
Style it this way:
.parent{
display: block;
width: 100%;
margin: 0px auto;
text-align: center;
}
.child{
display: inline-block;
width: 30%;
height: auto;
margin: 0px auto;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
#media only screen and (max-width: 768px) {
.child{
width: 100%;
}
}
The media query is there to make the divisions stack on one another on mobile screens.
Simply input this style
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}
And put this code below your image code,
<div class="column">
<p>It occurs in a wide range in sub-Saharan Africa</p>
</div>
<div class="column">
<p>The Indian subcontinent to Southeast and East Asia..</p>
</div>
<div class="column">
<p>The leopard is one of the five extant </p>
</div>
I would suggest that you stay semantically correct and not use DIV tags for everything under the sun. The text in question is paragraph text thus deserves to be in a P tag.
This works for the three-column part of your question. It has the advantage of being correct semantic use of HTML tags, and using CSS to produce table-like formatting without needing to commit the sin of actually using a table like we used to do back in the 90s.
Edit: one other note. You will find that the CSS float property has its uses. However, as you use it, you will also find that overuse of it can complicate the heck out of your layout and cause you to starting pulling hair out in the end. The display table type properties are what I prefer after some years of front end work in my not-so-distant past.
<html>
<head>
<style type="text/css">
.row {
display: table-row;
}
.cell{
display: table-cell;
vertical-align: top;
width: 33.33%;
}
</style>
</head>
<body>
<div class="row">
<p class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus blandit neque dapibus volutpat. Donec et dapibus leo. Ut at sodales magna, quis varius lacus. Ut sapien enim, fermentum eu egestas sed, pretium vel dolor. Nullam congue odio ut sem volutpat, ac dictum mi mattis. Quisque in purus sollicitudin nisl dapibus bibendum a a quam. Sed tristique augue nisi, quis interdum odio aliquet in. Aliquam tristique, dolor sed suscipit lobortis, eros enim mattis purus, vitae consectetur ante est nec libero. Aenean semper, ipsum eget venenatis eleifend, erat erat dignissim mi, non lacinia justo lorem at tortor. Aenean et erat suscipit velit porta placerat nec sit amet augue. Nulla non sem non tellus pellentesque ornare. Vivamus volutpat eget lacus eu dignissim. Sed venenatis euismod tempus. </p>
<p class="cell">Integer euismod felis et elit dapibus laoreet. Pellentesque et massa vitae orci pharetra imperdiet. Proin ultricies velit erat, a semper arcu volutpat eu. Morbi feugiat sapien non nisi faucibus elementum. Curabitur sed justo et enim maximus tempus. Donec posuere gravida justo sit amet dignissim. Etiam vestibulum mauris eros, vitae blandit justo pellentesque nec. Ut varius mattis volutpat. </p>
<p class="cell">Nulla vulputate ipsum leo, ut ornare massa malesuada et. Donec metus enim, viverra id diam a, luctus sagittis turpis. Etiam euismod, ex id convallis tristique, odio tellus placerat nunc, in dapibus risus massa non nulla. In placerat lectus tortor, vel gravida leo pharetra eget. Donec mollis facilisis pharetra. Nulla commodo quam tellus, eget hendrerit nisi aliquet id. Duis sagittis enim eu sodales bibendum. Maecenas tincidunt id mauris vitae ultricies. </pclass="inline">
</div>
</body>
</html>
I have been reading many articles and posts and its been widely told to use display as inline-block instead of float
So i thought to give it a try.
But i am unable to replicate the exact output of float while using inline-block
I hope someone can help me regarding it
On secondary note , if someone can point few Scenarios ( if it exists ) where using float is still beneficial to be used today instead of inline block or flexbox , that would be quite helpful to remember for future reference
<h1>float Vs inline-block</h1>
<p>In this example, the image will float to the right in the text, and the text in the paragraph will wrap around the image.</p>
<p><img src="https://picsum.photos/id/1/200/300" alt="Pineapple">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
img {
float: left;
width: 170px;
height: 170px;
}
/*img {
display: inline-block;
width: 170px;
height: 170px;
}*/ please fix this part to make it work exactly
like float
Edit - Now it seems to me that display: inline-block can only align divs in single row but cant act exactly like float. Ie it can't wrap text around images like float can...
So many countless comparisons on internet between inline block and float made to believe we can exactly replicate float effect using inline-block ( as in like inline block is total replacement for float )
First thing first, your HTML isn't properly formated. For a better semantic, don't insert an image inside a p tag, as the last one should only contain text.
If you want and image and a caption use img and figcaption.
Also, if you want text to be side to side with the image, you should be using flex, that will easly put both elements side by side.
Here is a quick demo:
figure {
display: flex;
}
img {
width: 170px;
height: 170px;
}
<figure>
<img src="https://picsum.photos/id/1/200/300" alt="Pineapple">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</figcaption>
</figure>
Since I know there is no alternate for what you wanted with inline-block display property. This is not the exact thing you looking forward to but you can achieve such a thing with this approach provided in here.
As you know there are advantages of using inline-block over float and you can check these tho same question to more information about it:
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
Advantages of using display:inline-block vs float:left in CSS
But to implementing image and text side by side you can use flexbox as well and you can check this answer or answer that #PedroFigueiredo provided for more information.
The float and inline-block working different :
on float : element is removed from the normal flow of the page and places on the left or right side of its container but still remaining a part of the flow, this allow replicating
on inline-block : element dose not removed from the normal flow so theoretical can't replicating other elements around like float
think on inline-block as inline element added to it the control of [width - height - margin ..ect]
e.g if you have
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
the easiest way is to display list items side by side is by using inline-block rather than floating them
so in your example:
if you give inline-block to the image
image and the text are in the same flow = [paragraph]
if you floated the image
the image will leave the paragraph flow to the container flow
to give paragraph the ability to replicate around
In order to display a list of news headers, I need a div of a fixed max-height.
That div should cut-off the text if the text overflows the div, and finish with an ellipsis in case of the cutt-off...
#lipsum {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 75px;
height: 75px;
width: 100%;
}
<div id="lipsum">
<p>
Duis eget sapien leo. Vivamus dignissim elit eget enim varius, vel condimentum tellus sodales. Vestibulum scelerisque lectus at mauris elementum finibus. Ut enim risus, venenatis sagittis mi ac, facilisis lacinia nunc. Nam ornare urna tortor, a vehicula nisl facilisis quis. Etiam enim sem, ornare a hendrerit et, convallis id quam. Ut tincidunt facilisis tincidunt. Mauris sodales euismod orci, a tincidunt massa fermentum sed. Mauris odio quam, auctor ac viverra vitae, condimentum feugiat mauris. Phasellus fermentum velit sit amet orci interdum dignissim. Praesent venenatis aliquet magna, at hendrerit felis condimentum maximus. Fusce cursus, nulla at suscipit iaculis, magna odio bibendum arcu, a tincidunt diam sapien sit amet nisl. Nullam non risus et metus tempus finibus tempus in libero. Maecenas auctor eget mauris non malesuada. Quisque erat tellus, facilisis quis mauris quis, lacinia tristique orci. Suspendisse dignissim nibh et mi consequat venenatis.
</p>
</div>
my problem is that the existing behavior is OK if there is only one line, but I don't need one signle line, but several lines of text until the max max-height...
You may want to refer to the following post:
With CSS, use "..." for overflowed block of multi-lines
It looks like someone also posted an article on the topic. Though, the solutions seem a bit tangential to the problem:
https://css-tricks.com/line-clampin/
Finally, here is a .js solution:
Insert ellipsis (...) into HTML tag if content too wide
EDIT: To add to this list of resources, here is a pure css solution.
http://codepen.io/martinwolf/pen/qlFdp
*Be advised that the text-overflow:ellipsis; isn't supported in every browser, yet.
Finally, here is a .js solution to the issue:
Unfortunately, I think that you cannot achieve your objective with this approach. According to this source, "This property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).".
So, as also stated in other answers, this cannot be done using CSS only, unless taking into account that not every browser may support such CSS3 directives. If you are planning a more general (traditional?) solution to overcome the compatibility issue, given that you already have headers, supposed short in length, you may pre-process and present them in a Wordpress-like fashion, for example. You can check out the official documentation.
I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.
Think of the stackoverflow site image above (if the text wasn't actually part of the image).
Consider if the orange bars continued till it was over the 'K'
Here is a crude example (# represents the image).
#################
#################
#####
##### TEXT GOES HERE
#####
I hope that I was able to adequately explain.
It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).
<td valign="left">
<div style="float:left;">
<img src="image.png" />
</div>
<div style="float:left;vertical-align:bottom; margin-right:100px">
<asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
</div>
</td>
i'm not 100% on the solution you want, but i imagine it's something like this?
http://jsfiddle.net/ujL4pwx9/1/
HTML
<div class="foo">
<img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
}
img{
width:300px;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.
is this what you meant?
but personally i'd not use img and instead use a background-image
http://jsfiddle.net/9ka1fq2j/3/
HTML
<div class="foo">
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
height:300px;
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
background-size:cover;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width.
span {
background: white;
margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:
div {
float: left;
}
img {
vertical-align: bottom;
}
span {
background: white;
margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>
The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.
More about z-index in here and here.
If i do:
<img src="" style="float:left"> SOME TEXT BLA BLA BLA BLA
It doesn't work because text goes down to the image when the image height stops. I mean:
it would do this:
http://img8.imageshack.us/img8/9379/senzatitolo1yt.jpg
While what i want to get is:
http://img28.imageshack.us/img28/606/senzatitolo2rd.jpg
I could use old good table (<td>img</td><td>text</td>) but in 2011 that doesnt' seem the way to go :)
Any easy cross-browser trick to do that?
Edit: I can't know the image-width
Thanks!
Use two div tags, float them both to left. Give a width of 30% to one of them and 70% to the other. Put the image in the first one, text in the second one.
Given the simplistic html:
<img src="path/to/img.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui odio, luctus ut viverra vitae, dignissim a mauris. Vestibulum vel massa at sapien tincidunt venenatis id sed purus. Ut quam libero, mollis a ullamcorper sed, gravida id ligula. Sed nec augue enim. Phasellus accumsan aliquet erat interdum ullamcorper. Cras tellus libero, tincidunt non placerat interdum, venenatis id arcu. Nulla facilisi. Maecenas malesuada vestibulum venenatis. Nam vel tellus arcu. Sed non dui urna. Proin fermentum aliquet lectus non fermentum. Donec aliquet purus et tortor lobortis gravida. Duis vehicula ligula nec enim consequat ut tempor diam molestie. Aenean egestas eros sem. Phasellus ullamcorper pretium nunc molestie luctus. Mauris semper ultricies nulla, at tempus purus eleifend vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ac est nunc.</p>
The following CSS works:
p {
margin-left: 100px; /* width of image plus some padding for white-space */
}
img {
float: left;
width: 90px;
height: 90px;
}
JS Fiddle demo.
Surprisingly enough the following works, albeit only tested on Chromium 8/Ubuntu 10.10:
img {
width: 100px;
height: 100px;
background-color: #f90;
float: left;
margin: 0 10px 100% 0;
}
JS Fiddle demo (ignore the colours, they were just so's I could see where things were sitting).
Second (post-edit) JS Fiddle demo, featuring an img with non-specified dimensions.
There are multiple ways to realize that.
1) two divs. assign to both a width. float the image-div to the left, the text-div to the right.
2) use margins!
give it a shot and give me feedback.