I've a html page with two span tag's which displays the same content but nested in a div with different class name:
<div class='class1'>
<span class='test-icon'>1</span>
</div>
<div class='class2'>
<span class='test-icon'>2</span>
</div>
Is there a way i can show only one <span> at a time based on the nested class, e.g. i've tried with the div.class1 span.test-icon {display: none}but it hides both.
You didn't close your span tags!
Here you are:
.class1 .test-icon{
display: none;
}
/*.class2 .test-icon{
display: none;
}*/
<div class='class1'>
<span class='test-icon'>Hola</span>
</div>
<div class='class2'>
<span class='test-icon'>Adios</span>
</div>
This seems to work as it should:
div.class1 span.test-icon {display:none;}
<div class='class1'>
<span class='test-icon'>Span 1</span>
</div>
<div class='class2'>
<span class='test-icon'>Span 2</span>
</div>
Related
I want to separate find an event and post an eventand put them on the same line below Events
Html:
<div class="lasvegas">
Events</div>
<div class="findanevent"> </div>
<div class="event_wrapper"><a href="https://adsler.co.uk/find-an-
event/"><span id="findanevent" class="event">Find an Event</span>.
</a>
<a href="https://adsler.co.uk/post-an-event/"><span id="postanevent"
class="event">Post an Event</span></a></div>
Page:https://adsler.co.uk/events/
Tried css .events {display: block;} didn't work
This worked in mobile but how to replicate in desktop?
.event {float :right;} .findanevent br {display: none;}
.event_wrapper {
text-align: center;
margin-top: 20px;
}
<div class="lasvegas" style="text-align: center">
Events
</div>
<div class="event_wrapper">
<div>
<span id="findanevent" class="event">Find an Event</span>
</div>
<div>
<span id="postanevent" class="event">Post an Event</span>
</div>
</div>
I have this HTML Markup:
<div style="display:table;">
<span style="display:table-cell; vertical-align:middle;"></span>
<a style="display:table-cell;"><span></span></a>
<span style="display:table-cell; vertical-align:middle;"></span>
</div>
All what I want is that my last span should be shown on a new line.
To wrap it on a new line, set it as a p tag:
<div style="display:table;">
<span style="display:table-cell; vertical-align:middle;"></span>
<a style="display:table-cell;"><span></span></a>
<p style="display:table-cell; vertical-align:middle;"></p>
</div
Alternatively use a br tag:
<div style="display:table;">
<span style="display:table-cell; vertical-align:middle;"></span>
<a style="display:table-cell;"><span></span></a>
<br>
<span style="display:table-cell; vertical-align:middle;"></span>
</div
Please try this code.And remove display:table-cell from the parent div.
<div>
<span style="display:table-cell; vertical-align:middle;">First</span>
<a style="display:table-cell;"><span>Second span</span></a>
<br />
<span style="display:table-cell; vertical-align:middle;">child</span>
</div>
you use display:table so all its member are display in cell
so you want last span in new line you will remove table from div and simply display it
<div>
<span style="display:table-cell; vertical-align:middle;">1</span>
<a style="display:table-cell;"><span>2</span></a>
<br />
<span style="display:table-cell; vertical-align:middle;">3</span>
</div>
If you absolutely have to use those inline-styles, you can still target the last span with css but you have to use !important.
div > span:last-of-type {
display:table-row!important;
}
Fiddle
I created piece of code. In span class mean-head increase horizontally if the text of the span increase. I want to fix it's width for like 30 characters. After that text so go to new line.
EXAMPLE FIEDLE
<span class="top-head"> Recommended URLs </span>
<div class="c1">
<div class="item">
<div class="image">
<img class="media-object" src="http://deathandtaxesmag.wpengine.netdna-cdn.com/wp-content/uploads/2014/02/Screen-Shot-2014-02-27-at-12.39.17-PM.png" >
</div>
<div class="descriptionContainer">
<span class="main-head"> Mashable - Business </span>
<span class="min-head">Title of link Title of link Title of link Title of link </span>
<span class="subcont">
<span class="fa fa-retweet"> RT 100+ | </span>
<span class="fa fa-twitter"> Tweet 100+</span>
</span>
</div>
</div>
</div>
Give fixed width for span class and add display block
.min-head { width:150px; display:block}
Will this help you?
span.min-head {
display: block;
font-size: 9px;
margin-top: 1px;
max-width: 130px;
white-space: pre-wrap;
}
Check the fiddle HERE
All,
I have the following code:
http://jsfiddle.net/k2AMG/7/
I am trying to avoid fixed widths in the CSS and align the divs in this fashion, but am not able to do so:
Your name Textbox
Please check the name
Work email Textbox
Email should have a valid format
Job title Textbox
Job title should have only alphabets
Any help is appreciated. Thanks
Try it like this:
http://jsfiddle.net/andresilich/k2AMG/11/
::Edit:: fixed demo
::Edit 2:: added CSS and HTML to post for future reference
CSS
.data_item{
margin-bottom: 20px;
display: block;
}
label
{
width: 100px;
display:inline-block;
}
.left {
display:inline-block;
margin-right:5px;
}
.right {
display:inline-block;
vertical-align:top;
}
.right span span {
display:list-item;
list-style-type:none;
}
Clarification: created two classes to separate the two sides, .left and .right, and added a style to the span of the .instructions div to display as a list-item (so they can displace like a regular html list would, why? Because it is a clean, responsive drop that displaces naturally without the need to add margin or padding that might displace with any other element around and thus less maintenance.).
HTML
<div class="data_item">
<div class="left">
<label> Your name </label>
</div>
<div class="right">
<span>
<input type="text" />
<span class="instructions">Please check the name</span>
</span>
</div>
</div>
<div class="data_item">
<div class="left">
<label> Work email </label>
</div>
<div class="right">
<span class="item">
<input type="text" />
<span class="instructions">Email should have a valid format</span>
</span>
</div>
</div>
<div class="data_item">
<div class="left">
<label> Job title </label>
</div>
<div class="right">
<span class="item">
<input type="text" />
<span class="instructions">Job title should have only alphabets</span>
</span>
</div>
</div>
Try this: http://jsfiddle.net/k2AMG/9/
I've got the following...
<div id="nav-above" class="navigation">
<div class="nav-previous"><span class="meta-nav">«</span> title</div>
<div class="nav-next">title <span class="meta-nav">»</span></div>
</div><!– #nav-above –>
using external CSS alone is it possible to force all of that to remain on just one line?
Try this: http://jsfiddle.net/dT49F/
HTML:
<div class="container">
<div id="nav-above" class="navigation">
<div class="nav-previous">
<a href="link" rel="prev">
<span class="meta-nav">«</span>
much much longer link title here and here and here
</a>
</div>
<div class="nav-next">
<a href="link" rel="next">
much much longer link title here and here and here
<span class="meta-nav">»</span>
</a>
</div>
</div>
</div>
CSS:
.container div {
display: inline;
white-space: nowrap;
}
Any reason for the inner DIVs? I'd just drop them - and if you need the classes, assign them directly to the links:
<div id="nav-above" class="navigation">
<span class="meta-nav">«</span> title
title <span class="meta-nav">»</span>
</div><!– #nav-above –>
div[class^=nav-] {
float: left;
}
That should work. Please note my snippet is using CSS3 selectors, so it might not work in less-advanced browsers. Provide the same class to both divs, and then you can use normal selectors.
UPDATE:
This won't work in IE6, unless you do something like this:
<div id="nav-above" class="navigation">
<div class="nav-previous navigation-links"><span class="meta-nav">«</span> title</div>
<div class="nav-next navigation-links">title <span class="meta-nav">»</span></div>
</div><!– #nav-above –>
(Notice the new class .navigation-links)
And then just change the css selector:
div.navigation-links {
float: left;
}