I wanna center this image in the center of the frame see picture below:
I use overflow hidden so you cant see the things on the outside of the frame
I need this to be done with only css - no scripts at all, cause its used in 3rd party software that doesn't allow scripts.
Besides this i need to be able to size the image so it needs to be stated as a image tag
See the fiddle for the elements it must contain. Last but not least it must be css 2.1 at the max so (no css3)!
Here is a fiddle on the frame
And the HTML:
<div class="frame">
<img src="http://preview.fonqi.com/img/explain2.jpg" width="200" />
</div>
The css:
.frame{
width:200px;
height:200px;
border:2px solid black;
overflow:hidden;
}
.frame img { margin-top: -50%; }
Moves the image up by half it's length.
DEMO
You can also use positioning....
.frame img { position: relative; top: -50%; }
DEMO
try the below
Add this line in CSS img{ margin: -100px 0px;} it will work
Updated Fiddle : http://jsfiddle.net/QxygK/13/
Related
I have a "backend engineering constraint" that's forcing me to order my markup in a non semantic way but visually my team needs a different order. I was successfully able to achieve this with flex box and have attempted to polyfill with flexibility.js for IE 10 and 9. Unfortunately both 10 and 9 are having issues.
Note that I can not use jQuery/DOM manipulation to move "third" section around.
Does any one else have alternate suggestions or fixes that can help achieve the following:
Markup:
<div class="first">
<div class="second">
<div class="third">
But they need to visually see the following in IE 10 and 9:
So "first" and "third" need to appear visually as apart of the same section and the "second" section needs to be underneath and go full width of container.
Please see my full working codepen (fully working in chrome): http://codepen.io/semantictissue/pen/MypRVz
Any suggestions or help to make this cross browser friendly?
The easiest solution I've found is to position .third as absolute. To visually section off .first and .third, add CSS to .first which leaves room for .third to be set in the remaining space.
body { margin: 0; position: relative; }
.first { height:50px; width: 50%; background: blue; }
.second { height:50px; width:100%; background: gray; }
.third { height:50px; width: 50%; background:green;
position: absolute; top: 0; right: 0; }
<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>
Here is your modified CodePen
The main downside to this approach is that it doesn't reflow the content as the window gets smaller. Media queries would have to be used at certain window sizes which change the width and positioning of the elements as needed. Using a CSS table layout would be useful once the content can be wrapped onto its own line. Info here
I don't really know how to approach this, but this is what I'm trying to do, placing the white arrowbox:
I know how to do an arrowbox, but placing it like that is a mystery to me. At the moment I have two sections, upper and lower, and then tried giving the box an absolute position, but didn't work.
How should I approach this problem? I'm sure there is an easy solution, but I'm not that experienced with CSS.
didn't understand your question very well myself. IF you are trying to position your box in the middle of the lower blue container with: position:absolute I would try this myself
.box {
height:100px;
width:300px;
background-color:red;
position:absolute;
top:-50px;
left:50%;
margin-left:-150px; /*this has to be half your box width negative margin*/
}
Don't forget to add position relative to your blue div (or fixed, or absolute... just not default static). A fiddle as an example ( I add css box arrow just in case you need it): http://jsfiddle.net/j5a0227s/1/
Clearly misunderstood your question. Please see the updated JSFiddle.
This places a green block below the middle circle, but by giving it the position: absolute, you can change the location with margin-top. I don't know how this reacts in responsive websites, you might want to tweak it a bit.
Edit2: Even better is to place the white block in the div you have above the circles. See this updated JSfiddle.
HTML
<div class="main">
<div class="container0">
<div class="hover2"></div>
</div>
</div>
CSS
.main {
margin-top:100px;
}
.hover2 {
height: 50px;
width: 100px;
background: green;
margin-left:180px;
position: absolute;
margin-top:60px;
}
.container0 {
background: purple;
width: 100%;
height:100px
}
Wrap your two sections with a div and take a close look at this interesting article: Centering in CSS: A Complete Guide.
When I assign a percentage height in the following div, why does it get out? Thanks you in advance.
HTML:
<div id="div1">
Test<br/>Test<br/>Test<br/>Test<br/>
<div id="div2">Test</div>
</div>
CSS:
body{
margin: 0
}
#div1{
position: absolute;
width: 200px;
height:100%;
right: 0;
background-color: #467
}
#div2{
width: 50%;
height: 99%;
background-color: black;
color: white
}
Well, the reason why #div2 extends below #div1 is because in addition to being 100% the height of its parent, #div2 is also pushed down by the four lines of text above it - so it extends exactly that distance outside of #div1.
How to solve this, then? Well...I can offer a CSS solution, but it's not very flexible (a solution that employs JavaScript would definitely be more scalable, and less work to maintain). I modified your HTML structure slightly, so now it looks like:
<div id="div1">Test
<br/>Test
<br/>Test
<br/>Test
<div id="div3">
<div id="div2">Test</div>
</div>
</div>
To clarify my changes, I added the #div3 element around #div2. Now, for my CSS, I just added this definition for #div3, and modified the body CSS to:
body {
margin: 0;
line-height:1.3em;
}
#div3 {
position:absolute;
top:5.2em;
bottom:0;
left:0;
width:100%;
}
This approach requires that you know how far from the top of #div1 you want #div3 (and its child #div2) to start, which by extension requires you to know exactly how tall those four lines of text are. Since browsers often render text with slightly different line heights, I specified one for the <body>. After that, it is a fairly simple matter of multiplying that line height by the number of lines of text (four in this case), and setting that as the top attribute.
Here's a JSFiddle to demonstrate what this achieves. I hope this answer was clear, and is what you're looking for! If not, let me know and I'll try to help further. Good luck!
it gets out because of the overflow property you are missing. Set it to hidden on #div2 ok?
good question. Test<br/>'s count as extra size. same if you use padding, it counts extra size. You can use position absolute to child element. I fixed the problem. check this fiddle
in div1, use position: fixed; instead of position: absolute;
jsfiddle
I am trying to place a child div over the top of its parent div (including its content)
<div id="footer">
<div id="footer-container">
<div id="icon"></div>
</div>
</div>
#footer {
height:50px;
border-top:3px #666 solid;
margin-top:50px;
}
#footer-container {
height: 30px;
width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: -15px;
}
#icon {
height:30px;
width:30px;
background-color:#666;
}
Now it works if the content of <div id="icon"> is text but if you place a background image in the div it does not. Is there any way to make this work? This maybe explains it better
http://jsfiddle.net/4QxL7/
EDIT
Apologies. It was working all along. I was using PNG's for the images which have 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.
Thanks for your help
I just tried two methods and they both worked using an oversized image from my site...
<div id="footer">
<div id="footer-container">
<div id="icon"><img src="image url here" width=30 height=30/></div>
</div>
</div>
http://jsfiddle.net/ZkxSM/
and
#icon {
height:30px;
width:30px;
background-color:#666; /*unnecessary now probably...*/
background:url('image url here');
}
http://jsfiddle.net/b6QyX/ (image needs to be resized before hand for this to work maybe... or width and height can be set in the html of the div)
There's nothing actually wrong with your jsfiddle..
Apologies. It was working all along. I was using PNG's for the images which has 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.
Thanks for your help
On my homepage I have a slideshow of pictures that are user selectable. I don't want the user to have to modify the image at all.
http://homespun-at-heart.com/ is the example except that the way that it currently is, the user has to modify the image.
What I would like to do is to have a div that is layered on top of the image so that it appears like the content area has a round corner.
How do I position my "round corner" div on top of the image without it pushing the image over?
well you could achieve this with the css3 border-radius property on a div on top, but it's not supported in all browsers. For an image based solution, something like:
html
<div id="container">
<div id="image"><img src="blah.jpg" /></div>
<div id="round">
<img id="topLeftRound" src="leftRound.png" />
<img id="bottomRightRound" src="rightRound.png" />
</div>
</div>
css
#container{
position:relative
}
#image{
position:absolute;
top:0;left:0;
height:100%;
z-index:10;
}
#round{
position:absolute;
top:0;left:0;
height:100%;
z-index:20;
}
#topLeftRound{
position:absolute;
width:10px;height:10px /* or whatever */
top:0;left:0;
}
#bottomRightRound{
position:absolute;
width:10px;height:10px /* or whatever */
bottom:0;right:0;
}
I'm assuming you can guess what you want your topLeft and bottomRight image to be... Just the rounded section of that corner.
I think that's what you're looking for?
You could simply have two divs, one inside the other, both the same width and height. The bottom one is used for the actual photo, i.e. it's background-image will be the photo. And the top one has a background image with transparancy, which is just the 2 rounded corners:
<div id="slideshow"><div id="slideshow_border"></div></div>
Or (perhaps even better), you could have the outside div with the image as a background, then two divs inside, one floated to the left and one to the right, each with a seperate transparant border image. This means that person browsing your website won't need to download the extra transparant pixels that aren't necessary.
<div id="slideshow">
<div class="border left"></div>
<div class="border right"></div>
</div>
And the CSS:
#slideshow {
width: 400px; height: 400px;
background-image: url(images/slideshow1.png);
}
#slideshow .border {
width: 50px; height: 50px;
}
#slideshow .border.left {
float: left;
background-image: url(images/border-left.gif);
}
#slideshow .border.right {
float: right;
margin-top: 350px;
background-image: url(images/border-right.gif);
}
I just used arbitrary values in the CSS.
Do you use jquery on your site? If you do, you can use this plug-in to generate round corners on dom elements : www.jquery.malsup.com/corner/ or this one: www.dillerdesign.com/experiment/DD_roundies/. Both work very well and support all browsers including IE6. To detect IE6 if needed you can use this plug in http://api.jquery.com/jQuery.browser/.
You could do this very easily with CSS3's border-radius property, and you don't need an overlay div or anything. It won't work in IE8 and below, but it works in Webkit and Firefox.
#slideshow img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}