I'm trying to do my first project in html & css but am having some trouble. I'm practicing using codepen and my gallery was going somewhat well but I'm trying to add the last line of images and it seems to be messing EVERYTHING up and I don't know why. Would anyone mind taking a look?
Here's the link
For some reason, when I try to add that chess board it all goes bad.
I'm still very new at this so I look forward to learning a lot.
Thanks.
[1]: http://codepen.io/zenturtle/pen/ezDGC
The margins are causing the issues. When you use margins to position an element you push the elements around it too.
One solution is to use: position: relative and then use the positioning properties: top, bottom, left, right
Example:
#chess {
position: relative;
left: 555px;
}
Another solution is to use position: absolute.
Place position: relative on the <div id="perimeter">
Place position: absolute on each <img>
Position each <img> where you want itwithin the <div id="perimeter">
Example:
#chess {
position: absolute;
bottom: 122px;
right: 230px;
}
That's how you'd position the chess image where you want it.
CSS Tricks has a good
article explaining the position property.
Related
Hoping someone can help.
My page is here:
http://www.simplypsychics.com/psychicprofile.php?pin=4439
Basically what I want to do is position an image in specific dimensions where RED is (in my picture below).
However, I tried to place it where the 'Psychic Name' is as an with align="right" but it moves by tab content down.
Does anyone know how I can put it in, maybe as a DIV, so it's always above everything and in that very place as in my picture here:
http://i60.tinypic.com/2hmmvrl.jpg
I don't know what code I need to look at. :(
I assume you're talking about the "profileimg" that's currently overlapping the text.
Just use this css:
.profileimg {
height: 118px;
float: right;
}
No need to use absolute positioning, floating the image to the right gives you the effect you need.
Add this to the css of your "content" div (the div that contains the topic, the red picture, the form and so on ... but not the "other psychics content)
position: relative;
And add this to the div that contains your picture
position: absolute;
top: 0;
right: 0;
If the position is not exactly what you wanted, you can change the position by change the values from top and right. If you do this, don't forget to add unit "px" (e.g. top: 10px;).
Hope that helps.
You can make the following CSS properties on .profileimg
.profileimg {
height: 118px;
position: absolute;
margin-left: 18%;
}
I'm not saying that it's a great soloution but if you don't really know CSS then it's probably a quick fix until someone proper can look at it.
I'm trying to move the image for Trip Advisor on this page (at the bottom right). As seen in this screenshot, it needs to move up and to the right to fit in the orange/pink box.
When I apply negative margin, the image gets hidden behind the orange/pink box. I've tried adding various z-index values to make it appear on-top, however nothing seems to work.
Any idea what I'm doing wrong?
Note: This image (for Trip Advisor) is reused on the home page as well. Any CSS styling applied should not affect the positioning of the image on the home page.
No problem! Hope this helps.
.TA_rated {
width: 155px;
height: 77px;
position: absolute;
left: 265px;
top: -6px;
margin: 0;
}
Edit: only tested in Safari, but should be OK elsewhere...
Could someone please help me to figure out why does our website have big space at the bottom?
Please see
http://www.zanadu.cn
I have been playing with it for some time already and couldn't figure out what the problem is.
Thank you!
#main_content_container {
top: -170px;
that's why
you should restructure your HTML to not need to shift the entire wrapper up 170px.
the question is why you have space. i got answer for that
In CSS #main_content_container has top -170px; and position: relative.
change that to
position: absolute;
top: 200px;
That's because you are using relative positioning. That only changes where the element is displayed, but it still takes up space in the original position.
So, you have used relative positioning to move the main container to overlap the menu, but the original position (where it would be without the relative positioning) is right at the bottom of the container.
When you position something relatively, the space reserved for that element persists. So you move the div up, but space is still reserved for the initial state (before positioning)
one easy fix is to change the main_content_container top positioning to margin-top like so:
#main_content_container {
margin-top: -170px;
}
This should make everything alright. Remember to remove the top: -170px rule here.
I have an absolute positioned popup (hover over "ice white" image to see popup) which has css left:50%. Now this should appear in the middle of page but doesn't. Any suggestions please? Thanks in advance.
You're also supposed to add margin-left with the negative of a half of visible width of the element. So, for example:
width: 400px;
padding: 10px;
border-width: 2px;
/* -(400 + 10 + 2)/2 = -206 */
margin-left: -206px;
left: 50%;
Note that margin: auto suggested by others won't work because you've positioned the element absolutely.
position: absolute;
left: 50%;
transform: translate(-50%,0)
Lol, no. The left side of the image appears at 50% of the page width. Hence; left: 50%.
In order to center your image, set margin: auto instead.
Your code is working correctly. The popup is being positioned with left of 50% ... of the TD tag it's nested inside.
Try either taking the popup out of the table, or setting it to 50% of the document width instead. (Your javascript is minified and unreadable to me, or I'd help further.)
u can try to change CSS Style like this
#displayDiv {
background-color: white;
font-weight: bold;
height: 460px;
left: 50%;
margin: auto auto auto -475px;/* change done here */
overflow: hidden;
position: absolute;
text-align: center;
top: 80px;
width: 950px;
z-index: 1;
}
Looks to me like there's a containing element somewhere in between the "Ice White" image and the body (specifically, Firebug reveals that it's the <a class="popup1" ... >) that is relatively positioned, so your 50% is relative to that rather than the whole page.
I know this seems a bit counterintuitive: Why should it be relative to a parent element if the poput uses absolute positioning? It's basically because relative positioning is relative to where the element is in the normal flow of the document, whereas absolute positioning yanks the element out of that flow. See sections 9.4.3 and 9.6 of the W3C's explanation of the visual formatting model for more info.
Check out a tutorial or two if this is giving you trouble. I like Learn CSS Positioning in Ten Steps and css-tricks.com's "Absolute Positioning Inside Relative Positioning" (to which I'd provide a link if not for the spam filter; first-time answerer here ;) ).
As for what to do about it, you might be able to move the popups out of the relatively positioned parent, as mblaze75 suggests, but it looks (and I'm guessing here) like that <a> is what's triggering your JavaScript event, so you probably can't do that. Instead, I'd try removing the relative positioning and using margins instead.
Also, bear in mind what Greg Agnew said: Even with that problem solved, you're still centering the left edge rather than the center of your popup. I think duri's answer will take care of that.
I have this page that i am working on and as you can see there are four images...if you look at the lower left booda...it has two links view Booda dog and view Booda cats. If you click the top one the bottom link moves to the left...i for the life of me cant figure out how to fix this. I am using position relitive. Here is some of my css
.booda a.button_below {
left: 107px;
position: relative;
top: 64px;
}
.entry .booda a.button {
position: relative;
right: 13px;
top: 31px;
}
there is other css if you view it in firebug
any help will be greatly appreciated ...thanks in advance
I'm not sure what exactly is going on, but changing the bottom button class from button_below to button and giving it clear:right fixed it for me.
Hope this gets you closer to a solution!
Don't use position: relative with top and right. Use position: relative on their container and then position: absolute on those spans.
It looks to me like it has to do with the text size changing when the link is highlighted.
When the upper span is selected the span is enlarged and the bottom span is shifted to align properly.
Try aligning the spans on the right instead of the left.
EDIT: To align a span to the right you can add this to your current span tags.
position: absolute;
right: 0;
But you have to switch to an absolute position. To continue using relative positioning you can wrap the spans in a single container that has position: relative