I am trying to design a footer for my website like this:
but I've got this result, causing a horizontal scroll (red background is for better showing the problem)
.footer-container {
background-color: white;
width: 100%;
position: relative;
}
.rotate-container {
position: relative;
width: 100%;
}
.rotate-white {
position: absolute;
left: 100px;
top: -40px;
width: calc(100%);
height: 200px;
transform: rotate(-4deg);
background-color: red;
z-index: -1;
}
.rotate-grey {
top: -40px;
right: 100px;
position: absolute;
width: calc(100%);
height: 200px;
transform: rotate(5deg);
background-color: #e5e5e5;
z-index: -2;
}
.footer-top-img {
width: 290px;
position: absolute;
left: 20%;
right: auto;
top: -140px;
z-index: 1;
}
<footer style="margin-top: 150px;">
<div class="footer-container px-xl-5 w-100">
<div class="rotate-container">
<div class="rotate-white"></div>
<div class="rotate-grey"></div>
</div>
<img class="footer-top-img d-xl-block d-none" src="../global/imgs/footer/footertop.png" />
<div class="container-fluid footer-content px-xl-5">
. . .
</div>
</div>
<footer/>
How can I remove the overflow of the red div to prevent the page from scrolling?
Therefor, you need to hide the oferflow of the body itself with
body {
overflow-y: hidden;
}
Related
What I am specifically looking to do, is have the blue block and red block scale with the webpage, but also remain in place without shifting up and down like they are now.
Here is a gif demonstrating that it does what I want somewhat when scaling diagonally, but scaling either vertically or horizontally results in off positioning.
Imgur link to demo gif
Here is the HTML
<div class="blockDisplay">
<center><img src="greenBlock.png" class="greenBlock">
<img src="redBlock.png" class="redBlock">
<img src="blueBlock.png" class="blueBlock"></center>
</div>
Here is the CSS
.blockDisplay {
background-color: #444;
overflow: hidden;
}
.greenBlock {
position: relative;
width: 58%;
z-index: 2;
}
.redBlock {
position: absolute;
top: 6%;
left: 66%;
width: 8vw;
z-index: 4;
}
.blueBlock {
position: absolute;
top: 40vh;
left: 77%;
width: 23vw;
}
Try this hope it's helpful for you.
CSS
.blockDisplay {
background-color: #444;
overflow: hidden;
}
.greenBlock {
position: relative;
width: 58%;
z-index: 2;
}
.redBlock {
position: absolute;
top: 6%;
left: 66%;
width: 8vw;
z-index: 4;
}
.blueBlock {
position: absolute;
top: 39vh;
left: 76%;
width: 40vw;
height: 10vw;
}
#divOnTop { z-index: 1000;
<div class="blockDisplay">
<center><img src="greenBlock.png" class="greenBlock">
<img src="redBlock.png" class="redBlock">
<img id="divOnTop" src="blueBlock.png" class="blueBlock"></center>
</div>
Then here it as as an answer
.blockDisplay {
background-color: #444;
overflow: hidden;
position: relative;
}
.greenBlock {
width: 58%;
z-index: 2;
}
.redBlock {
position: absolute;
top: 6%;
left: 66%;
width: 8vw;
z-index: 4;
}
.blueBlock {
position: absolute;
top: 40vh;
left: 77%;
width: 23vw;
}
<div class="blockDisplay">
<center>
<img src="greenBlock.png" class="greenBlock">
<img src="redBlock.png" class="redBlock">
<img src="blueBlock.png" class="blueBlock">
</center>
</div>
My layout consists of 3 DIVs
The first DIVis a wrapper.
The second DIV is centered and uses max-width:980px; Otherwise it defaults to 100% width.
The third DIV is 200px wide and uses absolute position. right:-200pxand top:0px position it next to the first DIV
This layout works perfect but only because the last DIVhas a width of 200px. If that DIV had a variable width I couldn't use right:-200px and it wouldn't place correctly.
So my question is what would I do if the DIV with absolute position had a variable width? How would I place it next to the main DIV?
Here is my code.
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container"></div>
<div class="column_outside"></div>
</div>
</div>
CSS
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
right: -200px;
height: 500px;
width: 200px;
background-color: black;
}
FYI: the outer_container DIV allows column_outside to sit outside the screen if the browser is smaller than 980px wide.
Make it a child of the main and give it left: 100%;
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
left: 100%;
height: 500px;
width: 200px;
background-color: black;
}
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container">
<div class="column_outside"></div>
</div>
</div>
</div>
After a second thought, simply use left: 100% instead of right: -200px;
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
left: 100%;
height: 500px;
width: 200px;
background-color: black;
}
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container"></div>
<div class="column_outside"></div>
</div>
</div>
Very simple:
.column_outside {
right: 0px;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
}
Demo https://jsfiddle.net/n4nq6Lxt/
No need to change your HTML structure.
You can use transform: translateX(100%); what it does is to move the element to the right of the amount of the width of the element itself.
right: 0;
transform: translateX(100%);
I would like my div classes (.background_header, .background_content, .background_footer) to stack on top of each other during editing. In the link below you can see they stack fine, with the height of the header at 100vh and the content at 85vh, and the footer at 50vh.
http://www.hosting-mate.com/downloads/img1.png
In the image below however, when I want to edit it in dreamweaver, it displays COMPLETELY differently! I have tried setting the class position values to "relative" but that still doesnt work.
http://www.hosting-mate.com/downloads/img2.png
<style type="text/css">
body {
background-color: #191919;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
</style>
</head>
<!-- Content starts here -->
<body>
<div class="background_header">
<div id="header_bg">
<div id="border_l"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/border_left_light.png" /></div>
<div id="logo"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/logo_color_sml.png" /></div>
<div id="border_r"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/border_right_light.png" /></div>
<div id="scroll"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/scroll.png" /></div>
</div>
</div>
<div class="background_content">
<div id="content_bg">
<div id="border_content_top"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/content_border_top.png" /></div>
<div id="form"></div>
</div>
</div>
<div class="background_footer">
<div id="footer_bg">
<div id="border_footer_top"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/footer_border_top.png" /></div>
<div id="icons"><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/icon_phone.png" /><img src="http://www.hosting-mate.com/dkselectricalanddata/_assets/icon_email.png" /></div>
<div id="text"></div>
</div>
</div>
</body>
<!-- Content ends here -->
</html>
Below is my stylesheet code
#charset "utf-8";
img, object, embed, video {
max-width: 100%;
}
.ie6 img {
width:100%;
}
.background_header {
height: 100vh;
width: 100vw;
position: relative;
overflow: hidden;
display: block;
z-index: 100;
}
.background_content {
height: 85vh;
width: 100vw;
position: relative;
overflow: hidden;
display: block;
z-index: 50;
}
.background_footer {
height: 50vh;
width: 100vw;
position: relative;
overflow: hidden;
display: block;
z-index: 0;
}
#media only screen and (min-width: 769px) {
/* Header Content Starts*/
#header_bg {
position: absolute;
margin: 0;
height: 100%;
width: 100%;
max-width: 100%;
overflow: hidden;
}
#border_l {
position: absolute;
left: 0px;
top: 50%;
right: 75%;
width: 25%;
bottom: 0%;
overflow: hidden;
text-align: left;
}
#logo {
position: absolute;
width: 50%;
left: 25%;
right: 25%;
top: 37%;
bottom: 35%;
text-align: center;
}
#border_r {
position: absolute;
left: 75%;
top: 0%;
right: 0%;
width: 25%;
bottom: 50%;
overflow: visible;
text-align: right;
}
#scroll {
position: absolute;
width: 100%;
text-align: center;
bottom: 0px;
}
/* Header Content Ends */
/* Form Content Starts */
#content_bg {
position: absolute;
width: 100%;
height: 100%;
background-color: #FFF;
}
/* Form Content Ends */
/* Footer Content Starts */
#footer_bg {
position: absolute;
width: 100%;
height: 100%;
}
/* Footer Content Ends */}
Any help in this matter would be greatly appreciated.
Thanks!!
I need to create a div-element, which has 100% width and height for the visible part of the screen. Below this there should be another div-element with variable height, which can only be seen, if the user scrolls down. It is like a one-page website...
JSFiddle: http://jsfiddle.net/sopk6vx3/
#main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
display: none;
opacity: 0.8;
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
}
#overlay section {
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
background-color: #FFF;
width: 94%;
height: 90%;
border-radius: 5px;
margin: 2% 3%;
}
<div id="main">
<header>Navigation</header>
<footer>Footer of main-element</footer>
</div>
<div id="tour">
Here is some tour-information about the product
</div>
<div id="overlay">
<section>Main Content</section>
</div>
Via click on a navigation element the #overlay will be fade in to show the content.
So how do I do the correct CSS for the #main and #tour element? As in the fiddle it doesn't work.
And could the overlay-css been optimized?
I'm using the vertical centering technique explained here on CSS-Tricks: http://css-tricks.com/centering-in-the-unknown
I have an image that needs to be vertically centered in a div. It seems to work just fine on every platform except mobile Safari/iOS, where the image is placed out of view. I can't seem to work out what the quirk or compliance issue is on mobile Safari that is causing this.
Here's the issue in a CodePen: http://codepen.io/anon/pen/iDalc
Here's my stripped down HTML and CSS
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Durga%2C_Burdwan%2C_2011.JPG/1920px-Durga%2C_Burdwan%2C_2011.JPG">
</div>
</a>
</div>
</div>
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Upper_Antelope_Canyon_Heart_Formation_2013.jpg/640px-Upper_Antelope_Canyon_Heart_Formation_2013.jpg">
</div>
</a>
</div>
</div>
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Maly_Krashokholmsky_bridge_4exp_Oloneo.jpg/1920px-Maly_Krashokholmsky_bridge_4exp_Oloneo.jpg">
</div>
</a>
</div>
</div>
And my CSS:
.headline {
background: gray;
padding: 0 3.125%;
width: 93.75%;
margin-left: auto;
margin-right: auto;
max-width: 768px;
}
.wrapper {
position: relative;
overflow: hidden;
min-height: 190px;
width: 100%;
margin-bottom: 2px;
}
.background {
position: absolute;
top: 0;
height: 100%; width: 100%;
z-index: 1;
background-color: #000;
text-align: center;
}
.background img {
width: 100%;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.background:before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
Can anyone advise what CSS issue is happening in mobile Safari? So far, I've diagnosed it may have something to do with the transform: translate-Y property. All mobile Safari testing done on device as well as iOS simulator.
Thanks in advance!
For anyone who comes across this in any searches, I managed to fix this on my own. Changed .background img to position: absolute; and left: 0;
I don't entirely understand what's going on but whatever it fixed it. I'd also like to add that I was mistaken in my original post. Somewhere I credited CSS Tricks for the vertical centering technique I implemented, which wasn't the actual source. I had referenced the following URL: http://davidwalsh.name/css-vertical-center
Updated CodePen: http://codepen.io/anon/pen/zJugd
.headline {
background: gray;
padding: 0 3.125%;
width: 93.75%;
margin-left: auto;
margin-right: auto;
max-width: 768px;
}
.wrapper {
position: relative;
overflow: hidden;
min-height: 190px;
width: 100%;
margin-bottom: 2px;
}
.background {
position: absolute;
top: 0;
height: 100%; width: 100%;
z-index: 1;
background-color: #000;
text-align: center;
}
.background img {
width: 100%;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.background:before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}