i have set the property of link as follow
.heading-text a
{
font-family: verdana;
font-size:12px;
color:#124253;
width:100%;
height:40px;
text-align: center;
cursor: pointer;
}
to make the height of the link as per it's parent div but it's not working
when i have set following property
.heading-text a
{
padding:11px 0px;
}
then it work properly is there any way in css by which i can increase the height of the area of the link without padding
Request to give answer as soon as possible
add this to your css :
display: block;
Try to add the following to your css:
display: inline-block;
In difference to "display: block;", this has inline too, means you can define the size but the element is still inline as before.
<a> tags are inline by default. Change it to block:
.heading-text a
{
display: block; /* Add this */
font-family: verdana;
font-size:12px;
color:#124253;
width:100%;
height:40px;
text-align: center;
cursor: pointer;
}
Here is an example fiddle.
Use any one or both of this-
display: inline-block;
or
float:left; /*or right*/
Related
I am trying to make this menu
now so far i can get to this point where i have the > appearing before each <li> with a margin of 10px before the text but the problem is that i can't get the circle
i tried adding <divs> thinking i could just give it a background-color and border-radius but the problem is that the html comes up as text so i wouldn't be able to apply any css to it.
the easiest solution would be to add a <div> in each <li> however the list is generated by a php function which returns the HTML as a single string. i could use str_replace() to locate every opening <li> and add in a <div> or do the same thing in javascript but i want to know if i can do this though CSS
Try using li:before with a content of > to make these bullet points, like so:
li:before {
align-items: center;
background-color: #fcbe35;
border-radius: 50%;
color: white;
content: '>';
display: inline-flex;
font-weight: bold;
height: 24px;
justify-content: center;
margin-right: 10px;
width: 24px;
}
Here's a JsFiddle.
CSS
ul{
list-style-type:none;
}
li::before {
content: ">";
background: gold;
font-family: serif;
font-style:bold;
display:inline-block;
font-weight: 800;
padding: 1px 3px;
line-height: .8em;
text-align:center;
vertical-align: center;
margin:0px 10px 0px 0px;
border-radius: 50%;
color: #fff;
}
EDIT: updated to make it look better.
How about making those circles in a Photo Editing Software and using them as the marker of your list like this :-
li{
list-style-image : url("circles.gif");
}
Or if you just don't want to use an Image :-
li::before{
content : ">";
background : yellow;
border-radius : 50%;
/* and some other styles as per your wish */
}
use an image: list-style-image: url(...);
Use pseudo elements as 'li::before' to adjust the pointers dynamically using only CSS.
I have a jsfiddle here - https://jsfiddle.net/z9ptvz87/
I'd need the headings to have a background color and same padding on all sides.
I sort of have ot working here but it's with line-height to get it working. Without line-height it looks like this.
https://jsfiddle.net/z9ptvz87/10/
Is there a better way to do this and have padding on the left and right of the text.
*{
font-family: sans-serif;
}
.block{
margin: 50px;
width: 400px;
}
.block span{
display: block;
}
h1, h2{
background: red;
display: inline;
padding:10px;
line-height: 2em;
}
Did you consider h1, h2 { display: inline-block }? Seems to solve both your issues, if I've understood them correctly.
See https://jsfiddle.net/h7kd9yq8/
if everything's fixed, you can always wrap the content for the different lines inside span tags and style them
<h2>
<span>Sub heading Sub heading Sub</span>
<span>heading Sub heading Sub</span>
<span>heading Sub heading</span>
</h2>
and then in the css
h1 span, h2 span {
float: left;
clear: both;
padding: 10px;
background: red;
}
https://jsfiddle.net/z9ptvz87/14/
not sure if that's what you wanted to achieve.
So I've got a h3
<h3>someText<h3>
The h3 has a height and a background image
h3
{
height:30px;
background-image:url();
background-reat: repeat-x;
}
now I want the text in the h3 to align to the middle of the element but it always floats the text to the top:
How I can achieve this?
Set the line-height to match the height:
h3
{
height:30px;
line-height:30px;
background-image:url();
background-reat: repeat-x;
}
If your <h3> element contains multiple lines of text, setting the line-height property won't work as suggested by the other answers.
If you do not have to support lteIE7, you can use display: table-cell combined with the vertical-align property:
h3 {
background-color: whitesmoke;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
You can simply add line-height:30px;
Use line-height to solve this
h3 {
height:30px;
background-image:url();
background-reat: repeat-x;
line-height: 30px;
}
h3 {
...
/* those 2 lines are what you need */
line-height:30px;
vertical-align:middle;
...
}
I have html like this:
<div id="userBar">
</div>
.iconGlobe is a icon, same with the redst that looks like this:
.iconGlobe{
background: url(../images/icons/globe_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
display:inline-block;
position:relative;
text-decoration:none;
}
Im trying to give margin between the anchor links, like this:
#userbar a{
margin-right: 8px;
}
But I doesnt apply the margin. I tried to do it invidually so inside .iconGlobe there was margin-right, and that worked fine. I wish to not apply them invidually.
you can't give margins to inline-elements. change your code to:
#userbar a{
display: inline-block;
margin-right: 8px;
}
but note that older versions of IE might ignore this...
Its a problem of case ? in your html you have
<div id="userBar"> - note the capitol B and in the CSS you have #userbar a{ - lowercase b ....
An you need to have block elements for margins -
#userBar a{ display:block}
try this:
#userbar a{
display: block;
float: left;
margin-right: 8px;
}
Your code is correct. The issue is just with the case mismatch of #useBar and id='usebar'. It works correctly when the case is corrected. See here - http://jsfiddle.net/pGpwb/
I'm trying to style a button with the css 'sliding doors' technique, but it isn't working properly. I've only got access to firefox 3 at the moment so this issue may not occur in other browsers but I would like to solve it for firefox as well.
Here's a picture of what the problem is:
http://img131.imageshack.us/img131/3559/buttons.png
As you can see the second side is lower than the first by a pixel and also is not over to the right enough. Here is the code I am using:
button
{
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button span
{
display: block;
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
<button class="important" type="button"><span>Register</span></button>
<button type="submit"><span>Submit</span></button>
How do I fix this problem? I tried relatively positioning the span using top: -1px right: -3px but then the text is mis-aligned.
Thanks.
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I just did sliding doors on a div background, and the code from this site worked perfectly.
Try setting the padding for the button to zero, and then playing with the padding-left and width to put the text in the right place.
button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }
If you look at the HTML block display: padding gets added to the overall width of the object, and the background starts in the padding area, and the right half is padded
However please take note, that button elements are NOT suited for embeding any other nodes inside (like span). They may work OK in the browser, but IE can make your life really hard (not to mention that as far as I know, it's not valid)
Form elements like buttons are always hard to style, and riddled with minor bugs like these.
Instead of applying the class to the button element itself, perhaps try and apply the button's styling to an extra span element inside the actual button?
In short:
button {
background: white;
border: 0;
}
button div {
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button div div {
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
And HTML:
<button type="submit"><div><div>Submit</div></div></button>
I use DIVs instead of buttons and have a function to build them in-place. It ends up looking like this:
alt text http://fb.staging.moveable.com/samplebutton.gif
inline script call:
<script type='text/javascript'>makeButton("Log in","login()")</script>
code:
function makeButton(text,action) {
document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}
css:
a.titleGen, .btnText, .btnGText {
text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
text-decoration:none
}
.btn {
height:22px;
display:inline;
cursor:pointer;
margin-right:5px;
}
.btnLeft {
background-image:url(/images/bg_btnLeft.gif);
width:3px;
height:22px;
float:left;
}
.btnRight {
background-image:url(/images/bg_btnRight.gif);
width:5px;
height:22px;
float:left;
}
.btnMiddle {
background-image:url(/images/bg_btnMiddle.gif);
width:auto;
height:22px;
float:left;
}
.btnText {
color:#ffffff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:2px;
padding-left:10px;
padding-right:10px;
}