Is it possible to use some divs and css to make a book cover like the one below(ignore the orange background) with editable titles, most the book covers I checked online don't look like this. I know am probably asking a lot but I would really appreciate any help on this.
Yes.
<div style="width:400px; height:800px">
<div style="display: table; width:400px; height: 100px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle; background-color:blue;">
<h4 style="color:white;text-align:center">
<i style="color:yellow">image</i>Training book header text
</h4>
</div>
</div>
<div style="display: table; width:400px; height: 250px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<h1 style="text-align:center">Training book body text</h1>
</div></div>
<div style="display: table; width:400px; height: 100px;">
<div style="display: table-cell; vertical-align: middle; background-color:grey;">
<h4 style="color:white;text-align:center">
Training book footer text<i style="color:yellow; float:right">image</i>
</h4>
</div>
</div>
</div>
https://jsfiddle.net/457567wy/
Related
So I've been trying to make a chatroom, and i want admins to be able to delete messages. I have made an img tag which should be inside and in the right side of the div, but its under and to the right side of the div. How should i do that?
HTML Code (snippet was weird, so try in a regular html file)
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<div style="width:100%;"> Chat startet</div>
<img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;" > <!-- The img that is a problem -->
<br>
</div>
</div>
I believe you are looking for something like this:
<div style="display: flex; justify-content: space-between;">
<div>
<span style="color: red"><b>CONSOLE</b></span>
<span style="color: grey;">3/11 11.28</span> <br>
<span>Chat started</span>
</div>
<img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" height="40px" width="40px" style="opacity: 0.7;">
</div>
This code uses css flexbox to create such positioning. I recommend you look into the flexbox more, as it will solve 90% of your positioning issues for you, and its usage is at the same time way less problematic than usage of floats. You could find more about the topic here: https://internetingishard.com/html-and-css/flexbox/
I would also recommend not to mix your markup and styling, and use css classes to apply styling to your elements instead. It will allow you to re-use styles without lots of duplication as your page gets more complex, and also allow you to keep your markup much cleaner and more readable.
you should use something like
display: inline-block
for the elements, you want to be in the same row.
or you can use something like
display: flex /*or inline-flex */
in the parent, div to do so.
if you decide to use flex you can see a nice guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm not sure that I got it right, but I guess you need one of these to solve your problem:
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<div style="width:100%;"> Chat startet
<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
</div>
<br>
</div>
</div>
or
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<span style="float: right;">
<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
</span>
<div style="width:100%;"> Chat startet</div>
<br>
</div>
</div>
If it helps or not, please let me know :)
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
.img_small {
width: 50px;
height: 50px;
}
.wrapper {
max-width: 600px;
}
<div class="wrapper">
<div class="reading_chat_left" align="left">
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
</div>
<div class="reading_chat_left" align="right">
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
</div>
QUESTION:
I want to make it like this:
In other words, move photo to the top of its div.
Regardless of change of width of window or other, I want to make it sticky aligned to the top line.
Maybe it's so easy or noob question, but need help.
Thanks for reading.
Use vertical-align: 'top' to align the image to the top. Check the working snippet
.img_small {
width: 50px;
height: 50px;
}
.wrapper {
max-width: 600px;
}
<div class="wrapper">
<div class="reading_chat_left" align="left">
<div class="reading_chat_img" style="min-width: 50px; display: inline-block;vertical-align:top">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
</div>
<div class="reading_chat_left" align="right">
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
<div class="reading_chat_img" style="min-width: 50px; display: inline-block;vertical-align:top">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
</div>
You should be use this simple trick.
Please add css like:
.reading_chat_left .reading_chat_img {
width: calc(50px - 100%);
float: left;
}
or give inline css in this class .reading_chat_text{float: left;}
Hope this help.
Let me know further clarification.
.img_small {
width: 50px;
height: 50px;
}
.wrapper {
max-width: 600px;
}
.reading_chat_left .reading_chat_img {
width: calc(50px - 100%);
float: left;
}
<div class="wrapper">
<div class="reading_chat_left" align="left">
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
</div>
<div class="reading_chat_left" align="right">
<div class="reading_chat_text" style="display:inline-block; width: 60%;
float: left;">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
</div>
I have a problem.
I would like to center three icons on a website like so:
http://prntscr.com/cte4kt
Including the text under it.
I have searched on google, but I had no good results.
If somebody could show a simple example that would be really greatfull.
this is what I tried:
<div class="testDiv">
<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png">
<h3>Insert text</h3>
<h4>This is an actual test<br>
I really mean it lol.
</h4>
<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png">
<h3>Insert text</h3>
<h4>This is an actual test<br>
I really mean it lol.
</h4>
<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png">
<h3>Insert text</h3>
<h4>This is an actual test<br>
I really mean it lol.
</h4>
CSS:
http://pastebin.com/v0cc1cXg
Thankyou.
I think you already know some basic HTML/CSS stuff so I'd recommend you use some of popular front-end frameworks like Bootstrap or Zurb Foundation. It's almost copy/paste only thing.
You can use something like bootstrap or primercss which give you classes to add rows and columns to layout your content.
You could also create your own like the example I did here
<div class="container">
<div class="row">
<div class="col3 center">
<div class="inner-container">
<i>icon</i>
<div>text</div>
</div>
</div>
<div class="col3">
<div class="inner-container">
<i>icon</i>
<div>text</div>
</div>
</div>
<div class="col3">
<div class="inner-container">
<i>icon</i>
<div>text</div>
</div>
</div>
</div>
</div>
.container {
position: relative;
width: auto;
height: 200px;
}
.row {
width: 100%;
height: 100%;
}
.col3 {
float: left;
width: 33.3%;
height: 100%;
background: grey;
}
.inner-container {
position: relative;
top: 30%;
text-align: center;
}
Basically you need to create some type of layout container(width:100%) with three columns split by thirds(width:33.3%). Then inside each of those columns you position the contents with (text-align:center) to horizontally center align the content and vertically align it via something like top:30% or if you could also do an inline-block with vertical-align: middle.
we have 4 lines displaying like this in page
we want to move all texts of first column to left & keep all 4 colon[:] in same line
<div class="all-link">
<p>Delivery :</p>
<span>Delivery.com</span>
<div style="clear: both; height: 0px;"> </div>
<p>Parcelled.in:</p>
<span>Parcelled.in</span>
<div style="clear: both; height: 0px;"> </div>
<p>DTDC:</p>
<span>DTDC</span>
<div style="clear: both; height: 0px;"> </div>
<p>Speed Post:</p>
<span>Speed Post</span>
<div style="clear: both; height: 0px;"> </div>
</div>
i am trying with `position : relative & left , right pixels but i need to use lot of code for that.
Check below html, it might help you.
<div class="all-link">
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Delivery <b style="float:right">:</b></p>
<span>Delivery.com</span>
<div style="clear: both; height: 0px;"> </div>
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Parcelled.in <b style="float:right">:</b></p>
<span>Parcelled.in</span>
<div style="clear: both; height: 0px;"> </div>
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">DTDC <b style="float:right">:</b></p>
<span>DTDC</span>
<div style="clear: both; height: 0px;"> </div>
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Speed Post <b style="float:right">:</b></p>
<span>Speed Post</span>
<div style="clear: both; height: 0px;"> </div>
</div>
Ths is really tabular data so an actual table would be best but CSS Tables can manage this with a slight HTML structure change.
Wrap each paragraph and associates span in a div and these wrapper can act as table rows.
.all-link {
display: table;
margin: 1em;
}
.all-link .row {
display: table-row;
}
.all-link .row p,
.all-link .row span {
display: table-cell;
padding: .25em;
border:1px solid lightgrey;
}
.all-link .row p {
text-align: right;
}
<div class="all-link">
<div class="row">
<p>Delivery :</p>
<span>Delivery.com</span>
</div>
<div class="row"><p>Parcelled.in:</p>
<span>Parcelled.in</span>
</div>
<div class="row">
<p>DTDC:</p>
<span>DTDC</span>
</div>
<div class="row">
<p>Speed Post:</p>
<span>Speed Post</span>
</div>
</div>
I am trying to center the text span in the following table-cell, table-row
<div style="display: table; margin-left: auto; margin-right: auto;">
<div style="display: table-cell; width:400px;">
<div style="display: table-row; text-align: center;">
<span>
Test
</span>
</div>
</div>
</div>
jsfiddle ( http://jsfiddle.net/7p3zgne0/ )
table-cell and table-row are inverted.
<div style="display: table; margin-left: auto; margin-right: auto;">
<div style="display: table-row; width:400px;">
<div style="display: table-cell; text-align: center;">
<span>
Test
</span>
</div>
</div>
</div>
It should probably be like this:
<div style="display: table; margin-left: auto; margin-right: auto;">
<div style="display: table-row; width:400px;">
<div style="display: table-cell; text-align: center;">
<span>
Test
</span>
</div>
</div>
</div>
Note how the table-cell is inside the table-row. In your code, you have them the other way around.
http://jsfiddle.net/sfcaa3Lk/
<div align="center">
center aligned content (like a span)
</div>
Apply this to your deepest div node