i'm new to css sprits. i have added a small red color arrow like image to all links in a DIV ID. it looks like this.(image attached)
how to get some padding after the background image ? i mean some space between image and text using CSS.
CSS
#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
height: 12px;
display:inline;
}
HTML
<div id="maincontent">
Btech III
</div>
i tried adding to css padding right, but it is giving some space after text not after image.
You want to use padding on your link, this will leave the background where it is but move the text, try padding-left: 25px;. But adding padding will add to the width so you will want to adjust the width of your link and reduce it by the amount of padding you have added (maybe not in this example)
Also your example image isn't loading
Try this:
#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
padding-left: 25px;
height: 12px;
display:inline;
}
just apply a padding-left or a text-indent to your link
Related
I am building a webpage and I am attempting to add an image behind the container in the margins on the left, right and top.
The closest example of my current webpage is found in this demo: https://html5up.net/phantom.
I wish to ass a background image similar to the blue in this image: https://i.stack.imgur.com/NHbqU.png
So I want the image to be behind a floating page.
Well, add the background image for the body and add background: white (or whatever color you want) to the content container to avoid the body background "shining through".
Is the following code what you were looking for?
If so, essentially it is a background color for the "border", the above element having a margin.
body {
background-color: dodgerblue;
}
#content {
position: fixed;
background-color: #fff;
border-radius: 15px;
padding-top: 15px;
text-align:center;
height: 100%;
width: 88%;
margin: 25px;
}
<body>
<div id="content">
<h1>Wow!!</h1>
</div>
</body>
I've made a span composed of an image and text, using the following HTML code. And I'm trying to align that text next to the image, using the following css class:
span.my-profile {
background-image: url('http://placehold.it/450x100/fc6');
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
text-align: center;
}
<span class="my-profile">My Full Name</span>
However, That didn't work as expected. And the text is still aligned to left as the image. So what's wrong with my code? and how is it possible to align the text to the center?
Thanks in advance.
Adding the background image to the same span with the text will only place the image as the background of the span with text.. try placing the image as a separate element in the span using <img /> tag. You can then control the image and the text using either display:inline-block or float in css.
Use a pseudo-element :before to place the image (change the width, height and margins):
span.my-profile:before {
content: "";
display: block;
background: url('/img/no-face.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0; }
Try to play with some width-height, padding and display:block properties, it will work.
check this fiddle here
Try to use css style like below
span.my-profile{
width:200px;
height:100px;
display:block;
background:url(http://placehold.it/200x100) no-repeat;
padding-top:100px;
text-align:center;
}
I have this item in a horizontal navigation menu:
<li class="menu">
Our Users
</li>
I want it to appear like this:
I will figure out the text color, etc. What I want to know is, how to have the image appear above the text, and the text centered below it.
Any advice?
Try this.
Assuming your image is not clickable...
apply width and padding to you li tag.
li { background: url(urimage.png) no-repeat;
padding: 72px 0 0 0;
text-align: center;
width: 100px;
list-style: none;
}
If you want your image to be clickable just wrap your text "our users" into a div and apply same style as above.
Try this jsfiddle demo
hope it'll help you. thank you
Its easy set the background of the li to be that 2 man icon and give a padding-top for li.
li { background: url(image.png) no-repeat;
padding: 40px 0 0 0;
text-align: center;
}
I want to make a drop down list with nice buttons that are long as the screen (compatible with more screens)....
I will use 3 images (left , middle and right) ... something like this (of course, smaller):
The middle part will repeat itself to "fill" the button. I want to get something like this:
There is no example with 3 images, all I could found is only 2 images.
my solution:
html:
<div class="button">
<div class="left"></div>
<div class="inner">text</div>
<div class="clear"></div>
</div>
css:
* {margin: 0px; padding: 0px;}
.clear {clear: both; height: 0px; font-size: 0px; line-height: 0px;}
.button {
padding-right: 15px; /* right image width */
background: url('right_image.jpg') no-repeat right top;
height: 20px; /* images height */
}
.button .left {
background: url('left_image.jpg') no-repeat right top;
width: 15px; /* left image width */
height: 20px; /* images height */
float: left;
}
.button .inner {
height: 20px; /* images height */
background: url('middle_image.jpg') repeat-x right top;
text-align: center;
}
jsFiddle Demo
It's very easy.
That's html:
<button>
<span><span> MENU </span></span>
</button>
You should place all parts of your image in a very wide none-transparent(for transparent png method is harder a little bit) PNG(like it looks on design), trimmed to the image content. (one image wouldn't increase size much, but will make less http request to server). It called sprite.
button { }
button span {
padding:0 0 0 25px;
background:url('image.png') left 0;
display:inline-block;
height:25px;
line-height:25px;
}
button span span {
padding:0 25px 0 0;
background:url('image.png') right 0;
}
That's it. Of course you should place your image name, and your values of padding, height and line-height.
There are no examples with 3 images because you don't need 3 images. Create a small right images (like you have posted above) and create a left + center image with your maximum width (let's say 800px). Set the left sided / background image on a <li> and hook the right side up to the <a>.
<li>
Link
</li>
Try this - this uses 3 background images which isn't compatible with IE8 and below, but you could use two inner divs to give you three containers and put one image in each - note the bottom image is listed last.
nav {
height:75px; /* height of graphic elements */
background:
url(images/left_end.png) no-repeat 0px 0px,
url(images/right_end.png) no-repeat right top,
url(images/center.png); /* this images repeats */
}
I am having trouble getting a background-image to overlay the border of another div. We have a sidebar panel with various sidebars, including a navigation menu. To the right is the content panel. We'd like anything selected on the sidebar to appear connected to the content panel:
In the example above, there is a background image on the Personal Info <li> tag. I'd like to extend this image one pixel to the right so that the line next to the selected value isn't visible.
Here is my CSS for the submenu (selected) and the Content area to the right:
.submenu-item li span{
padding: 4px 0 4px 16px;
min-height: 16px;
border-bottom:0px;
}
.submenu-item li{
font-size:12px;
border: none;
padding: 0px 0 0px 16px;
}
.submenu-item span.Active{
background-image: url(../images/submenu-select.png);
background-repeat: no-repeat;
}
#Content {
margin-left:190px;
border-left: 1px solid #b0b0b0;
padding: 20px;
background: #FFFFFF;
min-height:600px;
}
Is there a way to do this other than putting a right border on my sidebar (and excluding it on the list item tag)?
If you have a border on that right, you just can't eliminate that part of the border.
However, you're in luck. Try using margin-right: -1px; in your CSS. This will drag the
element to the right 1 pixel, and hopefully over the border. You may need to also set
position: relative;
z-index: 100;
Also, because it's over to the right 1 pixel, to make it align on the left with the others, you may need to make the active element 1 pixel wider.
Alex's solution should work, but another way to do it would be to remove the border-left CSS atrtribute from #Content and instead use a 1 pixel wide gray GIF or PNG image on the DIV containing the submenu items.
Like this:
#SubMenu { background: url(grayline.gif) #CCCCCC top right; }
That would remove the need to worry about the selected submenu element not being aligned.