I have a problem with the displaying from two containers with css. The first container has a background image. The second container is text only.
The position of the second container is on the top the first container.
but by the displaying in small media queries, I would displaying the second container after the first container.
#back,
#back1 {
width: 100%;
height: 50px;
background-color: red;
}
<html>
<body>
<div id="back">
<div id="text">
Hello
</div>
</div>
<hr />
<div id="back1"></div>
<div id="text">
Hello
</div>
</body>
</html>
Put them both in a relatively positioned container and then add a media query to absolutely position the the text for larger screens:
#back {
width: 100%;
height: 50px;
background-color: red;
}
#container {
position: relative;
}
#media screen and (min-width: 768px) {
#text {
position: absolute;
top: 0;
}
}
<div id="container">
<div id="back"></div>
<div id="text">
Hello
</div>
</div>
Related
I have a flex div that contains two further elements. When viewed fullscreen on a desktop, one of the elements acts as a sidebar. On smaller screens, the elements collapse to be displayed one on top of the other.
This technique is explained on Every Layout.
I want to introduce a sticky element that will be used for navigation. On a wide screen, it works as expected. I can scroll the page and the sitcky element sticks to the top. However, in a narrower window, the element does not stick. It scrolls out of view – the same in both Safari and Firefox.
.with-sidebar {
display: flex;
flex-wrap: wrap;
}
.with-sidebar > :first-child {
flex-basis: 20rem;
flex-grow: 1;
background-color: green;
}
.with-sidebar > :last-child {
flex-grow: 999;
min-inline-size: 50%;
background-color: red;
}
.sticky {
position: sticky;
top: 1rem;
}
<div class="with-sidebar">
<div>
<h1>Sidebar</h1>
<div style="height:10rem">Spacer</div>
<div class="sticky">
<h1>Sticky Element</h1>
</div>
</div>
<div>
<h1>Not Sidebar</h1>
<div style="height:200rem">Spacer</div>
</div>
</div>
Among other things, I have tried wrapping the sticky inside another element, tried applying align-self: flex-start; to the sticky. I haven't yet found anything that works.
How can I ensure that the element is sticky when the sidebar and not-sidebar are stacked vertically as well as when they are alongside each other?
Update
I have experimented with placing .with-sidebar within a taller wrapper. Now it is clear what is happening. The element which is not the sidebar is pushing the sticky element off screen. This never happens when the elements are side by side. But, in a smaller window, the not-sidebar element is directly beneath the sticky element.
<div style="height: 400rem">
<div class="with-sidebar">
<div>
<h1>Sidebar</h1>
<div style="height:10rem">Spacer</div>
<div class="sticky">
<h1>Sticky Element</h1>
</div>
</div>
<div>
<h1>Not Sidebar</h1>
<div style="height:60rem">Spacer</div>
</div>
</div>
</div>
I think it's better to redo the markup (or design). See, for example, if you specify a height for a block, in which the "sticky element" is located, div:has(.sticky) { height: 500px; } then the element starts to "stick a little", or another example, change nesting
<body>
<div class="with-sidebar">
<div>
<h1>Sidebar</h1>
<div style="height: 10rem">Spacer</div>
<!-- <div class="sticky">
<h1>Sticky Element</h1>
</div> -->
</div>
<div class="sticky">
<h1>Sticky Element</h1>
</div>
<div>
<h1>Not Sidebar</h1>
<div style="height: 200rem">Spacer</div>
</div>
</div>
</body>
and add a property align-self for this element.
.sticky {
position: sticky;
top: 1rem;
align-self: flex-start;
}
But I don't think that's all for you. This is just an examples so you can see how the element works. The specification CSS Positioned Layout Module Level 3 very briefly describes the behavior of elements when positioned sticky.
Use media queries for top position if 10rem is not as you want...
.sticky {
position: fixed;
top: 10rem;
}
Update: I clarify my thoughts:
<div class="with-sidebar">
<div>
<h1>Sidebar</h1>
<div style="height:10rem">Spacer</div>
<div class="sticky_desktop">
<h1>Sticky Element</h1>
</div>
</div>
<div>
<div class="sticky_mobile">
<h1>Sticky Element</h1>
</div>
<h1>Not Sidebar</h1>
<div style="height:200rem">Spacer</div>
</div>
</div>
.with-sidebar {
display: flex;
flex-wrap: wrap;
}
.with-sidebar > :first-child {
flex-basis: 20rem;
flex-grow: 1;
background-color: green;
}
.with-sidebar > :last-child {
flex-grow: 999;
min-inline-size: 50%;
background-color: red;
}
.sticky_desktop {
position: sticky;
top: 1rem;
}
.sticky_mobile {
position: sticky;
top: 1rem;
color: violet;
}
.sticky_mobile>h1{
margin-block-start: 0;
margin-block-end: 0;
}
#media screen and (min-width : 656px ){
.sticky_mobile {
display:none;
}
}
#media screen and (max-width : 655px ){
.sticky_desktop {
display:none;
}
}
I need to
1.Middle center align a div(contentcontainer) which contains image and text inside another div container.
2.Render the image and text for different devices so it looks nicely on both mobile and desktop devices.
Please note
1.The content html for the image and text will be sent dynamically so the height of the content container is flexible.
2.The size of the original image and length of the text are different each time so the width and height of the maintainer cannot be fixed values
3.This needs to support android and ios browsers(mainly safari and chrome).
**JSFIDDLE*
http://jsfiddle.net/1o8vuqbd/1/
<div id="maincontainer">
<div id="contentcontainer">
<img src="http://placehold.it/150x150">
<div style="text-align:left;">
<div>This is the title</div>
<div>This is the body</div>
</div>
</div>
</div>
#maincontainer {
height:100%;
width:100%;
padding:5px;
background-color:red;
}
#contentcontainer {
height:100%;
width:100%;
position: relative;
background-color:pink;
}
Here is the updated code.
HTML:
<div id="maincontainer">
<div id="contentcontainer">
<img src="http://placehold.it/150x150" style="float: left;">
<div style="text-align:left;">
<div>This is the title</div>
<div>This is the body</div>
</div>
</div>
</div>
CSS:
#maincontainer {
height: 500px;
position: relative;
width: 500px;
background-color:red;
}
#contentcontainer {
background-color: #FFC0CB;
overflow-y: auto;
position: absolute;
left: 25%;
top: 25%;
width: 50%;
}
I am having some issues positioning an image within a parent div. I have 2 divs side by side both within a parent div, the first div within the container contains text and the second contains an image. The parent container has no height specified so it adjusts to the height of the content contained within it. I am struggling to absolutely position the image in the 2nd div to the bottom. Below is my HTML and css...
<style>
.container{
width: 100%;
}
.box{
float: left;
width: 49%;
}
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
</div>
I have tried to give .image a relative position and then give the img tag within it 'position: absolute: bottom: 0px;' however this does not seem to work as .image has no fixed height.
Thanks, any help would be appriciated.
That should do the work. In fact, your container has no height at all with 2 floated div inside of it. I use a clear:both to... clear the floats and give the container the proper height.
<style>
.container{
width: 100%;
position: relative;
}
.box{
float: left;
width: 49%;
}
.image img {
position: absolute;
bottom: 0;
right: 0;
}
.clear { clear: both; }
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
<div class="clear"></div>
</div>
You can find more infos about floats and clear on this nice article on css-tricks.com
I have page with main content and right sidebar. But I want to have sidebar before main content block on page resize. How can I accomplish this?
HTML part:
<div id="header">
<div id="logo"></div>
</div>
<div id="container">
<div id="content">
main content
</div>
<div id="sidebar">
sidebar
</div>
</div>
<div id="footer">
footer
</div>
CSS part:
#container {
clear: both;
overflow: auto;
}
#content {
clear:both;
width: 70%;
float: left;
padding: 2% 0;
margin-right: 2%;
}
#sidebar {
width: 28%;
float: right;
padding: 2% 0;
}
In your media query float your #sidebar left and your #content right.
Because you are trying to do responsive design, what you want to do is media query in your CSS that will allow you to style the changes you want to make. The first decision you have to make is which screen sizes you want to display the responsive design. Tablets usually have a max-width of 760px and phones are around max-width of 480px. So the media query will look something like this:
CSS:
#media screen and (max-width: 480px){
...all your mobile styles are in here...
}
Now to answer the positioning issues you have. Of course there are several ways, the way I would do it is this is to move your sidebar above the content in the HTML, remove the clear from the content CSS, and inside the media query all you have to do is make the width for both divs 100%.
HTML:
<div id="header">
<div id="logo">The logo</div>
</div>
<div id="container">
<div id="sidebar">
sidebar
</div>
<div id="content">
main content
</div>
</div>
<div id="footer">
footer
</div>
CSS:
#container {
clear: both;
overflow: auto;
}
#content {
float:left;
width: 50%;
background:grey;
}
#sidebar {
width: 25%;
float:right;
background:lightgrey;
}
#media screen and (max-width:480px){
#sidebar {
width:100%;
}
#content {
width:100%;
}
}
I'm trying to make a harmonica effect by changing the height of divs when hovering over another one.
My HTML looks like this:
<html><body>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
</body></html>
Every section has a height of 25%.
When hovering over section1, all the other divs should reduce in size while section1 expands. This is easily done with the following CSS:
.section1 {
height: 40%;
}
.section1:hover ~ div:not(section1) {
height: 20%;
}
The problem is that the ~ selector only selects sibling divs that are below the current div. So if I use the same code for section2, only section3 and section4 will be affected. Section1 will have it's original height of 25% because it's above the current div.
Can I solve this problem with just CSS?
Yes. Put a wrapper around your sections and reduce their height on hover on the wrapper. Then increase the height of the one section you are hovering.
DEMO
HTML becomes:
<div class='section-wrapper'>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
</div>
Relevant CSS:
.section-wrapper {
height: 500px;
}
.section-wrapper div {
height: 25%;
outline: dotted 1px;
}
.section-wrapper:hover div {
height: 20%;
}
.section-wrapper div:hover {
height: 40%;
}
Try this
HTML
<html>
<body>
<div class="container">
<div class="section1">1</div>
<div class="section2">2</div>
<div class="section3">3</div>
<div class="section4">4</div>
</div>
</body>
</html>
CSS
.container:hover div {
height:20px;
}
.container .section1,.container .section1:hover,
.container .section2,.container .section2:hover,
.container .section3,.container .section3:hover,
.container .section4,.container .section4:hover{
height: 50px;
}
Simple Add a parent container to the sections
<div class="parent">
<div class="section1">section1</div>
<div class="section2">section2</div>
<div class="section3">section3</div>
<div class="section4">section4</div>
</div
And style them as
.parent div{height: 25%; border:solid 1px #f00}
.parent:hover div{height: 20%; }
.parent div:hover {height: 40%; }