I want to display the result like this: Check this image please
What can I do make the text inside <p id='info'> responsive? Note: The whole text must be on the right side and must break the words in an overflown condition. Please help me.
When I tried to minimize the screen size of Chrom to check it's responsive-capability, it shows that the whole #infohead1 breaks it's line instead of breaking wording inside <p id='info'>
.infoheader {
background: rgb(187, 183, 183);
padding: 6px;
text-align: left;
}
#image {
display: inline;
vertical-align: middle;
}
#infohead1 {
display: inline-block;
vertical-align: middle;
}
#info {
display: inline-block;
word-wrap: break-word;
font-size: 14px;
font-family: 'Balsamiq Sans';
cursor: pointer;
padding: 1px;
}
#ans {
color: rgb(0, 78, 33);
}
.img {
cursor: pointer;
width: 301px;
border: 7px solid rgb(14, 14, 14);
margin: 5px;
}
<div class='infoheader'>
<div id='image'>
<img src='https://i.stack.imgur.com/YRu2w.png' alt='{{show_site}}' title='{{show_site}} - Homepage Interface'
class='img'>
</div>
<div id='infohead1'>
<p id='info' style='font-size:19px;'>Google Adsense Approval Probability: <span id='ans'>80%</span></p>
<p id='info' style='font-size:19px;'>Total SEO Score: <span id='ans'>35%</span></p>
<p id='info' style='font-size:19px;'>Site Structure Score: <span id='ans'>80%</span></p>
</div>
</div>
Related
I am trying to recreate what Lynda.com does with their course listing thumbnail image (see here). I am not sure how to place the image inside of my already existing code here. What I am not sure of is the dimensions of what the image should be each time and I am not sure how to handle the image resizing if my description is really long and widens the border. How would I do this?
If worse comes to worse, I will keep the descriptions small. I also realize that if the image also gets bigger if the description gets longer, the image getting bigger as a side effect will not look consistent with the other thumbnail images on the page.
HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
<a class="course_list_link" href="">
<p class = "course_list_border">
<strong> Title </strong> <br/> <br/>
description <br/> <br/>
skill_level
date
Views: views
subject </p> </a>
CSS:
.course_list_border{
border-style: solid;
border-width: 1px;
border-color: #DCDCDC;
padding: 10px;
word-wrap: break-word;
}
.course_list_border:hover{
background-color: #F8F8F8;
cursor: pointer;
}
.course_list_link{
color: black;
}
.course_list_link:hover{
text-decoration: none;
color: black;
}
body {
min-height: 400px;
margin-bottom: 100px;
margin-top: 0%;
clear: both;
padding-top: 55px;
font-family: 'Roboto', sans-serif;
font-size: 16.5px;
}
I have made some changes in your css and HTML file
.course_list_border{
border-style: solid;
border-width: 1px;
border-color: #DCDCDC;
padding: 10px;
word-wrap: break-word;
}
.course_list_border:hover{
background-color: #F8F8F8;
cursor: pointer;
}
.course_list_link{
color: black;
display: inline-block;
width: 30%;
}
.course_list_link:hover{
text-decoration: none;
color: black;
}
body {
min-height: 400px;
margin-bottom: 100px;
margin-top: 0%;
clear: both;
padding-top: 55px;
font-family: 'Roboto', sans-serif;
font-size: 16.5px;
}
<a class="course_list_link" href="">
<p class = "course_list_border">
<strong> Title </strong> <br/> <br/>
description <br/> <br/>
<img src="https://via.placeholder.com/200X150" alt="Lights" style="width:100%"/>
skill_level
date
Views: views
subject </p>
</a>
As you are using bootstrap you can also make use of existing classes for creating this kind of image thumbnails
https://getbootstrap.com/docs/4.0/content/figures/
Generally, it's far better to separate all items into elements, instead of concatenating them into a single paragraph. For example:
<style>
a.course_list_link {
display: block;
width: 300px;
border: 1px solid #DCDCDC;
border-radius: 5px;
text-decoration: none;
font-family: 'Roboto', sans-serif;
transition: all, 0.3s, ease;
}
a.course_list_link:hover .thumbnail {
filter: grayscale(50%);
}
a.course_list_link:hover {
background-color: whitesmoke;
}
a.course_list_link:active {
background-color: white;
}
a.course_list_link:hover p.description {
color: black !important;
}
.course_list_link .thumbnail {
background-color: grey;
background-size: cover; /* Guarantees your background always fits the thumbnail size, no matter its aspect ratio */
height: 150px;
}
.course_list_link .play-button {
opacity: 0.5;
height: inherit;
width: inherit;
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
}
.course_list_link:hover .play-button {
background-image: url('https://www.drury.edu/images/socialmediaicons/play_button.png');
}
.course_list_link .content-area {
margin: 5px;
}
.course_list_link h2 {
color: black;
font-weight: 500;
font-size: 18px;
margin: 0;
}
.course_list_link p.description {
margin: 0;
margin-bottom: 5px;
font-size: 14px;
color: grey !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: black;
}
.metadata {
font-size: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.metadata .skill {
color: grey;
}
.metadata .date {
color: grey;
}
.metadata .views {
color: grey;
}
.metadata .subject {
font-weight: bold;
color: grey;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<a class="course_list_link" href="#">
<div class="thumbnail" style="background-image: url('https://img-aws.ehowcdn.com/560x560p/photos.demandstudios.com/getty/article/188/230/dv030463.jpg');"><!-- Set the bg image of this element in CSS -->
<div class="play-button"></div>
</div>
<div class="content-area">
<h2>Title</h2>
<p class="description">Description of the video, which may or may not be very long depending on the type of video, and what is chosen to display, and how many lines the space is allowed to occupy in the thumbnail.</p>
<div class="metadata">
<div class="column">
<div class="skill">Skill level</div>
<div class="views">Views</div>
</div>
<div>
<div class="date">Date</div>
</div>
<div>
<div class="subject">Subject That is Too Long And Will Inevitably Overflow to New Lines If Not Blocked by Some Sort of CSS Trick</div>
</div>
</div>
</div>
</a>
I also like to set the thumbnails in CSS. That way, even if your thumbnail changes size, it is always cropped at the same size within the HTML element. However, it's always good to ensure that images are not oversized so that the page loads quickly; therefore, making real thumbnails is always a good idea.
Just as a side note, it's general CSS good practice to use hyphens instead of underscores, so .course_list_link becomes .course-list-link.
I have little experience in HTML so I apologize if this question has already been answered.
I want to send an email that has a few very long sections so I want them to be collapsible. I don't know much html/css but I was able to put something together that collapses the sections. However, whenever I convert it to inline css, I can no longer view the sections that are displayed.
I am open to other ideas on collapseable sections, however, I cannot use regular css, anything that falls under , any javascript, and anything in external documents.
Sample code below
<head>
<style>
body {
font-family: "Open Sans", Arial;
background: #CCC;
}
main {
background: #EEE;
width: auto;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
h2 {
text-align: center;
}
p {
font-size: 16px;
}
input {
display: none;
visibility: hidden;
}
label {
display: block;
padding: 0.5em;
text-align: center;
border-bottom: 1px solid #CCC;
color: #444;
}
label:hover {
color: #000;
}
label::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand0 {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background: #FFF;
color: #000;
}
section {
padding: 0 20px;
}
#toggle0:checked~#expand0 {
height: 85px;
}
#toggle0:checked~label::before {
content: "-";
}
</style>
</head>
<main>
<input id="toggle0" type="checkbox" checked>
<label for="toggle0">Example</label>
<div id="expand0">
<section>
<p>Hello There</p>
<p>General Kenobi</p>
</section>
</div>
</main>
Inline of Example
<main style="background-color:#EEE;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;width:auto;margin-top:20px;margin-bottom:20px;margin-right:auto;margin-left:auto;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;box-shadow:0 3px 5px rgba(0, 0, 0, 0.3);" >
<input id="toggle0" type="checkbox" checked style="display:none;visibility:hidden;" >
<label for="toggle0" style="display:block;padding-top:0.5em;padding-bottom:0.5em;padding-right:0.5em;padding-left:0.5em;text-align:center;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCC;color:#444;" >Example</label>
<div id="expand0" style="height:0px;overflow:hidden;transition:height 0.5s;background-color:#FFF;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;color:#000;" >
<section style="padding-top:0;padding-bottom:0;padding-right:20px;padding-left:20px;" >
<p style="font-size:16px;" >Hello There</p>
<p style="font-size:16px;" >General Kenobi</p>
</section>
</div>
</main>
Your example doesn't work because you can't specify inline styles for checked status.
You have to use css for that.
On another note: You say that you want to use this in an email, I don't think any email client would render your collapsible content.
So to answer your question: You have to use CSS (file or tag) for this type of behaviour, it's not possible with inline CSS alone. If you want to send this via email it would be better to dismiss these collapsible elements altogether and maybe reduce the amount of stuff you send out in an email.
I am trying to create a web page that looks like this:
Download page
I worked with bootstrap and created rows to align three download options next to each other. I then created containers in these rows (to replicate the boxes) and center aligned the text and download icon horizontally. Unfortunately, I am not sure how to center align the text and icon vertically in a container. Can anyone help out? My current design looks like this:
My code is the following:
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
text-align: center;
padding: 5px;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
float: left;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>
Edit: Thanks everyone for their answers! I really appreciate them. For me it worked by simply adjusting my content-border class with:
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
display: flex;
align-items: center;
/* vertical center */
}
You don't need to complicate stuff using FlexBox. Please use something like this, a table layout or line-height and vertical-align combination:
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
text-align: center;
padding: 5px;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
vertical-align: middle;
line-height: 120px;
}
#download-icon + span {
vertical-align: middle;
line-height: 1;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<span class="download"> Download list of charities that have <b> not submitted </b> data yet </span>
</div>
</div>
</div>
</div>
Preview
I would use a flexbox for the container-border class. In that case you can remove the floats.
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
padding: 5px;
text-align: center;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
display: flex;
align-items: center;
/* vertical center */
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>
add display: flex;align-items: center; to .container-border
.container-border{
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
display: flex;
align-items: center;
}
Why not just set a padding:
.download {
font: Verdana,Helvetica,Arial,sans-serif;
color: RGB(112,112,112);
font-size:18px;
text-align:center;
/* padding: 5px; <- removed */
padding: 12px 5px 5px 5px; /* New */
}
#download-icon {
font-size:80px;
float:left;
padding-top: 10px; /* New */
}
.container-border {
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
width: 300px; /* New*/
}
Demo:
.download {
font: Verdana,Helvetica,Arial,sans-serif;
color: RGB(112,112,112);
font-size:18px;
text-align:center;
/* padding: 5px; <- removed */
padding: 12px 5px 5px 5px; /* New */
}
.download:hover {
color: rgb(227,111,30);
cursor: pointer;
}
#download-icon {
font-size:80px;
float:left;
padding-top: 10px; /* New */
}
.container-border {
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
width: 300px; /* New*/
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>
I am working on a simple html/css web page.
What I am trying to do is having an image and a div. Both will be inline display and in div I want to put a link. But when I put a long link title it is not what I expect it to be.
My code is this-
code
<div class="heading"> featured posts
</div>
<div class="img_src">
<img style="height:120px;" src="/uploads/1.jpg"></img>
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
CSS-
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
line-height: 120px;
width: 61%;
margin-top: 3px;
text-transform: uppercase;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
I searched on google and StackOverflow but I did not get anything useful.
I want it to look like this(DIV wraps full)-
Any suggestion?
You csn use diplay:table-cell instead of inline-block but also I made edit in html by adding div.post that contain the image and title, and remove the inline-style that gave height to the image
<div class="post">
<div class="img_src">
<img src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg">
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
and in the css I give width:20%; to .img_src and width:80%; to .link_src (you can change the widths as you like) and remove height and line height from them and the diplay:table-cell will handle those height
.post{
font-size:0;
display:table;
width:100%;
}
.img_src{
display: table-cell;
vertical-align:top;
width:20%;
}
.img_src img{
width:100%;
}
.link_src{
display: table-cell;
background-color: white;
margin-top: 3px;
text-transform: uppercase;
vertical-align:middle;
width:80%;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
https://jsfiddle.net/IA7medd/gg7ygdLs/17/
You can achieve that by changing the inline-block display to table-cell and then apply the vertical-align:middle; property on the text container.
That way, the text will be perfectly vertically centered if there are one, two, three lines of content.
.parent{
display: table;
border: 5px solid #ccc;
width: 100%;
}
.img_src{
display: table-cell;
}
.link_src{
display: table-cell;
vertical-align: middle;
background-color: white;
width: 61%;
text-transform: uppercase;
}
See this fiddle
Ok you are using the wrong approach. Line height is causing you the problem. Your html should look like this
<img class="img_src" style="height:120px;" src="/uploads/1.jpg">
<div class="link_src">
<div class="inner_link_src">
<div class="inner_margin">
Link will go here but if there is a long title then it may create some problems..
</div>
</div>
</div>
and your css like this
.img_src{
float:left
}
.link_src{
float:left;
position:relative;
width: 61%;
text-transform: uppercase;
background-color: white;
vertical-align: top;
display:table;
height:120px;
}
.inner_link_src{
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
margin-left:10px;
}
.inner_margin{
margin-left:10px;
}
see the jsfiddle it is working great
https://jsfiddle.net/gg7ygdLs/27/
You just change your CSS and HTML by following and then you get the desired result.
CSS:
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
width: 100%;
margin: 10px 0 10px 3px;
-webkit-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
-moz-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
}
.inside_link{
margin: 2%;
display: inline-block;
position:absolute;
padding: 8px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
HTML:
<div class="heading"> featured posts
</div>
<div class="link_src">
<img style="height:120px;" src="http://smashinghub.com/wp-content/uploads/2011/11/Text-Shadow-Box.jpg" />
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
Demo
You can simplify your code a lot by using Flexbox.
You can use it for your header as well, to center the title.
.your-header {
display: flex;
align-items: center;
justify-content: center;
}
Then the image container. Use it's more semantic and it's a block element, perfect to wrap an image with a caption or a link in your case:
<figure class="your-figure">
<img class="your-image" src="http://pipsum.com/200x150.jpg"></img>
<a class="your-link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</figure>
and the CSS
.your-figure {
display: flex;
align-items: center;
padding: 4px;
border: 1px solid #ccc;
background-color: #fff;
}
.your-image {
margin-right: 10px;
}
Have a look here for the complete code ;)
Follow this if you don't know Flexbox, might seems daunting at first, but when it clicks in your head it will change your life :) Complete guide to Flexbox
I have tried to get responsive design for div boxes. But couldn't get it.
I got output like this..
When I tried to expand it, it is showing like this.
Couldn't get responsive one...
Tried with ctrl+shift+m in firefox.
Here is my code
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.tab_list_common{
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #666666;
line-height: 1.3;
border: 1px solid #000000;
display: inline-block;
}
.com_div{
text-align: center;
width: 100%;
}
.outer{
border: 1px solid #000000;
line-height: 50px;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="com_div">
<span class="tab_list_common">$1.00</span>
<span class="tab_list_common">$2.00</span>
<span class="tab_list_common">$3.00</span>
<span class="tab_list_common">$4.00</span>
</div>
</div>
</body>
</html>
You have to display them as inline-block, eliminate white spacing between them and set width to: (total width / elements).
Setting box-sizing: border-box; would include borders in width calculation.
Edit: Added spacing between divs using margin.
.tab_list_common{
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #666666;
line-height: 1.3;
border: 1px solid #000000;
display: inline-block;
width: 20%; /* total width / elements */
margin: 0 2.5%;
display: inline-block;
box-sizing: border-box;
}
.com_div{
text-align: center;
width: 100%;
}
.outer{
border: 1px solid #000000;
line-height: 50px;
width: 100%;
text-align: center;
}
<div class="outer">
<div class="com_div">
<span class="tab_list_common">$1.00</span><!--
--><span class="tab_list_common">$2.00</span><!--
--><span class="tab_list_common">$3.00</span><!--
--><span class="tab_list_common">$4.00</span>
</div>
</div>
Try this JSFiddle
This technique uses text-align:justify; on the .outer div, which applies to the the inline-block elements.
CSS
.outer {
border: 1px solid #000000;
width: 100%;
text-align:justify;
-ms-text-justify:distribute-all-lines;
text-justify:distribute-all-lines;
min-width:13em; /* add this if you don't want the divs to wrap when the screen size is reduced */
}
.com_div {
padding:.95em .95em 0em .95em;
line-height:1;
}
.tab_list_common {
font-family: Arial;
font-size: .82em;
font-weight: bold;
color: #666666;
border: 1px solid #000000;
display: inline-block;
vertical-align:top;
}
.stretch {
width:100%;
display:inline-block;
font-size:0;
line-height:0;
}
HTML
<div class="outer">
<div class="com_div">
<span class="tab_list_common">$1.00</span>
<span class="tab_list_common">$2.00</span>
<span class="tab_list_common">$3.00</span>
<span class="tab_list_common">$4.00</span>
<span class="stretch"></span>
</div>
</div>
It requires a span div at the bottom for stability, and the divs need to be on their own line, or have a space between the tags. For more useful justify centering techniques see this Stack Overflow question.