I've got a <span class="name"> next to an <img> inside a <div>. Inside this span I have some text which I want to turn 90 degrees. However, when I do this (as code suggests below) the span ends up in a somewhat weird position on top of the image.
In IE, the text doesn't rotate at all.
.name {
display: block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Any suggestions as to how I solve this?
I've fixed this on my own what I needed to do was put a fixed size on the span and then use position:absolute; to position it where I wanted it
I'm not sure how to fix it. But the reason it doesn't rotate in IE is that you are using "webkit" and "moz" to rotate - which are firefox-like-browser specific functions. You'll have to google for an IE-equivalent.
Related
I have a div containing an image, I want to rotate the image. After rotation the image should cover the parent div, overflow would be hidden. I have two pictures of what I get and what I want (lack of reputation doesn't allow me to embed the pictures):
.parent {
position:relative;
display:inline-block;
width:100%;
max-width:480px;
overflow:hidden;
}
.background{
width:100%;
height:auto;
}
.grafic {
position:absolute;
z-index:1;
top:0;
left:0;
width:100%;
max-height:360px;
height:auto;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="parent">
<img class="grafic" alt="" src="img.gif"
<img class="background" src="gfx/missingpicture.gif">
</div>
As you can see, I can rotate the image, but the image isn't fully covering the parent div. I couldn't find anything to this exact problem.
Some thoughts:
One could use JQuery to calculate the necessary height/width to cover the parent div, but I hate using JS/JQuery if a pure CSS solution is possible (I can do a JS solution by myself, but I still suck at CSS).
I use PHP (I'll know the degree), so precalculating stuff can be done, but the parent div becomes smaller on smaller screens. A fix width would kinda suck then..
I can't think of CSS-only solution, so here's something with JS that I've used before.
You don't need to do the maths yourself in order to get the dimensions of your transformed object.
Instead you can use the Element.getBoundingClientRect() method which returns the height and width of the element after the transformation.
Once you have the dimensions, it should be easy to adapt the parent dimensions to fit the rotated image.
Here's a DEMO.
Also this other question has working solution which does what you want.
I hope it points you in the right direction.
I do not required reputation for posting a comment so I am posting as a comment. I am only addressing the sizing options for the image.
Say your image has width=w and height=h. Then if the size of the outer quadrilateral will have size
sqrt(w*w + h*h)
. Please note that the outer image will not be a square if inner image is not a square.
I have a table with slanted text in the header row, the only problem is that the text still makes the width of the columns way to large. Is there any way to squish together the table columns so that they are about the width of the select boxes? Or is there a way to place the text there without it in the header and maybe just use a <div> or <p>?
Here is the fiddle I am working with:
http://jsfiddle.net/t9Krg/1/
.slanted {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
white-space:nowrap;
/*
display:noblock;
*/
}
The boarders around the header is just to see the extra spacing and will be removed later.
If you use absolute positioning, you can place objects on the page anywhere you like. But to keep them positioned correctly relative to the table, you need to apply relative positioning to their parent elements.
So for this markup:
<th class="slanted">
<div>This is a heading</div>
</th>
Your CSS should look something like this:
.slanted {
text-align:left;
position:relative;
white-space:nowrap;
}
.slanted div {
width:12em;
position:absolute;
top:4em;
left:-1em;
transform: rotate(-45deg);
}
You'll have to tweak the top and left values to get things right, but it shouldn't be too difficult as long as you aren't intending to have line breaks in your labels.
Link to JSFiddle
Maybe you could try using text-overflow over the th tags. An example i've found in this answer:
CSS text-overflow in a table cell?
Add position fixed to CSS
div{position:fixed;}
You'll have to play around with some of the other stuff, but it would cause the columns to not grow to your content.
http://jsfiddle.net/MathiasaurusRex/t9Krg/4/
I have many images inside my div where I position them so that all are complete each other’s.
Also I need that when I copy the div to other page the images sty the same but I can modife where to put the div in my page
Now my problem is:
I want these entires images inside the div to be smaller and still are complete each other
Example of My code:
<div style="position:absolute; top:900px; left:500px" >
<img id="Burimi" style="position:absolute; left:10px" src="Images/Reagion/Burimi-B.png"/>
<img id="" style="position:relative; left:98px;top:1px;" src="Images/Reagion/N Batinah-B.png" />
</div>
Example:
You can resize the container and not the images. For example you can use the following for the parent div:
div {
transform: scale(.5,.5); /*Half width and height */
-ms-transform: scale(.5,.5); /* IE 9 */
-webkit-transform: scale(.5,.5); /* Safari and Chrome */
-o-transform: scale(.5,.5); /* Opera */
-moz-transform: scale(.5,.5); /* Firefox */
}
Sounds like you'd be better using an image map. Have one image containing all the images as you'd expect them to be displayed on the page, then use areas to differentiate between the different regions on the image.
Use position:relative in the div, and position:absolute for all the images.
This way you can put the div anywhere and the images Will always be positioned relatively to the div
Problem: css3 transforms applied to a child element inside a div are ignored by the browser (FF5, Chrome12, IE9) when calculating the scrollHeight and scrollWidth of the containing div's scrollbars when using "overflow: auto;".
<style type="text/css">
div{ width: 300px;height:500px;overflow:auto; }
div img {
-moz-transform: scale(2) rotate(90deg);
-webkit-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
}
</style>
<div><img src="somelargeimage.png" /></div>
I have put together a small test on jsfiddle showing the undesired behavior.
http://jsfiddle.net/4b9BJ/
Essentially I am trying to create a simple web based image viewer using css3 transforms for rotate and scale and would like a containing div with fixed width/height to be able to scroll to see the full content of the image it contains.
Is there an intelligent way to handle this issue, or even a rough workaround? Any help is appreciated.
I added an extra div to each of the transformations and by setting fixed widths for those divs and clipping overflow I manged to make them the correct size. But then I had to use position: relative and top: blah; left: blah to shift the images into the correct position.
http://jsfiddle.net/4b9BJ/7/
Normally, if I create:
<meter value="30" max="100">Low</meter>
I'll end up with a horizontal meter/bar if viewed on a browser that supports the html5 meter element.
Is it possible to create a vertical meter with html5?
The only solution I've been able to come up with so far is using CSS3 rotation (transform).
Yeah transform is the only way to do this..
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
Transform is the answer. The whole point of meter is that it's a semantic, not a presentational element and you should be able to style it however you want with CSS>
Using transform on the meter element has a major drawback which I have yet to find an elegant way around, it doesn't seem to change the amount of horizontal width the element requires. eg, for a meter with width 180px and height 15px transformed by 270deg, the meter will show as a vertical bar with height 180px and width 15px, but the bounding box ends up as 180x180 with a huge white space on the left side. Further CSS is then needed to reposition the element so the with gap is hidden. I've observed this behaviour on both Chrome and Firefox.