Hi my question is can somebody help me to become the scrollbar of my content over the footer.
How it looks on the browser
And here code snippets
HTML:
<body>
<div class="major">
<div class="torso">
<div id="gallery">
</div>
<div class="bone">
<div class="aero">
Menu
</div>
<div class="magneticaero">
<a href="index.html" class="geo">
<div class="chest">
<div class="flaticon-house158">
</div>
</div>
</a>
</div>
</div>
</div>
</body>
CSS:
html,head,body,p,div,a,ul,h2{
margin: 0;
padding: 0;
font-family: sans-serif,Century Gothic,CenturyGothic,AppleGothic;
text-decoration: none;}
.major{
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: fixed;}
.torso{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-y: scroll;}
.bone{
width: 100%;
height: 70px;
margin: 0;
padding: 0;
bottom: 0;
position: fixed;
background-color: #C2C2C2;
text-align: center;
transition: 1s;}
.aero{
width: 100%;
height: 40px;
box-shadow: 0 0 1px #FFF;
padding-top: 15px;
padding-bottom: 15px;
font-size: 30px;
font-weight: bold;
color: #FFF;}
.magneticareo{
width: 100%;
height: 360px;}
.chest{
width: 25%;
height: 350px;
box-shadow: 0 0 1px #FFF;
float: left;
font-size: 25px;
font-weight: bold;
color: #FFF;}
.boneup{
height: 350px;}
.photo{
width: 100%;
height: auto;
padding: 0;
margin: 0;}
.order{
width: 20%;
height: auto;
padding: 0;
margin: 0;
float: left;}
The solution i search
I'd be really thankful when somebody could help me :-)
Tim
Take .aero OUT of all the other elements, move it down directly above </body>, and give it a fixed position with bottom: 0
I addition, set the height of .major to calc(100% - 40px) , i.e. as high as the window minus the height of .aero. (And use box-sizing: border-box on it to really only make it 40px high.)
ADDITION after seeing website: Assign height: calc(100% - 70px); to .torso-gallery - this has the same effect I described above and you won't need to change your HTML structure anymore.
Related
I'm trying to make the background fill the whole page. The only way I figured out how to do it is by setting the height and width of <div id="All"> and putting that div around everything else. I know that if I change the size of the browser, though, it won't auto resize, so it would look weird if I made my browser smaller or bigger.
If I set height and width to auto on #All, it def doesn't fill out the whole webpage. Please advise what I am doing wrong. Plus if I do auto, the sticky #Move doesn't stay at the top of the page.
This code is just stuff I have learned, so not an actual project, but I want to learn how to do it for future projects.
#Move {
position: sticky;
top: 0;
color: red;
}
h1 {
color: red;
}
.Hello {
font-size: 36px;
}
.Hello2 {
font-size: 15px;
}
p {
color: white;
}
.DivClass {
width: 160px;
height: 220px;
padding: 40px;
border: 10px solid black;
border-radius: 60px;
margin: 50px;
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqOq9_iT948LTPmS5FuCMlaqlvn2KJQ-0d7Xw5kLMfWz69wwRA&usqp=CAU");
background-repeat: no-repeat;
background-size: cover;
opacity: 80%;
}
.image-whitecat {
width: 500px;
heigth: 500px;
background-color: red;
margin: 50px 50px 90px 250px;
transform: rotate(10deg);
}
.image-cat {
width: 700px;
height: 500px;
border-radius: 300px;
margin-left: 350px;
filter: opacity(70%)
}
.Purple {
color: purple;
}
.PurpleText {
background: teal;
text-align: center;
padding-top: 50px;
width: 150px;
height: 100px;
border: 5px solid red;
border-radius: 100px;
margin: 10px 0 0 1000px;
}
#All {
background-color: lavender;
position: absolute;
top: 10px;
bottom: 10px;
height: 1850px;
width: 1810px;
}
<div id="All">
<div class="DivClass">
<h1>HELLO!!!</h1>
<p class="Hello">Hello</p>
<p class="Hello2">Hello 2</p>
<p>Yes</p>
</div>
<p id="Move">I will stay at the top of the page!</p>
<div>
<img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-551554__340.jpg" class="image-whitecat" />
</div>
<div>
<img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__340.png" class="image-cat" />
</div>
<div class="PurpleText">
<p class="Purple">Purple</p>
</div>
</div>
I think you will need to give both your html and body tags a css height ...
html, body {
height: 100%;
margin: 0;
}
So,
https://jsfiddle.net/z51crou7/
Im currently building a website with a footer which should be sticked to the bottom, on my desktop (with chrome browser) it works fine, but when i'm trying the website on a mobile device, there is a little spacing underneath the footer, my question is how I can fix this?
My website can be found at: http://block-smash.com/beta and my code is as follows:
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
<center>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
</center>
</div>
</div>
<div id="footer">
© Mickael van Schie
</div>
and here my CSS:
html{
position: relative;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body{
background: rgb(230,230,220);
overflow-x: hidden;
margin: 0px;
}
#wrapper{
height: 100%;
width: 100%;
}
#header{
width: 100%;
height: 50%;
background: rgb(100,200,100);
}
#nav{
height: 125px;
margin-left: auto;
margin-right: auto;
margin-top: -62px;
}
#footer{
width: 100%;
height: 15px;
background: rgb(100,200,100);
text-align: center;
padding: 5px;
font-family: arial;
color: rgb(230,230,220);
position: absolute;
bottom: 0px;
}
.circle{
height: 125px;
width: 125px;
border-radius: 90px;
background-color: white;
border: 5px solid rgb(70,130,70);
display: inline-block;
margin: 0px 40px 0px 40px;
position: relative;
}
I got some jquery in the website aswell, but that is not necessary for the footer or any height in the page.
I've altered the code a little for you.
I think that the problem is with the body not being the maximum height. Therefore, the footer might stick to the bottom of the body, which stops somewhere near those circles.
The code I changed is the following:
html {
position: relative;
min-height: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body {
background: rgb(230, 230, 220);
overflow-x: hidden;
margin: 0px;
position: relative;
min-height: 100%;
height: auto;
}
As you can see, I gave html a solid height, and added a height and a min-height to the body, as well as a position relative.
The fiddle can be seen here.
Remove height property from your footer class.
#footer{
width: 100%;
/* height: 15px; */
background: rgb(100,200,100);
text-align: center;
padding: 5px;
font-family: arial;
color: rgb(230,230,220);
position: absolute;
bottom: 0px;
}
I would like to know how to make main content appear in front of background in the middle of the page below header and above footer. Like on this site for example. http://cdn.webfactore.co.uk/web_design_example_551_large.jpg I am not sure if it deals with heights and widths or anything else. Help me please. How do I make main content appear in front of background in middle?
Here's a quick HTML5 skeleton
<!doctype html>
<html>
<head>
</head>
<body>
<header>
<div id="header-wrapper">
</div>
</header>
<div id="content">
</div>
<footer>
<div id="footer-wrapper">
</div>
</footer>
</body>
</html>
html,
body {
background: #ccc;
font: 62.5% Arial, Helvetica, sans-serif; /* --- Setting body font at 62.5% makes 1.2em equal to 12px --- */
line-height: 1.7em;
letter-spacing: 1px;
color: #222;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
header {
background: #555;
position: relative;
width: 100%;
height: 60px;
margin: 0;
padding: 0;
}
#header-wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
padding: 0;
}
#content {
background: #fff;
position: relative;
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
}
footer {
background: #555;
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
}
#footer-wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
padding: 0;
}
I'm building the framework for a responsive site that has a fixed header and 25px padding on both right & left sides of the page. I'm not encountering any issue with the padding or width on the content, but the fixed header runs off the right side of the browser when the display is too small. I'd like the header to obey the same rules and design as the rest of the page, and always show a 25px padding unless the display is narrower than my min-width.
Any help would be appreciated. This seems rather simple, but I'm pulling my hair out.
CSS:
#main {
padding: 0 0px 0 25px;
min-width: 725px;
max-width: 1000px;
margin: 0 auto;
}
#page {
padding: 0 25px 0 25px;
display: block;
margin: 0 auto;
max-width: 1000px;
min-width: 725px;
position: relative;
}
ul#header-nav {
margin: 33px 0px 0 0px;
list-style:none;
width:500px;
font-family: "ss-bol", Helvetica, Arial, sans-serif;
overflow: hidden;
}
ul#header-nav li a {
text-decoration:none;
padding-left: 30px;
color:#000000;
float:left;
text-align: right;
display:inline;
}
#container {
padding-top: 100px;
left: 0;
height: 100%;
}
#header-main {
width: 100%;
margin: 0 -25px 0 0px;
}
#header-frame {
z-index: 10;
background-color: #c9dcb1;
float: right;
}
#header-box {
width: 100%;
max-width: 1000px;
min-width: 725px;
padding-left: -25px;
height: 100px;
background-color: #ffffff;
margin:0px;
position: fixed;
background-color: #c9dcb1;
z-index: 11;
}
#content {
padding-top: 100px;
width: 100%;
background-color: #75efe8;
}
HTML:
<body>
<!-- BeginHeader -->
<div id="page" class="clearfix heed">
<div id="header-main">
<div id="header-box">
<div id="header-frame">
<ul id="header-nav">
<li>NEW</li>
<li>SHOP</li>
<li>WINE</li>
<li>BLOG</li>
<li>LOOKBOOK</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
<div id="content">
TEST CONTENT TEXT
</div>
</div>
</body>
padding, margin and border are added to the with of an element. So, when your display is to small, by telling max-width: 1000px, you imply 1050px because of the padding.
The easy solution is to replace width: 100% by this left and right set as 0, and center your inner content.
<div id="header-box">
<div class="inner">header</div>
</div>
#header-box {
max-width: 1000px;
min-width: 725px;
position: fixed;
left: 0;
right: 0;
top: 0;
}
#header-box .inner {
max-width: 1000px;
margin: 0 auto;
}
Simon, I took the basics of your approach and expanded upon it to get what I needed.
Here's the final CSS:
#header-wrapper {
padding: 0;
margin: 0;
}
#header {
position: fixed;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 9;
background-color: #ffffff;
}
#header .inner {
margin: 0 auto;
padding: 0 25px 0 25px;
max-width: 1000px;
height: 100px;
z-index: 10;
background-color: #ffffff;
}
ul#header-nav {
margin: 58px -20px 0 0px;
list-style: none;
width: 500px;
font-family: "ss-bol", Helvetica, Arial, sans-serif;
font-size: 14px;
overflow: hidden;
}
ul#header-nav li a {
text-decoration: none;
padding-left: 30px;
color: #000000;
float: left;
text-align: right;
display: inline;
}
And the HTML:
<div id="header-wrapper">
<div id="header">
<div class="inner">
<div class="right">
<ul id="header-nav">
<li>NEW</li>
<li>SHOP</li>
<li>WINE</li>
<li>BLOG</li>
<li>LOOKBOOK</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
Thanks again!
I have a problem centering everything while keeping my header in fixed position. Can anyone help me figure out why?
Here is my HTML
<div id="wrapper">
<div class="header">....</div>
<div class="experiences">...</div>
</div>
Here is the CSS:
#wrapper {
margin: 0 auto 0 auto;
width: 1000px;
height: auto;
}
.header {
background-color: #222;
color: white;
top: 0;
left: 0;
right: 0;
position: fixed;
height: 130px;
padding: 20px;
width: 1000px;
margin: 0 auto 0 auto;
}
.experiences {
background-color: #eee;
padding: 20px;
* padding-top: 190px;
width: 1000px;
margin-top: 170px;
}
You just need to remove the left and right declarations in .header.
The rest should already be centered (unless you use a very old version of IE...).