I want to make a cool slanted sidebar next to the red part of the page, but I want it to end at the end of its parent element, so that it doesn't reach into the blue part. How can I do that?
My code does not seem to work on this site, but if you insert it on W3Schools or some other page, it will work. Here is the code I have so far:
html {
scroll-behavior: smooth;
}
main {
width: 100%;
height: 100%;
}
article {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
}
.sideBox {
position: relative;
height: 200%;
overflow: hidden;
width: 20%;
background-color: white;
transform: rotate(-20deg)
}
<!--Font-->
<link href="https://fonts.googleapis.com/css?family=Turret+Road:800&display=swap" rel="stylesheet">
<main style="background-color:red; ">
<div class="sideBox">
</div>
</main>
<article style="background-color:blue"></article>
There's not a perfect way to make it end exactly where the blue article starts, but you can hide it behind the blue article. Give your article a z-index and a position of relative, then make the sidebox just long enough, like 110%;
position:relative;
z-index: 999;
Related
I have a simple HTML document (snip):
<html lang="en">
<body>
<div class="background"></div>
<header class="main-header">
<div>
<a href="../index.html" class="main-header__brand">
uHost
</a>
</div>
</header>
</div>
</body>
</html>
I noticed the following.
If I apply the following style:
background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 100%;
}
Then the background image covers the whole viewport as expected.
If I then add:
html {
margin-left: 10%;
margin-right: 10%;
}
The margin is correctly applied to the left and right of my content. But also to the left side only of the background. Ie:
I am confused as to why, as I thought fixed elements were positioned relative to the viewport? So why is a style on the html element influencing the rendering of the background?
As a solution to get what I wanted (some margin on both sides), I can do something like:
html {
width: 80vw;
margin: auto;
}
.background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 80vw;
}
Which produces:
But again, I'm unsure why the margin property on the html element is affecting my fixed background div?
When using position fixed, the element will still follow its natural initial placement, unless otherwise specified via the top left bottom or right attributes. Here you can see, even though the body element has a margin of 10px, the background element is still at the top left.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 10px;
}
h1 {
color: white;
text-align: center;
}
.background {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Solar_Eclipse_May_20%2C2012.jpg/1024px-Solar_Eclipse_May_20%2C2012.jpg");
width: 300px;
height: 300px;
background-size: cover;
z-index: -1;
position: fixed;
top: 0;
left: 0;
}
<body>
<div class="background">
<h1> Solar Eclipse </h1>
</div>
</body>
I don't know how to make the div display in front of the h1 text, so that the blue box is in front of the text? I have been stuck on this for the past 30 mins and cant resolve it in my head. I am a beginner so please have patience.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper2 {
position: absolute;
z-index: 2;
width: 500px;
height: 250px;
background: blue;
}
h1 {
position: relative;
z-index: 0;
}
<div class="wrapper2">
<h1>Welcome</h1>
</div>
As mentioned above, you can simply put the <h1> element above your wrapper in HTML. If you want your <h1> to stay inside, you could use this:
display: none; or visibility: hidden; opacity: 0;
CSS:
h1 {
position: relative;
/* either of these */
display: none;
visibility: hidden;
opacity: 0;
}
You could try this:
.wrapper2 {
width: 500px;
height: 250px;
background: blue;
}
<div class="wrapper2"></div>
<h1>Welcome</h1>
Although then it's not really a "wrapper" anymore, so maybe you'll need to create an element just for the blue square.
You've placed your h1 inside the wrapper2, so you can try to move it after it if you want to style them separately. I would also suggest to not use absolute position unless you really want this, the consequences of doing this will quickly become apparent as you build out a larger page.
You can make each element "inline" rather than "block", this will make them follow the text flow of the page: display: inline;
I'd like to had a specific design to a webpage i'm designing.
The main wrapper contains a succession of <div class='section'> and <div class='section-header'>. The section-header should display the section's title over an image.
exemple:
<div id="tag" class="section-header">
<h1>Title</h1>
<img src="assets/img/some_image.jpg">
</div>
So far my css is:
.section-header
{
width: 100%;
height: 192px;
overflow: hidden;
}
.section-header > *
{
width: 100%;
line-height: 192px;
margin: 0;
}
.section-header > h1
{
position: absolute;
z-index: 10000;
text-align: center;
}
.section-header > img
{
filter: opacity(50%);
}
however i'd like to add some relative movement between the background image and the section-header. I basically wanted to fixe the image to the screen with position: fixed; and let the overflow: none; do the job.
However it appears that as soon as I add position: fixed; top: 0; to .section-header > img, the overflow isn't hidden anymore and the image is visible regardless of the position of the header it's nested in.
How can I solve that ?
Edit:
devel code is visible here. I'd basically have the image behind each section's title not to scrool with the page, and just to have the section's header reveal it as you scrool
If I understand the effect you want, you may need to use the img as background; try this:
body{
background: #f3f3f3;
height:800px;
}
div {
text-align:center;
color:white;
width:80%;
margin:150px auto;
line-height:200px;
background:url('http://lorempixel.com/600/600') no-repeat center;
background-attachment: fixed;
}
div h1 {
font-size:3em;
}
<div>
<h1>Mytitle</h1>
</div>
Jsfiddle Demo
Overflow is ignored for position:absolute children in parent that is relatively positioned.
One way of fixing the problem is giving .section-header a position:absolute or position:fixed too. (whichever is most useful for you).
like this :
.section-header
{
width: 100%;
height: 192px;
overflow: hidden;
position: absolute;
}
see this jsfiddle
I'm trying to reveal a page from a specific point in this case the (div:content) further down the page.
Desired effect will have the red block at the top, however scrolling down will reveal the blue block above
UPDATED: http://jsfiddle.net/cr8uj/1/
HTML
<div class="block">
block
</div>
<div class="content">
content
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: fixed;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
You are looking for: scrollTop
http://api.jquery.com/scrollTop/
Set the current vertical position of the scroll bar for each of the
set of matched elements.
Example:
$('body').scrollTo('#YourDiv');
There is a question related to this: jQuery scroll to element
A good library: http://mmenu.frebsite.nl/examples/responsive/index.html
Other options:
What you need is the JavaScript window.scrollTo method
window.scrollTo(xpos,ypos)
Insert the div position in there.
Or use the JQuery method ScrollTo, see an example here
$(...).scrollTo( 'div:eq(YourDiv)', 800 );
I can't make my .content-panel and #panel-design float on the right of the .content because of the header design img #searchbar-container.
I already tried using z-index with different values.
I want to place .content-panel and #panel-design on the right side of the .content while having #searchbar-container above the divs
<body>
<div class="header">
<img id="searchbar-container" src="images/searchbar1.png">
</div>
<div class="content">
<div class="sidebar"></div>
<div class="content-panel">
<div id="panel-design"></div>
<!--main content here-->
</div>
</div>
</body>
the css:
.content {
position: relative;
max-width: #width;
height: 768px;;
margin: 0 auto;
padding: 0;
}
.content-panel {
position: absolute;
float: right;
margin: 0;
padding: 0;
width: 753px;
height: 100%;
background-color: blue;
z-index: -2;
}
#panel-design{
float: right;
width: 685px;
height: 375px;
background-color: red;
z-index: -1;
}
.sidebar{
width: 285px;
height: 100%;
margin: 0;
padding: 0;
}
Can't post the whole thing. But this is what I need to achieve, basically the gray image above is the #searchbar-container and the picture of Depp is the #panel-design in front of the .content-panel.
So far this is what my page looks like:
the blue div is the .content-panel
the red div is the #panel-design
the gray img above is the #searchbar-container
.content doesn't have a background color but its size is pass the curve of #searchbar-container
So what I understand from you question is that, you want #searchbar-container to overlap your #panel-design.
one way of doing it would be to make .header div fixed, but you might not want that because then it becomes independent of the scroll.
Another way I came up with uses absolute position you can see the fiddle here