This question already has answers here:
Why doesn't width/height work with non positioned pseudo elements?
(1 answer)
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I use mixin SASS to called background because I will use this code often. I will use the background mixin to create pseudo-class after and before.
This the code of the background mixin:
#mixin background($height: 10%){
content: '';
position: absolute;
width: 100%;
height: $height;
left: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
}
I tried to add some curves using pseudo-class after and before elements. But the curve does not appear if the position isn't absolute. I tried the other value and it does not work. I read some questions about this topic and someone said that it's because the absolute position behaves as a block-level element. Then I tried using display block and inline-block without using the position property and it does not work. I think it's a different case.
This is the code of my pseudo clas:
.users::after {
#include background(25%);
bottom: -100px;
background: url(../images/bg-section-bottom-mobile-2.svg) no-repeat;
}
.users::before {
#include background(25%);
top: -100px;
background: url(../images/bg-section-top-mobile-2.svg) no-repeat;
}
This is the deploy file in vercel
This is the snipset, i don't know how to add picture file. And this is not the full code, just the part I asked about
main .grow, main .conversations, main .users {
text-align: center;
padding: 30px;
}
main .grow img, main .conversations img, main .users img {
width: 80%;
}
main .grow h3, main .conversations h3, main .users h3 {
margin-top: 40px;
}
main .grow p, main .conversations p, main .users p {
margin-top: 20px;
}
main .users, main .grow {
background-color: #f5faff;
margin: 150px 0px 150px 0px;
position: relative;
}
main .grow::after {
content: '';
position: absolute;
width: 100%;
height: 25%;
left: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
bottom: -100px;
background: url(../images/bg-section-bottom-mobile-1.svg) no-repeat;
}
main .grow::before {
content: '';
position: absolute;
width: 100%;
height: 25%;
left: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
top: -100px;
background: url(../images/bg-section-top-mobile-1.svg) no-repeat;
}
<body>
<!-- header -->
<div class="header">
<div class="header__logo">
<img src="images/logo.svg" alt="logo">
</div>
<button class="header__btn">Try it free</button>
</div>
<!-- section -->
<div class="starter">
<h2 class="starter__title">Build The Community Your Fans Will Love</h2>
<div class="starter__description">Huddle re-imagines the way we build communities. You have a voice, but so does
your audience. Create connections with your users as you engage in genuine discussion.</div>
<button class="starter__btn">Get Started For Free</button>
<img class="starter__illustration" src="images/screen-mockups.svg" alt="screen-mockups">
</div>
<!-- main -->
<main>
<div class="count">
<div class="count__community">
<img src="images/icon-communities.svg" alt="communities">
<h1>1.4k+</h1>
<p>Communities Formed</p>
</div>
<div class="count__message">
<img src="images/icon-messages.svg" alt="messages">
<h1>2.7m+</h1>
<p>Message Sent</p>
</div>
</div>
<div class="grow">
<img src="images/illustration-grow-together.svg" alt="illustration-grow-together">
<div class="grow__container">
<h3>Grow Together</h3>
<p>Generate meaningful discussions with your audience and build a strong, loyal community.
Think of the insightful conversations you miss out on with a feedback form.</p>
</div>
</div>
<div class="conversations">
<img src="images/illustration-flowing-conversation.svg" alt="illustration-flowing">
<div class="conversations__container">
<h3>Flowing Conversation</h3>
<p>You wouldn't paginate a conversation in real life, so why do it online? Our threads have
just-in-time loading for a more natural flow.</p>
</div>
</div>
<div class="users">
<img src="images/illustration-your-users.svg" alt="illustration-users">
<div class="users__container">
<h3>Your Users</h3>
<p>It takes no time at all to integrate Huddle with your app's authentication solution. This means,
once signed in to your app, your users can start chatting immediately.</p>
</div>
</div>
<div class="action">
<h2 class="action__title">Ready To Build Your Community</h2>
<button class="action__btn">Get Started For Free</button>
</div>
</main>
<!-- footer -->
<footer class="footer">
<div class="footer__newsletter">
<h3>newsletter</h3>
<p>To recieve tips on how to grow your community, sign up to our weekly newsletter. We’ll never
send you spam or pass on your email address</p>
<form>
<input type="text" name="email">
<button type="submit">Subscribe</button>
</form>
</div>
<div class="footer__contact">
<div class="logo">
<img src="images/icon-messages.svg" alt="logo">
<h1>HADDLE</h1>
</div>
<p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sequi culpa voluptates perferendis provident natus.</p>
<div class="phone">
<img src="images/icon-phone.svg" alt="phone">
<p>Phone: +1-543-123-4567</p>
</div>
<div class="email">
<img src="images/icon-email.svg" alt="email">
<p>example#huddle.com</p>
</div>
<div class="sosmed">
<div class="fb container">
<i class="fab fa-facebook-f"></i>
</div>
<div class="ig">
<i class="fab fa-instagram"></i>
</div>
<div class="twt container">
<i class="fab fa-twitter"></i>
</div>
</div>
</div>
</footer>
</body>
So the question is why my pseudo-class after and before only display when I use position absolute? Is it because I use mixin SASS?
I don't think so it is about using mixin SAAS because whether you use SAAS or not your code will turned into css codes. I want to ask you something, Why your ::before or ::after classes content is empty. Did you try to add some images in content? like content:url(...); Could you try it without absolute and relative. If it's not working, you should give more info about your code. And also this may give you some idea.
Related
Using Bootstrap 5, how I can extend a row to either be outside a container or appear to be outside the container and stretch to the viewport edge without a horizontal scrollbar.
Reviewing the questions related to this, I see the use of pseudo-elements. When I try to use a pseudo-element, a horizontal scrollbar appears, which is not the behavior I want. As stated in an answer below, I could use an overflow hidden on the body, but that isn't preferred since I feel that could cause styling issues elsewhere. Note that the example pen below is a very watered-down example.
CodePen showing an example of what I'm trying.
.full-width {
position: absolute;
}
.full-width:before {
left: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.full-width::after {
right: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg-dark vh-100">
<div class="row bg-light p-5">
<p class="text-dark">Hello World</p>
</div>
<div class="row full-width bg-info p-2">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
Edit:
I can accomplish what I'm looking for by separating the page at certain points with three containers. See this codepen for an example. This may be the approach I take, in my given situation. There are styling issues I'll need to take into account in the middle container, but could be accomplished fairly easily. If there's thoughts on a better way, please let me know.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row bg-light p-5">
<div class="col">
<p class="text-dark">Hello World</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row bg-info p-2">
<div class="col">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
</div>
<div class="container">
<div class="row bg-light p-5">
<div class="col">
<p>More content here</p>
</div>
</div>
</div>
First of all you need overflow:hidden on the body. Secondly, content doesn't go directly in the row. Instead content should be placed inside a column (col) inside the row. Then make the col full-width...
https://codeply.com/p/krYOqrcJlR
<div class="container bg-dark vh-100">
<div class="row bg-light">
<div class="col">
<p class="text-dark">Hello World</p>
</div>
</div>
<div class="row bg-info">
<div class="col full-width">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
</div>
body {
overflow:hidden;
}
.full-width {
position: relative;
}
.full-width:before {
left: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.full-width::after {
right: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
The rest of the CSS style works, but some parts aren't applied. How can i solve this?
Here is my HTML code and show three images that are displayed side by side. Each image has a title i want to write under each image, but the CSS style for these parts isn't applied.
<div class="row">
<div class="col-sm-4">
<div class="placeBox">
<div class="imgBx">
<img src="images/paris.jpg" class="img-fluid">
</div>
</div>
<div class="content">
<h3>Turnul Eiffel<br>
<span>Paris</span></h3>
</div>
</div>
<div class="col-sm-4">
<div class="placeBox">
<div class="imgBx">
<img src="images/japan.jpg" class="img-fluid">
</div>
</div>
<div class="content">
<h3>Castelul Himeji<br>
<span>Japonia</span></h3>
</div>
</div>
<div class="col-sm-4">
<div class="placeBox">
<div class="imgBx">
<img src="images/grecia.jpg" class="img-fluid">
</div>
</div>
<div class="content">
<h3>Santorini<br>
<span>Grecia</span></h3>
</div>
</div>
</div>
And these are CSS style parts that aren't applied:
.placeBox .content{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: baseline;
align-items: flex-end;
}
.placeBox .content h3{
position: relative;
margin: 0;
padding: 10px;
background: rgba(0,0,0,.95);
color: #fff;
font-size: 20px;
font-weight: 600;
width: 100%;
text-align: center;
}
Thanks!
Those rules aren't applied because they use the "general descendent selector" of a space. When you put a space between two selectors like this:
.placeBox .content
You're telling it to look for elements with class content that have ancestors with class placeBox. Such an element doesn't exist in your markup, since the elements with those classes are siblings, so the rules are not applied.
To fix it, perhaps you want to use the sibling selector, +:
.placeBox + .content{
...
}
.placeBox + .content h3{
...
}
I am using left: auto; in the hope of overriding left: 0; but it is not working (see jsfiddle) - I want <header class="h1..."> to be center aligned.
HTML:
<div class="root">
<header class="h1 header-opacity-enabled sticky-enabled sticky-no-topbar menu-animation-enabled hover-delay-enabled sticky-collapse sticky-opacity-enabled with-search-box with-cart-box lr-mi-with-widget-visible sticky" data-sticky-trigger-position="400" data-menu-slidedown-duration="400" data-menu-slideup-duration="500" data-menu-fadein-duration="300" data-menu-fadeout-duration="400" style="top: 0px;">
<section class="main-header">
<div>
<div itemtype="http://schema.org/Organization" itemscope="itemscope" class="title">
<div class="logo-wrapper"> <a class="logo" href="https://websitetechnology.dev/" itemprop="url"> <img alt="Doig Website Technology" src="https://websitetechnology.dev/wp-content/uploads/2016/04/logo3-blue.png" itemprop="logo" height="77"> </a>
<h3>Website Engineering, Optimisation & Advertising</h3>
</div>
</div>
</div>
<div class="shopping-bag">
<div class="widget woocommerce widget_shopping_cart">
<div class="widget_shopping_cart_content">
<div class="wrap">
<p class="empty-item">There are no items in your cart.</p>
<!-- end product list -->
</div>
</div>
</div>
</div>
</section>
<div class="s-801"></div>
<div class="s-981"></div>
</header>
</div>
CSS:
.h1.sticky.sticky-opacity-enabled .main-header {
background-color: #FFFF00;
}
#media screen and (min-width: 801px) {
.root header.sticky-enabled.sticky {
margin: 0 auto;
width: 1236px;
padding: 0;
max-width: calc(1070px + 10%);
}
.root header.sticky {
position: fixed;
top: auto;
left: auto;
width: 100%;
}
}
Live site here. Scroll half way down the page until the sticky <header> pops down from the top of the window.
left: auto; is being applied, yet the <header>' is stuck to the left side of the screen. This` needs to be center aligned.
Can you help please?
I have try to solved you and attached screenshot please find it. screenshot will help you to solved your issue.
Thanks,
It must be because css specificity. In a few words:
Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of CSS selectors of different sorts.
If you give more specific selector, you can override the settings.
In Example, a more specific selector then your would be:
div.root header.sticky {
or
body div.root header.sticky {
...
This could help: Specificity calculator
Also, if you view in Chrome i.e. you can see if a css settings was overriden by being marked as struck through
put your header inside this section
<section style="padding: 0;max-width: calc(1070px + 10%);margin: 0 auto;">
<!--- put your header section here ---->
</section>
I have an image and some text. I want to center both of them vertically in <div>.
How can I do this while NOT changing anything in the <img> tag?
I know lots of people suggest the following:
<div>
<img style="vertical-align:middle; height: 30px;" src ="image.png"/>
<span style="line-height: 30px;" > my text </span>
</div>
Because of some reasons, I do not want to change anything in the <img> tag. Can I center both of them by only adding styles in <div> or <span> or other places?
By the way, I also know that some people said the following would work:
<div>
<img height=30px; src ="image.png"/>
<span style="line-height: 30px;" > my text </span>
</div>
But it is not working for me. So any ideas?
Thanks.
Try this - http://jsfiddle.net/J4QJA/
div {
height: 300px;
background: beige;
line-height: 300px;
}
img {
vertical-align: middle;
}
...
UPDATE
In case you can't/don't want to apply ANY styles to the <img> you can use a wrapper - http://jsfiddle.net/J4QJA/3/
HTML
<div class="wrapper">
<div class="image-wrapper">
<img src="http://lorempixel.com/200/100" />
</div>
<div class="image-wrapper">
Lorem ipsum doloe sit amet
</div>
</div>
CSS
div.wrapper {
height: 300px;
background: beige;
}
div.image-wrapper {
display: block;
position: relative;
top: 50%;
margin-top: -50px; /* half of your image height */
line-height: 100px;
width: 200px;
float: left;
}
I have some Divs floating but for some reason the 3rd DIV doesn't go under the 1st DIV. I can't figure out why? I think it has something to do with the images. When the images are not in, they float fine.
http://jsfiddle.net/xtian/9Je65/
HTML:
<div class="dl-content">
<div class="dl-content-left">
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb1.jpg" alt="">
<h4 class="left">The History of Documentation</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb2.jpg" alt="">
<h4 class="left">Rebuilding Ellis One Brick at a Time</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt="">
<h4 class="left">Title Number 3</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt="">
<h4 class="left">Title Number 4</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
</div>
<div class="dl-content-right">
<img src="img/thumbs/ad1.jpg" alt="">
</div>
</div>
CSS:
.dl-content{
width:940px;
margin: 0 auto;
padding: 0 20px;
overflow: hidden;
}
.dl-content-left{
width:618px;
float: left;
}
.dl-content-left .content-block{
width:307px;
float:left;
margin-bottom: 20px;
}
.dl-content-left .content-block img{
width: 139px;
float:left;
margin: 0 8px 0 0;
}
.dl-content-left .content-block p{
float:left;
width:150px;
font-size: 12px;
line-height: 1.4;
}
.dl-content-right{
float:left;
width: 300px;
margin-left: 20px;
}
.dl-content-right img{
width: 300px;
}
I think its to do with the heights of the divs, as a height hasn't been set.
I added a clear div into it, separating the two sets of divs and it works now:
Demo here
You can also set a height on the divs and this would also solve the problem:
Demo here