How do I place div\form on a responsive image - html

First i'm new to responsive design.
I'm trying to convert this landing page to a responsive design:
for the image I tryed to use class img-responsive from bootstrap,
But my problems is:
How to place the contact form need to be insert inside the orange box that is part of the image (red frame just to point, not part of the design).
How do I make the image and the form i'm placing on it responsive ?
Thanks

If it is taking 100% width on a div you can use another div inside that with position: absolute and align it where you want it (like right: 50px bottom: 50px; ). Give the parent div a position:relative to make sure it positions inside.
You can then use a percentage width or use left:50px and whatnot. And use css media queries to make it show correctly.
Another would be to use the image as a background-image and use child div with absolute position, but you might get problems getting the height correctly cross-browser.
I'm not sure what you mean by img-responsive, from what framework is that?

Try out something like this. you also should use col-xs-, col-sm- class to make responsiveness better.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div style="position:relative;width:200; height:89px; background-color:green;
top:54px; left:0" class="img-responsive">
<div style="left:15px; top:54px; position:absolute;">
<form method="post" action="">
<input type="text" name="name"/>
<input type="submit" name="submit" value="go"/>
</form>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.span12{ background-image: url('../images/video-player-background.png');
background-repeat: no-repeat; background-size: 100%; min-height: 1024px;}
</style>

Try the solution below.
<div clas="img-responsive" style="position: relative;">
<img src="example.jpg"></img> <!--That image-->
<div style="position: absolute;" height= 100%; width: 100%"></div>
The div contains everything on top of the image will change together with the image.

Related

bootstrap3:/ two images responsive together

with Bosstrap3/.
I have 2 image. One image is big. another is small.
both of image are responsive.
I want put small image on big image.
It's easy for a static page. But I want do it for a responsive page.
I want position of images not be change with resize of page.
I try this:
<div class="container">
<div class=" panel panel-default">
<div class="panel-body" style="padding:1px">
<img class="img-responsive" src="http://placehold.it/1170x300" alt="Chania">
</div>
<div class="panel-footer">
View all <h4>Bootply Editor & Code Library</h4>
</div>
</div>
</div>
<img class="img-responsive mytumb" src="http://placehold.it/150x150/000">
AND css code:
.mytumb{
position:absolute;
top:50px;
left:40px;
}
But it works for an static page.
How can I do it?
https://jsfiddle.net/DTcHh/18935/
You can go here for a solution position one image above another , you will surely get a solution. Happy Coding!
You can add your image inside your .container div so it is in absolute position relative to this container.
Like this
And then, play with media queries to make it fits everytime.
.container { position: relative; }
#media (max-width: 767px){
.img-responsive.mytumb { width: 20%}
}
It is not perfect but you've got the idea I suppose.

When Zooming out my website, everything looks wrong

If you zoom out my website, the structure of the header looks bad. I don't know what to do about this. This is the link of my website. This is the CSS and HTML structure. Hope you can help me, I really need help :(
If you want you header to stay in the centre with your content, you will need t do that, it doesn't just happen.
You should start by agreeing on a width you want you content in (you have width: 1100pxon your container div, so I'll go with that for you.)
In you css for .containerchange width: 1100px; to max-width: 1100px.
Then in the css for #header remove the position: absolute;. Add in max-width: 1100px; margin: 0 auto;
You will need to modify the structure of your HTML and place the header div inside the container div. Currently, that part of your HTML is like this:
<div id="header"></div>
<div id="container">
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
but it should be like this instead:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
After modifying your HTML, you can add the following CSS to your stylesheet:
#header {
margin-left: -100px;
}
your header is positioned absolute
so when you zoom in and out it will stay absolute positioned. In the top left corner when the page is zoomed out
Also you do not have a wrapper for your code.... you may want to wrap everything in a container,
This will also take care of the image size thats over lapping your other content.
I do not know id you wanted the header to overlap like that but if it was intended just use margin-left
a wrapper will also contain your other divs sizes to stay within that wrapper.
Not going to work with zooming in and out
#header {
position:absolute;
z-index:101
}
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="underheader">
</div>
</div>
</body>
css
#wrapper{
width:800px;
} or whatever width you want
#header{
maegin-left:50px;
} or whatever px you desire

Strange div positioning

I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.

Add Button on top of "img-responsive" div with bootstrap

In my webpage, I've created a div and added the class "img-responsive" to it. It works extremely well and scales perfectly. However, I need to add a button on top of it and the only way I have done that so far is using the CSS property "position:absolute" and defining it's position. That does work, but when I resize my browser, the button will not scale with the webpage and is hidden on smaller screens. How can I fix this?
Here's the image of what the header of my page looks like: http://postimg.org/image/xdols29nn/
This is what my div looks like:
<div style="position:relative;" class="img-responsive" >
<img src="images/mac2.png" width="1440" class="img-responsive" >
<div>
<input style="position:absolute; left: 1130px; top:35px;"type="button" value="Button" href="#sidr" id="simple-menu">
</div>
</div>
Have you tried just doing this (making your button and then your image width:100%). This will force them both to be responsive with the same width of whatever container they are in without requiring any positioning.:
<div class='row'>
<button class='btn btn-default' style='width:100%;'>button</button>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" style='width:100%;height:auto;' />
</div>
Let me know if I'm on the wrong track.

Show the floating images as same height

Please check the code at http://jsfiddle.net/jfzZQ/
We are displaying two floating images dynamically next to each other. We are setting up the width of the images to 200px and not setting the height parameter.
As the images are of different proportions, the height of one image is longer than the other.
<style>
.img200 {width:200px;}
.credit {position: absolute; bottom: 8px; left: 8px;
width: 100%; color: #fff;font-size: 11px;}
</style>
<div style="width:405px;">
<div style="position: relative; float:left;">
<img class="img200" src="http://images.theage.com.au/2012/12/19/3902461/art-353- svMESSI-300x0.jpg" /> <span class="credit">site 1</span>
</div>
<div style="position: relative; float:right;">
<img class="img200" src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-11D1474C000005DC-964_634x664.jpg" /> <span class="credit">site 2</span>
</div>
</div>
<div style="clear:both;">new line here</div>
<br />
<br />
<div style="width:405px;">
<div style="position: relative; float:left;">
<img class="img200" src="http://nimg.sulekha.com/sports/original700/lionel-messi-2009-12-21-15-41-46.jpg" /> <span class="credit">site 1</span>
</div>
<div style="position: relative; float:right;">
<img class="img200" src="http://media.npr.org/assets/img/2013/06/12/messi122way_custom-74f98cf7a4148d6405ad71c75457f7a4f516a9c9-s6-c30.jpg" /> <span class="credit">site 2</span>
</div>
</div>
<div style="clear:both;">new line here</div>
Is it possible to hide bottom part of one of the images, so that they both show as same height. In case 1, we would like to hide bottom part of the left image and in case 2 we would like to hide bottom part of right image.
Please guide. Thanks.
1)
Create 2 divs of equal height and set the images as their background
2)
Change of tactic .. background works but your images are too big. Lets overflow instead by adding this to the divs:
height: 200px; overflow: hidden;
http://jsfiddle.net/jfzZQ/1/
Notice i'm not fixing the height/width of the image. Only the width of the image is set as to keep the height/width proportions automatic. I'm just setting the height of the div and cutting it off with overflow.
3)
The solution from Mohammad seems fine to me
Did some css refactoring ..so don't know if you like it. If you prefer solution 3, be sure to give the creds to Mohammad & not me
http://jsfiddle.net/jfzZQ/5/
You need to set both pictures' width to auto, and their height to a specific value.
img {
width:auto;
height: /* make height same for both*/
}
That way, it will keep the proportions of both images and it will also make them smaller or bigger depending on the height. Make sure you don't add too much height, though, or the images will go to the next line.