I need some help finessing a layout I’m working on.
Here is a link to the current status of the site:
http://sometimesyoubreakaclarinet.com/
What you’ll see is a large pink area behind the gray content area, it is roughly a third down the page. For some reason, it is only forming to 100% of the height/width of the browser when I actually want it to match the height of the content. How do I get the height to fill down to fit to the content, in the same way the gray content area is already doing?
Secondly, I want this pink area to begin at the end of the background banner image at the top rather than where it is now. How do I achieve this? Do I need to change the position from relative to something else?
The goal here is to have the pink area flow over the banner image and title; something like what is outlined here:
http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect
I’ve include what I think is the relevant CSS code below, possibly I’ve left something important out but you should be able to locate the CSS file on the link above if necessary.
#menu { width: 100%; height: 32px; margin: auto; padding: 6px auto 0; top:0px; z-index: 10;
position: fixed; text-decoration: none; background: rgba(44,44,44,0.95); }
#photograph { width: 100%; margin: 0 auto; background: #8a2dc7 url('img/header-2014-apr-1200.jpg') fixed center top no-repeat;
background-position: center top; background-size: 100%; min-height: 250px; height: 250px; top:0px;
position: fixed; }
#sitetitle { width: 100%; height: auto; margin: 0 auto; padding: 25px 0 0 0; background: transparent; position: fixed; } #deck { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; padding: 0; position: relative;
background: transparent; z-index: 4; }
#card { width: 800px; height: auto; margin: 170px auto 0; padding: 10px 18px;
text-decoration: none; background: #2c2c2c; }
#curtain { width: 100%; height: auto; min-height: 100%; margin: 220px auto 0; padding: 0; position: relative;
background: #f12fde; z-index: 2; }
Hopefully someone can help me figure this out. Thank you!
does this fix your issue? Change the css of #curtain to..
#curtain {
width: 800px;
height: auto;
min-height: 100%;
margin: 0 auto;
padding: 0;
position: relative;
background: #f12fde;
z-index: 2;
top: 0;
}
Related
This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 1 year ago.
I want to make the image caption stick to the top of the viewport once a user scrolls the page, but it's not working. I would greatly appreciate the help, here is my HTML and CSS code:
<div id="img-div">
<img src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/Audrey%20Lead.png" id="image">
<p id="img-caption"><strong>For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.<br><br>-Audrey Hepburn</strong></p>
</div>
html{
width: 100vw;
}
body{
width: 100%;
margin: auto;
}
h1{
position: absolute;
z-index: 5;
}
#img-div{
position: relative;
height: 778px;
width: 100%;
}
#image{
background-repeat: no-repeat;
height: 774px;
width: 100%;
object-fit: cover;
}
#img-caption{
position: sticky;
font-size: 19px;
height: 9.5em;
width: 21em;
padding: 23px 13px 20px 23px;
margin: 0;
background-color: white;
opacity: 70%;
top: 0px;
z-index: 5;
}
The problem is that the stickiness position occurs in the given code in relation to the containing element, not in relation to the viewport.
This snippet takes the caption out of that element and then it sticks to the top of the viewport. (Note, to make things scrollable body has been given height 500vh for this demo).
html {
width: 100vw;
}
body {
width: 100%;
margin: auto;
height: 500vh;
}
h1 {
position: absolute;
z-index: 5;
}
#img-div {
position: relative;
height: 778px;
width: 100%;
}
#image {
background-repeat: no-repeat;
height: 774px;
width: 100%;
object-fit: cover;
}
#img-caption {
position: sticky;
font-size: 19px;
height: 9.5em;
width: 21em;
padding: 23px 13px 20px 23px;
margin: 0;
background-color: white;
opacity: 70%;
top: 0px;
z-index: 5;
}
<div id="img-div">
<img src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/Audrey%20Lead.png" id="image">
</div>
<p id="img-caption"><strong>For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.<br><br>-Audrey Hepburn</strong></p>
I have been using a sidebar with transparent background and left border(Orange colour) to appear on all my pages. But it has a min-height: 100vh. It only appears on half of the page. I want the border to appear as far as the content of the page.
Code:`
#secondary {
background-color: transparent;
border: 0;
clear: none;
float: left;
margin: 0 0 0 -97.5%;
min-height: 100vh;
width: 122px;
}`
#secondary {
background-color: transparent;
border: 0;
clear: none;
float: left;
margin: 0 0 0 -97.5%;
min-height: 100vh;
width: 122px;
/*add this*/
position: fixed;
top: 50px;
left: 0;
}
In the line: top: 50px, 50px is height of navigation (menu)
Let me know if it works
Please what do I have to add or change here to reduce the footer-bg to a pixel with width: 100; and height: 18;?
I'll be glad if this is looked on now as I need this help now.
Gracias.
#footer-bg {
background:#1f512e;
position: relative;
display: block;
width: 100%;
padding-bottom: 0;
min-height: 43px;
}
.footer-top {
height: 12px;
}
You can apply your dimensions using
width: 100px;
height: 18px;
http://jsfiddle.net/f9p6xbrn/2/
#footer-bg {
background:#1f512e;
position: relative;
display: block;
width: 100px;
height: 18px;
padding-bottom: 0;
min-height: 43px;
}
.footer-top {
height: 12px;
}
Simple enough. If you want the green bar to be centered and take up 960px, do this. My changes are at the bottom.
#footer-bg {
background:#1f512e;
position: relative;
display: block;
padding-bottom: 0;
min-height: 43px;
width: 960px;
margin: 0 auto;
}
If you want to set your footer to 100% and have it match the rest of your content, you would have to create some sort of container to put all your content including the footer in. Then set that container to a width of 960px with margin: 0 auto.
My problem is having a fixed navigation at the top of the page and setting the rest of the document to margin: 0 auto; so that when the page is expanded, everything stays in the center. Is there a way to have the fixed header stay fixed at the center of the page when the page expands and contracts as well as it moving up and down as the page scrolls or no?
.container {
max-width: 1200px;
height: 1200px;
position: relative;
border: 0px;
text-align: center;
left: 30px;
}
.header {
width: 1200px;
height: 140px;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
left: 50%;
top: 0px;
z-index: 1;
}
Your nav has a fixed width? Your HTML/CSS code would be wishfull.
But having to guess, I think this might help:
.header {
position: fixed;
width: 400px;
left: 50%;
margin-left: -200px; /* 50% of the elements width */
}
.content {
width: 400px;
margin: 0 auto;
}
Demo.
i have a twitter layout, well sorta.. the main table kinda looks like it, with the way it's sectioned off...
html {
-webkit-user-select: none;
text-shadow: 2px 2px 2px #000;
color: #fff;
font-smooth: always;
padding: 0;
width: 100%;
height: 100%;
background: url("./img/main_back.jpg");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
body
{
height: 100%;
width: 100%;
}
.content_wrap {
position: relative;
top: 5px;
display: inline-table;
margin-right: auto;
margin-left: auto;
width: 90%;
height: 100%;
background-color: transparent !important;
}
.left_table {
overflow: hidden;
display: table-cell;
text-align: center;
width: 50%;
height: 100%;
padding-left: 5px;
padding-bottom: 20px;
}
.right_table {
display: table-cell;
text-align: center;
width: 20%;
height: 100%;
}
html5 doc type
header <-- floated left
section <-- floated right
section <-- content wrap
section <-- left_table
aside <-- right_table
footer <-- fixed position, bottom 0px
markup is spot on, i check it with the w3c site all the time.
can't get it to center, it's off center by about 30 to 40px, anyone have any ideas?
I notice that nowhere in yoru code do you actually have a center on your content div...
Perhaps you mean this?
body
{
height: 100%;
width: 100%;
text-align: center;
}
Also, first comment has a point.