.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position:relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: -10px;
background-color: green;
}
.mytag {
float: left;
position: absolute;
left: 60px;
top: -10px;
background-color: green;
}
<div class="container">
<div class="tag">Featured</div>
<div class="mytag">My list</div>
<img src="http://www.placehold.it/200x200">
</div>
I'm trying to create a div on image, but i'm not able to create a responsive one.
I'm trying to create a replica of this website as i'm a beginner. I want to create the first section, which should be a responsive one (plan and design and our goal should be on the image) How can i achieve the same? check here
How to make it a responsive?
The website you have mentioned uses a background image, Here is an example of achieving it.
First create your wrapper div and then apply a background image for it. make it relatively positioned. Make the other child content boxes absolute positioned. so you can move them freely using top, left, right and bottom css acttributes within its parent
html
<div class="div-with-bg-img">
<div class="content-div">
content here
</div>
</div>
css
.div-with-bg-img {
width: 350px;
height: 150px;
background: url(http://via.placeholder.com/350x150);
margin-top: 100px;
position: relative;
}
.content-div {
width: 100px;
height: 50px;
background: tomato;
position: absolute;
top: -10px;
left: 40px;
}
if you want to make it responsive then apply relative measurement units
.div-with-bg-img {
width: 100%;
height: 150px;
background: url(http://via.placeholder.com/350x150) no-repeat;
margin-top: 100px;
position: relative;
background-size: cover;
background-position: center;
}
Use media queries to make your website responsive
Here is an example code
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
Few useful articles I found on web
List of media queries
What is RWD
If you just want to know how to make an image responsive here is a nice article published on css tricks
https://css-tricks.com/responsive-images-css/
You can use the browser dev tools to learn the website source codes :)
Related
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
So I have my media queries set to have an element positioned "X" pixels relative from the previous element at a min-width of 756px (the resolution of my iphone 6S). On my windows desktop, I positioned the element to where I want it to be. However, when I open the site up on my iphone (using the default Safari browser), the element is off by over a hundred pixels! The element is positioned higher on my iphone than it shows on my desktop. Any ideas? I checked my zooms on my desktop browser and they are all set to 100%.
edit: Here is a fiddle mockup of my code. https://jsfiddle.net/8f6y1pdx/1/
<header>
<div id = "navContainer"><h1>Hello</h1></div>
<div id = "backgroundImage"><img src = "http://cdn.wallpapersafari.com/4/18/laMvrx.jpg" width = "2560" alt = "bg image"></div>
</header>
<body>
<div id = "contentOneContainer">Container one</div>
<div id = "contentTwoContainer">Container two</div>
</body>
and the css
html, body{
padding: 0;
margin: 0;
}
#navContainer{
position: fixed;
z-index: 0;
width: 100%;
background-color: black;
color: white;
height: 100px;
text-align: center;
}
#backgroundImage{
position: fixed;
z-index: -2;
}
#backgroundImage img{
width: 100%;
max-width: 2560px;
}
#contentOneContainer{
width: 100%;
height: 500px;
background-color: blue;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
#contentTwoContainer{
width: 100%;
height: 250px;
background-color: gray;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
/*----------------------------------*\
Responsive
\*----------------------------------*/
#media (min-width: 757px){
#contentOneContainer{
background-color: red;
}
}
If you adjust the screen size, at 757px I have the background color of the container switch. Basically, on my desktop, I am lining up the bottom of the image with the top of the first container. When viewed on my iphone 6s (I don't know how to make this work when viewing the fiddle on mobile) the bottom of the image and the top of the container are a hundred plus pixels apart. I hope this helps a little. Also, sorry if my code blows.
Add viewport meta tag in the head section for the media queries to work on mobile.
http://getbootstrap.com/css/#overview-mobile
I'm having some strange behavior of the percentages.
I have layout which is 1366 pixels wide and I have one div which should be fluid.
Its 200px wide, which means it should be 14.64% wide.
When the layout is tested in 1366 pixels the div looks fine and there are no problems, but when I expand to 1920 the div is not wide enough.
Here is some samples of the code:
HTML:
<header>
<div class="top-bar">
<div class="fill"></div>
<div class="container">
<nav>
</nav>
</div>
</div>
<div class="bottom-bar">
</div>
</header>
And CSS
.container{
width: 1004px;
margin: 0px auto 0px auto;
}
header{
width: 100%;
height: 95px;
}
header div.top-bar{
background: #ffffff;
width: 100%;
height: 50px;
}
header div.fill{
background: #000000;
width: 14.64%;
height: 50px;
float: left;
}
nav{
height: 50px;
float: left;
}
header.main div.bottom-bar{
background: url("header-bottom.png") repeat-x;
width: 100%;
height: 45px;
}
I've coded liquid designs before, but never had problem like this, maybe my math is wrong or the problem is that everything else is hardcoded in pixels and this is liquid?
I'd guess the problem is because container has a pixel size while fill is in percentage. If all you want to achieve with the fill is to put a background color around container, you can do something like this (and remove the fill class css)
.container{
width: 1004px;
margin: 0px auto 0px auto;
background: #ffffff;
}
header div.top-bar{
width: 100%;
height: 50px;
background: #000000;
}
Now if you want to color only left side, and want to fit your 'fill' div nicely, then both container and fill have be either in percentage or in pixels (won't work properly in different screen sizes). There are different workarounds to make your fill work e.g. the following
header div.fill {
background: #000000;
width: 50%; /*make it wide enough*/
height: 50px;
float: left;
z-index: -1; /*put it behind container*/
position: relative;
}
header div.top-bar{
background: #ffffff;
width: 100%;
height: 50px;
z-index: -2; /*put it behind all*/
position: relative;
}
for managment layout use grid system css famework for example
Bootstrap
http://getbootstrap.com/
or
960 grid system
http://960.gs/
I have a div that use as a PopUp to take pictures with the WebCam,
was perfect on my monitor (1366x768), but, on smaller screens, the div is
horrible
HTML:
<div id="light" class="white_content">
<a id="close_ic" href = "javascript:void(0)" onclick ="closediv()" >x</a>
<canvas id="canvas" width="500"height="375"> </canvas>
<video autoplay id="videoElement"></video>
<input type="button" value="Capturar Foto" id="save" class="cam_btn_canvas" />
</div>
CSS:
.white_content
{
display: none;
position: fixed;
top: 15%;
left: 17.5%;
width: 65%;
height: 62%;
border-style: solid;
border-width: 1px;
border-color: #474747;
background-color: white;
z-index: 1002;
overflow: auto;
border-radius: 10px;
min-height: 398px;
min-width: 657px;
}
.cam_btn_canvas
{
font-weight: bolder;
left: 46%;
top: 75%;
position: inherit;
}
#videoElement {
width: 32%;
height: 48.5%;
background-color: #666;
z-index: 1102;
left: 50%;
top: 139px;
position: inherit;
}
#canvas
{
width: 32%;
height: 48.5%;
background-color: #666;
z-index: 1102;
left: 18%;
top: 139px;
position: inherit;
}
#close_id
{
font-size: 15pt;
font-weight: bolder;
position: inherit;
left: 80%;
top: 106px;
}
I wanted to know how to make both my window and the elements inside keep the ratio even with a smaller screen
Thanks for attention!
Not answering your question directly but here are two fixes for your issue.
Media Query
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Developers use these when making their site more responsive.
Here is an example of making my container responsive.
#media (min-width: 768px) {
.container {
max-width: 730px;
}
}
Bootstrap
Bootstrap is a framework designed for creating mobile first projects on the web. Since I have been using Bootstrap, I have never once looked back. You can easily make your site responsive by using preset classes with their markup and css. It makes it so you will never really have issues like the one you are experiencing now.
Check out Bootstrap or any other Front-End framework. They are great.
you might find my jQuery plugin here useful, it will allow you to target just the popup div and set different layouts for the items within it according to how wide that div is. While you avoid script with media queries, you can only use them to change layout based on the width of the whole screen rather than the width of the container.
SO,
I've created a four-column fluid-width layout for a site, and I'm working on placing a fluid square DIV within one of my columns. There are a few techniques I've found to achieve this - namely, setting padding-bottom to the same percentage as the width - but none of these seem to work when the DIV contains content.
Is there a way to maintain a 1:1 (square) ratio on a fluid DIV when that DIV contains content?
Here's my HTML:
<div id="leftmostcolumn">
<div id="logo"></div>
</div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="rightmostcolumn"></div>
And my CSS:
body {
width: 100%;
height: 100%;
background-color: red;
}
#leftmostcolumn {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
background-color: blue;
}
#leftcolumn {
position: absolute;
top: 0;
left: 25%;
width: 25%;
height: 100%;
background-color: green;
}
#rightcolumn {
position: absolute;
top: 0;
left: 50%;
width: 25%;
height: 100%;
background-color: yellow;
}
#rightmostcolumn {
position: absolute;
top: 0;
left: 75%;
width: 25%;
height: 100%;
background-color: gray;
}
#logo {
width:100%;
padding-bottom:100%;
background-color: #aa2d2d;
color: white;
}
And here's a JsFiddle.
The DIV "logo" is the one I'm trying to maintain as a square. Right now, I've used the padding-bottom approach but that doesn't do the trick when there's content in the DIV. Any input is greatly appreciated!
Marca
EDIT:
Getting there...I'm adapting a script I found to find the width of the DIV and then apply that value to the height to keep it a square. However, as it stands now the script doesn't constantly resize the DIV, and it won't allow it to shrink below a certain size. Any thoughts on how to correct either of these issues?
HTML:
<div id="box"></div>
CSS:
#box { width: 75%; height: 50px; background-color: black; }
JQUERY:
$("#box").css("height", function() {
return $(this).width();
});
JsFiddle is here.
This is something I've actually been messing around with for a while, and have come up with a quasi (but not entirely) hacky, CSS-only solution that seems to work on most browsers in the past decade. The trick is to use images, and positioning in a tricky fashion. Consider the following (simplification) of your code.
Markup:
<div class="sqr_box">
your content goes here!
</div>
CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
border: solid 2px pink;
background-color: grey;
color: white;
}
Now, we can't set the height in terms of percent, so we won't; instead, first we'll go into Photoshop, and make an image that is 2x2 px, transparent, or background-colored. Next we'll add the following to your markup:
<div class="sqr_box">
<img src="images/sizers/2x2.png" class="sizer">
<div class="content">your content goes here!</div>
</div>
and THIS to your CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
position: relative; /* static positioning is less than ideal for this scenario */
}
.sqr_box > img.sizer
{
display: block; /* images default to an inline-block like thing */
width: 100%;
height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */
visibility: hidden;
}
.sqr_box > .content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Our parent element now has a dynamically assigned height, this will work */
border: solid 2px pink;
background-color: grey;
color: white;
}
Best of all, this will work for any sized ratio of box you'd want! Just change the proportions of the image!
Hope this is all still relevant to you, 3 months later.
-Sandy
Put all four columns in one div. set that div to 100% width and set the font size to 100em
Have each of your four columns have a width of 25em instead of 25%
Have your logo width and height set to 25em each