Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
<td valign="bottom">
<div style="width: 205px;height: 21px;border: 1px solid;">
<div style="height: 21px;background-color:#5f5f5f; background-size: 100px 10px;">
</div></div><br>
<span style="font-size:11px;">*Valid for 1 year from the date of purchase</span>
</td>
The above image , i have send it . i need the things like this in html , I have made a div and use background-color but it covers the whole portion but i want to cover the background only 30% or any % i want . Is there any kind of help u can give me
Actually, you need only one DIV element (instead of two):
LIVE DEMO
<div class="expirationBar"></div>
CSS:
.expirationBar{
border:1px solid #ddd;
width: 205px;
height:21px;
border-radius:3px;
background: #eee url(//placehold.it/1x1/5f5f5f) repeat-y;
background-size: 30%;
}
...but to get to your exact issue:
Instead of background-size use width
LIVE DEMO
<div style="height: 21px; background-color:#5f5f5f; width:30%;">
for the inner DIV
You're not using any image, so you don't have any background-size to apply to, cause it refers to images.
Otherwise, using images - than you can set it like:
LIVE DEMO
<div style="background:url('10x10_gray.jpg') repeat-y; background-size:30%; height:21px; "></div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 months ago.
Improve this question
so I was making a search engine and posting it to the public, but I want the image to move down and center, here's my code:
img {
background-position: bottom 45px bottom;
margin-bottom: 26px;
display: block;
margin-left: auto;
margin-right: auto;
padding: 5px;
outline-style: solid
}
<div id="outline-style">
<div id="margin-bottom">
<img src="https://ci4.googleusercontent.com/proxy/CqUZKaQT0aKsKN4s6QLmO_2lsIoFqxMCpWGdGjA_WFdTcEsdIDEXvDSBl8YT7TwqpUC50zHHq_X-MIy5Onl-WKDjP7IBvoPG-P5CZHr6OmC__zLeZfRJN3v79eqB3GkP6720yegWc9HD_rMfFbsD96v3NYqwFAQgcN09MqY1QqxuCnzPu4QFEGCS5Qt-OLyQwZWMf4E9RdnPkf2QqQPwbXYStw=s0-d-e1-ft#https://dynamic.brandcrowd.com/preview/logodraft/086197e5-30cd-4bd5-abc0-e3ff2882e5a0/image/large.png?bust=ad19d638-d125-45ae-b59a-278e4976924f"
width="200px" height="200px">
</div>
</div
You may adjust the position and padding of the image.
Here's a reference of the difference between margin and padding:
https://www.javatpoint.com/margin-vs-padding#:~:text=tabulated%20as%20follows%3A-,Margin,inside%20of%20the%20element's%20border.
You might need to make it into position: absolute if necessary
Learn more about positioning here:
https://www.w3schools.com/css/css_positioning.asp
Try one of these things:
Position: relative;
top: -10; (maybe +)
or
margin-top: -10%
Add the below property inside the img{} block:
vertical-align: text-bottom;
Refer to this article for more details:
at W3Schools Website
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 11 months ago.
Improve this question
I am wondering how are you able to create a circle button using HTML and CSS. I feel like it has something to do with border-radius after you set a proper width and height but it didnt work out like I hoped. The image below shows what it should look like.
What the button should look like
For a circle shaped button all you need to do is set your border-radius to 50%. Change the background-color of the button to white and you should be good to go. You can also set your .button height, width, font-size and font-family to mimic your desired look.
<style>
.cont {
width:100%;
height:100%;
background-color:lightgrey
;
}
.button{
width:100px;
height:100px;
border-radius: 50%;
border:none;
background-color:lightgrey;
}
</style>
<div class="cont">
<button class="button">Explore</button>
</div>
if you want a generalized solution then you can try this
HTML
<button>Explore</button>
CSS
button {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
}
You can adjust the width & height according to your requirement
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have been working on a project that contains some button in the same way the Google plus buttons work, I want to style them in the same way, one gradient to all of them,
please help me.
Check the buttons.
https://plus.google.com/discover/
https://i.stack.imgur.com/q8MXJ.jpg
I'm not sure how google do it, but I would use a fixed gradient background.
background: linear-gradient(-90deg, red, yellow); add a standard gradient background to the buttons going from a red to yellow, you can use any colors you like.
background-attachment: fixed; fix the background in place so it's in the same place for all divs.
This will work for buttons that are all different lengths, but for the example I use a fixed length.
.button {
float: left;
background: linear-gradient(-90deg, red, yellow);
background-attachment: fixed;
width: 150px;
height: 50px;
margin-right: 20px;
border-radius: 25px;
}
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
To reach this effect you have to use css gradients.
You do not have some code we could show you on so read more about here: https://www.w3schools.com/css/css3_gradients.asp
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've got the following code for my html section
only the first heading creates a border and the rest are all over the place, below is two photos of what it should look like, and what it does look like...
![enter image description here][1]
![enter image description here][2]
Any ideas? Thanks!
The code is a bit messy. But if this is what you want: http://jsfiddle.net/96z7U/3/
These are the changes:
<h1 class="titleBorder">Module Details</h1>
It had no class.
#moduleDetails {
border-style: solid;
/*border-width: 1px;*/
padding: 5px;
}
I'm not sure if you intended that border.
And:
.titleBorder {
padding-top: 10px;
border-style: solid;
border-width: 1px;
margin:0 auto;
float:left;
width:100%;
}
Add float left and width 100%
The problem seems to be connected with the fact that the content below the heading have the style float:left which causes the issue. Try adding the following code before each heading with class 'titleBorder':
<div style="clear:both"></div>
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I am not familiar with html.I want to show formulas in my blogs.But there is blank between my two lines if I put a picture in one line.Please look at my page my_web_page.There is so big blank between the 3 lines than others.I try to change the height of the picture but it was useless.Please tell me where I was wrong or tell me how to show formulas easily in my web pages.Thanks very much!
use this style for your img tags
padding: 0px;
border: none;
margin: 0px;
vertical-align: bottom;
Ex:
<img src="your img source here" style="padding:0px;border: none; margin: 0px; vertical-align: bottom;">
It is blogspot adding padding around your images.
The default style of an image within an article seems to have 8 pixels padding.
If you can edit the html you could try overriding this inline, i.e adding padding:0px; to the style part of the img tag. Please note you will probably also need to remove the margin-bottom: -12px too.
i.e. rather than
<img src="http://chart.googleapis.com/chart?cht=tx&chl=p%5Ei*q" style="border: none; margin-bottom: -12px;">
try:
<img src="http://chart.googleapis.com/chart?cht=tx&chl=p%5Ei*q" style="border: none; padding:0px">