http://estreetusa.us/piechart/
i want to fix the center image, i.e 24 hours written on it, please suggesst.
back is css for background-image and fish is css for overlaid image ..
relative;
Thanks in advance!!
Change your fish class to this:
.fish {
background-image: url(24.png);
width: 196px;
height: 196px;
position: relative;
margin: -295px auto;
right: 15px;
}
You have multiple options in this case.
You can set left to 50% and then center it by setting the margin-left to -98px (half the elements width). Don't forget to give it's parent position: relative;
.fish {
background-image: url("24.png");
width: 196px;
height: 196px;
position: absolute;
top: 426px;
left: 50%;
margin-left: -98px;
}
OR you can put 24.png in a img element and set it's display to inline or inline-block. Then you give the parent text-align: center.
If the content above the clock doesnt change (in height), I would go for the first option. Otherwise go for the second.
Good luck :)
Firt add position: relativeto the section element that contains both elements,
Then put the fish DIV inside the back DIV (making fish's position depend on back) and alter the top and left settings accordingly (approximat setting: top: 96px; left: 471px;)
use this css for your current HTML.
background-image: url(24.png);
width: 196px;
height: 196px;
position: relative;
top: -300px;
for the above css top margin have to adjust for device specific
to make image perfectly in center you have to nested the image into the canvas
and then apply below css
background-image: url(24.png);
width: 196px;
height: 196px;
position: relative;
Add this rule in your css file:
.fish{
margin-left:3.5%;
}
Related
I have a top div on my page, but above my navigation.
I want the company logo in the middle of this div. however, margin: 0 auto isn't working.
I've tried fiddling with the div positioning to be absolute and the image to be relevent, and vice versa.
I've tried the image to be center aligned, text aligned (silly enough), even left: 50%. left: 50% does actually work but because the width of the image is over 100px, then the logo isn't centered any more, even though the beginging of the image is at 50%.
I wanted to make it left 30% but that isn't fair on all screen sizes.
I just cant figure out how to make this image in the center of the div. Does anyone know how I can do this?
HTML
<div id="stripes">
<img src="JCC.gif" class="JClogo" />
</div>
<div id="navigation">
CSS
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
}
.JClogo
{
position: absolute;
margin: 0 auto;
height: 194px;
width: 389px;
}
if you positioned the element as absolute then margin 0 auto won't be work
Remove the position: absolute; and add display:block toJClogo css class.
.JClogo{
margin: 0 auto;
height: 194px;
width: 389px;
display:block;
}
JsFiddle Demo
I don't think margin:0 auto will work with absolute positioning. Either remove the position:absolute OR place left:50%; margin-left:-195px on .JClogo.
This should do what you're looking for:
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
text-align:center;
}
.JClogo
{
height: 194px;
width: 389px;
}
The issue is because of the code at:
position: absolute; // here
margin: 0 auto;
height: 194px;
width: 389px;
Position absolute makes it to float at the parameters provided.
So try out this, this will make the image float at the center of the element.
position: absolute;
top: 20%; // this
left: 20%; // and this
height: 194px;
width: 389px;
This way, you will change the parameters of the image and make it float where you want it to be. If you want to use position: absolute; otherwise, you can remove this and simply use margin: values.
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>
I am trying to create a HTML page slider, so I have my container div, then sitting on the outside, on the left I have a Previous Icon and on the right I have a Next icon.
My problem is, when I resize the window to smaller screens the icons move into the center of my container, I want them to stay position fixed to the outside of the container at all times when resized.
My container code: -
width: 960px;
margin: 0 auto;
clear: both;
overflow: hidden;
min-height: 449px;
Next and previous code:
a.vehicleSliderLeft {background: url('../img/slider_arrow_left.png');
width: 55px; height: 112px; left: 270px; background-position:0px;
background-repeat: no-repeat; position: fixed; top: 420px;}
a.vehicleSliderRight {background: url('../img/slider_arrow_right.png');
width: 55px; height: 112px; right: 270px; background-position:0px;
background-repeat: no-repeat; position: fixed; top: 420px;}
Any ideas? cheers
You need to give the main container position: relative and then position the arrow elements inside the container with position: absolute.
This then allows you to manipulate where you put both arrows on the page using right: x , left: x , top: x , bottom: x. where x is any number or percentage.
jsFiddle: http://jsfiddle.net/LZG3R/3/
Source: Learn CSS Position in Ten Steps
You should try something like this:
.container{
width: auto;
margin: 0 auto;
clear: none;
}
a.vehicleSliderLeft {
float: left;
}
a.vehicleSliderRight {
float: right;
}
Fiddle: http://jsfiddle.net/EhdkP/1/
inside a main div you can keep each element in separate divs specifying the positions of each div specifying the widths in percentage
I'm working on a simple CSS and HTML website, trying stuff out.
I wanted to make an image float over a div. Something like so:
<div id="big_container">
<img id="img1" src="images/fun.png"/>
<div id="some_container"></div>
</div>
Here is the CSS for it:
#big_container{ width: 960px; height: 270px; margin-left: auto; margin-right: auto; margin-top: 42px;}
#some_container{ width: 100%; height: 198px; border: 1px solid #cccccc;}
#img1{ width: 69px; height: 200px; float: left; position: relative; left: 200px;}
What this does, is instead of placing the img over the some_container div, it places it FIRST and after the image, underneath it, it places the some_container div.
How can i get the image to float over the div? Firefox and Chrome display it correctly. IE8 does not.
EDIT
I tried removing relative and left, according to Kyle Sevenoaks. But it still displays it above the div, and does not overlap.
You can use position: absolute; to make it display over the div you require:
#img1{ width: 69px; height: 200px; position: absolute; left: 200px;}
http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/
EDIT
I forgot to mention that with this you should add position: relative; to the parent div.
http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/1/
Floating an element will not place it over the top of other elements within the same parent. You've also tried to use a "left" CSS value on a relatively positioned element. "float" works on relatively positioned elements, "left" works on absolute and fixed positioned elements.
Here is your CSS to position "img1" over the top of "some_container" (includes short hand for margin declarations). Note "position:relative;" applied to the parent "big_container".
#big_container{ width: 960px; height: 270px; margin: 42px auto 0; position:relative;}
#some_container{ width: 100%; height: 198px; border: 1px solid #CCC;}
#img1{ width: 69px; height: 200px; position: absolute; left: 200px; top:0px; }
You will now see that IE8 wasn't at fault here. Other browsers may have been kind to you and ignored any conflicting CSS declarations to give you the desired result. IE8, being less sophisticated, probably wasn't compensating and taking your CSS literally.
I want to place a small circular login image on the border of div such that half image will be outside the border line just for style purpose?I think I have to set z-index but how OR is there any better way?
Thats exactly what you need to do.
Give you img a class name. Then in your style sheet add something like this
#classname
{
position: absolute;
z-index: 10;
top: #distance from top of page#
left: #distance from left of page#
}
z-index needs to be a number greater than your div which will have an index of 0 if you haven't changed it.
Hope this helps.
.overout {
text-decoration:none;
position: relative;
z-index: 10;
top: 105px;
right: -25px;
}
You can do this very easily using divs. Consider the following code
<html>
<head><title>Logo test</title></head>
<body>
<div style="position: relative; width: 400px; height: 100px; margin: 0px auto 0px auto; top: 50px; background-color: #f00;">
<div style="position: relative; height: 100px; width: 100px; background-color: blue; left: 20px; top: -50px;">
</div>
</div>
</body>
</html>
All you have to do is replace the second divs "background-color" property with the "background-image" property and nest that div inside your existing div. Make sure you make the div the exact size of your logo and set background-repeat: no-repeat;
Hope that helps. Test the example code I posted. You can place all the style information into a css class like this:
.logo
{
background-image: url(yourlogo.png);
background-repeat: no-repeat;
width: /* width of logo */
height: /* height of logo */
top: /* distance from top */
left: /* distance from left */
}