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!!
Related
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;
}
Now the issue is .side-bar-red is taking 95% of the total window not 95% of the black sidebar. What is wrong here? How to fix?
.side-fixed {
position: fixed;
top: 0;
left: 0;
height: 100vh;
}
.side-bar-black {
width: 60%;
height: 100vh;
max-width: 480px;
min-width: 320px;
background-color: #333;
}
.side-bar-red {
background-color: red;
height: 100vh;
width: 95%;
}
<div class="side-fixed side-bar-black ">
<div class="side-fixed side-bar-red ">
something...
</div>
</div>
position: fixed moves an element out of the normal flow. So both elements are threaten as single stand alone elements. Remove side-fixed-class from the side-bar-red-element:
.side-fixed {
position: fixed;
top: 0;
left: 0;
height: 100vh;
}
.side-bar-black {
width: 60%;
height: 100vh;
max-width: 480px;
min-width: 320px;
background-color: #333;
}
.side-bar-red {
background-color: red;
height: 100vh;
width: 95%;
}
<div class="side-fixed side-bar-black ">
<div class="side-bar-red ">
something...
</div>
</div>
I'm building my first actually decent website basically and I'm creating a background atm with some css and an image and I want to do it just as it is in the picture
.
(accomplished already) but it's not responsive probably because of position: absolute property and I want to make it properly responsive.
Here is the HTML code I am using for the background
.bg {
background: #9359C7;
color: white;
display: grid;
text-align: center;
height: 764px;
width: 1280px;
}
.content {
position: relative;
}
.content img {
width: auto;
height: auto;
position: absolute;
right: -178px;
bottom: 0;
}
<div class="bg">
<div class="content">
<h1>Lol</h1>
<img src="https://www.pikpng.com/pngl/m/69-698658_yami-ygi-y-gi-yu-gi-oh.png" alt="Yugi">
</div>
</div>
EDIT: I put my whole site on this patebin since idk it wouldn't let me upload it on here the snippet I was given did not work for me at least.
This should do the trick:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.hero {
position: relative;
overflow-x: hidden;
}
header {
position: relative;
background: black;
padding: 40px 0;
z-index: 5;
}
.content {
position: relative;
z-index: 5;
color: white;
text-align: center;
width: 70%;
height: 100vh;
max-height: 768px;
background: #9359C7;
padding: 20px;
}
img {
width: auto;
height: 98%;
position: absolute;
right: 30%;
bottom: 0;
transform: translateX(50%);
padding-top: 80px;
z-index: 10;
}
h1 {
margin: 0;
}
<div class="hero">
<header></header>
<div class="content">
<h1>Lol</h1>
</div>
<img src="https://ms.yugipedia.com//c/c4/YamiYugi-DULI.png" alt="Yugi">
</div>
I am attempting to use the overflow: visible; property in order to show a child element passing the parent element. My attempt is failing and the child element (the image) is getting cut off at the top of the parent element.
Does anyone see what I am doing wrong?
#blue {
height: 150px;
width: 100%;
background: blue;
}
#redBanner {
width: 100%;
height: 150px;
background: #b22525;
position: relative;
overflow: visible;
}
#redBannerImg {
position: absolute;
bottom: 0;
right: 10%;
width: 40%;
height: auto;
}
<section id="blue">
</section>
<section id="redBanner">
<img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="" id="redBannerImg">
</section>
If you use top: 0;instead of bottom: 0; it works, but not sure if that brokes your design.
#redBanner {
width: 100%;
height: 150px;
background: #b22525;
position: relative;
overflow: visible;
}
#redBannerImg {
position: absolute;
top: 0;
right: 10%;
width: 40%;
height: auto;
}
<section id="redBanner">
<img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="" id="redBannerImg">
</section>
Unable to scroll when cursor is over the blue block at the top, any ideas of where I'm going wrong?
JSFiddle Demo
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</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;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$(".wrapper").scrollTop(300);
As you have the position to be fixed for the class block it will prevent the scrollbar from working. So change the position for class block.
Removed the wrapper div and add the "body" to the javascript
Update
http://jsfiddle.net/cr8uj/7/
JS
$( "body" ).scrollTop( 300 );
You have used css position: Fixed;, so class block will not move from its position and scrollbar will not work on mousehover event
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
background: #ccc none repeat scroll 0 0;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$( ".wrapper" ).scrollTop( 300 );
here is fiddle
please do not use fixed property on .block class
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}