I really want to know how to achieve this kind of structure using HTML CSS including media queries. See image below:
On smaller screens section 1 will be on top overlapping little portion of the picture contained by section 2.
You must see the picture above to understand my question. The main problem is I really want to do something like this but I don't know where start. I don't want to break any CSS structure using negative margins and padding.
Is this what you are after? Resize the browser window (make it smaller) to see the effect.
HTML:
<div id="section1">
</div>
<div id="section2">
<div id="overlay">
Overlay
</div>
</div>
CSS:
#section1 {
float: left;
width: 50%;
height: 200px;
background: grey;
}
#section2 {
width: 50%;
height: 200px;
background: black;
float: right;
position: relative;
}
#overlay {
position: absolute;
top: 90px;
left: -20px;
background: red;
}
#media screen and (max-width: 480px) {
#section1, #section2 {
float: none;
}
#overlay {
position: absolute;
top: -10px;
left: 90px;
background: red;
}
}
JSFiddle
Related
I rarely do html/css stuff so I'm struggling trying to implement what seems like a pretty basic layout. I have a bunch of div elements stacked vertically as well as centered horizontally across my html page. The problems I'm facing are
a) the top div (orange) is slightly wider than the other divs.
b) I want the top (orange) div to be visible even when scrolling, which currently isn't the case.
Actually, in order to make the top div always visible, I set its corresponding class' position attribute to fixed but it doesn't work since I also have other divs, and their position is set to relative. If I remove the relative position on the other divs, the orange div works as expected but the rest of divs are not horizontally centered anymore.
.fiksan {
background-color: orange;
position: fixed;
top: 0;
height: 40px;
}
div {
padding: 10px;
color: white;
width: 60%;
left: 20%;
position: relative;
top: 40px;
}
.naslov {
background-color: lightblue;
text-align: justified;
height: 180px;
position: relative;
}
.elementi {
background-color: blue;
height: 650px;
}
.css_elementi {
background-color: purple;
height: 400px;
position: relative;
}
<div class="fiksan">
</div>
<div class="naslov">
</div>
<div class="elementi">
</div>
<div class="css_elementi">
</div>
This is what it looks like now (when scrolling the top div is covered by other divs, and I don't want that)
position:sticky might be what you look for : see https://css-tricks.com/position-sticky-2/
.fiksan {
background-color: orange;
position: sticky;
top: 0;
height: 40px;
}
div {
padding: 10px;
color: white;
width: 60%;
margin:auto;
}
.naslov {
background-color: lightblue;
text-align: justified;
height: 180px;
}
.elementi {
background-color: blue;
height: 650px;
}
.css_elementi {
background-color: purple;
height: 400px;
}
<div class="fiksan">
</div>
<div class="naslov">
</div>
<div class="elementi">
</div>
<div class="css_elementi">
</div>
I have the following layout for a header for a web page I am developing with the following configuration:
max-width: 1050px;
height: 150px;
What would be the best way to lay this out so that it is also as mobile friendly as possible.
My Idea was this: Each div has its width if its fixed width and also are display: inline-block. But then that is not so mobile friendly as I would have to add responsive blocks.
Has anyone a nicer idea I could do with that?
Here is what I have started with: https://jsfiddle.net/6ohe3hgp/
But not sure if its the right direction as it should also be mobile and by mobile i would probably stack the items on top of each other.
I can't think of a better way than using flexbox (which you also tagged the question with)
When all in a row, they will have the same height based on the one with most content, when stack vertically, on i.e. mobile's, they collapse to their content to make scrolling to a minimum.
Updated fiddle
.container {
max-width: 1050px;
margin: 0 auto; /* will center the container on wide screen */
display: flex;
}
.one {
width: 100px;
background-color: #f66;
}
.two {
width: 200px;
background-color: lightgreen;
}
.three {
flex: 1; /* this makes it take all the available space */
color: white;
background-color: black;
}
.four {
width: 200px;
background-color: lightblue;
}
#media screen and (max-width: 600px) {
.container {
display: block;
}
.container > div {
width: 100%;
}
}
<div>
<div class="container">
<div class="one">
Fixed width
</div>
<div class="two">
Fixed width, with several<br>
lines of text that will<br>
make all the other get<br>
equal height
</div>
<div class="three">
Dynamic width
</div>
<div class="four">
Fixed width
</div>
</div>
</div>
I using display table and table-cell to do this, see https://jsfiddle.net/8s07y8zg/
HTML
<div class="table">
<div class="td one">
One
</div>
<div class="td two">
Two
</div>
<div class="td three">
Three
</div>
<div class="td four">
Four
</div>
</div>
CSS
.table {
display: table;
table-layout: fixed;
width: 100%;
box-sizing: border-box;
color: #FFF;
}
.td {
display: table-cell;
height: 100px;
}
.one {
width: 150px;
background-color: red;
}
.two {
width: 200px;
background-color: green;
}
.three {
background-color: black;
}
.four {
width: 200px;
background-color: blue;
}
There's a variety of ways to do this. Some involve absolute position, some involve float, some involve display table-cell. Every technique have trade-offs (including mine below).
I noticed someone recommended bootstrap to solve this - I don't actually think it will, as this is not truly a "grid system", but a custom layout with a mix of dynamic and fixed width items.
I happen to prefer inline-block per your question, so would like to show you a couple of CSS tools that may or may not get you where you want. They leverage calc and vw
body, html {
margin: 0;
padding: 0;
}
div.container {
margin: 0;
padding: 0;
}
div.col {
box-sizing: border-box;
display: inline-block;
vertical-align: top;
/* the styles below are for illustration only */
min-height: 60px;
background: #ccc;
color: white;
padding: 10px 20px;
margin: 0;
}
div.col-1,
div.col-2 {
width: 150px;
background: #444;
}
div.col-4 {
width: 100px;
background: #aaa;
}
div.col-3 {
/* calculate value - 100vw (100% of viewport width) minus total width of other divs */
width: calc(100vw - 400px);
}
<div class="container">
<!-- NOTE: These divs are all on the same line to avoid
space between items. See https://css-tricks.com/fighting-the-space-between-inline-block-elements/ -->
<div class="col col-1">Fixed Width</div><div class="col col-2">Fixed Width</div><div class="col col-3">Variable Width</div><div class="col col-4">Fixed Width</div>
</div>
You can absolutely position all of them.
The trick is this: you can set the left:, width:, right: css parameters arbitrarily, and you can even neglect them.
So:
give the first div a left: 0 and a width: (in pixels).
to the second: left: (fix in pixels) and right (also fix in pixels).
to the third: left (fix, you can calculate it from the the widths of the first two) and right: (which is the width of the fourth)
And so on.
Absolute positioning works only inside display: block elements whose position: is different from static. So, you need this for the top div:
#topdiv {
display: block;
position: relative;
max-width: 1050px;
}
#div1 {
width: 150px;
left: 0;
display: block;
position: absolute;
}
#div2 {
display: block;
position: absolute;
left: 150px;
width: 150px;
}
#div3 {
display: block;
position: absolute;
left: 300px;
right: 150px;
}
#div4 {
display: block;
position: absolute;
right: 0;
width: 150px;
}
Note:
i want Responsive div inside responsive image as below
any help would be appreciated.
i am not good at css:(
If someone wants to do this without it been responsive it can be done like this.
Make the screen a background image and then use a relative positioned iframe.
i added a YouTube iframe to the screen in the demo.
Demo
.outer {
background-image: url('http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png');
width:800px;
height:596px;
}
.inner {
position: relative;
background-color:;
left: 120px;
top: 68px;
width:550px;
height:405px;
}
............
<div class="outer"><iframe class="inner"></iframe>
you could even use a 2 or 3px border-radius to match the image.
demo - http://jsfiddle.net/ey9ykhwd/3/
use percentage for placing the content div parent should be positioned relative
.content {
position: absolute;
width: 68.7%;
height: 67.6%;
background: Red;
left: 15%;
top: 11%;
}
.cont {
position: relative;
}
img {
width: 100%;
}
.content {
position: absolute;
width: 68.7%;
height: 67.6%;
background: Red;
left: 15%;
top: 11%;
}
}
<div class="cont">
<img src="http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png" />
<div class="content">content here</div>
</div>
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
I am trying to change my old website menu to be mobile friendly and have a problem how the "menu elements" are displayed on small screen.
The menu consists of 3 elements (left, middle, right), now on small screen, they go vertically in same order.
But i would like to know if its possible with css to have them position like that, where the middle keeps its position and the left and right are moved under it, or does it need some more tricks.
How to achieve it?
http://img834.imageshack.us/img834/2203/menuse.jpg
EDIT, Added simplified code what i used to play around:
<div id="header">
<div id="Bholder">
<div id="AButton"></div>
<div id="HButton"></div>
<div id="CButton"></div>
</div>
</div>
CSS
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 750px;
}
#AButton{
float: left;
width: 250px;
height:100px;
background-color: red;
}
#CButton{
float: left;
width: 250px;
height:100px;
background-color: green;
}
#HButton{
float: left;
width: 250px;
height:100px;
background-color: yellow;
}
#media only screen and (max-width: 767px){
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 250px;
}
}
You could maybe try floating the left and right element to the right, and the middle element to the left. Then make the width of the wrapper element the same size as each element to get them to 'jig' about visually.
But yea, code would be helpful to see how you have the menu set up.
[EDIT]
#media only screen and (max-width: 767px){
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 250px;
position: relative;
}
#AButton {
position: absolute;
top: 100px;
left: 0;
}
#HButton {
position: absolute;
top: 0px;
left: 0px;
}
#CButton {
position: absolute;
top: 200px;
left: 0;
}
}
A note: I'd stick that in an <ul> with <li> instead of div's. And I'd use classes instead of #id's for your css.