i am using css for the first time and i have a small problem with image.
This is an example of my code
ul#navigation-menu li a.profile span {
width: 47px;
background: url(http://127.0.0.1:8080/mywebsite/wp-content/themes/mytheme/images/navicons/profile.png)
12px -59px no-repeat;}
The path is correct but i don't understand why it does not work since i did the same thing in Html with href and it's working perfectly. Thank you for your help.
Try giving display:block to your span.
You will also need to set the height of the span.
Span is as inline element so you can either give display:block or display:inline-block for the background image to be visible.
Related
I am trying to add background-image to mat-dialog, by spending some time on mat-dialog docs I realised that I can use panelClass: 'my-class', to customize mat-dialog appearance, here my-class end up getting applied to div having class cdk-overlay-pane in mat-dialog, something like this.
Then I added this css to put the background-image in the matt-dialog.
.my-class .mat-dialog-container {
background: url("assets/illustrations/abc.svg") no-repeat;
padding-bottom: 16px !important;
}
.my-class {
// background: white !important;
border-radius: 10px;
}
eventually mat-dialog ended up looking like this, having transparent background.
In order to solve this issue I ended up adding background: white; to my-class and then it looked like this.
Everything seems to work fine, but it is now bit-buggy as soon as I close the dialog a white background of the same size is theres for milliseconds and then it disappears.
I managed to solve the problem by changing the way I was doing it, sometimes it's easier to change the approach instead of trying to find the solution of situation that you are struck on.
what I did is as follows.
In the attached image div having class='content represents the content of the dialog-box, so it's basically a div that we place as a wrapper on the content we want to display in mat-dialog, in my case I named it content.
So I modified the .mat-dialog-container padding to 0, so that content div can take the full height and width, and then added background-image to content div.
.my-class .mat-dialog-container {
padding: 0px !important;
}
Final outcome can be seen in the below-mentioned image.
I've been trying to get rid of the thin gray strip that's in the middle of this page:
http://redesign.emdintegration.com/index.html
It seems to be related to the wrapper but I can't get it to disappear. Please help!
Delete this line from your CSS...
#Content{
background: url(../images/content.gif) 0 100% repeat-x; /*Delete this line*/
}
I believe it is line 129 in style-v1.css
Look at the CSS for #content. It has a background image of a gray bar and a child <div> element within has a padding of 10px.
You have a padding of 10px on the following:
<div class="container_24" style="padding-top:10px">
Remove the style, and the gray stripe will disappear.
If you can't edit the HTML, you can add the following CSS rule:
.container_24 {padding-top: 0 !important;}
On your #content you have background: url(../images/content.gif) 0 100% repeat-x;
If you get rid of it, that should take care of your issue.
look at your debugger. in class .container_24, add padding-top:0px;, and delete the inline styling. That should get rid of all top padding in that class.Best practices indicate to use seperate stylesheet for all your styling, instead of dirty, messy inline styling.
The background url for #content is the gray line. You might think it's an element, but it's an image being directed by CSS for a background image for the id="content" on the page. I imagine the section element is for the product boxes and #content is in relation to that.
You could alter the CSS to not load this (../images/content.gif) by simply adding display: none to that line on the style sheet [Line 129]
Try copying this in its place.
#content {
padding:0px 0px 0px 0px;
display: none;
}
I have a background image pulling in but it is taking the height of the text not the image, I will eventually do a text-indent: -99999px but I have tried every CSS property to get the whole image to appear. Can anyone help with this, my website is: http://yesiamshow.biz/ it is the buttons under the slideshow, you can see I have the image for previous pulling but it does not show the whole height. All my CSS properties have a height of 60px and nothing is happening.
The button is actually the right height, but your .window class is cutting off it off. Looks like you can change it to 410px and it will fix:
.window {
height:410px;
}
You should also give the button a display:block or inline-block since you're giving it a width and height.
I took a quick look at your CSS and it seems that you are wrapping your link with a span element. You can still do that, however you need to make sure that you are applying all of your styling to the links.
Example. If your HTML was something like.
<a span="prev_btn">Previous</span>
You would have to style like so.
span.prev_btn a { }
And it should look something similar to the following.
span.prev_btn a {
background: [your url];
display: block;
height: [height];
width: [width];
text-indent: -9999px;
}
Hope that helped.
im having a problem regarding using background property with url('location') value with a div element. All browsers do not show the background image for any content written within the div tag.
code:
HTML:
body has a div tag with the class = slide. this div tag contains some content and links.
CSS:
div.slide {
margin: 0 auto;
background: url(images/btnslide.gif);
}
please help me identify the error. maybe i have misused div tag. please point out the solution for the above problem
thanks in advance
You either haven't set the height for your .slide element, or you haven't cleared the floats for the elements inside .slide. Try setting a height or adding overflow: auto if you want to clear the floats inside your <div>.
This code should work by default, as everybody said something else is wrong.
Either the height is wrong or the image does not exist.
Which browsers are failing exactly?
If you like you can try writting the CSS with full syntax:
background: url(..) top left repeat;
It's amazing how can't I just pull out such a simple task.
We wish to have a menu (ul list) displayed inline, where, on top we have an image and, at the bottom, we have an anchor.
Something like the above:
<iimg> <iimg> <iimg>
<anchor> <anchor> <anchor>
The solution must be valid for IE 7 too.
I've tried text-align centered the image. No luck;
I've tried display:block; on the li, on -img on both...
I've also defined widths here and there (but the images could have variable widths (not sure));
I've tried margin: 0 auto; but it centers on the page, but not on the LI. :///
Can I have a help here plz ?
http://jsfiddle.net/4E7Lu/
ul li {
display: block;
float: left;
text-align: center;
}
Just be sure to do a clearfix after the ul. As in:
<div style="clear: both;"></div>
If you make the ul display as inline-block, and set the anchor and image to display as block, you can center them via margin: 0 auto;.
http://jsfiddle.net/4E7Lu/1/
I would apply the image as a background image to each li element. It's easy to position using background-position and keeps your HTML markup clean for SEO. You can then use CSS sprites to make loading the images faster.
Just saw this, could help.
http://css.maxdesign.com.au/listamatic/horizontal01.htm