I want to move the text displayed at the bottom of the page slightly upwards and have tried almost everything i know and google but can't shift the text upwards to display the remaining clipped text.
Attached is a ScreenShot of the same
Please suggest that what can be done to accomplish this task
you can try
position: relative;
bottom: 20px;
but I don't see a problem on my browser (Google Chrome)
try a negative margin.
margin-top: -10px; /* as an example */
footerText {
line-height: 20px;
}
you don't need to start playing with position or even layout of other elements... use this simple solution
used the following snippet and it worked fine..
.smallText .bmv-disclaimer {
height: 40px;
}
Your footer container is constricting the width of the inner element with an explicit width on itself, which sees the text clipped at the end and wrapped onto a new line, so change that:
div#fv2-footer-container {
width: 1090px;
...
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.
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 have a <div> with a border:15px. It has an image on the left-corner as given in the fiddle
http://jsfiddle.net/user1212/e7Gez/17/
Now, this image is pushing down the text from the top. How can I make the text get margin-top:0;
I do not want to use the image as background-image since the 15px border overlaps it.
Any solutions?
Just use float: left; on your image, see updated Fiddle. You can also use a negative margin-right on it to prevent it from pushing the text to the left, but then you need to mess with the z-index of it and the rest of the content, which means additional HTML markup for styling purposes; see this Fiddle.
OK, I'm going to leave my other answer as a more direct "this is how you fix things doing it your way" answer, but I think a better approach here would be to use position: absolute; -- this achieves the effect with much less fuss.
Fiddle
I'm styling the image as follows:
img#post-backgrnd {
position: absolute;
top: -1px;
left: 0px;
}
This forces the image to go to the upper-left corner, which is where we want it (the top: -1px; is because the image is slightly misaligned with the border), and position: absolute; means it does not take up space, so it doesn't push the text at all. However, done this way, the image covers up the text. The better solution here is to edit the image, fixing the alignment issue (and going to top: 0;), and making the white section actually transparent.
If for some reason that cannot be done, you could fix this overlapping issue by using z-index, but it means that your parent, your image, and the text need three different z-index values, which means that you need a new element for your text. For an example of this, see this Fiddle.
Just add vertical-align:top to your <div> like:
.content {
width: 500px;
height: 500px;
border: 15px solid #E4EAF3;
/* background: #ffffff url('http://smitra.net76.net/post-bg.jpg') no-repeat top left;*/
margin-top:0;
padding-top:0;
vertical-align:top;
}
see it in jsfiddle
Hi I am not sure if this is the right way to do it but I am trying to position a div tag back
over the previous div element
This is what I have working
my css that I have used to get this to work looks like
.page-frame {
background-color: #fff;
padding-top: 40px;
position: relative;
top: -35px;
}
so for the top part the div element looks the way I want it to however the bottom on the element hasn't adjusted for the -35px;
I have tried adding a clear div after the element however that doesnt help. What do I need to change to remove the space between my .page-frame div and the next div?
The use of position: relative only shifts the appearance of the element in the page, but not the actual "space" it takes up on the page. So what you have done made your visual change to show the element 35px higher, but it does not cause other elements to reflow around it. Probably, what you need to add is a margin-bottom: -35px to get the final effect you want.
EDIT: Added better fiddle example to show reflow with margin.
Use position: absolute; instead of relative
I'm a beginner and I have been battling to get this site to work as desired. Thanks to advice on this forum to include an IE7 specific style sheet I am almost there, but with a couple of minor issues remaining. Some of the styles just won't work and I'm starting to despair! I have three issues and if anyone can shed some light on these I'd be super happy!
Across all browsers (both stylesheets), 'main p' text padding on the right is only appearing on pages 'studios.htm' and 'contactus.htm' - I have no idea why and have tried playing around with all the styles without success.
On the 'location.htm' page I am unable to position the footer "behind" the Google Map, like the picture rows are positioned on the other pages. I have tried changing margins, padding and z-index, but nothing seems to change it - I can manage to position the footer in the right place but the Google Map stays "behind" it so that the bottom part of it can't be seen.
On IE7 ONLY: CSS text formatting doesn't seem to change the font size at all. As a result the text is too large and on pages 'studios' and 'thingstodo', this results in the very bottom part of the text to go down too low and hide behind images. If the text was the right
The site is here: http://bit.ly/gaAthc
Main CSS: http://jsfiddle.net/ykbhd/
IE7 specific CSS: http://jsfiddle.net/bdwrY/
Thanks in advance!
1) The reason this appears correct sometimes is simply how the text breaks in your paragraphs. Your p tags are taking the full width of your main div, so putting right padding isn't doing to help. Instead, just put some padding on your image.
Line 190:
#target2
{
float: right;
padding-left: 5px;
}
2) You can use negative margins the same way you do for the picture rows.
Line 178:
#googlemap
{
margin-bottom: -130px;
}
3) Remove margin-bottom: -10px; from this rule:
#container #main #rotxt
{
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 0.8em;
margin-top: 35px;
padding-left: 1px;
}
Update
For the Google map footer issue in IE7, try adding this rule to a IE7 stylesheet (see here for info on conditional comments):
#footer
{
z-index: -1;
position: relative;
}
Add overflow: hidden; to #main p