My display code could look like this:
<div class="displayApproved">
<span class="bold">this is my text</span>
</div>
My .displayApproved has a padding-top:8px; to align to its neighbor element, and this works fine with non-bold content.
When there's a <span 'class="bold"'> inside, is there a way to adjust the padding on the div to 9px without creating a new class "displayApprovedBold" (several content pages would need changing)? If there's an advanced CSS rule though that would adjust that div's padding if the div contained that bold span, then one change and I'm done.
With jQuery you can just do:
$('.displayApproved:has(.bold)').css('propery', 'value');
Related
I'm currently wondering about the following problem: I have for example a simple header H1 with a SPAN tag inside which I want to style differently by CSS depending on the position of the SPAN element, meaning I need to detect if the span element is in line with the text node content of the H1 tag or is pushed to a new line because it doesn't fit in the line.
<h1>
This is a header
<span class="special">Special content</span>
</h1>
Is there anybody out there having a good idea or even a solution to this?
Javascript
Just use javascript to add/remove class if element is or is not wrapped.
JSFiddle
CSS
But if you really want to use just css then you can try with this problematic solution:
Use ::first-line pseudo element to style header and then style span as rest of h1. The problem is that it could style also your header if it would wrap at some point.
h1::first-line {
color: black;
}
h1 {
color: red;
}
<h1>
This is a header
<span class="special">Special content</span>
</h1>
Sadly, CSS does not have any complex mechanism for managing lines.
This is the page: http://aszx.altervista.org/aatest/
As you can see from the source code, the #news, #news-1 and #news-2 have this rule:
background: #F2F2F2;
Could you tell me why the background doesn't change and it's still white ?
I have noticed that the background change when I resize the browser's window.
It's because the floats are causing the div to not be of any height. You need to add a clearfix class to the elements you're trying to set the background to.
<div class="col-md-10 center-block clearfix" id="news">
This will cause the #news div to clear itself, thus making its height encompass the contained div elements. Do the same for your other containing elements as well.
I have a problem with positioning divs on my page, I don't want to use top:50px; because I want to have comments in there as well so here comes my question is there any other way to position divs apart from "top" such as display:block in list styles?
thank you so much for any help!
Divs will appear naturally in the DOM flow. They will take up 100% of the width of their parent container by default and will base their height from the non-floated content within them. Use margins to space them out accordingly. By default they have position:static. If you want list styles, use <li> which are display:list-item and not display:block.
Example:
HTML:
<div class="comments"> Some really long comments </div>
<div class="foo"> Something that should appear below the comments </div>
CSS:
.foo {
margin-top : 50px;
}
I want to have a inside of another that will serve as a background to the container and sit behind all of the other elements inside of the container. The HTML would be something like so:
<div id='container'>
<div>Blah</div>
<input type='text'/>
<input type='submit'/>
<div id='background'>
<img.../>
Some Text Maybe?
</div>
</div>
My failed CSS:
#background{
float:left;
z-index:-999;
background-color:black;
height:'+o.height+'px;
width:'+o.width+'px;
}
The 0.variables are from a jQuery plugin I'm making this for - basically the div should be the same height and width that the parent is.
Where I currently stand: My background sits below the sibling elements (along the y-axis not the z). When I play around with the position property, it either places the element behind the parent or it has no effect.
What I ultimately am trying to do is create a jQuery plugin that adds an animated background to a specified element. I'm not even sure if what I'm trying to do with the CSS is possible.
Try putting the background as the container's first child, then using position: absolute;. Mess around with the z-index until it works.
Also, you may need to specify a "more negative" z-index on the <body>, otherwise your background element will end up behind the body (and thus invisible).
To explain my problem, I'm trying to make a div wide enough to accommodate a dynamically generated title without wrapping it, but the div also has other content, which I want to wrap.
In other words:
CSS:
.box {
min-width:170px;
}
.box span.title {
font-size:24px;
white-space: nowrap;
}
.box span.text{
font-size:10px;
white-space: normal;
}
HTML:
<div class="box">
<span class="title">Title on one line</span><br />
<span class="text">This is the main body of text which I want to wrap as
required and have no effect on the width of the div.</span>
</div>
However, this is causing the div to expand to be wide enough to contain the main body of text on one line, which I want to wrap. I've tried various arrangements for CSS and the putting them all inside container divs and the like but I can't seem to get the box to be exactly wide enough to contain only the title without wrapping (but not less than the min width)
Is there any way to do this just in CSS? Note I don't want to set a max width as this just causes it to become a static size again, as the main body of text is always going to be enough to hit the max width. I also can't line break the body manually as it's dynamically generated.
Is this (jsFiddle) what you're trying to accomplish?
I just added display: table; to .box's CSS. This expands the main div to the width of the title span but wraps the text span.
Note: You can also set a constant width to prevent the div from expanding to the width of the window. This way it will still expand to the width of the title if it is larger than your constant width, but will not grow if the user drags out the window. In my example I added width: 100px; to demonstrate.
A working jQuery example:
http://jsfiddle.net/8AFcv/
$(function() {
$(".box").width($(".title").width());
})
For headlines you should use the <hN> tags (<h1>, <h2> etc).
For no text wrap:
white-space: nowrap;
On the element who's text you don't want to wrap.
Working Example on jsFiddle
If i understand your correctly you can easily set the same width for yours text as for yours title using JS or jQuery, for ex:
$('.text').width($('.title').width())
and run it at jQuery(document).ready or by event if you add it dynamically
Block elements such as divs extend as far as content pushes them, unless specified by explicit widths or heights.
A pure CSS solution for this is unlikely without setting a max-width on the div.
A pointer on CSS:
Don't include the tags in your selectors (i.e. tag.class) as you are then forced to use that tag with that class. Simply using .class will make it easier to change your markup (should you need to) as well as make your class extend its use to more than a single tag.