I have something like this:
<ul>
<li>
<div>
<div style="display:inline">
<a><span class="ui-icon ui-icon-circle-plus floatleft "></span></a>
</div>
<input type="checkbox"> <label>good</label>
</div>
</li>
</ul>
the bullet goes above the span on IE8, I would like to make it stay before the span just like in Mozilla, anybody knows how ?
It looks to me as if you have a <div> without an inline style inside the <li> and outside the <div style='display:inline'>
That being so, I would expect the outer div to be formatted as a block rather than being on the same line as the bullet. I'm rather surprised that those other browsers do put it on the same line.
Related
whicth tag are allowed inside the li tag?
div?
img?
span?
a (href)?
I think div is not allowed. But img, span and a are allowed. Am I right?
Every tag is allowed. I tested in Firefox: img, span, a, even the div.
You actually can put pretty much any of them inside a li. But different person has different opinion. Some will disagree with putting a div inside a list item, but according to the W3C validator you actually can do that. But still, if you need to check or need to use nested elements, you can use W3C validator or any other tools available online.
<ul>
<li>
<span>Some text</span>
</li>
<li>
<p>link</p>
</li>
<li>
<img width="150" height="150" src="https://images.unsplash.com/photo-1633114127451-558041183c3b?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="alt" />
</li>
<li>
<div>
<input type = "text" />
</div>
</li>
</ul>
Looking at this simple code why the textarea is pushed 10/15 pixel down?
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
How can I fix this via css? I wish to have the textarea inline with the list.
div is a block element
So either you use display:inline-block ( or inline, depending on what you want ) on the div
div {
display:inline-block
}
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
Either you use float:left . But i suggest you don't do that. Using float left will get the element out of the normal flow
Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack.
Using float:lett
Try this, it works fine :
<ul>
<li>
<div style = 'float:left' >
<textarea></textarea>
</div>
</li>
</ul>
HTML:
<ul>
<li>
<div class="text-div">
<textarea></textarea>
</div>
</li>
</ul>
CSS:
.text-div{
float: left;
}
Hope that helps.
it's because you have used list-style. remove it through css
ul{
list-style:none;
}
So, when I make hyperlinks by default it starts a new line. I have tried the li tag, I have also tried the div tag. Here is my code
<h1>Home</h1>
<h1>Staff</h1>
Give your links a display of "inline-block" and they will appear next to each other. You can then add some padding or margin to give them some space.
You can achieve the same result by using the li tag and giving them the display:inline-block style.
<ul>
<li style="display:inline-block;">
<h1>Home</h1>
</li>
<li style="display:inline-block;">
<h1>Staff</h1>
</li>
</ul>
By the way, you should not be using two or more "h1" headings in the same page and you should avoid using inline styles. Keep them in an external CSS file.
Here's your original code using the display:inline-block style and with some spacing:
<h1>Home</h1>
<h1>Staff</h1>
According to this baller resource, the <span> tag is used to group inline-elements in a document: http://www.w3schools.com/tags/tag_span.asp
<span>
<a href="index.html" style="text-decoration : none; color : #00FFFF;">
<h1>Home</h1>
</a>
<a href="staff.html" style="text-decoration : none; color : #00FFFF;">
<h1>Staff</h1>
</a>
</span>
During my research for this, I stumble upon this thread, but since it is 2 years old, Im wondering if there's a recent way of targeting an element that is right before another.
For example:
<span> Element Before Div </span>
<div id="thediv"> Target Span From Here Using #thediv </div>
Is there any CSS that can accomplish this? I'm aware of the usage of jQuery, I rather not use it if this is possible with plain CSS.
Thank you in advance.
EDIT: Example to clarify usage.
<ul>
<li>
<span>SubTitle Span</span>
<div class="subdiv">Some content after SubTitle</div>
</li>
<li>
<span>Item Description</span>
<div>Item Content</div>
</li>
<li>
<span>Item Description</span>
<div>Item Content</div>
</li>
<li>
<span>SubTitle Span</span>
<div class="subdiv">Some content after SubTitle</div>
</li>
<li>
<span>Item Description</span>
<div>Item Content</div>
</li>
<li>
<span>Item Description</span>
<div>Item Content</div>
</li>
<li>
<span>SubTitle Span</span>
<div class="subdiv">Some content after SubTitle</div>
</li>
<li>
<span>Item Description</span>
<div>Item Content</div>
</li>
</ul>
No this is not possible using CSS alone
if your HTML had been structured like below then yes CSS can be used
<div id="thediv"> Target Span From Here Using #thediv </div>
<span> Element Before Div </span>
for e.g to change the color of the span using the div, you would write as
#thediv + span {
color:blue;
}
this is called adjacent sibling selector.
There is no way in CSS to target a previous element ,but a following element can be targeted like shown above.
There is indeed actually, no way to select that span.
Level 4 propose this :
!span li > div.subdiv {/* would style span if
inside li that has a
div.subdiv
as direct child */}
so we could do as well: !span li > div.subdiv:hover {}.
http://www.w3.org/TR/2013/WD-selectors4-20130502/#subject (maybe i missunderstands subtilities of english) <edit> actually i missed this : http://dev.w3.org/csswg/selectors4/#profiles </edit>
Today,(Apr. 14) there is no way to directly style that span via CSS ,
but CSS can offer some turn around to hide it or change background color for instance.
like this silly test :) http://codepen.io/anon/pen/kxwtB/ over the div and believe that span receive some CSS styling.
Actually i was curious too of what kind of rules you wanted to see modified for the span .
Having a brain freeze...
I want to do this :
<li>
<a>
<p>text</p>
<p class="x">text</p>
</a>
</li>
I know I can't. So how do I ? (No JS/jQuery etc)
Change <p> to some inline element (e.g. <span>) and give li a span a style of display: block;, I guess.
<li>
<a>
<span>text</span>
<span class="x">text</span>
</a>
</li>
You could do that in HTML(5). But support in some browsers (Firefox) is flakey. See: http://html5doctor.com/block-level-links-in-html-5/
The best way is to use naturally inline elements such as <span>s instead of block level elements inside the anchor.
This validates as XHTML 1.1:
<li>
<p>text</p>
<p class="x">text</p>
</li>
I'm assuming what you're getting at is you want the entire block of text in the list item, and maybe the entire list item, to be clickable?
First, a paragraph tag is a block level item, but an anchor tag is inherently an inline element. You can't place that inside an anchor tag, it's not semantically correct and it won't validate. Do something like this instead:
<ul class="myList">
<li>
<a href="#">
<strong>This is the title</strong>
<span>This is the link text</span>
</a>
</li>
</ul>
Assuming you want the entire area of the list item to be clickable, you can apply display:block; to the anchor tag using css. Note that if you've assigned a different height to the list item and want everything to be clickable, you'll need to set the height on the tag as well.
.myList a { display:block; }
And if you want the strong tag to break a line (your "main text" in the link)...
.myList a strong { display:block;}
Hope that helps!