I am trying to add a div tag to show after the <ul>. But the div keeps showing alongside the list items.
I have tried putting the <ul> to block display, and even wrapping it with a block level div tag, but the other div element still shows along side. Can anyone please help me fix this? Thanks!
<section id="sub_nav_wrapper">
<div>
<ul class="unordered_style_nav">
<li class="sub_nav_list_item"> Job Overview </li>
<li class="sub_nav_list_item"> Job Description </li>
</ul>
</div>
<div class="job_info_container">
This element should show below the ul class above
</div>
I think you should use
#elementId {
clear: both;
}
to achieve the goal.
You could change the css of one or the other to dominate the row or just put a <br> tag underneath the first <div>.
Related
please see html validator error output in screenshot.
ul{
display: inline;
}
<ul>hi
<li>
1234
</li>
<li>
5678
</li>
</ul>
<ul>hello
<li>
abcdef
</li>
<li>
ghijkl
</li>
</ul>
question:the ul items(hi,hello) in above css code moved a couple of places to the right if I used the css display:inline tag . But They do not get moved if I execute with a css ul tag having no display:inline value..please explain. and second question why have the circle markers disappeared ?
li elements have a display value equal to list-item and following the specification they generate a block box so you end having a block element inside and inline element.
The above behavior is also defined in the specification and leads to the result you get. More detail: Is it wrong to change a block element to inline with CSS if it contains another block element?
why have the circle markers disappeared ?
It's still there but hidden on the left because the default behavior is list-style-position: outside
ul{
display: inline;
}
li {
margin-left: 20px;
}
<ul>hi
<li>
1234
</li>
<li>
5678
</li>
</ul>
<ul>hello
<li>
abcdef
</li>
<li>
ghijkl
</li>
</ul>
ul gets a default padding-left applied from the user agent stylesheet, 40px or something.
With an inline element, padding-left works only before the first line of content, and padding-right only after the last line.
Make it inline-block instead, if you want that padding applied to the whole element.
Because the inline value of the display property is something that makes the elements inside to behaves inline.
That means you have not much options to position and move them.
The inline value is most useful for a text paragraphs to wrap theentire paragraph. Where you would like the text to position in a couple of lines one below another.
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;
}
I am using jQuery Mobile to create my mobile application. I have a plus button which appears like this:
The issue is that it is down, touching the list item. How do I make the button positioned midway between the list item and the horizontal line above it? I attempted to use absolute positioning using css, which did not work.
Here is my code:
<span style="float:left;color:black;font-weight:bold;font-size:24px"><label for="newpostbutton">Posts</label></span>
<span style="float:right;"></span>
<br>
<ul data-role="listview" data-inset="true" id="threads">
<li>No conversations :(</li>
</ul>
Any help would be appreciated :D
nshah, you can always give your button a negative margin-top and play around with the numbers. But it looks like there is probably more going on with the default button styles. I would look there first.
margin-top: -15px;
The floated elements needed to be cleared.
div {
overflow:hidden;
}
<div>
<span style="float:left;color:black;font-weight:bold;font-size:24px"><label for="newpostbutton">Posts</label></span> <span style="float:right;"></span>
</div>
<ul data-role="listview" data-inset="true" id="threads">
<li>No conversations :(
</li>
</ul>
http://jsfiddle.net/g9UM4/2/
So, I have the following HTML structure:
<div id="category-filter">
<div class="column full">
<ul class="float-clear" id="category-filter">
<li>All Categories</li>
<li>Educator Workshops</li>
<li>Exhibitions</li>
<li>Family Activities</li>
<li>Films</li>
<li>Lectures + Gallery Talks</li>
<li>Music</li>
<li>Other Activities</li>
<li>Tours</li>
<li>Workshops</li>
</ul>
</div>
</div>
Which, after styling produces the following in Firefox:
However, in Webkit, the link text wraps:
The LI tags are floated left and should grow with the size of anchor inside them and then wrap as needed inside the container which has a width set. Any ideas why the links are wrapping in Webkit?
Add white-space:nowrap; to the links to avoid break line.
And <ul> element must only contain <li>.
It's guesswork without seeing your CSS, but try this:
#category-filter a {
white-space: nowrap
}
That should stop the text from wrapping.
And as already mentioned, it's invalid to have a div as a direct child of a ul. You should change it to <li class="column full">. You might also have to adjust some of the selectors in your CSS.
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!