I've seen other answers, but none of them seem to work for me.
What I want: when I type the URL .../page.html#two to go to #two, but with a 50px offset from the top of the page.
note: ive added the big space and <a>'s because you can't type the url in jsfiddle. I want it to work with urls, as well as with links.
<body>
<section id="one">First section</section>
<section id="two">Second section</section>
<section id="three">Third section</section>
<div id="big_space"></div>
one
two
three
</body>
body
{
height: 2000px;
}
#big_space
{
height: 1000px;
}
section
{
height: 100px;
background-color: lightblue;
margin-bottom: 5px;
}
Here's a link to the JSfiddle: http://jsfiddle.net/hAmCL/
I have tried using the section:before but it seems to give the wrong result (i've commented it out in jsfiddle)
This is impossible to do with pure CSS as you want it, though there are some semi-work arounds
This approach only works in certain instances, but the trick is to use margin-top:-50px; padding-top:50px;. This makes the element appear in the same position except for the background will be 50px higher and pushed up 50px. Here's a demo of that approach
The second approach which I'd recommend more is one involving an added inner element. I decided to format each one like so <section id="one"><div class="reference" id="refOne"></div>First section</section>. Then you can point to the refence in the link, i.e. one. Then all it takes it the following simple CSS
section {
... Your other lines ...
position:relative;
}
.reference {
position:absolute;
top:-50px;
}
Demo. This approach leaves all of the elements the way they were before in performance and looks but requires slight additional HTML markup
It'd be nice to be able to reference element's pseuo-elements like you tried to do but I understand how it could be non-syntactically correct to do so
Related
I am trying to style the background of a react app page. So, naturally, I style the main div that has all the components in it with the background property in CSS. This main div has a className named Wrapper in my app. However, when I do that, only part of the screen changes the background whereas I expect it to take the full screen. Here's the code and here's how it looks:
JSX:
render() {
return (
<div className="wrapper" >
<div>Inner content</div>
</div>
) }
CSS:
.wrapper {
overflow: hidden;
background: linear-gradient(#42275a, #734b6d);
}
As you can see only the top part changes color, but the rest of the page is still white.
I have tried adding to the wrapper: "height: 100%;", "min-height: 100%" and/or "height: 100vh;", "min-height: 100vh" but nothing has worked.
I also tried to change the body property in CSS like so
body {
background: linear-gradient(#42275a, #734b6d);
}
but what I get is an ugly line that seems to separate the wrapper from the body like this:
My question is, why is the main div (wrapper) taking up only a small part of the screen when actually it is the main div which contains all that content that seems to go off into the white screen. Why doesn't it take up the entire screen?
Also, why is body separate from wrapper or vice versa?
And lastly, how do I change the background without any kind of separation like that line? Because what is even more weird is that the body seems to be fragmented as well. See this image where you can see the body of the document seems to be fragmented (notice the line that separates colors):
Some more code as requested. I am not sure if this is useful but I guess this is all that is relevant.
This is the App.js file's code:
render() {
if (this.state.loading) {
return null;
}
else {
return (
<div className='app'>
{this.state.user ?
<LoggedIn /> :
(<HomePage />)}
</div >
);
}
}
.app {
height: 100%
}
This is the Index.js's and Index.css's code:
ReactDOM.render(
<Elements stripe={promise}>
<BrowserRouter>
<React.StrictMode>
<ScrollToTop>
<App />
</ScrollToTop>
</React.StrictMode>
</BrowserRouter>
</Elements>,
document.getElementById('root')
);
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
align-items: center;
}
Here's a screenshot of the Elements section from the Developer tools:
I guess I have included everything that is higher up in the DOM, I suppose. Please let me know if anything specific can be of any use. Thanks.
I have removed all the CSS properties from wrapper as suggested by Dan Zuzevich in the comments. It did remove the wrapper and the screen is, indeed, filled with the gradient as set in body's CSS. However, the screen is still divided by lines or fragmented if you will. Any idea why? I want one whole body with the gradient color. Here are some screenshots:
Since no one seems to have been able to help me get rid of the lines, I kept doing my own research and found my answer here - CSS3 gradient background set on body doesn't stretch but instead repeats?.
Basically, here's what helped get rid of the lines:
body {
background-image: linear-gradient(to bottom, #42275a, #734b6d);
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
Hopefully, this will be helpful to someone in the future.
Happy coding.
Don.
Sorry if the title makes no sense, I didn't know how to call this issue, lol.
So... I have this android app which shows a parking lot, with the parking layout as the background and some cars showing "inside" each parking when needed. This is easy to build using different layouts for each parking and changing the image sources from empty to a car, etc.
The thing is... I need to replicate this on a web page, And I have no idea how could I build a background and change images on top of it. I suppose I could make a bunch of divs for each parking, changing the img sources when needed and use the parking lot layout as the background for the whole thing, however I don't know if this would be the best practice, and the whole idea doesn't really sound responsive to me.
Any ideas?
I don't expect/need it to change in real time like you can do with Android, but I do need to replicate the idea of changing images programatically on top of a background.
Thanks!
The only real way to overlay images with CSS is by having a relatively displayed container with it's inner image elements absolutely positioned.
Using this idea, it'd be possible to absolutely position the car images on top of your image parking spots.
That being said, why don't you create a more abstract representation of this parking lot?
.flex-container {
display: flex;
justify-content: center;
background-color: DodgerBlue;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.available {
background-color: green;
}
.unavailable {
background-color: red;
}
<!DOCTYPE html>
<html>
<body>
<h1>Parking spot availability</h1>
<p>Green indicates an available spot. Red indicates an unavailable spot.</p>
<div class="flex-container">
<div class="available">1</div>
<div class="unavailable">2</div>
<div class="available">3</div>
</div>
</body>
</html>
For something like this, I would recommend using jQuery. Register event handlers for each of your images and adjust the src property accordingly. I have provided an example below for review:
$('.car').on('click', function () {
$(this).prop('src', 'https://placeholdit.co//i/300x150?text=A%20Completely%20New%20Image!&bg=111111');
});
.playground {
background-color: #ccc;
width: 500px;
height: 500px;
}
.car {
margin: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="playground">
<img src="https://placeholdit.co//i/200x150?text=The%20Original%20Image" class="car" />
</div>
I have a main div named "backhead" that has a background image with other divs inside. The main div doesn't show on my website (using Chrome Inspect to troubleshoot). The div isn't there, as if the name is spelled wrong, or a colon is missing, etc.
Does anyone know why this would be happening? Here's my code (all other div class and ids are working fine):
CSS file:
#backhead {
position:absolute;
background-image:url("images/headerbackground.jpg");
width:100%;
height:100%;
}
.toplogo {
float:left;
padding:1.25em 0;
position:relative;
}
.rightinfo{
float:right;
width:61%;
position:relative;
}
In the PHP file:
<div id="backhead">
<div class="toplogo">
<img src="http://example.com/images/headerlogo.png"></div>
<div class="rightinfo">
<h2>Personal Specialist</h2>
</div>
</div>
height:100%;
This will work only if the parent element has height specified. If it is inside of autoheighted element, it would be replaced by auto and became 0 if there is no content.
Check for
html, body {
height: 100%;
margin: 0;
}
if the element is placed directly in the body.
Even if that CSS was invalid the div should still show up within the markup. I ran the code on jsfiddle and it showed up fine. This leads me to believe that you may just need to clear your cache especially id you're hosting this on real server.
Try running it in a Chrome Incognito mode and see what happens.
I am wondering if any of you have any tricks to make this happen, or if I'm completely overthinking this.
I have MANY images being used and the most efficient (and easiest) way to make these images show up is to use the CSS background:url("link"); property where link is the proper link to my image file. This prevents cluttering of my html files as well.
The issue is that the above code is found in over 50 different ids, each pointing to a different image and I need to resize the images, however I would REALLY like to not have to put the following code under each and every id.
background-size:180px 239px;
background-repeat:no-repeat;
To put this simply:
I have CSS that looks something like this...
My "ID"s
#image1
{
background:url("../Images/image1.png");
}
#image2
{
background:url("../Images/image2.png");
}
#image3
{
background:url("../Images/image3.png");
}
My class
.myClass
{
width:180px;
height:239px;
background-size:180px 239px;
background-repeat:no-repeat;
}
Note that by entering this code all will seem normal, however if you change the values in background-size (say to 100px 239px you will notice the issue that I am experiencing)
And a typical use of this in html would be as the following:
<div id="image1" class="myClass"></div>
A jsfiddle of this issue can be found here: jsfiddle
The anticipated result is shown under the text in the fiddle.
How would I go about coding this so that it remains clean?
I would like to note that I am trying to keep my CSS and JS separate. I am looking for a purely CSS way for coding this. I need control of all the id's background-properties from one single location.
Any help with this is greatly appreciated, thank you.
Change background to background-image and it will work :)
#image1
{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg");
}
#image2
{
background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif");
}
.myClass
{
width:180px;
height:239px;
background-size:100px 239px;
background-repeat:no-repeat;
border:2px solid red;
}
/*------------------------------------*/
#thisIsWhatIWantItToLookLike
{
background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg");
background-size:100px 239px;
background-repeat:no-repeat;
}
.mySadClass
{
width:180px;
height:239px;
border:2px solid blue;
}
<div id="image1" class="myClass"></div>
<div id="image2" class="myClass"></div>
<p>This above images should show up like the one below does, squished</p>
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>
background-size: 100px 239px !important;
background-repeat: no-repeat !Important;
Add these two properties to your class
DEMO
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}