I how do I get this to display as the full width of the space? Width 100% isn't correct here. Thanks
<a style="background-color: #236b8e; font: Georgia; font-size: 15px; color: #ffffff; font- weight: bold; padding: 10px; width: 100%; text-decoration: none;" href="http://mysite.com/">Go There Now</a>
<a> is an inline element by default and therefore sizes to its contents. Add a display: block style to change it to block styling which will allow width sizing to work.
Using width doesn't work on inline elements. If you make it a block element it can have a specifici width.
Add display:block; in the style to make it a block element.
Please make your question clear. Is that text the only element in the webpage? if yes then add this to the CSS... Hope it helps.
EDIT: Well I guess this is what you are looking for..
<a style="background-color: #236b8e; font: Georgia; font-size: 15px; color: #ffffff; font- weight: bold;
padding: 10px; display: block; text-decoration: none;" href="http://mysite.com/">Go There Now</a>
Related
I am trying to create the button by anchor tag without button tag and I am writing css for that but it's doesn't take margin-top.
My css code is:
.btn{
background: #881f00;
color: #FFF;
padding: 5px 12px;
text-transform: uppercase;
margin-top:20px;
}
Above code define margin top can be work in below html code with button tags:
<button class="btn">+view more</button>
But margin top does not work in below html tags:-
+view more
I am really confused how and where this can be happened. I am googling from last 2 hr but I don't get the exact answer so I feel greatfull if anyone can solve this issue. Thank you!!!
Set your a element to be inline-block. This will add, among the capabilities of the block level elements, the top margin capability, yet keep it in line with the rest of your content:
.btn{
background: #881f00;
color: #FFF;
padding: 5px 12px;
text-transform: uppercase;
margin-top:20px;
display: inline-block; /*this is it*/
}
<button class="btn">+view more</button>
+view more
a is not a block level element. Try to set display: block or display: inline-block to the a tag and it will work.
There are other HTML elements that are set to display: inline by default:
Inline_elements (MDN)
Use display: inherit and then give the margin-top, it'll work
.btn{
background: #881f00;
color: #FFF;
padding: 5px 12px;
text-transform: uppercase;
display: inherit;
margin-top:20px;
}
add display:block or overflow:hidden for the button class.
I'm trying to change the font-size inside a menu. When I adjust the font-size it only changes the space between the letters for some reason. Any ideas?
#mainNav ul li {
color: #000000;
display: block;
float: left;
font-size: 100px;
font: "Tahoma";
letter-spacing: .02em;
margin: 0;
padding: 0;
text-transform: uppercase;
white-space: nowrap;
}
You can have some css overriding on the font-size, you can confirm the styles using the inspect of your browser.
To solve this you can also try to change the priority of the styles buy adding the !important.
font-size: 100px !important;
But if you still having the same issue you must use the inspect to correct the priority of the styles.
if is a menu, you must have an "a" in the "li" and the font-size for this with any value.
I have this problem:
http://liberainformazione.it/
Title css rule:
p.right_sidebar_title {
font-size: 16px!important;
font-weight: bold;
color: black;
margin: 7px 0!important;
line-height: 18px!important;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
width: 300px;
}
Blue rectangle css rule:
.post-category-rightSidebar {
background: #369;
display: inline;
float: left;
font-size: 10px;
height: 16px;
line-height: 17px;
margin-right: 5px;
padding: 0 5px;
text-transform: uppercase;
color: white;
}
In Chrome or Firefox the blue rectangle is near the title but with IE the title is on new line.....
I haven't understand why IE not recognize my css rules.
What I am doing wrong?
Thanks a lot.
Your page has <meta http-equiv="X-UA-Compatible" content="IE=7" />, so IE9 is operating as IE7.
In IE7, specifying width or (height) value triggers so called hasLayout which makes element's box somewhat isolated and prevents its contents from being floated by any external elements.
You should either set X-UA-Compatible meta element to IE=edge value (best option), or remove width: 300px; from p.right_sidebar_title rule, or specify this width for a container that contains both p.right_sidebar_title element and floating color square.
I noticed you don't have a float on p.right_sidebar_title, try adding float: left; to that.
If it helps, I'd put p.right_sidebar_title and .post-category-rightSidebar inside their own div:
<div>
<div class="post-category-rightSidebar"></div>
<p class="right_sidebar_title">Title</p>
</div>
Hope this helps!
I currently have a simple header set up in HTML, and am using CSS to style it. I have created multiple styles: '#header' and '#header #right'. When I use 'float: right;' for the second style I mentioned, it moves the text down almost completely under the header.
Code:
index.html:
<html>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href='main.css' type='text/css' rel=Stylesheet>
<head>
<title>FriendSub</title>
</head>
<body>
<div id='header'>
<font size='+3'>FriendSub </font>
<a href='index.php'>Home</a> |
<a href=''>Subscribers</a> |
<a href=''>Subscriptions</a>
<div id='right'>
<p><a href=''>Log in</a> | <a href='register.php'>Register</a></p></div></div>
</body>
</html>
main.css:
#charset "utf-8";
/* CSS Document */
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
background-color: #093;
border-top-left-radius: 18;
border-top-right-radius: 18;
width: 96%;
height: 58px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 14px;
padding-right: 14px;
color: #FFF;
font-weight: bold;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a {
color: #FFF;
text-decoration: none;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a:hover {
color: #CCC;
}
#header #right {
float: right;
width: 220px;
background-color: #093;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #CCC;
width: 1000;
height: 58px;
margin-left: auto;
margin-right: auto;
padding-top: 14px;
padding-left: 14px;
padding-right: 14px;
padding-bottom: 600;
font-weight: bold;
border-bottom-left-radius: 18;
border-bottom-right-radius: 18;
line-height: 1%;
}
JSFiddle here: http://jsfiddle.net/aKtep/
try adding a <div style='clear:both'></div> right after you close #right and see what happens
A quick solution (assuming I understand your desired result) is to rearrange the elements so the item you want to float to the right is the first in header. Floated elements are removed from the normal flow of the document, and often are pushed to the next line unless they have enough space. However, if the floated element comes first, subsequent elements will arrange themselves around it. See fiddle.
Remove the p tag from around the Login/Register link, modify the #header #right to include a padding-top:10px; You're also using too many divs when you don't really need to (divitus)
You need to specify a width of units for your container #header that will accommodate all of its content.
All I did here was change #header width from 96% to 960px
I guess I'm not 100% sure on what you're asking but it sounds like your normal header is pushing the right header down below it. From what I can see, it may have to do with your header container having a width of 96%. Then the #right #header has a width of pixels and the original header container might not have enough room left for that many pixels. Try changing the width of #header #right to a %
A word of advice, don't use ID's so much. You are creating very high specificity that can be a pain for you later on.
As mentioned before, you should use clear: float after the #right segment.
The reason for this is that the clear property is related directly to the float property. It specifies if an element should be next to the floated elements or if it should move below them. This property applies to both floated and non-floated elements.
I don't know what is going on but it seems that the background image isn't loading.
test.html:
<div class="pToolContainer">
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
<div class="pToolSlidePanel"></div>
</div>
style.css:
.btn-pTool{
margin:0;
padding:0;
background-image: url(slide_button.png);
background-repeat:no-repeat;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
By the way the image does exist in the folder of test.html.
Add "display:block;" in your .btn-pTool class
Use shorthand property for the background property and type the folder name where thje image had been located.
.btn-pTool{
margin:0;
padding:0;
background:url("../folder name/slide_button.png") no-repeat;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
I faced this problem. My html was as below:
<th style="background-image:url('Image.png');">
</th>
I added " " as #shankhan suggested inside th and the image started showing up.
<th style="background-image:url('Image.png');">
</th>
In addition to display:block OR display:inline-block
Try giving sufficient padding to your .btn-pToolName and make sure you have the correct values for background-position
#TheBigO, that's not correct. Spans can have background/images (tested in IE8 and Chrome as a sanity check).
The issue is that the a.btn-pToolName is marked as display: block. This causes webkit browsers to no longer show the background in the outer span. IE seems to render it how the OP is wanting.
OP chance the .btn-pTool class to be display: inline-block to make it work like a span/div hybrid (take the background, but not cause a break in the layout).
I have tried your code and found that if we put background-image: url(image.png); in btn-pToolName and change color:#000000. it displays the image at background.
my test css:
.btn-pTool {
margin: 0;
padding: 0;
}
.btn-pToolName {
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #000000;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
background-image: url(defalut.png);
background-repeat: no-repeat;
}
and test html:
<div class="pToolContainer">
<span class="btn-pTool"><a class="btn-pToolName" href="#">adad</a></span>
<div class="pToolSlidePanel"></div>
</div>
Hope this helps.
You have applied class "btn-pTool" to span which is an inline element... give display:block to it and also add some text inside the<a> tag and the see the result.
Also give a background color and background position as well to the image though default background position is there.. but try doing it this way
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
Try to add display:block to .btn-pTool, and give it a width and height.
Also in your code both tbn-pTool and btn-pToolName have no text content, so that may result in them not being displayed at all.
You can try to force come content in them this way
.btn-pTool, .btn-pToolName {
content: " ";
}
The code below works. Replace the text within the single quotes with your image name. If it is in the same folder, if not add ../foldername/'yourimagename' I hope that helps.
NOTE:
use of the single quotes by most of the programmers is not advised but I use it and it works. Also, if you would write a PHP you would appreciate what it can do i.e. add the background image automatically from the variable etc.
<html>
<head>
<style type="text/css">
.btn-pTool{
margin:0;
padding:0;
background-image: url('your name of the field');
height:100px;
width:200px;
display:block;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
</style>
</head>
<body>
<div class="pToolContainer">
<span class="btn-pTool"><a class="btn-pToolName" href="#">Test text</a></span>
<div class="pToolSlidePanel">Test text</div>
</div>
</body>
</html>
The easy way is that, copy and past this background-image: url(../slide_button.png); instead of background-image: url(slide_button.png);
In such case we need to use ../ before path.
Either you need to give full path.
One other thing is that, in case before doing any change just clear the browser history and then refresh the page.
Use this one to add background---
background-image: url('images-path');
You can also add repeat or no-repeat function in it!
background: url('images-path') no-repeat 00;
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
That's empty. Try adding a non breaking space to give the link and span some contents:
<span class="btn-pTool">
<a class="btn-pToolName" href="#"> </a>
</span>
It's also worth noting that the CSS spec says that you can't give a span a background image because spans are not block elements. Put the background image code in the div's class style, or use <p> instead of <span>. Some browsers might let you put a background in a span, but not all will (perhaps older versions of IE).
1.Use this code in stylesheet
body {
background: URL("slide_button.png");
background-size: 100% 100%;
background-repeat: no repeat;
2.Put img and html file together in single folder
3.IF not worked try converting png file to jpg for that just upload pic on facebook and then download that pic from facebook it will automatically converted into jpg and while uploading tick mark private setting so that ur friends cant view that image
4.if still not work imform me..