I have this custom bullet point type thing and I want to have the number centered inside a circle. I'm doing pretty good however I'm stuck at centering. I literally just want the text to go up by a couple pixels, why is that so hard to do.
const ProjectTitle = styled.h1 `
margin:0;
&:before {
content: "1";
font-size: 2rem;
border: 1px solid black;
padding: 0px 18px 6px 18px;
border-radius: 50%;
margin-top: 10px;
margin-right: 10px;
position: relative;
}
`
Mixing px and rem values to achieve alignment can be problematic as you don't know what the rem value will actually be.
This snippet instead uses flex to position the number centrally and makes the size of the circle dependant on rem value rather than padding with px.
h1 {
` margin: 0;
}
h1::before {
content: "1";
font-size: 2rem;
width: 3rem;
aspect-ratio: 1 / 1;
border: 1px solid black;
border-radius: 50%;
margin-right: 10px;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
}
<h1>Testing</h1>
According to your code, the solution can be padding modification
h1 {
margin: 0;
}
h1::before {
content: "1";
font-size: 2rem;
border: 1px solid black;
padding: 6px 18px; /* Aligned with 4 sides of the content*/
border-radius: 50%;
margin-top: 10px;
position: relative;
}
<h1>
Testing
</h1>
Related
I've got some text that needs the following:
border around the text
a ::before element that has its own border and background color
Basically, I want it to look like this:
So far, I've got this:
My CSS:
.caution {
border: 0.5pt solid black;
padding-left: 3pt;
padding-right: 3pt;
display: table;
}
.caution::before {
display: table-cell;
border: 0.5pt solid black;
background-color: #deddde;
text-align: center;
content: "caution";
}
My html:
<p class="caution">Caution text</p>
The result is that the ::before box is nested inside the .caution box, instead of overlapping. The gaps on the left and right are caused by the padding-left and padding-right statements.
I've also tried this without the display:table, that didn't help. I need the padding-left and padding-right to apply to the text (to ensure the text doesn't come right up to the border), but not to the ::before element. There's no selector that allows me to apply properties to 'all of .caution except the ::before element'.
How can I get the borders to behave the way I want them to?
You can try this - it's not perfect, but it's a start :)
.caution {
border: 0.5pt solid black;
display: inline-block;
max-width: 200px;
padding: 10px;
}
.caution::before {
display: block;
border-bottom: 0.5pt solid black;
margin: -10px;
margin-bottom: 10px;
background-color: #deddde;
text-align: center;
content: "Caution";
}
It will render the following:
Setting only border-bottom (as in answer by Yogendra Chauhan, though I only noticed that afterwards) can help:
.caution {
border: 0.5pt solid black;
padding-left: 3pt;
padding-right: 3pt;
display: block;
}
.caution::before {
border-bottom: 0.5pt solid black;
background-color: #deddde;
text-align: center;
content: "caution";
display: block;
margin: 0 -3pt;
}
However, you might see a small white line at the ends of the bottom border when you zoom to 6,400% in your PDF viewer.
Here is the working example:
.caution {
position: relative;
border: 1px solid #000000;
height: 200px;
width: 300px;
padding-left: 5px;
padding-right: 5px;
padding-top: 30px;
}
.caution::before {
position: absolute;
background-color: #deddde;
text-align: center;
content: "caution";
text-transform: capitalize;
display: block;
width: 100%;
border-bottom: 1px solid #000000;
top: 0;
left: 0;
line-height: 25px;
}
<div class="caution">Caution text</div>
I need help with line spacing between text
and a picture just to know what I need:
Here is my CSS:
.popular_courses h3 {
font-size: 20px;
text-align: center;
text-transform: uppercase;
margin-top: 60px;
margin-bottom: 20px;
}
.popular_courses h3 {
border-bottom: 1px solid #ddd;
line-height: 0.1em;
margin: 60px auto 20px;
width: 70%;
}
.popular_courses h3 span {
background: #fff none repeat scroll 0 0;
}
I think this is a better way to achieving the desired result instead of adjusting the line height.
.popular_courses h3 {
position: relative;
text-align: center;
}
.popular_courses h3:before {
content: "";
position: absolute;
top: 50%;
left: 15%;
width: 70%;
margin-top: -1px;
height: 2px;
background-color: #ddd;
}
.popular_courses h3 span {
position: relative;
display: inline-block;
background-color: #fff;
padding: 0 20px;
}
<div class="popular_courses">
<h3><span>POPULAR COURSES TITLE</span></h3>
</div>
You have to use padding property for your class around "POPULARNI KURZY".
For eg:
padding: 10px 20px;
will add 10px padding (space) on left and on right sides, and 20px padding on top and bottom sides.
What you need is something like:
padding: 50px 0;
(This will add 50px padding on left, 50px on right and 0 for bottom and top sides).
You can do this:
CSS
.popular_courses {
position:relative;
display: block;
width: 70%;
text-align: center;
margin 0 auto;
z-index:1;
}
.popular_courses:before {
position:absolute;
content:"";
height: 1px;
background: #000;
width: 100%;
z-index:2;
left:0;
top: 50%;
transform: translateY(-50%);
}
.popular_courses h3 {
position: relative;
display: inline-block;
line-height: 0.1em;
background: #fff;
padding: 0px 30px; // -> ADJUST HERE YOUR PADDING NEED
z-index:3;
}
HTML
<div class="popular_courses">
<h3>teste</h3>
</div>
DEMO HERE
Theory
You are looking for the padding option:
// padding: top right bottom left
padding: 1px 2px 3px 4px;
you can also use padding like this:
// padding: top&bottom left&right
padding: 0px 10px;
or with separate statements:
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left:10px;
Practice
if your text is inside the span tag then your css should be like:
.popular_courses h3 span {
background: #fff none repeat scroll 0 0;
padding: 0 20px;
}
so that the text will have a 20 pixel padding on both sides!
.heading {
text-align: center;
position: relative;
z-index: 10;
}
span {
display: inline-block;
background: #fff;
padding: 0 10px;
position: relative;
z-index: 10;
}
.heading:after {
content: '';
display: block;
border-bottom: 3px solid #ccc;
width: 100%;
position: absolute;
z-index: 5;
top: 50%;
}
<h1 class="heading">
<span>Some nice heading</span>
</h1>
Hi, If you can manage to cover the background-color of the text like
to white or to the same color of background-color, then this
example can work.
.popular_courses h3 span { padding: 0 15px; }
With this line of code you will put space in the left and right side of the text and it will be filled with white background.
I'm having a nightmare, I have a very simple premise, it works fine when it's occupying one line...
http://imgur.com/dKtkJQs,vFJvW7c#0 <-- it should look like this
However, if it's in a narrower column and spans over two lines, the + and the > just don't want to vertical center align.
http://imgur.com/dKtkJQs,vFJvW7c#1 <-- This is how it looks when over two lines, not my desired result
For some reason, the fiddle has the :before overlapping when it doesn't in my code. But my point mainly is, how do I get the + and > to vertically align in the middle? I think I've torn all my hair out.
HTML code
CREATE 1st UNIT
CSS code
body {
font-family: 'Open Sans', 'sans-serif';
padding: 20px;
padding-top: 50px;
background-color: #CCCCCC;
font-weight: 100;
font-size: 12px;
text-align: center;
}
.bttn{
position: relative;
display: block;
margin-top: 3px;
padding: 5px 10px 5px 40px;
background: #1E90FF;
font-size: 18px;
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.bttn::before{
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
height: 100%;
padding: 5px 10px 5px 10px;
content: "+";
background: #104E8B;
font-size: 18px;
font-weight: 500;
}
.bttn:after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
height: 100%;
padding: 5px 10px 5px 10px;
float: right;
content: ">";
font-weight: 500;
}
.create, .create::before, .create::after{
font-size: 10px;
}
.create{
padding-left: 20px;
}
.create::before, .create-coffer::after{
padding: 5px 5px 5px 5px;
}
Vertical alignment is difficult when dealing with responsive elements. My suggestion would be that the 'plus' and 'arrow' icons be background-images of the psuedo elements. That way you can align them to the exact center.
Otherwise, you could align the elements vertically using the translate trick. But then you'd also need the dark blue background to be an absolute positioned span element.
top: 50%;
transform: translateY(-50%);
I am following this tutorial link but do not know how to put the footer on the bottom of the page so when the user open the page the footer is on the very bottom of page regardless of size of the monitor.
So that when they change the size of window or use a bigger monitor footer should be at the end of page.
The important part is that I do not have much text in my content section so the scroll bar is expected to be invisible in any size of monitor.(those that are not very tiny)
*Please also note that I have looked at the previous question but could not find a correct answer.
* If you know of any other tutorial I would appreciate your suggestion. (I need float layout)
Layout
container
{
header
content
{
leftnav | rightnav
}
footer
}
Css
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
In the tutorial the footer is in a container div.
If you remove from the container width:90% the example will be rendered across the whole width of the screen.
Use the sticky wrapper jQuery plugin, or use position: fixed with bottom: 5% and left: 0 and margin-left values in -ve.
<footer style="background-color: crimson; color:springgreen; font-family: serif; text-align: center; font-size: 15px; position:absolute; width: 99.82%;margin-left: -6px; margin-right: -6px;"><h1>THIS IS MY FOOTER</h1></footer>
Browser: Google Chrome
System Screem: 15.6"
I have experienced that the appearance of our divs, headers, footers & navs varies from screen to screen and may be browser to browser.
try this :
#footer{
position: absolute;
bottom: 0px;
height: 50px;
width: 100%;
}
I am trying to hide one DOM element with CSS (by hovering on its sibling) but it is not working correctly.
In the .cta_call class I have hover effect to change the background-colorbut it is needed to hide the element .cta_telf when the user does that interaction.
Here one example:
.cta {
width: auto;
padding: 0px;
margin: -30px 0px 0px 0px;
top: 0px;
text-align: center;
height: 70px;
}
.cta_telf{
margin: 0px 0px 0px 22px;
padding: 0px;
width: 75px;
background-color: white;
z-index: 1984;
margin-bottom: -5px;
font-size: 12px;
color:red;
position: sticky;
text-align: center;
}
.cta_call{
border: solid 2px red;
border-radius: 50px;
padding: 8px 15px 8px 15px;
height: 35px;
z-index: 1985;
}
.cta_call:hover {
background-color: red;
color:white
}
.cta_call:hover ~ .cta_telf{
visibility: hidden
}
<p class="cta_telf">xxxxxx</p>
<p class="cta_call">¿HABLAMOS?</p>
Any clue what am I doing wrong?
Thank you.
The ~ selector targets subsequent siblings in the markup. You cannot target an element's previous sibling with CSS, see this answer.
However, you could change the order of the markup and then use position, float, display:grid, or similar to move them visually.
An example using position:absolute:
.cta {
position:relative;
padding-top:1em; /* Space for absolute .cta_telf */
}
.cta_telf {
position:absolute;
top:0;
left:0;
padding: 0px;
width: 75px;
background-color: white;
z-index: 1984;
font-size: 12px;
color:red;
text-align: center;
}
.cta_call {
border: solid 2px red;
border-radius: 50px;
padding: 8px 15px 8px 15px;
height: 35px;
z-index: 1985;
}
.cta_call:hover {
background-color: red;
color:white
}
.cta_call:hover ~ .cta_telf {
visibility: hidden;
}
<div class="cta">
<p class="cta_call">¿HABLAMOS?</p>
<p class="cta_telf">xxxxxx</p>
</div>
As you know now, ~ will only target sibling elements after the current one in the HTML flow.
There is no CSS selector to target an element's previous sibling.
Anyway, I suggest you to reorder your elements in the HTML, and use display: flex.
That way, you can use the order property to achieve what you want.
(The order property make it crystal clear to understand!)
Working snippet:
.cta {
display: flex; /* Added */
flex-direction: column; /* Added */
width: auto;
padding: 0px;
top: 0px;
text-align: center;
height: 70px;
}
.cta_telf {
margin: 0px 0px 0px 22px;
padding: 0px;
width: 75px;
background-color: white;
z-index: 1984;
margin-bottom: -5px;
font-size: 12px;
color: red;
position: sticky;
text-align: center;
order: 1; /* Added */
}
.cta_call {
border: solid 2px red;
border-radius: 50px;
padding: 8px 15px 8px 15px;
height: 35px;
z-index: 1985;
order: 2; /* Added */
}
.cta_call:hover {
background-color: red;
color: white
}
.cta_call:hover~.cta_telf {
visibility: hidden
}
<div class="cta"><!-- Added -->
<!-- Changed order below -->
<p class="cta_call">¿HABLAMOS?</p>
<p class="cta_telf">xxxxxx</p>
</div>
Hope it helps.