For some reason I'm getting stuck on this fairly simple problem. I want a scrollable "website" (just a looong jpg screenshot) framed through an iPad as part of my portfolio. The goal is to show the experience of visiting the site in its entirety without taking up a huge amount of space on the page.
For some reason, I haven't been able to get the overflow working right. This doesn't seem like a hard problem on the surface, but it's got me stumped. Any nudge in the right direction is appreciated.
.nest {
position: relative;
height: 712px;
overflow-y: scroll;
}
.ipad {
position: absolute;
top:0px;
right:0;
bottom:auto;
left:0;
}
.container{
height: 940px;
width: 712px;
position: absolute;
top:45px;
background: red;
}
.content {
width: 712px;
overflow: auto;
}
<div class="nest">
<div class="container">
<img class="content" src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
</div>
<img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
</div>
Your main problem is that your .ipad is top of the .content and mouse scroll is doing its job on the .ipad image but you want to scroll the screentshot image!
<style>
.nest {
position: relative;
height: 712px;
}
.ipad {
position: absolute;
top: 0;
left: 0;
}
.container {
height: 875px;
width: 660px;
left: 26px;
position: absolute;
top: 73px;
}
.container > div {
max-height: 100%;
overflow-y: scroll;
position: absolute;
}
.content {
width: 100%;
}
</style>
<div class="nest">
<img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
<div class="container">
<div>
<img class="content"
src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
</div>
</div>
</div>
Here I changed the order in HTML to fix the z-axis problem, you may also want to use z-index: number in your CSS to fix this too.
Remove overflow-y: scroll; from .nest class, and add it to .container class.
.nest {
position: relative;
height: 712px;
}
.ipad {
position: absolute;
top: 0px;
right: 0;
bottom: auto;
left: 0;
}
.container {
height: 940px;
width: 712px;
position: absolute;
top: 45px;
background: red;
overflow-y: scroll;
}
.content {
width: 712px;
overflow: auto;
}
<div class="nest">
<div class="container">
<img class="content" src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
</div>
<img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
</div>
Related
Hello I need to position an image as in the example. Theoretically it looks like it is positioned over 2 seperate boxes with different background colors, that is the goal, but practically it is not possible, at least for me. How to solve the problem?
Usually you'd do this with flex and vertical alignment, but since you want specifically the image to be between boxes i'd say absolute is the way to go here
.card {
display: block;
margin-left: 80px; /* image width + 20px */
}
.header, .image-container {
display: block;
margin: 0;
}
.header h1 {
margin: 0;
}
.image-container {
height: 1px;
position: relative;
}
.image-container .image {
display; inlnie-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: purple;
position: absolute;
top: -50%;
left: -10px;
transform: translateY(-50%) translateX(-100%);
}
<div class="card">
<div class="header">
<h1>Header</h1>
</div>
<div class="image-container">
<div class="image"></div>
</div>
<div class="header">
<h1>Header 2</h1>
</div>
</div>
The simplest solution will be using a combination of an of z-index and position:absolute.
*A small suggestion if you may encounter the problem: you must use z-index with specifying the position (position: static will not work)
img {
width: 100px;
height: 100px;
z-index: 99;
position: absolute;
}
div {
background-color: black;
z-index: 1;
width: 200px;
height: 100px;
position: absolute;
top: 10px;
left: 5px;
}
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png'>
<div></div>
Here is my html code:
<div class="header">
<div class="headerBanner">
<img src="img/NewTopBanner.jpg" width="885" height="190" border="0" />
</div>
</div>
Here is my CSS:
.header {
position: relative;
background:url('img/header/CRC_Website_TopBannerLeftStretch.jpg'),url("img/header/CRC_Website_TopBannerRightStretch.jpg");
background-position:left, right;
background-size:50% 100%;
background-repeat:no-repeat;
}
.headerBanner {
width: 885px;
}
This is my HTMl and css code.
it works, but this two background images stretches to middle. I want this two images(left,right) not stretched and repeat to middle of the page.
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
Try this one, (not tested). It may be help you.
Here's my working example:
http://jsfiddle.net/UGhKe/2/
CSS
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: 5em;
}
.content {
position: absolute;
top: 5em;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
HTML
<div id="body">
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
I want the content to be positioned below the header when you scroll the top (but hidden when you scroll down, under header) - this works fine...
However I need to remove top: 5em and use something like "inherit the current height of the header" - is it possible without JS?
If it's really not possible without JS, then I can just use JS but I'd rather try and find a solution in pure CSS.
EDIT:
I should note that the reason I can't use top: 5em is because the header will not have a fixed height - an image (for a logo) will be used inside of the text, and that would be set to max-width: 100% so that it shrinks to right width for an iPhone and doesn't expand too much on say an iPad.
See if thats work for you. http://jsfiddle.net/UGhKe/3/
I added another div with the same height but "non-fixed" to simulate your fixed header.
HTML
<div id="body">
<div id="blockHeader"></div>
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
CSS
html, body { margin:0; padding:0; }
#blockHeader
{
width:100%;
height: 5em;
}
.content {
position: absolute;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
You can do it using variables(Use SASS or LESS for that). Take a look at the pen.
CODE:
$headerContentVariable: 5em;
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: $headerContentVariable;
}
.content {
position: absolute;
top: $headerContentVariable;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
I have 4 divs containing images, absolute positioned totalling 100% width.
This is due to the user wanting to use the full width of the page in all browsers.
I need to position a div underneath it, also with 100% width, which expands/contracts at the same rate with the browser.
I understand floating isn't an option.
Desired layout:
[img1][img2][img3][img4]
[ content ]
-------100% width-------
HTML
<div id="container">
<div id="image1"><img src="images/1.jpg"></div>
<div id="image2"><img src="images/2.jpg"></div>
<div id="image3"><img src="images/3.jpg"></div>
<div id="image4"><img src="images/4.jpg"></div>
</div>
<div id="content">
</div>
CSS:
#container{
width: 100%;
position: relative;
height: auto;
}
#image1 {
width: 25%;
position: absolute;
right: 50%;
}
#image2 {
width: 25%;
position: absolute;
right: 75%;
#image3 {
width: 25%;
position: absolute;
left: 50%;
}
#image4 {
width: 25%;
position: absolute;
left: 75%;
}
#content {
width: 100%;
height: auto;
}
img {
max-width: 100%;
height: auto;
}
Used to this method
Live Demo ---------------------------- Demo-two
Css
#pic-container{
font-size:0;
}
#pic-container img{
width:25%;
vertical-align:top;
}
HTML
<div class="container">
<div id="pic-container">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
</div>
</div>
<div class="container">
herer is the your content
</div>
Live Demo
If I am not wrong look at your CSS code:
you forget to put closing "}" of your #image2 .
it must look like this now.
#image2 {
width: 25%;
position: absolute;
right: 75%;
}
hope it helps.
What I am trying to is have a header image centered on the top with a different color background on either side, dynamically filling the rest of the page. The structure would look like this:
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Center"></div>
<div id="Header_Right"></div>
</div>
The Header_Center is of 960px and the Header_Left and Header_Right should fill either side of the image to the edge of the page and change width as the page width changes.
I can not get the CSS to work properly.
I assume you want those 3 divs to fill each with different content, the outsides filled fluidly or multiline. Otherwise the answer could be much 1) more simple. I also assume that the center div defines the total height of the header.
Given these two assupmtions, still a few different scenarios are thinkable of which I will give 4 examples from which you can choose the best fitting solution.
The HTML is exactly yours.
The CSS looks like:
#Header_Container {
width: 100%;
position: relative;
}
#Header_Left {
position: absolute;
left: 0;
right: 50%;
margin-right: 480px;
}
#Header_Right {
position: absolute;
left: 50%;
right: 0;
margin-left: 480px;
top: 0;
}
#Header_Center {
width: 960px;
position: relative;
left: 50%;
margin-left: -480px;
}
Now, you could change behaviour of left and right with a few extra styles:
height: 100%;
overflow: hidden;
See demonstration fiddle.
1) When the sides may be partially invisible outside the browser window (in case which you would align content in de left div to the right, and vise versa), then I suggest the solution in this fiddle demo which does not require absolute positioning at all so that any content below the header is properly cleared in all circumstances.
You must fix it using padding and box model + position : relative - it can be done without HTML Change
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
And CSS ( 100px is for example )
#Header_Container{ overflow: hidden; height: 100px; }
#Header_Container *{ box-sizing: border-box; height: 100%; }
#Header_Left{ width: 50%; padding-right: 480px; }
#Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% };
#Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }
Example is here http://jsfiddle.net/ZAALB/2/
EDITed incorrect example
If I got you right then this might be a possible solution.
#container {
width: 100%;
height: 150px;
}
#left {
position: absolute;
left: 0;
width: 50%;
height: 150px;
background-color: #FF0000;
}
#right {
position: absolute;
right: 0;
width: 50%;
height: 150px;
background-color: #0000FF;
}
#center {
position: absolute;
left: 50%;
margin-left: -480px;
width: 960px;
height: 150px;
background-color: #888888;
}
#left basically says that the element will be positioned absolute and attached to the left side with a width of 50%. Same applies to #right just for the right side.
#center positions the element absolute pushed 50% to the left and then with a negative margin of width/2 which in your case would be 480px to position it in the center.
The order of the elements in the HTML is important for this hack.
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
The #center DIV must be the last element if you don't want to work with z-indexes.
Here's a fiddle to test it.
HTML:
<div id="Header_Container">
<div class="Header_Side" id="Header_Left"></div>
<div class="Header_Side" id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
CSS:
#Header_Container {
position: relative;
width: 100%;
}
#Header_Container > div {
height: 158px; /* height of the image */
}
.Header_Side {
position: absolute;
width: 50%;
}
#Header_Left {
left: 0;
background-color: blue;
}
#Header_Right {
left: 50%;
background-color: green;
}
#Header_Center {
position: relative;
width: 158px; /* width of the image */
margin: 0 auto;
background-image: url('...');
}
Also see this example.
This works, but you need to change your HTML: http://jsfiddle.net/gG7r7/1/
HTML
<div id="header_background_container">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="header_content_container">
<div id="header_content"><p>Content goes here</p></div>
</div>
CSS
#header_content_container {
position:absolute;
z-index:1;
width: 100%;
height: 100%;
}
#header_content {
width: 960px;
margin: 0 auto;
background: red;
height: 100%;
}
#header_left {
background: white;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
#header_right {
background: black;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}