Is there a CSS or pure HTML solution to having a div only be visible when it has content? I have this JSP code:
<div class="message-panel panel-alert">
<span class="label-warning">
<span class="warning-sign"></span>
</span>
<c:if test="${condition1}">
<p> Condition 1 is true </p>
</c:if>
<c:if test="${condition2}">
<p> Condition 2i s true </p>
</c:if>
</div>
If either of the conditions are true, I do want to show the alert panel with my warning sign, but I don't want this div to appear at all if neither of them are true. Two solutions I can think of is to surround this whole thing with an all-inclusive if statement, or to modify the visible attribute of the div programatically in javascript. however, I am wondering if there is a way to say "Hey, div, go away if there's nothing in you".
Use the :empty pseudo-selector:
div.panel-alert:empty {
display: none;
}
You can try creating a class called hidden. And add it to the <div class="message-panel panel-alert"> when both texts are empty (using both ifs) and then in css define .hidden {display:none;} or as you stated use some javascript as described here Using an if statement to check if a div is empty
Related
I have the following code in HTML:
<span>
<a href="#">
<span class="caption">
<p id="first">Text1</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing1.jpg" width="218" height="181"
alt="thing1"/>
</a>
</span>
<span>
<a href="#">
<span class="caption">
<p id="first">Text2</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing2.jpg" width="218" height="181"
alt="thing2"/>
</a>
</span>
This code is used for making an overlayed text transition for images in CSS, but if I want to validate this HTML code, it says I have a duplicate ID (here "first" and "desc") but I honestly wouldn't know how I can simplify this. I need to resize "first" with font-size, and "desc" too.
For example: the paragraph with id "first" has to be 14px, and the paragraph with "desc" has to be 12px.
Only those <"p"> (without the quote) elements can not be a child element in the "span" element.
I wouldn't know how to solve this, do you guys have a solution?
Thanks for the answers, I've already changed the ID's to a class.
Still, I wouldn't know how to resize class "first" and "desc" in two different font sizes, because it's apparently "not done" to put a block element in an inline element
EDIT 3: Solved! Using div's is the best solution, I'm using this for school (kind of a project) for making a gallery. With float: left; I can place those images next to eachother.
Thanks for the tips!
You've made several mistakes:
id attribute is of type #ID which by the HTML/SGML standard is defined to be unique, if you want to show duplicates you should use class attribute (this is part of why there's getElementsByClassName returning a list but getElementById returning only a single item in the JavaScript DOM API)
span is inline element, while p is a block element, HTML does not allow block element inside inline element. You should replace your span with div. You can use display: inline or display: inline-block if you want it to appear like inline level elements. Example of inline elements include: a, span, etc; example of block elements include: div, p, ul, li, etc.
That is due to the element type.
<p> tag is block level element
<span> tag is a inline element
Therefore encapsulating a block level element inside an inline level element is incorrect.
Because you can use classes.
Change:
1.
id="first" -- into --> class="first"
id="desc" -- into --> class="desc"
2.
You cannot put another tags into a span tag except <i>, <b>, <strong>, and <br /> ...
With <br/ > you can have 2 lines in your span tag
Just change it to:
<p class="first">
and
<p class="desc">
EDIT:
You best remove the spans completely. You don't need them. If you feel you need them to wrap block-level elements, you can do that with divs
i have :
<form id="commentform">
<p class="class1">
<p class="class2">
<p>
<input id="captcha_code"></input>
</p>
</form>
i want to style the "p" which does not have nor id neither class, i want to do it in a way that it does not style the other "p" tags.
my "p" has a child with id (#captcha_code). i guess, if i can style #captcha_code parent, it will not concern the others... but i do not know how to do it...
There is not currently a way to style an element based on whether or not it contains a particular child. The best way I can think to style the <p> in your case would be:
#commentform p:not([class]){
}
Closing your paragraphs isn't completely necessary, but it's always nicer to read. Additionally, you shouldn't add a closing tag for your input in HTML:
<form id="commentform">
<p class="class1"></p>
<p class="class2"></p>
<p>
<input id="captcha_code">
</p>
</form>
JSFiddle
To keep it simple, this can't be done.
Unlike the child selector >, There is no (and will probably never be) a parent < selector in css.
Have a look at this article to see why.
Try this:
p > input {
// style for that..
}
Using this, the style will be applied to the parent of the input.
Fiddle for this: http://jsfiddle.net/afzaal_ahmad_zeeshan/WyV7A/
I’m making a website that has a title with differently colored words and fonts. To do this, I’ve put each word in a different div id to change the text color. I’m not sure if there is a better way than this…
Anyway, the first half of the title (the colored part) is lower than the rest of the title. It shows up this way on Firefox and Chrome, but on Internet Explorer it looks just fine. I’m not sure why there is a difference, I’ve tried out different fonts, which sometimes lessens the problem, but never completely eliminates it. Of course, when I add padding to make it line up, it messes it up on Internet Explorer.
Here’s the link for the page: http://www.dinneronthespot.com/index2.html
The solution is, use span
<span id="dotPerfect">
<span id="color1">Dinner </span>
<span id="color2">On The </span>
<span id="color3">Spot </span>
</span >
<span id="dotPersonal">Personal Meal Service is perfect for...</span>
try this:
#topText > h1 > div {
display: inline;
}
add this code in the stylesheet
Use span instead of div for this kind of actions.
<h1>
<span id="color1">Dinner </span><span id="color2">On The </span><span id="color3">Spot </span>
</h1>
I’ve put each word in a different div id to change the text color.
I’m not sure if there is a better way than this…
It's better to use <span>-Tags
DIV-Tags do also have a default property "display:block" from user agent style, that's the reason why you have to set "float:left" (which is really ugly in this case).
Try this
<div id="dotPerfect">
<div id="color1">Dinner </div>
<div id="color2">On The </div>
<div id="color3">Spot </div>
<div id="dotPersonal">Personal Meal Service is perfect for...</div>
</div>
Move the div with id dotPersonal to div with id dotPerfect.
I have a simple form in a ASPX page that have a lot of <label> and <asp:TextBox> pairing that construct the outlay of the form.
I have a requirement to add a string behind the textbox to indicate that the field is compulsory. I'd tried adding either a <span>, a <em> or a <div> after the field but it will still display the message at the bottom of the textbox.
Any way for me to achieve this?
EDIT:
I mean right hand side of the textbox, not behind as in watermark. My Bad.
EDIT for sample code:
I'd tried all the suggestion but it is still not working, thinking whether it's my code issue or not. Below are my codes:
<label>Telephone No.</label>
<asp:TextBox ID="txtTelNo" runat="server"></asp:TextBox>
<span class="afterInput">test</span>
any pointers? Thanks.
EDIT for Answer
As it turns out the problem lies in the css property. The template that i used has all the input assigned with the display: block property, which makes anything after the <input> element to be pushed down.
After creating a custom css class with display: inline-block and assign to them appropriately, i manage to get the result that i wanted.
Many thanks for the answer provided, especially the :after attributes and the watermark attributes.
See http://jsfiddle.net/ekWG9/
.required:after{
content: "*";
color: red;
}
<label>A box</label><input type="text" value="Hello" /><span class="required"></span>
<!-- alternative HTML -->
<span class="required"><label>A box</label><input type="text" value="Hello" /></span>
Using the :after pseudo element selector allows you to take the literal content out of the markup (e.g. you don't have to repeat "*" over and over).
You can also use relative or absolute positioning to tweak the location of the content of the :after pseudo element. Example: http://jsfiddle.net/ekWG9/1/
By behind the textbox, seems you are talking of watermark text.
You could use the TextBoxWatermark from ajaxcontrol toolkit.
There are also several jQuery alternatives to implement it.
html5 also has browser support for watermarks:
<input name="q" placeholder="Go to a Website">
You could add an attribute to your control to that effect.
Use css for this purpose:
span.clsRequired {
float:left;
margin:2px 0 0 3px;
color:red;
}
And your span before text box looks like:
<span class="clsRequired ">*</span>
you should try something like this
<body>
<form id="form1">
<asp:TextBox ID="TextBox1" runat="server"/> <span>Required field</span>
</form>
</body>
I have the following (simplified) HTML structure
<td>
<DIV class="t-numerictextbox">
<DIV class="t-formatted-value">$0.00</DIV>
<INPUT id="MyObj_PropertyName class="t-input" name="MyObj.PropertyName">
</DIV>
<SPAN class="field-validation-error" data-valmsg-for="MyObj.PropertyName">blah blah</SPAN>
</td>
What I'd like to do is set the background color to the parent div.t-numerictextbox to be red IF the span element also exist. What is the css syntax to do this conditional select on an adjacent sibling?
BTW, I need this has to work for IE 8.
Background, if you're curious:
I have an asp.net MVC application and am using the Telerik MVC NumericTextBox Control. When I have ModelState validation errors, the MVC framework automatically inserts a class="input-validation-error" attribute on the element, and the stylesheet picks this class up to highlight the element in red. However, it doesn't work for the Telerik MVC Control (I assume because Telerik's javascript overwrites this).
Thanks!
It is possible to place the span before the div in the html, and then position it with css.
Then use a css adjacent sibling selector to select the div adjacent to the span.
Finally put a position absolute on the span, and give it a top:..px to get it below the div.
So you get the following:
span + div {
background-color:red;
}
<td>
<span class="field-validation-error" data-valmsg for="MyObj.PropertyName">blah blah</span>
<div class="t-numerictextbox">
<div class="t-formatted-value">$0.00</div>
<input id="MyObj_PropertyName" class="t-input" name="MyObj.PropertyName">
</div>
</td>
CSS cant do that. You could style the span if the div.t-numerictextbox exist, but not the other way around. This is a limitation of css, but will probably never change.