Have to use inline styling for this (I know), but for some reason I've created a table of some sorts to appear within a Div already set up. It works fine if I place outside of the parent div, but once set up within the parent div - nothing gets displayed. Code as below:
<div class="culture" style=" display: none;">
<div style=" background-color: #373a36;">
<h2 style=" color: #fff; text-align: center;">TARGETS</h2>
</div>
<div style=" width: 30%; background-color: #d6d2c4;">
<h3 style=" text-align: center; padding-top: 10px;">BY 31DECEMBER 2016</h3>
<div style=" padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: center;">
<p>Content goes here</p>
</div>
</div>
<div style=" width: 30%; background-color: #f3f1ed; float: left;">
<h3 style=" text-align: center; padding-top: 10px;">BY 31 DECEMBER 2017</h3>
<div style=" padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: center;">
<p>Content goes here</p>
</div>
</div>
<div style=" width: 30%; background-color: #d6d2c4; float: left;">
<h3 style=" text-align: center; padding-top: 10px;">FROM 2018 TO 2020</h3>
<div style=" padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: center;">
<p>Content goes here</p>
</div>
</div>
Do I need to add in div clears? Could use a little help here.
In the 7th line you have this style=" display: none;".
This CSS makes the div and all it's children hidden.
Remove it and you'll see the rest of the content
Solution
Related
I am using mPDF to create a PDF from the following HTML-Code:
<div style="border: 5px solid black; height: 115px;">
<div style="width: 29%; height: 115px; float: left; background-color: red;">
<img src="testimage.png"
alt="Bild 1" style="height: 115px;">
</div>
<div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;">
SOME TEXT
</div>
<div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;">
<div style="float: left; width: 25px;">ANOTHER TEXT</div>
</div>
</div>
The outcome in the PDF is rather unsatisfying:
The outcome
I am dealing with this weird space below the image. I tried giving the image a blue and the div a red background and it is always red, so the div is too high. It just ignores every fixed height I give. I already read about using display: top but none of it worked. What exactly is the problem here? On a HTML-Page everything is just fine.
Try adding width:100%; height:100%; object-fit:cover; to the image. Hope it works for you.
<div style="border: 5px solid black; height: 115px;">
<div style="width: 29%; height: 115px; float: left; background-color: red;">
<img src="https://via.placeholder.com/150"
alt="Bild 1" style="width:100%;
height:100%;
object-fit:cover;">
</div>
<div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;">
SOME TEXT
</div>
<div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;">
<div style="float: left; width: 25px;">ANOTHER TEXT</div>
</div>
</div>
I've got three div's going here. One's a container then the other 2 are in place for some buttons! But it just doesn't look right. I'm not quite sure how to fix it
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.divButton {
height: 100%;
width: 100%;
background-color: #e4e4e4;
display: inline-block;
padding-bottom: 5px;
}
HTML:
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div style="float: left; padding-left: 325px;">
<p style="padding-left: 72px;">Centered text above button</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div style="float: left; padding-left: 125px;">
<p style="padding-left: 40px;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
</div>
jsfiddle: https://jsfiddle.net/3ar1L0zy/1/
And what i'm trying to achieve in paint form!
I would move away from using floats - css has moved on sufficiently so you shouldn't need to use them anymore.
Use flex instead:
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.divButton {
width: 100%; /* you don't really need this - divs are block elements which are 100% by default */
background-color: #e4e4e4;
padding: 0 20px 5px 20px;
box-sizing: border-box; /* as you have set the width, you need this to stop the div being 100% + 40px wide */
display:flex; /* this will align items in a row by default */
flex-wrap:wrap; /* this allows the content to wrap to multiple rows */
justify-content:space-between; /* this will push any content to either side of the row */
}
.divButton > p {
width:100%; /* make this take up full row */
}
.divButton > div {
text-align:center; /* use this to centre text - not padding */
}
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div>
<p>Centered text above button</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div>
<p>TEXT</p>
<button class="button">TEXT</button>
</div>
</div>
One other tip I would give you is try not to use inline styles - they become very hard to maintain and make it harder to debug too (and cause a lot larger files as you have to repeat code for styles instead of just using a class that can be used multiple times but programmed once)
Instead of use float: left on both div, you can use float right on the right one and remove the padding-left you set:
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div style="float: left;">
<p style="padding-left: 72px;">TEXT</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div style="float: right;">
<p style="padding-left: 40px;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
</div>
https://jsfiddle.net/3ar1L0zy/13/
you can achieve this too by using flexbox too. (better solution in my opinon)
HTML code:
<div class="divButton">
<h3 style="text-align: center; padding-top: 15px; color: black;">TEXT!</h3>
<!--2 buttons "centered"-->
<div class="divText">
<p style="padding-left: 72px;">TEXT</p>
<p style="padding-left: 40px;">TEXT</p>
</div>
<!--add spacing to move away from 2 buttons-->
<div>
<div class="divButtons">
<div>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<button class="button">TEXT</button>
</div>
</div>
</div>
CSS code:
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.button:hover {
background-color: #880002;
}
.divButton {
height: 100%;
width: 100%;
background-color: #e4e4e4;
display: inline-block;
padding-bottom: 5px;
}
.divText {
display: flex;
justify-content: space-around;
}
.divButtons {
display: flex;
justify-content: space-around;
}
<div class="divButton" style="text-align: center;">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<div style="display: inline-block;">
<!--add spacing to move away from 2 buttons-->
<div style="float: right; display: inline-block; padding-left: 125px;">
<p style="text-align: center;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
<!--2 buttons "centered"-->
<div style="display: inline-block;">
<p style="text-align: center;">TEXT</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
</div>
</div>
https://jsfiddle.net/3ar1L0zy/85/
I would recommend flexbox
.parent{
background: tomato;
width: 400px;
padding: 30px;
display: flex;
flex-direction: column;
}
.header{
background: yellow;
text-align: center
}
.body{
background: green;
width: 100%;
display: flex;
}
.body-item{
background: pink;
width: 50%;
text-align: center;
padding: 10px;
}
.blue{
background: blue; /* to make it easier to see */
}
.buttons{
display: flex;
flex-wrap: wrap; /* wrap items onto multiple lines if needed, from top to bottom*/
justify-content: space-evenly; /* items are distributed so that the spacing between any two items (and the space to the edges) is equal */
}
<div class="parent">
<h3 class="header">HEADER TEXT</h3>
<section class="body">
<div class="body-item">
<div class="text">Text</div>
<div class="buttons">
<button>Button</button>
<button>Button</button>
</div>
</div>
<div class="body-item blue">
<div class="text">Text</div>
<div class="buttons">
<button>Button</button>
</div>
</div>
</section>
</div>
I want my email and the word 'email' to align on the right. I understand my email will be longer on the left.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px;">E-mail</p>
</div>
<br>
<div>
<p style="font-size: 20px; color: white; float: right; padding-right: 10px;">newtrendphotography23#gmail.com</p>
</div>
</div>
</div>
</div>
Nest elements into one parent element, and declare positioning and alignment rules as needed to the parent element.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%;">E-mail: newtrendphotography23#gmail.com</p>
</div>
</div>
</div>
</div>
You can achieve it in two ways.
Firstly put both of them in one paragraph with float:right.
You can use text-align: right; to the <p> to get them right aligned.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 200px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%; text-align: right;">
E-mail:
<br> newtrendphotography23#gmail.com
</p>
</div>
</div>
Inside the <p> use a <span> with float: right on the "E-mail:", so that it floats to the right inside the paragraph that is floating to the right.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 200px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%;">
<span style="float:right">E-mail: </span>
<br> newtrendphotography23#gmail.com
</p>
</div>
</div>
No.1 is the better solution as the text is by default left-aligned and that is what is causing the issue, not that the text is not floating to the right.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div style="font-size: 14px; color: white; float: right; padding-right: 10px;text-align:right">
<p>E-mail</p>
<p>newtrendphotography23#gmail.com</p>
</div>
</div>
</div>
</div>
Add style to one div only
I have two blocks of text with colored background. I want them to sit next to each other and then be horizontally centered on the page but I can't get them to center on the page. Also I have to use inline styling because I am just coding on wordpress for work. Help!
<div align="center">
<div style="background-color: #526f87; width: 60%; float: left; height: 160px; " >
<p style="font-size: 40px; color: #b9cbea; letter-spacing: 2px; line-height: 110%; padding-top: 20px; padding-right: 20px; text-align: right;">YOU'RE NEEDED AT THE TOP </p>
<p style="font-size: 40px; color: white; letter-spacing: 2px; line-height: 110%; padding-bottom: 20px; padding-right: 20px; text-align: right;" ><strong>MEET US THERE</strong>
</p>
</div>
<div style="background-color: #526f87; width: 20%; float: left; margin-left: 10px; height: 160px;">
<p style="color: #ffffff; font-size: 20px;" align="center">22 ICF CEUs <br /><span style="font-size: 12px;">(12.17 Core Competencies / 10.25 Resource Development)</span></p>
</div>
</div>
In general, you should know that there is a trick for centering divs on the page. If you want to center some content, you know what its width will be, right? So you can use:
width: /* something */;
margin-left: auto;
margin-right: auto;
So for your code snippet, I recommend using flex if you're not targetting old browsers. I would do something like this:
<div style="display: flex; width: 80%; margin-left: auto; margin-right: auto;">
<div style="flex: 3">this is the larger div to the left</div>
<div style="flex: 1">this is the one that should fall on the right</div>
</div>
NOTE: My code keeps proportions with the ones in your code.
I am trying to create a setup mimicking the one in the link with an image, text and a border all horizontally and vertically centered. I've tried a number of different ideas.
The below is the closest I've gotten but even then I'm still experiencing issues with the border displaying and things not being centered the way I want them.
<div style="max-width: 800px; height border: 1px solid #c6c6c6; border-radius: 5px; padding: 35px; margin-left: 60px; float: center; height: 220px; display: inline-block;">
<img src="image.gif" />
</div>
<div style="height: 220px; display: inline-block;">
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
I would try using CSS tables, put the image and the text in separate block level elements that use display: table-cell, all of which are contained in a parent container using display: table.
.wrapper {
border: 1px solid gray;
border-radius: 5px;
display: table;
height: 220px;
margin: 0 auto;
}
.wrapper .item {
display: table-cell;
vertical-align: middle;
text-align: center;
min-width: 200px;
padding: 35px;
}
.item img {
display: block;
}
<div class="wrapper">
<div class="item">
<a href="www.google.com" target="_blank">
<img src="http://placehold.it/200x150" />
</a>
</div>
<div class="item">
<h4>Text Line One</h4>
<p>Text 2
<br />Text 3</p>
</div>
</div>
you should put inline-block on image and the parent div of text panel and vertical-align:middle .. would do that
.textpane{
height: 220px;
display: inline-block;
vertical-align:middle;
}
.imagepane{
width:50px;
height:50px;
display:inline-block;
vertical-align:middle;
max-width: 800px;
border: 1px solid #c6c6c6;
border-radius: 5px;
padding: 35px;
margin-left: 60px;
height: 220px;
}
<div class='imagepane'>
<img src="image.gif" />
</div>
<div class='textpane'>
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
jsfiddle
Note
there is not such thing as float:center;