I gave my sidebar a negative top margin to display an image over top of the header yellow image but I can't get the sidebar image to show on top. I have added position: relative and played with the z-index but nothing is working.
Here is the page
Here's the css code I have -
.reciperight {
float: right;
width: 28%;
color: #512e70 !important;
font-size: 18px !important;
position: relative;
margin-top: -200px;
}
I checked your page and there is a CSS code in your parent #primay div that makes the image hidden.
change the overflow from hidden to visible and your issue will fix like bellow.
#primary {
float: left;
overflow: visible;
width: 100%;
}
Result
#primary {
float: left;
/* overflow: hidden; */
width: 100%;
}
If you use overflow:hidden then it was hidden outside of content so remove overflow:hidden.
The problem occurs in the images under the Get Tickets button on this page http://www.luaumakaiwa.com/Terms/tabid/71/Default.aspx
When you see the page with a mobile device the images don't appear centered but left-aligned.
The code is
#media(max-width:717px){
.top-img-cont{
display: block;
width: 100%;
height: 207px;
overflow: hidden;
}
}
I tried adding "margin: 0 auto;" to class top-img-cont but it still doesn't work.
You need to add:
.top-img-cont img {
display:block;
margin:0 auto;
width: 200px;
height: auto;
}
I want to make on iframe full screen. Here is the code:
http://jsbin.com/ibopes/1/edit
and here is the demo:
http://jsbin.com/ibopes
Why the scrollbar? For some reason I can't use position: absolute for the iframe, and I don't want overflow: hidden on body.
How to hide the scrollbar, and why is it there?
Specify display: block on your iFrame. jsBin normalizes the CSS for you:
#test {
width: 100%;
height: 100%;
min-height: 100%;
border: none;
background: #ff0000;
display: block;
}
See the working demo here > http://jsbin.com/ibopes/5
I can't seem top find a definitive answer to this.
The following styling will remove scrollbars from an iframe in firefox and chrome but I can't seem to find an alternative for ie. I really don't want to have to set the scrolling attribute. Any ideas?
iframe
{
height:500px;
width:500px;
overflow:hidden;
}
iframe::-webkit-scrollbar
{
display: none;
}
edit: I would have no control over the html for the iframe source. IE sadly means ie7 upwards.
How about this trick? (If you just don't want to show scrollbars)
Your <iframe> must have a container. So do something like this:
<container>
<iframe src="http://www.domain.com"></iframe>
</container>
And your CSS:
container {
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
}
iframe {
width: 517px; /* scrollbar = 17px */
height: 517px; /* scrollbar = 17px */
position: absolute;
top: 0; left: 0;
}
I want to set vertical alignment of image inside a div. I use img { vertical-align:middle}
but it is not working.
Using the line-height property will solve the problem:
<style>
.someclass {
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
border: dotted;
}
.someclass img {
margin: auto;
vertical-align: middle;
}
</style>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
This is a solution that doesn't require JavaScript (as my previous solution did).
You can achieve what you want by assigning display: table-cell to the containing div. Here's an example: http://jsbin.com/evuqo5/2/edit
I feel I must warn you that you will need to test this in every browser you intend to support. Support for the table-cell value is fairly new, particularly in Firefox. I know it works in Firefox 4, but I don't know about any of the 3.x iterations. You'll also want to test in IE (I've only tested in Chrome 10 and Firefox 4).
The CSS:
div#container {
width: 700px;
height: 400px;
position: relative;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
div#container img {
margin: 0 auto;
display: block;
}
You won't need the div#container img styles if you don't also want to horizontally align the image.
If you're trying to do what I think, vertical align isn't going to work; you'll need to use positioning.
In general, position the container relative, and then position the image absolute, with top and left set to 50%, and then move the image back to the center by setting negative margins equal to half the width / height.
Here's a working example: http://jsbin.com/evuqo5/edit
Basic CSS is this:
#container { position: relative; }
#container img {
position: absolute;
left: 50%;
top: 50%;
margin-top: /* -1/2 the height of the image */
margin-left: /* -1/2 the width of the image */
}
See this awser: How to vertical align image inside div
If you want to align horizontally also, add the right and left, like this:
div {
position:relative;
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
The following post has some useful references:
Text Alignment w/ IE9 in Standards-Mode
Also, depending on which version of IE you are testing against, you may end up needing some browser-specific hacks or some jQuery/JavaScript code.
If you have to, use a one-row-one-cell table and take advantage of the vertical-align property. This is brute-force, not overly semantic, but it works.
If you set the div display attribute to table-cell then vertical-align: middle; will work.
The vertical-align rule only affects table cells or elements with display: table-cell.
See this article from SitePoint for a detailed explanation.
<style>
/* change body to .someClasses's parent */
body {
width: 100%;
height: 100%;
display: table;
}
body > .someclass {
width: 300px;
height: 300px;
text-align: center;
border:dotted;
margin: 0 auto
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
</body>