I have a div with class fview.iNside I have a span. Then I have anchor elements inside another span, ul li, another div etc.
I need same style for all anchor elements.
I have used Font-size and color to the class . But the color is not getting updated. Font size is working fine.
The div is dynamic one. So I cant define it as it is.
<div class="fview"><span>
{{Inside i can have any html elemnts like span, div, a, ul, li }}
</span></div>
.fview span a {
color:red;
font-weight : bold
}
I need the color change to all elements inside fview span. Please help me
Please add the following css in your stylesheet and check
Try this:
.fview span a {
color:red !important;
font-weight:bold !important;
}
Also inspect the element and check if any other css not overwriting this.
Note:
The span is a inline element so you should not add any block level element inside it.
If you are using a > h2 etc the it will be incorrect.
But if you can't update the HTML then try to convert the inline element to block using css it will reflect the design.
display: block; // inline-block
Let me know if still you are facing the issue.
.fview span h4 {
color:red ;
font-weight : bold
}
<div class="fview"><span>
<h4 >Example</h4>
</span>
</div>
I think thats what you want.Please check this code. I hope this works for you :)
I want my <div> to behave the same way as an <h1> tag, so that everything after the <div> comes under it, without using the <br> tag.
Is there a way to do this only using CSS.
By default the div should behave the same way as the h1 except the h1 has some margin before and after it in most browsers. If you did change some attributes of the div, that can result in not working as expected.
To add the margin to your div use CSS like
div {
margin: 1em 0;
}
I am trying to customize a free widget, but I dont have access to edit the html. I am only given access to the css. I want to be able to align the a tags virtually. I have tried the following css, but the tags are right on top of each other/ How do I put space between them?
HTML
<span>[×] [o] </span>
CSS
span a { position:fixed; }
JSFIddle
http://jsfiddle.net/gfvAw/58/
You can always float and clear the anchor tags:
a { float: left; clear: left; }
Here's a jsfiddle to demonstrate: http://jsfiddle.net/gfvAw/60/
a { display: block; }
This will convert the a tags into block elements, meaning they will automatically expand to fit their containers.
However, you should realize that using block elements means the user will be able to click anywhere in the block, rather than just on top of the link text. A solution to that problem would be to use jQuery to insert <br/> tags after each a tag. Or you could replace the entities with <br/> tags, as well.
This is my problem : http://jsfiddle.net/F6pNm/8/
I need the text to appear on same line as the links. But it keeps using adding a empty line at the right.
EDIT: Forgot to mention, I need the text within the div to be centered between the links.
if you add this:
#footer {text-align:center;}
and add
#flash {display:inline} to the 'flash' id
if will work
: http://jsfiddle.net/F6pNm/24/
note: This will also work if you want to center more than one div, just use a class instead of an id (and . instead of #) to apply it to multiple divs
Have div#flash float left as well.
Use display: inline-block for the flash div. Since you mentioned you want the content centered, add #footer { text-align: center; } to your style rules.
Is there a way to prevent a line break after a div with css?
For example I have
<div class="label">My Label:</div>
<div class="text">My text</div>
and want it to display like:
My Label: My text
display:inline;
OR
float:left;
OR
display:inline-block; -- Might not work on all browsers.
What is the purpose of using a div here? I'd suggest a span, as it is an inline-level element, whereas a div is a block-level element.
Do note that each option above will work differently.
display:inline; will turn the div into the equivalent of a span. It will be unaffected by margin-top, margin-bottom, padding-top, padding-bottom, height, etc.
float:left; keeps the div as a block-level element. It will still take up space as if it were a block, however the width will be fitted to the content (assuming width:auto;). It can require a clear:left; for certain effects.
display:inline-block; is the "best of both worlds" option. The div is treated as a block element. It responds to all of the margin, padding, and height rules as expected for a block element. However, it is treated as an inline element for the purpose of placement within other elements.
Read this for more information.
.label, .text {display: inline}
Although if you use that, you might as well change the div's to span's.
A DIV is by default a BLOCK display element, meaning it sits on its own line. If you add the CSS property display:inline it will behave the way you want. But perhaps you should be considering a SPAN instead?
<span class="label">My Label:</span>
<span class="text">My text</span>
try this (in CSS) for preventing line breaks in div texts:
white-space: nowrap;
The div elements are block elements, so by default they take upp the full available width.
One way is to turn them into inline elements:
.label, .text { display: inline; }
This will have the same effect as using span elements instead of div elements.
Another way is to float the elements:
.label, .text { float: left; }
This will change how the width of the elements is decided, so that thwy will only be as wide as their content. It will also make the elements float beside each other, similar to how images flow beside each other.
You can also consider changing the elements. The div element is intended for document divisions, I usually use a label and a span element for a construct like this:
<label>My Label:</label>
<span>My text</span>
div's are used to give structure to a website or to contain a lot of text or elements, but you seem to use them as label, you should use span, it will put both text next to eachother automatically and you won't need to wright css code for it.
And even if other people tell you to float the elements it's best that you just change the tags.
I don't think I've seen this version:
<div class="label">My Label:<span class="text">My text</span></div>
<div id="hassaan">
<div class="label">My Label:</div>
<div class="text">My text</div>
</div>
CSS:
#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}
Try applying the clear:none css attribute to the label.
.label {
clear:none;
}
use this code for normal div
display: inline;
use this code if u use it in table
display: inline-table;
better than table
try float your div's in css
.label {
float:left;
width:200px;
}
.text {
float:left;
}
I have many times succeeded to get div's without line breaks after them, by playing around with the float css attribute and the width css attribute.
Of course after working out the solution you have to test it in all browsers, and in each browser you have to re-size the windows to make sure that it works in all circumstances.
display: inline-block worked for me