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.
Related
I have try to put image in the right side and text in the left side,
but for some reason its the opposite and I don't know why,
By the way how can I shrink it to fit the "Can you see the simplicity behind the logo?" size.
Link to website
The column you want on the left should come first. So in this case the text.
Example
<div class="row">
<div class="col-xs-6">
[text]
</div>
<div class="col-xs-6">
[image]
</div>
</div>
You have the img-responsive class on the logo so it will scale depending on the viewport size. You also have a inline style with "height: 200px". Lowering this number would decrease the size of the logo.
The styles coming from bootstrap are setting your layout. For instance your image <img src="Isaac.png" alt="" id="img_q" class="col-xs-6 text-right"> has a float:left coming from bootstrap. You can override bootstrap styles by putting your styles inline like this <img src="Isaac.png" alt="" id="img_q" class="col-xs-6 text-right" style="float: right;"> or by placing !important; after the styles you want to override other styles. Use the developer tool on the browser to analyze the css and you'll see what is affecting your page and what is not.
I'm working on a project that has a header and navigation. Like so:
I'm having a tough time with the layout. I can put it together just fine, but I'm shaky with the responsiveness (is that a word?). Right now, the pseudo code is something like:
<div class="container" style="width: 960px; overflow:hidden;">
<div class="nav">
<ul><li>...</li></ul>
</div>
<div class="image">
<img src="..." />
</div>
</div>
I was also considering using a background-image for the image and then creating strict breakpoints, but there has to be a better way.
I'm hoping to have the nav scrunch up to reflect the new height/width of the image, depending on the width of the viewport. When it's too thin to facilitate this, it will change to a mobile-friendly view (which is no problem for me).
I am trying to make a responsive website. My issue is if i am not setting a div height then the bottom of the div content has come up and overlay with the top div contents. Also if I sets a height, when i see it in responsive it takes the full height and show white space. Can you guys please sort it out?
You want something like this:
<div style="height:20%"> CONTENT </div>
or
<div style="height:40px"> CONTENT </div>
use % to specify the amount of space your div will get in your current container or px for the number of pixels
http://www.w3schools.com/cssref/pr_dim_height.asp
Friends, this is my sample coding
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
CSS part:
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
For mobile responsive, I want to hide the right banner div so I did 'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect of other divs.
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.
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.