I need a create 2 elements within a block but for some reason the "Name" & "Bob" gets moved to a different line.
html
<div class=".div" style="padding-left: 50px">
<h3 style="padding-right: 5px;float: left;padding-bottom: 23px;">Name:</h3>
<span class="pt_name" style="block">Bob</span>
</div>
css
#div{
height:100px;
width:100%;
background-color:green
}
fiddle
http://jsfiddle.net/LMKw7/
The h3 has implicit margin-top from the browser's default stylesheet, which is pushing it down. Just set margin-top: 0 and you'll see an improvement.
Also, I'd recommend using CSS rather than inline styles.
You gived the styles to a div with an id div because you used # at the beginning.
If you want to add it to every div, simply use div { ... }.
Use display:inline-block;
Also because of different font-size that <h3> and <span> has it appears that text within <span> is on new line.I have edited your fiddle.May be this may help you:
http://jsfiddle.net/LMKw7/2/
Two things:
I had better luck setting "display: inline-block;" on the h3, rather than "float: left".
As for the "div" thing - you might confuse yourself by naming your selectors after element types. Anyway, classes generally don't have dots in them - the dot is just placed in CSS to select by class. The # tag is meant for IDs. So, the correct look would be this:
<div class="myDiv" ...
(CSS):
.myDiv {
Related
This is a simple question. However, I couldn't find an answer after 10 minutes search. I would like to explain my question with examples, so you can understand what I am exactly talking about.
Let's say there is a div tag with an id and it has also some text inside:
<div id="text">Hello World</div>
and I also have css rule which will turn the text into red.
.makeRed{
color: #FF0000;
}
The question is I want to make the text red in my div tag. I can simply do it like this:
<div id="text" class="makeRed">Hello World</div>
Instead of doing it, is there another way to make that text turn to red? Because if I keep adding makeRed rule to my every div that I need, it will turn my html into garbage. So I wonder if there is any way to do it clearly. I would like to use that way for "clearfix" method for some of my divs.
Whenever I need clearfix, I do like this and this is bad:
<div class="clearfix">
<div id="text">Hello World</div>
</div>
The question is: which text do you want to make red, and why?
If you want the text of all your divs red, you can just write
div{ color: red; }
If it's just for, say, an error message, I would add the class 'error' rather than 'red'. That way, you can make the HTML more semantic. You still have to add a class, but it has more meaning:
.message.error { color: red; }
You can add the ID of your div to your css like so:
.makeRed, #text{
color: #FF0000;
}
You can separate targets by commas to include multiple different elements in the style. This will maintain the styles applied to .makeRed and apply to your #text div.
I have a webpage with elements, styles (imported and inline)
I want to reset the style for a specific element.
Example:
HTML:
<div class="parent">
This is the parent div, it colors the <strong>strong in red</strong>
makes a <small>small underlined</small>
<h4>sets a margin-left 10px for a H4</h4>
and many other stuff<br><br>
<div class="child">
this is the child element<br>
here a <strong>strong should not be red</strong><br>
<small>small should not be underlined</small>
<h4>H4 should not have a margin-left</h4>
and so on...
</div>
</div>
CSS:
.parent strong{
color:red;
}
.parent small{
text-decoration: underline;
}
.parent h4{
margin-left: 10px;
}
I want the child div to ignore the styles coming from his parents, including the html element
Here is an illustration of my example
The styles I gave here are just examples, there are much more
I cannot modify the parent CSS, is being dynamically generated
My child div is injected in the page, I can also inject any CSS I want
I cannot know in advance the content of the parent CSS
The only solution I found so far is including the child element in an Iframe, but is really really ugly!!
Any one can help how to achieve this? A JS solution is also acceptable.
.child strong{
color:pink !important;
}
1.You adjust the injecting code css via !important.
2.Even though you can't predict the css of the parents you can only have some basic CSS thing for your injected code.
Example
You can use css immediate child selector '>'
in your example
.parent>h4{
margin-left: 10px;
}
.parent>strong{
color:red;
}
check the updated demo
http://jsfiddle.net/WRDft/11/
Refer: http://msdn.microsoft.com/en-in/library/ie/aa358819(v=vs.85).aspx
CSS '>' selector; what is it?
This question has already been asked and discussed.
There is no way to blanket clear styles but there are work arounds.
Reset/remove CSS styles for element only
If I am understanding you correctly and if you know what content is being injected into your child div then the JQuery solution is very simple:
$(".child strong").css({"color":"black"});
$(".child small").css({"text-decoration":"none"});
$(".child h4").css({"margin-left":"0"});
The JQuery code can then be wrapped in any sort of function you desire.
Here is your fiddle with the JQuery added. Hope that helps.
Note: the JQuery selector - for example: $(".child strong") - can be as specific or as general as you like and you can add as many css rules as you like by using a comma separated list like this:
$(".child strong").css({"color":"black", "font-weight":"bold", "text-decoration":"underline", etc, etc});
Thank you all for your thoughts guys, unfortunately, the best way I managed to achieve this is by wrapping my content inside an IFrame
Advantage: Immediate and easy reset
Disadvantage: I cannot manipulate the elements outside of the IFrame
I have the following HTML markup:
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
When I use the CSS selector h1 I get Hello World.
I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.
Is there any CSS selector which I can take only the text node? Specifically the World in this example?
The current state of CSS can't do this, check this link: W3C
The problem here is that the content you write to the screen doesn't show up in the DOM :P.
Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.
Check my fiddle and then check the DOM source: JSfiddle
Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.
Bit of a workaround:
h1 {
color: red;
}
h1 * {
color: lime;
}
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?
The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.
What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:
h1 {
background:black;
color:white;
}
h1 div.sponsor {
background:white;
color:black;
}
Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.
I don't believe it would be possible with pure CSS to style just "World" in this situation.
I also met same problem, where I can't touch the markup and have no control with js.
I needed to hide a text nodes in a div element, but the element to remain visible.
So here is my solution:
markup:
<div id="settings_signout_and_help">
<a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>
Home
Sign out
</div>
css:
#settings_signout_and_help {
font-size: 1px !important;
}
#settings_signout_and_help a {
font-size: 13px !important;
}
Hope this helps guys!
I had a similar problem where I had to remove the "World" text from html generated by a C# function.
I set the font-size to 0 on the 'h1' element and then applied my css to div class. Basically hiding the extra text, but keeping content in the div.
I don't know how to do it with just CSS, but...
Using JQuery, you could select all the elements inside except the stuff inside its child element
$("h1:not(h1 > div)").css()
and put whatever CSS effect you want inside there.
I have very limited knowledge of coding, html/css, but I have a problem which makes me want to learn more. Anyway, I want to change the font-size inside a <span>, nested inside the code of the page. The complete code-snippet looks like this:
<span style="font-size: 11px;">Buy</span>
I want to change that to font-size:14px;. But, since there is no class/ID, just a <span>, I don't understand how to change it. And as I said, it's deep within the document and there are at least 20 divs or some wrapped around it.
Is there a way to target that span, and maybe get the "path". I've been fiddling with Developer Tools in Chrome but I really don't see how XPath can help me?
To sum it up - how do I overwrite inline css (without a class or ID), from an external css?
Thank you.
Sorry if you have already tried this but !important in your css declaration will override any css declarations
You can declare a property as final( in my word ) as below.
Try this in external:
selector {
font-size: 14px !important;
}
You need to have an id to change that particular span's font size. If you change for span than it will affect all spans in the document. Or if the span has a parent element you can select that
.parent span {
font-size:14;
}
update
needs to have !important to override the inline rule.
but who uses inline rules anyways. you shouldn't.
Add a class to it and then target
<span class="target">Buy</span>
Adding a "new" class wont hurt
You cannot target it without a class directly.. maybe the parent div has a class then
<div class="parent">
<span style="font-size: 11px;">Buy</span>
</div>
.parent span{
font-size: 18px !important;
}
You will ahve to use !important to override the inline css.. also keep in mind that this will effect all span inside a div with class of parent
<div style="background: red;">
The inline styles for this div should make it red.
</div>
We can fight that with this:
div[style] {
background: yellow !important;
}
Of course just add a class to the div before [style] to change the div with class you added.
example:
div.myclass[style]
I have the following HTML:
<form action="http://localhost:2689/" method="post">
<span>
<label for="SearchBag.PowerSearchKeys" id="Label1"> Key words</label>
<input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit"><span><em>Search</em></span></button>
<span><em>Advanced</em></span>
</span>
</form>
The form's content needs to be centered over it's width (100% in this case).
The anchor needs to be directly under the button.
Because a picture can say a thousand words, here's the result of my awesome paint art skills:
(source: telenet.be)
And this whole block should be centered on the webpage.
--EDIT--
Because the content of all the controlls can varry greatly in length, I cannot give any element any width specifications (not even in %). Also, over estimating the width would leave confusing white spaces between elements. This too is not a desired effect.
Try setting 'display: block' on each element that you want on a separate line. You may also need to play with the margin and padding to get them centered (like margin-left: 50%; padding-left: -[1/2 width of element]) and text-align: center.
Why not just put a break in before the tag () then align the to the right?
I usually float form elements (left), and if I want to put the next one on a new line i use clear:left.
I'd replace the <span> with a <fieldset> for semantic correctness (I don't think span brings a lot to the table in terms of functionality), and apply some styling to that fieldset to the tune of
fieldset {
text-align: center;
width: 100%;
position: relative;
}
I can't tell for sure if that'll line up the anchor and the button correctly or not, but since the fieldset has position: relative set, you'll be able to position stuff if you need to with relative ease.
As much as i hate to say it, this is a case where use of tables might be considered.
But I would try positioning - i made a quick & dirty solution here
at JSbin
Basically you put your form into an element, center it with text-align and make the container position: relative. Then you use the id in the link to position it absolutely in reference to the parent. But it only works if the parent is an inline element.
Unless you change its display property (and you shouldn't), the span element should be an inline element, meaning that it exists in the flow of text. Putting block level elements inside an inline element isn't really a good idea.
You also have a lot of extraneous tags in there. Instead of this:
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
<span><em>Search</em></span>
</button>
why not just do this:
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
Search
</button>
The span does nothing, and the em can be emulated through CSS:
.fancySubmitButton { font-style: italic }`
Here's what I'd do:
<form>
<label for="SearchBag.PowerSearchKeys" id="Label1">Key words</label>
<input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">Search</button>
Advanced
</form>
with the CSS:
form {
text-align: center;
}
.fancySubmitButton, .fancyLinkButton {
font-style: italic;
}
.fancyLinkButton {
display: block; /* this will put it on its own line */
}
Quick response to the comments: giving something the class "fancyLinkButton" doesn't imply that it has rounded corners. Anyway, if you want to put rounded corners on certain elements, I would still avoid using extraneous markup. If more wrapper elements are needed for whatever implementation you're using, then those should be added via Javascript. Remember that mozilla and webkit already support CSS rounded corners - eventually IE will too, and you'll be able to easily change your single javascript function, rather than wading through HTML to find everywhere where there are unneeded spans.