HTML:
<div>
<img src="Comp.png" id="comp"><iframe width="700"
height="526"src="http" frameborder="0" allowfullscreen>
</iframe>
</div>
CSS:
#comp {
display: block;
height:700px;
width: 800px;
margin-left: auto;
margin-right: auto;
}
iframe {
display: block;
height: 385px;
width: 752px;
padding-bottom: 5%;
}
Currently the iframe isnt showing up. previously I had used margin positioning to get it within the computer image, but when the browser window resizes it completely throws everything off. Can anyone offer any input? Help is appreciated. Thanks
JSfiddle: http://jsfiddle.net/bKPKh/
I wrapped the image and the iframe within a div with relative position. Also I have wrapped the iframe in a div with absolute postion and fix it above the image with left and top.
Here is an example of my code :
<div class="container">
<img src="http://i.imgur.com/Et22afT.png" height="200" width="200" />
<div class="frame">
<iframe src="http://www.bbc.co.uk" height="120" width="181"></iframe>
</div>
.container {
position:relative;
}
.frame {
position:absolute;
left:9px;
top:15px;
}
http://jsfiddle.net/7Beaa/
OP, have you considered a wrapper with relative positioning, and using absolute positioning on the children?
Relative positioning positions it as normal, but shifted by some number of pixels along both axis (and those numbers may be 0). On the other hand Absolute positioning takes an element out of the normal positioning entirely (kind of like putting something on a new layer in Photoshop) and positions it relative to the most recent ancestor with anything other than static positioning (which is the default), or the document as a whole if there is none.
Confusing, I know! The point is that the wrapper with position:relative; top:0px; left:0px; will work exactly like normal (...mostly), but then you can use absolute positioning to put the child elements wherever you want inside it. You'll need to manually set the height and width of the wrapper, because the absolute-positioned children are, as I said, on another "layer", so they can't affect anything on the main "layer".
Related
I am trying to understand why a div with display:block will not sit under another div with display:block
My mark-up is this:
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: absolute;
top:0;
left:0;
}
.container .text-left{
position: absolute;
top:35rem;
left:35rem
}
.container .text-right{
position: absolute;
top:35rem;
right:35rem
}
<div class="container" >
<img src="/image1.jpg" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="/image2.jpg" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
I am trying all sorts of stuff to make this work - overflows etc - but can't seem to get the second display block div to sit under the first.
EDIT: It seems that if you put position:absolute element/s inside a position:relative element - that may have height due to that element being an image - the absolute element/s removes this height. So you need to add it back in as height: X.
But why??
Is this due legacy mark up - using absolutes in ways not designed for?
Why would the browser not take into consideration the image height as default. And we could override this if needed.
Can anyone please enlighten me?
thanks
The reason you have lost height is because position:absolute; removes element from the flow, therefore your parent container won't be able to use it to work out its height. It's not legacy markup, it's part of the scope.
A quick excerpt from CSS-Tricks
The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.
If for whatever reason you are required to have that specific element as position:absolute; your next best bet would be to adjust the parent container using JavaScript/jQuery, however that might be a bulky fix.
My suggestion would be to try and achieve your preferred layout without using the absolute positioning, and then if you get stuck, post another question here explaining your desired layout and current code trying to achieve it.
EDIT
That being said, if the mentioned JavaScript/jQuery solution does not sound to bulky to you, you could try the following:
$('.container').each(function(){
$(this).css({
'padding-top': $(this).find('img').height()+'px'
});
});
This will add padding-top to the container based on the image size. Alternative, you could add an empty div below the image and adjust its height based on the image size.
To make it work just make the img and test_* position to relative instead of absolute. Why ? Position absolute removes element from the flow, that means that because all your container's childrens are absolute, it is like your container has no content, that's why it collapse.
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: relative;
top:0;
left:0;
}
.container .text_left{
position: absolute;
top:90%;
left:5%;
color: #fff;
}
.container .text_right{
position: absolute;
top:90%;
right:5%;
color: #fff;
}
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
I would like to do a responsive design for the popup notifications in my application.I'm using Angular Toaster for the notifications.
For instance I have located the toaster-container element in the center of the screen, but using an absolute position,so for smaller screens the notifications stay in the same position so they are not displayed. I would like to make the notifications relative to the parent element where they are contained, (in this case the container grid). How do I achieve that using CSS? This is my html code:
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container-custo','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" ></div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"></div>
<!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
<div id="loader" class="loading overlay" data-ng-if="loader.loading">
<p>We are loading the products. Please wait...</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
</body>
And the custom css rule I use for the toaster-container element:
.toast-container-custo
{
position: absolute;
top:100px;
left: 780px;
}
Use percentages instead of pixels
You can make your div relate to it's container using percentages both for width/height and top/left values. The percentage you use here will be in relation to the parent container size. So if your parent container is set to width:300px and your child is set at width:50% then the child will be rendered at width:150px;
Use relative positioning for the element.
Relative positioning, is just what it says on the label - it positions the element relative to other elements. So you also need to set the element to position:relative;
Here is how I would go about this:
.toast-container-custo{
position: relative;
margin: 0 auto;
width: 30%;
height:30px;
}
margin:0 auto will center
the child elements within it's container, horizontally
the width now is 30% of the parent container
the height, well, I just prefer to set this at a fixed px value but
you can definetely use % here as well
You can change your container to:
.toast-container-custo{
position: absolute;
top: 100px;
margin-left: auto;
float: none;
margin-right: auto;
left: 0;
right: 0;
}
Generally, this is a good way to center horizontally absolute elements.
I have an image that is also a link using
<img src="img.png" id="cloud"></img>
And I centered it (and resized it) using
#cloud
{
display: block;
margin-left:auto;
margin-right:auto;
height:45%;
}
The problem is, the clickable area for the link extends across the entire web page, rather than just across the image. How would I fix this?
You could always use absolute positioning.
HTML:
<a href="link.html" >
<img id="centerimage" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" />
</a>
CSS:
#centerimage {
position: absolute;
left: 0;
right: 0;
top:0;
margin: auto;
}
JS Fiddle: http://jsfiddle.net/SinisterSystems/3TbVv/3/
If you needed to place the element within the range of your document structure, you could apply a wrapper with a CSS class of relative.
HTML
<div class="wrapper">
<a href="link.html" >
<img id="centerimage" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" />
</a>
</div>
CSS
.wrapper {
position:relative;
margin-top:25px;
}
#centerimage {
position: absolute;
left: 0;
right: 0;
top:0;
margin: auto;
}
JS Fiddle: http://jsfiddle.net/SinisterSystems/3TbVv/4/
Expansion: The reason why it was showing your link across the entire page is because you were using display:block; and there was no wrapper or any sort of containment for it. display:block; is inherently a 100% width element.
Furthermore, display:inline; wouldn't have worked either, as it would fix the problem, but just adjust it to the left edge of the screen. If it doesn't have a 100% width to go off of, it can't set margins.
Easiest solution would be to just wrapper it in, and style the wrapper element while you set some sort of absolute position with your img. That will ensure it will stay within the wrapper, and you can position the wrapper accordingly in your document by normal means, hence the relative style.
Not sure if this will work but try doing
<img src="img.png" id="centerimage" href = "link.html"/>
if this does not work try useing javascript or jquery
<img src="img.png" id="centerimage" onClick = "click" href = "link.html"/>
<script>
function click() {
window.location.href = "link.html";
}
</script>
then add this to the css
cursor: pointer;
I'm sure this is super simple, but I'm new to css. I'm essentially trying to position some rendered typography and make it stay centred no matter what the size of the browser is. I've tried using margins with percents, but that doesn't seem to work.
Here's my code.
html
<div class="weare">
<img src="image/textrenders/weare.png" />
</div>
<div class="shaftesburytv">
<img src="image/textrenders/Shaftesburytv.png" />
</div>
<div class="awebbasedstudio">
<img src="image/textrenders/awebbasedstudio.png" />
</div>
css
.weare {}
.shaftesburytv {}
.awebbasedstudio {}
I want the result to look something like this
Any help would be appreciated.
Simplify your content:
<div id="container">
<img src="http://placekitten.com/200/50">
<img src="http://placekitten.com/300/100">
<img src="http://placekitten.com/250/75">
</div>
Then ensure the container has the same width as the largest contained image, and apply margin:0 auto; to it to center. Finally put display:block on the images to make them all stack vertically:
#container {
margin:100px auto;
width:300px;
}
#container img {
display:block;
}
Sample here.
Alternatively, if you also want to center vertically, you can also use absolute positioning and then negative margins on the absolute size of the object - no problem for you since the image sizes are fixed:
#container {
margin-left:-150px;
margin-top:-112px;
left:50%;
position:absolute;
top:50%;
}
#container img {
display:block;
}
Sample of this approach here.
Since you're using images, you could
margin: 0 auto;
to them. For text, you could
text-align:center;
With divs, you could also center align them (in HTML).
You could also use center tags: http://jsfiddle.net/A33J2/
It can be verry simple.
If you do not split your image and gather all text of it into one.
html
<img id="my-whole-image" src="http://placekitten.com/300/250" />
css
#my-whole-image {
margin-left:-150px;
margin-top:-125px;
left:50%;
position:absolute;
top:50%;
display:block;
}
jsFiddled here
Just a tip, ence you're saying you are new to css, i presume you are new to html too : always use the minimum required to build your webpages. Those 3 images had to be merged into one for many reasons like server request, bandwidth, browser redraw, dom elements number.
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.