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...
Related
I'm really new to programming and trying to customize a theme that I am using. However I am having several issues where if I fix one thing something else breaks. I've researched solutions for about 3 days and I think it's time I reach out to some more experienced with CSS for help.
I tried setting up a JSFiddle but it's not working correctly as I can't access the HTML file directly. The website is www.preethijagadeesh.com. Would it be possible to review the html/css files and provide suggestions for the following requirements?
Center the title (I believe this is found in the 'site_header'
class which is pasted below). I am using margin to change the percentage and it looks
different on various browsers.
I would also like to 'fix' the title so that when I scroll the title
goes with me. I used 'position: fixed' but it cause all the
content in the 'index' ID (pasted below) to overlay on the title/site_header.
The text in the 'About' page appears to be more on the left with
a lot of white space on the right. No matter what I am unable to get
the content to center regardless of which class I update.
The line/border_bottom that appears under the navigation items should be
the same length as the text. I tried updating it but now every time
I hover over the items the text/options move around
overlay a
black color on the thumbnails on hover. I got it to 'kind of' work.
It's just when I hover on the thumbnails, the images and the
'background color' flicker
Widen the gap between the thumbnails.
Right now, there are two columns, it would be great to just put some
space in between them.
Please let me know if there's any other information I can provide.
Change
.header_image {
float: left;
margin-top: 80px;
max-width: 100%;
}
to
.header_image {
text-align: center
margin-top: 80px;
max-width: 100%;
}
Add these to .site_header:
.site_header{
/* old css remains here... */
position: fixed;
top: 0;
left: 0;
right: 0;
}
Move the padding properties from the a to their parent instead (the .page_link div).
and 5. I can't get the thumbnails to display on your jsfiddle so I can't really give the answer. But for 4 I think something like this will help:
put a <div class="thumbnail-overlay"></div> inside your thumbnail html.
For the css:
.thumbnail-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
/* this z-index should be higher than the thumbnails' child element. If no z-index is set for their child element leave it at 1 */
}
.thumbnail-overlay:hover{
background-color: rgba(0,0,0,0.5);
}
Hopefully this helps.
.header_image is floating, so you can't center it nicely. If you remove the float and then use text-align: center;, the image should center.
Not really sure where you are wanting the title to appear - should it be above the content or to the left of the content?
You have removed the padding from the links to resize the underline, but it's only been changed on hover. This is what is causing the "jumping" navigation links. If you add this code to .navigation a (instead of .navigation a:hover), this should work nicely:
.navigation a {
padding: 0;
margin-right: 6px;
margin-left: 7px;
}
Instead of using .thumb_image:hover, try using .thumbnail:hover .thumb_image and see if that's helps with the flickering. Also, maybe remove the background-position: 0 -30px;.
Is a plugin being used to generate and control the thumbnail images? The absolute positioning being used on the thumbnail images will make it difficult to reposition them.
You should be creating the site offline and reviewing your work before migrating the site to your host.
If your host does not allow you to migrate your site and/or denies you access to your HTML files, you need find a new web host.
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.
Side by side picture of problem:
My website is http://berathen.com
For what ever reason everything looks to work just fine in IE, Firefox, and Chrome, but not in Safari. For some reason my left and right div sections join together at the center.
#leftSide
{
position: relative;
left: -350px;
max-width: 320px;
}
#rightSide
{
position: relative;
left: 650px;
width:0px;
height:0px;
}
Any help or advice would be greatly appreciated!
I spent few minutes inspecting your site in an old version of safari.
When i tried to apply left:0 to #outerBox2 inside #leftSide, It in turn brought the right box to left side as well, which is when i noticed that your HTML is invalid - You have multiple elements with id outerBox2 (id should be unique in a document, You can use class instead to apply common stuff).
Which i think is causing the problem and fixing it might solve the issue.
Anyway, Few other things i noticed while inspecting (might or might not help you)...
The content of div#leftSide is position:fixed, hence it has a height of 0px. You might not even need it.
You've manually appled width and height equla to 0. I wonder why! (You might not need that as well then..?)
The content in middle does not have a container, or wrapper. If it has one, it's easy to apply padding or margin to both sides and absolutely position the left and right content or float them left and right respectively.
Side note: By seeing all this i was wondering how this works in modern browsers... i'd just say they're being too kind towards you... :)
This is what you can do:
#leftSide {
position: absolute;
left: 0;
max-width: 320px;
}
I don't think safari picks up negative left if position is relative.
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 get the background on my site to have three different background images - so I'm putting one image in the and then using two absolutely positioned DIVs to add the other layers:
z-index: 2;
background: url(/assets/img/bg-stripes.png);
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
I'm finding that this works fine, but when you scroll, the divs are moving too - and it leads to a white gap showing at the bottom of the page - I can't unfortunately upload an image to demonstrate this, but you can preview the site here if you want to see exactly how I've done the CSS:
Website Preview
I hope that makes sense - many thanks in advance for your help :)
Darren
I'll go ahead and post it as an answer, use position:fixed; to position elements so that they stay still when you scroll.