I want to put the iframe tag in a middle of the parent div in every size of monitor,I used bootstrap:
<div class="col-md-2 col-sm-2 col-xs-12 animated2 zoomInDown">
<div class="col-md-12">
<div class="box" style="min-height: 180px; background-color: white">
<iframe id="enamad" class="thumbnail meNamad" src="#" frameborder="0" scrolling="no" allowtransparency="true" style="width: 180px; height: 180px;"></iframe>
</div>
</div>
</div>
Give the parent div position: relative.
Give its child div or the iframe position:absoute; margin auto; left:0; right:0; top:0; bottom:0;
no matter how big/small is the parent div the child div will always be in the center wrt parent.
Related
I am trying to make sticky div inside div col-md-3 , it working fine if I don't use col-md-3 class, please tell what I am doing wrong,
.sticky {
position: sticky;
top: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class=" col-3">
<div class="sticky" style="border:1px solid; color:red">sticky</div>
</div>
<div class="col-9" style="height:1000px; border:1px solid; background:red">
</div>
</div>
The sticky position is happening due to parent div (.col-3) because it have display flex property with this it's getting height equal to the div (col-9).
In short:
<div style="display: flex;">
<div class="1"></div>
<div class="2" style="height="500px;"></div>
</div>
Now in above HTML the div class 1 also get the height = div class 2 (500px).
Any element(position:sticky) inside div class 1 is sticky for next 500px.
If any element is sticky then it also has same defined parent height.
I am going to make a website like this http://watcherboost.com/
SO i want to create middle menu for my website.so i need to create a div tag which is always top on following background:
This is the code i tried
<form id="form1" runat="server">
<div>
<div id="top" style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
</div>
</form>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 650px; background-color: #C2C2C2; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div id="middle" style="margin-left: 150px;margin-right:150px;margin-top:-250px;background-color:black"></div>
I want to get this last div (id =middle) to always top mode like upper website.
But unfortunately my div (id=middle) is not showed the page..
Please advice how to edit this code
Thanks
Your div is not showing up, because it doesn't contain any content. Add height property to its inline CSS.
If you want a div stay on top you should set:
position:fixed;
top:0px;
try this:
https://jsfiddle.net/TiG3R/ug4vvo48/
I'm trying to use Bootstrap grid system with rows each has 4 column contains image, but the image size is big and it gets over its container, so I set image position: absolute and div position: relative but it still doesn't work. Is there any way to make the image fit the div container with container's size?
.sec5row {
border: 1px solid red;
position: relative;
}
.filter {
position: absolute;
}
<div class="container">
<div class="row">
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
</div>
<div>
You can use the below code to fit image inside the responsive div
.filter {
width:100%;/*To occupy image full width of the container and also fit inside the container*/
max-width:100%/*To fit inside the container alone with natural size of the image ,Use either of these width or max-width based on your need*/
height:auto;
}
I think the bootstrap class ".img-responsive" solves your problem. So try something like this:
<div class="container">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f1.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f2.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f3.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f4.jpg" alt="f1">
</div>
</div>
<div>
It sets the style of your image to "max-width: 100%;" and "height: auto;" which should be exactly what you need. There should be no need for any additional css.
Add css to your code
#img {
width: 100px;//change px size
height: 100px;//change px size
padding-left: 3px;
padding-top: 5px;
}
Just add class="img-responsive" to your img tag...it works fine
I am trying to work out the best way for me to center each of my pictures (#contact1, #contact2, #contact3) inside each of their containers. I have tried to put margin left etc but doesnt work for when I scale up.
I have a JSFiddle I have started: http://jsfiddle.net/tJugd/3592/
HTML:
<div class="slide" style="height:66px;">
<div class="staff staff-matt" data-hammer="[object Object]">
<div id="contact1"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-shail" data-hammer="[object Object]">
<div id="contact2"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-leah" data-hammer="[object Object]">
<div id="contact3"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
</div>
CSS: (View all on JSFiddle)
#contact1, #contact2, #contact3{
position:relative;
background-color:white;
width:100%;
height:66px;
}
You will need to make you images display block and add margin 0 auto to it
#contact1 img, #contact2 img, #contact3 img{
margin: 0px auto;
display:block;
}
Try:
margin-left: auto;
margin-right: auto;
This makes your image have an equal margin on both sides, and usually works with most divs and images.
Try with adding the attribute text-align: center; to staff class.
i want to alignt a image, that is in front of another image, to the right.
In this example the little google image is on the upper left but i want it to be on the upper right:
http://jsfiddle.net/2NYve/
i already tried float: right and align="right" but that doenst work.
As you can see in the example the background is a object with a svg but for this example i simple put a image at this place, i think there should be no different.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: absolute; z-index:5000"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>
Add (Where 20px is the width of your image)
right: 20px;
to the image. That's the only way as far as I know if you use absolute positioning
http://jsfiddle.net/2NYve/1/
<div style="z-index:10; position: relative; float:right;width:30px; height:30px; z-index:5000">
<a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" />
</a></div>
<div style="z-index:1; width:100%; position: absolute; z-index:100">
<img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
</div>
I added to the div with the chromo logo :
z-index:10; position: relative;
And to the other one, with the google logo :
z-index:1
I used the CSS z-index proprety : http://www.w3schools.com/cssref/pr_pos_z-index.asp
Here's the updated jsFiddle : http://jsfiddle.net/2NYve/7/
Set the foreground divs position to 'relative' instead of 'absolute' and add some right margin to place it a little to the right.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: relative; z-index:5000;margin-right:10px"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>