So i have this weird problem if it's even a problem(?) might just be me who doesn't understand CSS and how it works
i created a css class called textShadow
.textshadow {
text-shadow: 1px 1px 0px #000000;
}
and when i added it to en element suddenly all the text had the same text-shadow is it supposed to be like this?
if you add text-shadow with
style="text-shadow: 1px 1px 0px #000000;"
only the specefide element gets text-shadow
Thank you for reading my post and happy holidays!
EDIT: Adding some html code
<div class="w-container">
<div class="w-slider w-hidden-tiny headerslider" data-animation="slide" data-duration="500" data-infinite="1" data-delay="4000" data-autoplay="1">
<div class="w-slider-mask">
<div class="w-slide headerSliderContentPadding" style="text-align: center">
<h1 class="textOnDark1 textshadow">Suspendisse varius enim in eros elementum tristique!
</h1>
<h4 class="w-hidden-tiny w-hidden-small textOnDark1 textshadow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
</h4>
<div class="w-hidden-main w-hidden-medium" style="display: inline-block; margin-left: auto; margin-right: auto;">
<a class="buttonBlue btn extraPaddíng10px" href="#">Button Text</a>
</div>
</div>
<div class="w-slide">
</div>
<div class="w-slide">
</div>
</div>
<div class="w-slider-arrow-left">
<div class="w-icon-slider-left"></div>
</div>
<div class="w-slider-arrow-right">
<div class="w-icon-slider-right"></div>
</div>
<div class="w-slider-nav w-round w-num"></div>
</div>
</div>
I only want the elements that have the textshadow class to have text-shadow, but all the element get's text-shadow when i run it in chrome, firefox and internet explorer (even the div slider get's shadowing) why is that?
After some html inspection i found that the class had for some reason been applied to the <html> tag(?)
and some other weird classes as well i guess it have to do something with how webflow works (forgot to mention that the website was created with webflow) why it dose this i have no idé but at least i know why now :)
Thanks for all the suggestions and help guys you are great
Related
I have an HTML component that has an image floating to the left and text on the right. When the text's height is larger than the image, the text will wrap to the left. I want to add some padding between the image and the wrapped text. I could add a bottom padding to the image, but I don't want the padding to show up when the text is not wrapped. Here is what the component should look like when the text is no wrapped. The image should not have a bottom padding:
Here is what it should look like when the text is wrapped. There should be some padding between the image and the wrapped text:
Is there a way to do this through css?
An idea in case the image height is fixed or known:
.container {
border:2px solid;
min-height:200px; /* same as image height */
font-size:19px;
}
.container img {
float:left;
margin:0 20px 20px 0;
}
<div class="container">
<img src="https://picsum.photos/id/1014/200/200" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum quis mi vitae molestie. Sed scelerisque fringilla interdum. Duis ac purus nisl. Nulla vehicula vehicula turpis id convallis. Etiam nec nisl nibh. Mauris lorem mauris, vehicula nec massa in, accumsan egestas eros. Integer vehicula nulla sed enim laoreet maximus. Vestibulum at interdum sem. Sed interdum volutpat massa,
</div>
Yes, you can do it. Follow this example for HTML and css.
body {
margin: 20px;
text-align: center;
}
img {
float: left;
margin: 0px 10px 5px 10px;
}
p {
text-align: justify;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Wraping an Image with the text
</title>
</head>
<body>
<div class="square">
<div>
<img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1024px-Image_created_with_a_mobile_phone.png" alt="Longtail boat in Thailand" width="300px">
</div>
<p>
How many times were you frustrated while looking
out for a good collection of programming/algorithm
/interview questions? What did you expect and what
did you get? This portal has been created to
provide well written, well thought and well
explained solutions for selected questions.
An IIT Roorkee alumnus and founder of GeeksforGeeks.
He loves to solve programming problems in most
efficient ways. Apart from GeeksforGeeks, he has
worked with DE Shaw and Co. as a software developer
and JIIT Noida as an assistant professor. It is a
good platform to learn programming. It is an
educational website. Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course.
</p>
</div>
</body>
</html>
I am having troubles rendering a bordered area on top of the cover image on my web page. The contents of the bordered area display above the image but the border and background does not show up.
The borders are supposed to look like this:
I want the same experience for the cover photo so it covers half of the photo but also has the solid background.
Here is some of the relevant code below. If someone could give me some guidance as to how to properly layer these on top of each other that would be fantastic.
CompanyProfile.js:
class CompanyProfile extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<CoverPhoto/>
<div className="container-fluid page">
<ProfileHeader/>
ProfileHeader.js:
const ProfileHeader = (props) => {
return (
<div className="row border rounded-top p-2 bg-white" style={{marginTop: '5px'}}>
<div className="col-lg-2">
<img className="rounded-circle text-center" id="companyProfile" src={github}/>
<h5 className="mt-2" id="nameLabel">Github</h5>
</div>
<div className="col-lg-2">
<h6 className="mt-2" style={{marginBottom: '0px'}}><strong>Website</strong></h6>
<a className="" href="http://github.com" target="_blank">http://github.com</a>
<h6 className="mt-2" style={{marginBottom: '0px'}}><strong>Company Size</strong></h6>
<span className="">800 employees</span>
<h6 className="mt-2" style={{marginBottom: '0px'}}><strong>Year Founded</strong></h6>
<span className="">2008</span>
</div>
<div className="col-lg-8">
<h6 className="ml-3 mt-2" style={{marginBottom: '0px'}}><strong>About</strong></h6>
<p className="ml-3" style={{wordWrap: 'break-word'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim dolor, bibendum non eros ut, aliquet tristique eros. Suspendisse potenti. Cras lobortis condimentum magna, ut vehicula turpis dapibus sit amet. Pellentesque hendrerit ultricies massa, a mattis purus rhoncus mollis. Mauris egestas leo id mauris euismod maximus. Proin feugiat tincidunt laoreet.</p>
</div>
</div>
)
}
CoverPhoto.js:
import React from 'react';
import coverPhoto from './images/coverphoto.jpg';
const CoverPhoto = () => {
return <img src={coverPhoto} style={{width: '100%', maxHeight: '400px'}}/>
}
export default CoverPhoto;
It might be an issue with z-index.
Try adding style={{ z-index: 9999 }} to the element that you want on top of the other. And see if that works.
if you add bootstrap cdn to you project just add clearfix class before this div
<div className="clearfix"/>
<div className="container-fluid page">
https://getbootstrap.com/docs/4.3/utilities/clearfix/
Hi i'm working with a new template, and there's a main image on the landing page.
photo
It's the photo behind the main text. I cannot figure out where the img source is.
I don't see it in the HTML. I just would like to find where this stock image is and swap my new image into its place.
I'm pretty sure the following code is where it should be:
<!-- home -->
<section aria-label="home" class="mainbg" id="home">
<!-- intro -->
<div class="container">
<div class="row">
<div class="overlay-main v-align">
<div class="col-md-10 col-xs-11">
<h1 class="onStep" data-animation="animbouncefall" data-time="300">LOUIS WALLACE CONSTRUCTION</h1>
<div class="onStep" data-animation="fadeInUp" data-time="600" id="slidertext">
<h3 class="main-text">We Build Your Dream</h3>
<h3 class="main-text">We Are Passionate</h3>
<h3 class="main-text">We Are Capable</h3>
</div>
<p class="onStep" data-animation="animbouncefall" data-time="900">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet eas malesuada leo. Vestibulum eros magna volutpat at facilisis cursus, tempus etex Vestibulum pellentesque et dolor sit amet. Pellentesque eu enim nec nibh convallis suscipit. Morbi interdum dignissim metus dignissim gravida.
</p>
</div>
</div>
</div>
</div>
<!-- intro end -->
</section>
<!-- home end -->
Is there some way it could be in the css?
Edit: when I inspect it, first of all I'm not entirely sure which one is for the image. In any case, when I select what I think is the right element, the styles area don't point to any img tag.
It's more than likely being displayed as a background using the mainbg css class. Can you look in your stylesheet for mainbg?
I am trying to create a bootstrap site and what I need to happen is to have the content drop below a hero image I have if the screen gets to small. The hero image is just a DIV I've created that used the cover for the background. I've tried setting my columns to 12 for the smallest screen size, but it still just pushes it on top of my hero image. How do I get my content to push down below the image?
Example: http://www.bootply.com/aF7D9RDMqr
<div class="fill-screen container-fluid" style="height: 400px;">
<div class="row">
<div class="col-xs-12 col-sm-1 col-sm-offset-2" style="margin-top: 30px;"><img alt="Logo" src="http://placehold.it/184x18"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-offset-2">
<h1>A new movement</h1><button class="btn btn-default" type="button">Default</button> <button class="btn btn-default" type="button">Default</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula condimentum purus. Nunc vehicula lorem lacinia efficitur commodo. Aliquam tempor elit eget dui faucibus, non euismod metus rhoncus. In sed ipsum id dolor tincidunt euismod. Ut sit amet ex at tortor molestie malesuada.</p>
</div>
</div>
</div>
How I'd like it to look:
I upgraded your code here : codepen
What I needed to do is put the background in a div with no children, and place the container in absolute position to put it on the background, and then relative position for little screens. If you are using Bootstrap alpha 4, you can do it even more easily using mixins.
.container-fluid {
position: absolute;
top: 0;
}
#media only screen and (max-width : 767px) {
.container-fluid {
position: relative;
}
}
This is my first post here, so please tell me, if I'm doing something wrong.
I have a problem with the following code:
That's my HTML:
<div class="sideSection">
<div class="sidebar">
<div class="mainContainer">
<div class="articleHeader">
<h3>Sapien lorem tempus</h3>
<h4>Pharetra sed bibendum lorem</h4>
</div>
<p>Nunc cursus quam vitae ipsum viverra luctus. Nam nullam feugiat massa lacinia lectus vitae. Sed eu turpis at adipiscing.</p>
<div class="sidebarBox">
<img src="images/pic04.jpg" alt="ernster Blick">
<div class="sidebarBoxText">
Cursus quam vitae
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="sidebarBox">
<img src="images/pic05.jpg" alt="Straße">
<div class="sidebarBoxText">
Etiam at orci ut nibh
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="sidebarBox">
<img src="images/pic06.jpg" alt="telefonierender Blick">
<div class="sidebarBoxText">
Mauris non tellus
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="sidebarBox">
<img src="images/pic07.jpg" alt="Skyscraper">
<div class="sidebarBoxText">
Duis id ipsum
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="moreInfoButton">More Info</div>
</div>
</div>
</div>
And here is my CSS:
.sideSection .sidebar,
.sideSection .sidebar .sidebarBox {
float: left;
}
.sideSection .sidebar .sidebarBox {
padding: 25px 0px 20px;
border-bottom-style: solid;
border-width: 1px;
border-color: #ccc;
}
.sideSection .sidebar .sidebarBox:last-child {
border: none;
}
Now, what I'm trying to do, is to remove the border from the last "sidebarBox" class.
This isn't quite working out yet, because the code isn't affecting the border at all. I don't really know what I'm doing wrong, and I hope that someone can help me here, as it is for work :S
EDIT: Okay, as far as I figured it out by now, it's a problem with the s.
When I use "".sidebarBox:nth-child(6)"" it works just fine..
Does the ":last-child" attribute actually count all s that I used in that section?
:last-child only matches the actual last child of the parent div.
You have the .moreinfoButton following it. If you can move the button to outside the .mainContainer, it will work as you expect it
The :last-child selector applies to the last element inside a parent div. In your case the parent div is .mainContainer and its last child is .moreInfoButton and not .sidebarBox.
I would recommend you to add last class to the sidebarBox you want to modify, i.e.
<div class="sidebarBox last">
and the corrspondent css code is
.sideSection .sidebar .sidebarBox.last {
border: none;
}
Or another way to handle it is to wrap all your .sidebarBox elements in one parent <div>. Then you would be able to use :last-child selector.