I have tried align, position, and others. This problem couldn't be found because I would find topics relative to this discussing the <div> "function" but I need the solution for the div{}
Here's my code:
div{background-color: White; opacity:0.7; width: 380px; height: 325px;}
So how do I position it to be in a specific spot, or even use simple keywords like align center or such. I have tried align:center; and position:center;(out of curiosity) but none did what I thought it would do. So how do I do this??
You can try using position, top, and left to put your div wherever you want. Like this:
div{
background-color: #000;
opacity:0.7;
width: 380px;
height: 325px;
position: relative;
top: 200px;
left: 300px;
}
If you want your div to be centered you can also play with the margin:
margin: 0px auto;
There is a lot of way's, you can make another class like .main-container and position through the margin like
.main-container
{
margin-left:200px;
}
now in html write your div inside the maincontainer class like
<div class="main-container">
{
<div class="your class here">
your data
</div>
</div>
you can also play with margin, and for more information google it...
this is the simplest and easy way to apply as well as to understand, hope it will solve the issue...
Are you trying to center the div? Based on your last sentence: "align:center; and position:center;" that's what it sounds like. Because you've defined a width already, and assuming that other styles are not interfering the following should work to center your div: (notice the margin)
div { background-color: White; opacity:0.7; width: 380px; height: 325px; margin:0 auto; }
Otherwise, if you are trying position the div anywhere else, do a search for positions absolute and static.
Try this:
.My_div {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
Here are some examples! http://www.w3.org/Style/Examples/007/center.en.html#vertical
Related
Im trying to move a div inside another div down a bit, but when I use
margin-top: 10px;
It makes a white gap at the top. Heres the html:
<div id="topb">
<div id="selection">
</div>
</div>
And heres the CSS:
#topb {
background: url(images/tomato-background.jpg) no-repeat fixed;
background-size: cover;
height: 100%;
width: 101%;
margin-left: -10px;
}
#selection {
background-color: #4d4d4d;
width: 60%;
height: 500px;
margin: auto;
margin-top: 40px;
}
And heres a screenshot of the website:
For this, you can use position: absolute. Here is the code:
#topb {
background: url(images/tomato-background.jpg) no-repeat fixed;
background-size: cover;
height: 100%;
width: 101%;
margin-left: -10px;
}
#selection {
background-color: #4d4d4d;
width: 60%;
height: 500px;
margin: auto;
position: absolute;
top: 40px; /*This is where it is changed as well as the line above*/
}
Hope it helps! I think padding would still leave a background, so this is a better idea.
maybe you can modify the parent element by adding padding-top:10px; instead of modifying the child.
This is a "collapsed margin" problem.
It has been answered in this question :
Why would margin not be contained by parent element?
You would have to change the parent div to either (1) add a border, (2) position absolute, (3) display as inline-block, (4) overflow auto.
Refer to the posted link for more detail.
Here is the working fiddle Hope it may help.
position:absolute;
position:relative;
This is because when you have a block element (display: block) inside another block element, the margins will collapse. It will only be considered the largest margin.
So, in your example it will only consider one of the margins (40px).
See reference about collapsing margins.
There are a few workarounds. Choose any:
using padding instead of marginfor the component inside.
Change display type. e.g. display: inline-block.
Use absolute positioning.
Remove margin-top style in #selection, and apply padding-top to #topb
After my website was completed, everyday I am trying to modify things that would make it more responsive. It's made in Muse so don't expect much of "responsiveness".
I have an element with this class:
#labelstrong
{
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: fixed;
top: 1542px;
left: 164px;
}
Normally, the element is in the middle of the screen. But when I zoom out, the element maintains the same distance to the top of the screen (because of the top attribute of course). How can I define its position in a way that even if I zoom in or out it will still be in the middle of the screen.
UPDATE:
The problem is (and I forgot to mention it) that the position must be fixed as there is an horizontal scrolling feature for all elements ( they come from the right of the screen) and so they have to be on a fixed position.
UPDATE 2: Here is a live example. Imagine that the class is applied on each TAG (not the menu of course).
http://2323029s8s8s8.businesscatalyst.com/index.html
You can add for those big tags the following css:
.fixed-big-tag{
top: 50%;
transform: translateY(-50%);
}
Also as a counter measure, make sure the <body> and the <html> have 100% heights
Another idea would be to use the !important rule for the top property to overwrite what Muse outputs.(or any rule that needs to be overwritten)
If it works, you could probably add a new class on all these tags that need to be centered and overwrite it via css
Check it out, and let me know how it goes.
See this resource for techniques to centering elements using CSS: Centering in CSS: A Complete Guide
If you create a relatively-positioned parent container element, you can center your child element easily:
.parent {
position: relative;
}
#labelstrong {
z-index: 17;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: absolute;
width: 634px;
height: 40px;
top: 50%;
left: 50%;
margin: -20px 0 0 -317px;
}
Note that the margin offsets are half of the width and height.
Try using percentages instead of pixels, like:
top: 10%;
If you want to horizontally center, try setting the margin to auto:
margin: 0 auto;
Your code would look like this:
#labelstrong {
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: relative;
top: 10%;
margin: 0 auto;
}
Take a look at this example: http://jsfiddle.net/5a6fyb21/
jQuery would be your best bet.
I would just set your class to a fixed position then try using the following.
$(window).resize(function() {
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});
The resize function is used so that it will remain in position if the window is resized.
Centered label over horisontally scrollable content:
http://jsfiddle.net/cqztf9kc/
.fixed {
margin: 50%;
position: fixed;
z-index: 1;
}
.content {
x-overflow: scroll;
height: 100%;
}
I can't seem to get the black box to the center of the screen as opposed to the center of the div its inside in.
EDIT: For clarification, I only want the black box in the center of the results panel not the pink box with it. Also I would also like to keep my javascript intact.
EDIT 2: I'm trying to have something like an overlay that popsup in the middle of the screen when a user clicks on the image. Not sure if this is the best way or the best code to achieve that!
Would appreciate if anyone can help.
Here's my attempt: http://jsfiddle.net/BPLcv/1/
HTML
<div class="tooltip">
<div class="description">Here is the big fat description box</div>
</div>
<div class="tooltip">
<div class="description">Poop</div>
</div>
CSS
.tooltip {
position: relative;
border: 1px #333 solid;
width: 200px;
height: 200px;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkI2PXYOOOHltHwgIz6xwfuN079IAJDLsmOV68rQNNLCE-GFZ1_aQN89U');
}
.overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.description {
position: absolute;
width: 300px;
height: 300px;
display: none;
background-color: black;
text-align: center;
z-index: 1;
/* centering???? */
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
}
Thank you!
If you want the description/overlay in the middle of the screen, your best bet is to use an element outside of your tooltip-elements, as these are fixed width.
If you have a top-element with width: 100%, your centering css wil work for any immidiate children.
Working fiddle: http://jsfiddle.net/BPLcv/4/
Here the overlay is filled with whatever is in the description element of the tooltip you're hovering:
overlay.html($(this).find(".description").html());
The description class is always hidden.
Check this Demo jsFiddle
CSS
body{
margin:auto;
width:50%;
}
Try this. Assign the div of interest id = CenterDiv, then add this css:
z-index:10;//remove left:50%
Now try adding this function via onload or onclick, etc:
function centerDiv() {
document.getElementById("CenterDiv").style.marginLeft = ((screen.availWidth - 300)
/ 2) + 'px';
}
The number 300 can be any number that represents the width of your element of interest.
Substituting the width of your element (here, 300px), this function will center an element with absolute position.
I'm looking for a way to have a fixed div inside another, from which a part of it exceed without horizontal scrolling.
Maybe it will be easier to understand with this: http://jsfiddle.net/pF4Qx/
html:
<div id="global">
<div id="inner"></div>
</div>
css:
#global{
margin: 0px auto;
width: 300px;
height: 300px;
position:relative;
top: 0px;
background-color: #ff0000;
}
#inner{
width:100px;
height: 100px;
position: absolute;
background-color: black;
right: -50px;
top: -50px;
}
The black div is inside the red div, but in my project, the red div is in fact the outside container of my website and is 1024px large, so I don't want this ugly horizontal scroll when my browser window is 1024px large, but just want this "outside" part of the black div to be hidden.
I've tried to solve this by putting an overflow parameter, and even tried to put this black div outside with a fixed or absolute position, But I can't find a better result...
#global{overflow: hidden;} works fine for me in this case
As SW4 mentioned in the comments, add overflow: hidden; to the parent div global properties in your CSS.
Putting an overflow:hidden; on your container (#global) gets the job done.
Not sure if i understood your question correctly, but try putting this in your stylesheet:
html{overflow-x:hidden;}
That should do the trick. Keep in mind that this is not really friendly for people with smaller screens or zoomed in browser windows.
I finally found a great solution (I think) to solve my problem:
html:
<div id="inner"></div>
<div id="global">
</div>
css:
#global{
margin: 0px auto;
width: 300px;
height: 300px;
position:relative;
top: 0px;
background-color: #ff0000;
z-index: -1;
}
#inner{
width:100px;
height: 100px;
position: relative;
background-color: black;
margin: auto;
z-index: 2;
left: 150px;
top: 50px;
}
Here is the updated fiddle: http://jsfiddle.net/pF4Qx/4/
Hope this will help someone ;)
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>