I have looked all over and tried all sorts of different coding with defining the width and display; block and nothing seems to work.
I am trying to center any image I put within this iframe that is located in a div. So far everything I've tried has kept the image aligned to the left. Here is the code. Hopefully someone can help.
#apDiv2 {
position:absolute;
width:1020px;
height:490px;
z-index:2;
left: 0;
top: 300px;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
clip: rect(auto,auto,auto,auto);
}
#bottomframe {
height:490px;
width:1020px;
border:none;
scrolling:no;
display: block;
margin: 0 auto;
border: 0;
}
The HTML code is as follows:
<div id="apDiv2">
<iframe id="bottomframe" name="bottomframe" src="fliers/image1blurthumb.png">
</iframe>
</div>
You cannot do it this way. Since it's an iframe, it has a separate document context and styles. You'd have to use javascript to inject CSS into the iframe, but since you are opening the image directly in the frame, you have no HTML document in there to append styles to.
But I got to ask, why on earth are you using an iframe to display an image? Why not just a regular IMG tag?
Try adding text-align:center to the #bottomFrame style. That should center the image within the iframe. You may also need to give the iframe position.
The image must be less than 1020px wide, though, for centering to occur.
Related
So i'm trying to use an img tag to make a background img in html/css but my img tag will not allow things to overlap it and when I try to use a div class element it does not stretch to edge of page even with width at 100%. here is my css and html.
.backgroundImage {
background: url(/images/mainBackground.jpeg) top no-repeat;
width: 100%;
height: auto;
position: relative;
z-index: 0;
margin: 0 auto;
}
.img{
z-index:0;
}
.img-responsive{
height:auto;
width:100%
}
These are the two ways I've tried:
<img src="../images/mainBackground.jpeg" class="shadow-offset img-responsive"/>
<div class="backgroundImage">
The div ending after everything but my footer
I have containers but neither of these are inside any containers either because they start at the top of the page before I use containers at all.
wrap all of your html in a <html> tag, then use the following css:
html {
background-image: url("image/url.png");
}
I'm going to assume all you're trying to do is add a background image to your div - your explanation is a little unclear. The following is all you'll need:
// html
<div class="backgroundImage">...</div>
// css
.backgroundImage {
background-image: url('/images/mainBackground.jpeg');
background-repeat: no-repeat;
background-size: cover;
}
div elements are display:block by default, which means it should be 100% width. Unless there's something in your markup you're not showing us, there's no need to add width: 100%. Also, the div will also automatically change height based on its content. In this case, using background-size:cover will allow the background image to resize and fill the div regardless of size.
Unless... you're floating things inside the div. Then you're going to need a clear, like this:
// html
<div class="backgroundImage clear">...</div>
// css
.clear::after {
content: '';
display: table;
clear: both;
}
I tried things like text align and center tags... Can anyone help?
Thanks - Max
Add the following CSS property to your iframe and:
Demo on Fiddle
iframe {
display: block;
margin: auto;
}
You shouldn't use the center tag. Leave all the styling to the CSS.
Did you try setting the left and right margins to auto?
Something like:
margin: 0 auto;
Edit: I was able to center a YouTube video by making the CSS for the iFrame set its width, set its display type to block, and set the horizontal margins to auto. Here's what my code looks like.
iframe {
width: 560px;
display: block;
margin: 0 auto;
}
I am finding some HTML\CSS difficulties with this web page: http://www.saranistri.com/saranistriWPnew/?page_id=613
As you can see in this page there is an immage named: abusivismo1-641x321.jpg
This immage is into this div containers structure:
The div having clasas vc_span12 wpb_column column_container contains this other div having class wpb_wrapper that contains itself wpb_single_image wpb_content_element centerizedImg that contains the div having class wpb_wrapper that finnally contains my abusivismo1-641x321.jpg
I want to center this immage in its container in such a way that is at the center of the page
I have try to set some CSS settings like:
width: 642px;
margin: 0 auto;
but not work
Can you help me?
Tnx so much
Andrea
Here is the solution.
.wpb_content_element.wpb_single_image img {
display: table;
height: auto;
margin: 0 auto;
max-width: 100%;
}
Replace the above values in your class .wpb_content_element.wpb_single_image img and your image will be at the center.
Hope this helps.
Just add this style to that class :
.wpb_single_image.wpb_content_element.centerizedImg {
text-align:center
}
if you want sure to get only the images centered, style your wrapper of the images with display:inline-block;
just a simple solution without margins.
in order to centralize any element, you may use
margin-left: auto;
margin-right: auto;
also, an element will stay at center if it's patent has a text-align: center
You may also have a look at Dead Centre
Just use text-align:center; for your wpb_wrapper class. Have a look at this fiddle
Use margin-left:auto; and margin-right:auto; it will horizontally align to center.
In some cases, depending for what you use this, the image is not resized automatically when you resize the browser; i.e. mobile browsers. I came up with this:
.wpb_wrapper {
display:inline-block;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
padding: 0px 15px 0px 15px; /* adds some white space in left/right on mobile */
}
Hope it helps someone.
I'm new to this world, but loving it so. Please excuse my newbie status if I ask ridiculous questions or if things are not posting quite right. Please advise as you see fit.
I am trying to get a button to float over an image. I've brought the image in as an in-line element so that I can preserve the PSD link in Dreamweaver, rather than bringing it in as a background image and for the alt attribute applications. I'm guessing the problem is that I want the inline image to act as a block? Is that right? I've been able to get the button to float over the image using relative positioning for the button and absolute positioning for the image, but then am unable to center the whole thing on the page. Any advice you have is greatly appreciated!
CSS
#container {
margin: auto;
display: block;
}
#button {
width: 100px;
height: 100px;
background-color: blue;
float: left;
position: relative;
}
HTML
<body>
<div id="container"><img src="index.jpg" width="1200" height="900" /></div>
<div id="button"></div>
</body>
Move your button div inside your content div:
<div id="container"><img src="index.jpg" width="1000" height="900" /><div id="button"></div></div>
And then change your container to be the width of your content. Position set to relative. Then, position the button inside the container div with absolute, top, and left.
#container {
margin: auto;
display: block;
width:1200px;
position:relative;
}
#button {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top:0px; left:20px;
}
I'm in the midst of making a navigation bar. I came here earlier and got some help re-organising and coding said item. All seemed great and it seemed like it should work but when using the following code instead of each image resizing, it only showed X% of the images height and Y% of the images width. I cannot figure out what is going wrong.
CSS:
#navbar a.newr:link { background-image: url('newr.png'); display: block; width: 5%; height: 2%; }
#navbar a.newr:hover { background-image: url('newrhover.png'); display: block; width: 5%; height: 2%; }
Please refer to how it looks looks on my website to see what I mean.
Please also refer to my other navbar question.
Thank you.
Background images don't resize. They are shown in full size and are clipped if the container is smaller.
What you can do:
The best approach is to resize the images to the target size
A hackish approach is to use absolutely positioned <img> tags as background and <span> text as foreground.
<div class="hasBg">
<img>
<span>text</span>
<div>
.hasBg{
position:relative;
}
//will autofit depending on how span stretches the container
.hasBg img{
position:absolute;
top: 0;
bottom: 0;
left: 0;
}
.hasBg span{
position:absolute;
}
A native but new feature is to use the new CSS3 background-size. but this is not cross-browser afaik
Since you've done it as a background image, the width and height attributes only apply to the div, not the image.
You have two options.
Resize your images to fit the dimensions
have your images on your page and use javascript for your hover effect