hope you could help me out, have two questions:
How do i simply reposition my main image of sunset 110px from the top.
and also how do i get my logo to flow exactly between the image and left-side.
if you know one or both answers, then please share your suggestion in code. big thx again.
example as follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #6B6B6B;
}
img {
display: block;
max-width: 100vh;
max-height: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#logo {
position: absolute;
top: 110px;
left: 10%;
width: 123px;
margin-left: -61.5px; /* half width */
}
</style>
<div id="logo"><img src="http://wizzfree.com/pix/logo2.png"></div>
<img src="http://wizzfree.com/pix/vid.jpg" style="width:100%;">
How about like this:
(Updated to add a 3rd column and media queries)
body {
background-color: #6B6B6B;
margin:0;
}
img {
display: block;
max-width: 100vh;
max-height: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#container {
margin-top: 110px;
position: relative;
display: block;
background-color: red;
text-align: center;
}
#inner {
position: relative;
background-color: green;
display: inline-block;
}
#col1, #col2, #col3 {
width: 100%;
}
#col1, #col3 {
min-width: 123px;
background-color: lightblue;
}
/* column widths defined in CSS */
#media only screen and (min-width: 400px) {
#inner {
display: flex;
flex-direction: row;
}
#col1, #col3 {
width: 30%;
}
#col2 {
width: 40%;
}
}
/* column widths adjust to image size */
#media only screen and (min-width: 600px) {
#inner {
display: inline-block;
}
#col1, #col3 {
position: absolute;
display:block;
top:0;
bottom: 0;
width:calc(50vw - 50%);
}
#col1 {
left: calc(50% - 50vw);
}
#col2 {
width:auto;
}
#col3 {
right: calc(50% - 50vw);
}
}
<div id="container">
<div id="inner">
<div id="col1">
<img src="http://wizzfree.com/pix/logo2.png">
</div>
<div id="col2">
<img src="http://wizzfree.com/pix/vid.jpg" style="width:100%;">
</div>
<div id="col3">
<p>Lorem ipsum</p>
</div>
</div>
</div>
Related
I need the container #3, to shrink or to move underneath #2. I don't know how to do this, I might need to do flex but don't know. I need the left one(#2) to stay the same size and the right one (#3) to be the one that moves around. I don't know what more to add or change, I've tried with infinite combinations and have not done it correctly.
I want it like this: enter image description here
and when having the nav smaller like this : enter image description here
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
flex-direction: column;
}
div#tablas {
width: 100%;
order: 1;
}
div#carpetas {
width: 100%;
order: 2;
}
}
<div id="general">
<div id="enlaces">1</div>
<div id="tablas_carpetas">
<div id="tablas">2</div>
<div id="carpetas">3</div>
</div>
<div id="anuncios">4</div>
<div id="pie">5</div>
</div>
You can add a display grid instead of flex on it when your reach the media query you want like below. Let me know If this is what you want.
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
display:grid;
}
div#tablas {
width: 40%;
order: 1;
}
div#carpetas {
max-width: 60%;
order: 2;
}
}
<div id="general">
<div id="enlaces">1</div>
<div id="tablas_carpetas">
<div id="tablas">2</div>
<div id="carpetas">3</div>
</div>
<div id="anuncios">4</div>
<div id="pie">5</div>
</div>
I have three horizontal divs in desktop screen, in mobile screen I want to make it aligned vertical taking the whole screen width. What CSS should i add to make it happen? Here is my code. thank you in advance.
#demo1 {
float: left;
width: 50%;
}
#div1 {
float: left;
background: green;
width: 25%;
}
#div2 {
float: left;
width: 50%;
background: red;
}
#div3 {
float: right;
width: 25%;
background: blue;
}
<div id="demo1">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
Use display:flex and #media queries
#demo1 {
width: 100%;
display:flex;
justify-content:space-between;
}
#div1 {
background: green;
width: 25%;
}
#div2 {
width: 50%;
background: red;
}
#div3 {
width: 25%;
background: blue;
}
#media (max-width:992px) {
#demo1 {
flex-direction:column;
}
#div1, #div2, #div3 {
width:100%;
}
}
<div id="demo1">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
Use display 'flex' #media query for mobile
#demo1 {
width: 100%;
display:flex;
justify-content:space-between;
}
#demo1 > div {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
#div1 {
background: green;
width: 25%;
}
#div2 {
width: 50%;
background: red;
}
#div3 {
width: 25%;
background: blue;
}
/*Mobie Screen*/
#media (max-width:800px) {
#demo1 {
flex-direction:column;
}
#demo1 > div {
width:100%;
}
}
<div id="demo1">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
Try using media queries, for example:
#media only screen and (max-width: 900px) {
demo1 {
display: flex;
flex-direction: column;
width: 100%;
}
}
Hope this helps.
I have an horizontal scrollbar class="filter_list" into a wrapper div class="wrapper". I want this scrollbar to be always 100% of the wrapper div and I want this wrapper div to be responsive.
It's working fine if I only have one item in my filter list but as soon as I put more than the wrapper width size, it's not responsive anymore.
Here are some pictures to illustrate the problem :
Responsive and working fine :
OK
The scrollbar is blocking the width of the wrapper that doesn't shrink to fit the dimension of the window (we can see that the picture of the girl is no longer it's 100% square size):
NOT OK
Here is the code :
body {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 800px;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.magic_wand {
margin: 15px 0px 20px;
max-width: 50px;
}
.ico_magic_wand {
width: 100%;
height: 100%;
object-fit: contain;
}
.picture_preview {
width: 100%;
margin-bottom: 50px;
height: 100px;
}
.picture_preview img {
width: 100%;
height: 100%;
object-fit: contain;
}
.filter_list {
width: 100%;
background-color: blueviolet;
overflow-x: auto;
white-space: nowrap;
font-size: 0;
}
.filter:last-child {
margin-right: 0px;
}
.filter {
display: inline-block;
height: 150px;
width: 150px;
background-color: blue;
margin-right: 15px;
}
<body>
<div class="wrapper">
<div class="magic_wand">
<img src="img/ico/magic_wand.png" class="ico_magic_wand">
</div>
<div class="picture_preview">
<img src="https://images.unsplash.com/photo-1527514086375-0a7bae9089be">
</div>
<div class="filter_list">
<div class="filter">
</div>
<div class="filter">
</div>
<div class="filter">
</div>
<div class="filter">
</div>
</div>
</div>
</body>
I would like to understand why the div class="filter_list" width won't shrink with it's parent div while reducing the width of the window and how to fix the problem, thanks a lot !
Try this code.. I can't understand your question.. it may ur expectation,, else explain it clearly..
css
.filter {
display: inline-block;
height: 150px;
width: 21.3%;
background-color: blue;
margin-right: 15px;
}
.filter:nth-child(4n+4) {
margin-right: 0px;
}
Please remove ur css code and add this codes.. I think display:flex; is the issue for ur code..
body {
margin:0px;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
width: 800px;
margin: 0 auto;
text-align: center;
}
.magic_wand {
margin: 15px auto 20px;
max-width: 50px;
}
.picture_preview {
width: 100%;
margin-bottom: 50px;
height: 100px;
}
.picture_preview img {
height: 100%;
}
.filter_list {
width: auto;
background-color: blueviolet;
overflow-x: auto;
white-space: nowrap;
font-size: 0;
}
.filter:last-child {
margin-right: 0px;
}
.filter {
display: inline-block;
height: 150px;
width: 150px;
background-color: blue;
margin-right: 15px;
}
#media only screen and (max-width: 1024px) {
.wrapper {
width: 100%;
}
}
I want my inline images to automatically resize with browser size and at the same time it should be inline with the header too. I have already tried solution given here but it is not working for me.
Here is my code:
#header_title {
font-weight: bolder;
text-align: center;
}
#header_photo {
display: none;
}
.floatingimage {
float: right;
max-width: 100%;
height: auto;
}
#media all and (max-width: 1024px) {
#header_title {
margin-left: 10%;
min-width: 67%;
max-width: 77%;
display: inline-block;
vertical-align: top;
position: relative;
}
#header_photo {
display: inline-block;
vertical-align: top;
max-width: 20%;
height: auto;
}
}
<header>
<div id="header_title">
<h1>Title h1</h1>
<h3>Title h3</h3>
</div>
<aside id="header_photo">
<img class="floatingimage" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg" width="100px" height="100px" />
</aside>
</header>
You find this code on jsfiddle here.
NOTE: I am using Firefox 53.0.3(32-bit)
I slightly modified your HTML and CSS. I add flex display and image height related to width.
HTML code:
<header>
<div id="header_title">
<h1>Title h1</h1>
<h3>Title h3</h3>
</div>
<aside id="header_photo">
<img class="floatingimage" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg"/>
</aside>
CSS code:
header {
display: flex;
}
#header_title
{
font-weight: bolder;
text-align: center;
}
#header_photo
{
display: none;
max-width: 100%;
height: auto;
align-self: center;
}
#header_photo img {
width: 100%;
height: auto;
max-height: 120px;
}
.floatingimage
{
float: right;
}
#media all and (max-width: 1024px)
{
#header_title
{
margin-left: 10%;
min-width: 67%;
max-width: 77%;
display: inline-block;
vertical-align: top;
position: relative;
}
#header_photo
{
display: inline-block;
vertical-align: top;
max-width: 20%;
height: auto;
}
}
You check it on fiddle here
You have sized the image using inline-styling; that is the main problem. You can do two 2 things:
add the width and height to the floatingimage class
OR
create a new class e.g. .wh100, with width:100px; and height:100px; and use a second class with the .floatingimage in your html e.g img class="floatingimage wh100"
In either option, remember to REMOVE the inline styling from the html!!
Then your images should size appropriately.
Give that a whirl
RE-EDIT: (back on computer - sigh..).. here you go.. the fiddle i posted a while ago with the header narrowed to 75%.
header {
width: 75%;
height: auto;
margin: 0 auto;
padding: 0;
}
#header_title {
font-weight: bolder;
text-align: center;
max-width: 80%;
}
#header_photo {
/*display: none;*/
margin: 0;
padding: 0;
max-width: 20%;
height: auto;
float: right;
}
.floatingimage {
position: relative;
display: none;
}
.wh100 {
width: 100px;
height: 100px;
}
#media all and (max-width:480px){
#header_photo {
margin-top: 8%!important;
}
}
#media all and (max-width:1024px) {
#header_title,
#header_photo img {
margin: 0;
padding: 0;
top: 2%;
display: inline!important;
vertical-align: middle!important;
}
#header_title {
max-width: 80%;
position: relative;
float: left;
}
#header_photo {
margin-top: 4%;
max-width: 20%;
position: relative;
float: right;
}
#header_photo img {
position: relative;
max-width: 100%;
height: auto;
}
}
<header>
<div id="header_title">
<h1>Title h1</h1>
<h3>Title h3</h3>
</div>
<aside id="header_photo">
<img class="floatingimage wh100" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg" />
</aside>
</header>
New fiddle
I am trying to make a header for a site that has a logo in the left column, and a rotating image banner and the top-level navigation on the right, without using floats. What am I doing wrong here?
This is what I would like it to look like:
Here is my HTML:
<!doctype html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<div id="logo"><p>Logo</p></div>
<div id="right">
<div id="rotator"><p>Rotator</p></div>
<div id="navigation"><p>Navigation</p></div>
</div>
</div>
</body>
</html>
Here is my CSS:
#header{
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
top: 10px;
font-size: 0px;
}
#logo{
display: inline-block;
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
}
#right{
display: inline-block;
background-color: black;
width: 718px;
height: 192px;
font-size: 0px;
}
#rotator{
display: block;
background-color: green;
width: 718px;
height: 132px;
}
#navigation{
display: block;
background-color: blue;
width: 718px;
height: 60px;
}
p{
font-size: 24px;
margin:0;
padding: 0;
}
This is what it ends up looking like:
Try putting vertical-align: top; on the logo and right divs
Here's the fiddle
#logo{
display: inline-block;
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
vertical-align: top;
}
#right{
display: inline-block;
background-color: black;
width: 718px;
height: 192px;
font-size: 0px;
vertical-align: top;
}
#right {
background-color: black;
font-size: 0;
height: 192px;
position: absolute;
right: 168px;
top: 28px;
width: 718px;
}
Here's one way to do it using display:table & table-cell.
http://jsfiddle.net/zR9GZ/
<div class="container">
<div class="col1">LOGO</div>
<div class="col2">
<div class="rotator">ROTATOR</div>
<div class="navigation">NAVIGATION</div>
</div>
</div>
.container {
display: table;
width: 100%;
color:# fff;
}
.col1, .col2 {
display: table-cell;
}
.col1 {
background: red;
width: 25%;
}
.col2 {
width: 75%;
}
.rotator {
background: green;
}
.navigation {
background: blue;
}
Though flexbox isn't quite ready for production designs, here's what a responsive solution would look like (try resizing it!):
#header {
display: flex;
flex-flow: row wrap;
}
#header{
background-color: yellow;
font-size: 0px;
}
#logo{
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
}
#right{
background-color: black;
font-size: 0px;
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-width: 40%;
}
#rotator{
background-color: green;
flex: 2 1 auto;
}
#navigation{
background-color: blue;
flex: 1 1 auto;
}
http://jsfiddle.net/2UjC3/ (prefixes not included)
Until enough browsers support flexbox, my recommendation is to use the display table/table-cell solution by Billy Moat.