I'm trying to make a navigation with a couple Image links with background images. If I make the links divs calling to the images, they show up. But when I make the links calling to the same class the background image disappears. Any help appreciated
CSS
#advertising {
z-index: 1;
width: 465px;
height: 65px;
display: block;
position: absolute;
background: url('../images/advertising.png');
}
HTML
1) You should probably give it a top, left ... values for the position.
2) try absolute path of the image.
3) try setting the position of one of the element containers to relative.
4) Disable ads filter :)
In one of my project, I have a similar problem. If I called my css like this "css/medium.css", it doesn't work. I had to called it with a slash in the beggining "/css/medium.css"
Related
You can preview the site at https://enigterry.github.io/nwtest.html . This is link to my code https://github.com/enigterry/enigterry.github.io/blob/main/nwtest.html
The issue is with z-index. You need to add z-index higher than 0 (that is being set for the hero) but to be safe say 99. Also for the z-index to work you need to set the position to relative. Also another issue is the black background added to the container which spreads across the entire page. Remove that and apply to the .w3-content. You will still need to work on the padding to make it look better.
.w3-content {
max-width: 980px;
background-color: #000;
position: relative;
z-index: 99;
}
hello i'm trying to put text below a background images. like here i want place two background images side by side and below each image i wanna place text. i have take one div class it has styles inline block property. so how i can do this with the help of or using inline block property.i have explained my problem as much as i can. if it is possible then please go through my fiddle link. i have tried by this properties but text is overlaping on the image i want that below the image also check similar questions no one has done with background image so please check out my code what i have tried it is given in the comment box. please help me thanks. :)
You haven't set a css property for your paragraph tag within your imgcontainer.
In my fiddle, I added the following :
.imgcontainer p {
position: relative;
top: 100px;
}
I also added a background-size to both of the background images. I used background-size: cover; (I replaced the image urls with ones that I have in my image folder on my website)
https://jsfiddle.net/RachGal/f0fsLd2h/ :Fiddle
I hope this was what you where looking for.
Here is a link to an updated fiddle:
Fiddle
If you change te background-color to an image, it should still work
I simply added:
.imgcontainer p {
position: relative;
bottom: -90px;
max-width: 100px;
}
To the paragraph
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 want to add a logo at the bottom of the very first page. Ideally I'd position:absolute it bottom:0 - but anything positioned to the bottom in wkhtmltopdf doesn't seem to work.
This is a problem because the logo is dynamic and could have different heights depending on the aspect-ratio of the uploaded image.
I see that I can add a footer, but this adds it to all pages, and I only want this on one page.
What are my options? Do I have to position-absolute it from the top? If so, what if the page size changes? This needs to work in A4 and US Letter.
I was having the same issue and solved by actually adding a width to the element. So, for the element I want to stick to the bottom I have this css:
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
This didn't work for me. (using python's pdfkit)
I had a one page document and I wanted a footer.
I had to set the height of the page to be the height of a sheet of paper (<body style="height: 297mm">) and then absolute position worked correctly.
Had the same issue, used the answer of Carlo but changed it to use the top margin since it is using the document margins. This way the element was always on the bottom of the first page.
.footer {
position: absolute;
top: 700px;
width: 100%;
}
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.