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;
}
Related
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>.
http://fiddle.jshell.net/stealthpancakes/jvrqhxdk/5/
I tried to put text in div, but everything after Subtext_1 is displayed in block.
Upper_text_1
Subtext_1
Upper_text_2 Upper_text_3
<nav>
<ul>
<li><div>Upper_text_1</div><div>Subtext_1</div></li>
<li>Upper_text_2</li>
<li>Upper_text_3</li>
</ul>
</nav>
I want something like this:
http://i.imgur.com/rAe2i6H.png
That is because div is a block level tag, you can try sub instead
<nav>
<ul>
<li>Upper_text_1<br /><span>Subtext_1</span></li>
<li>Upper_text_2<br /><span>Subtext_2</span></li>
<li>Upper_text_3<br /><span>Subtext_3</span></li>
</ul>
</nav>
Try this :
<nav>
<ul>
<li><div>Upper_text_1<span>Subtext_1</span></div></li>
<li>Upper_text_2</li>
<li>Upper_text_3</li>
</ul>
</nav>
Div is a block level element. You want an inline element for this case. Try <em> tag (emphasis) or the more generic <span> tag instead. There is a lot of different semantic elements for different purposes - you should find one that fits your content type and use that.
See this page for a full list:
https://developer.mozilla.org/en/docs/Web/Guide/HTML/HTML5/HTML5_element_list#Text-level_semantics
I believe this is what you need, correct me if am wrong or mistaken.
<nav>
<ul>
<li><p>Upper_text_1<br/><sub>Subtext_1</sub></p></li>
<li><p>Upper_text_2</p></li>
<li><p>Upper_text_3</p></li>
</ul>
</nav>
Also add the below CSS code:
nav ul li{
margin: 5px;
display:inline;
}
li p
{
display:inline;
float:left;
margin: 10px;
}
span{
font-size:0.7em;
}
Check the fiddle: http://jsfiddle.net/fu66c6b4/
Hope this helps.
<nav>
<ul>
<li>Upper_text_1</li>
<sub>Subtext_1</sub>
<li>Upper_text_2</li>
<sub>Subtext_2</sub>
<li>Upper_text_3</li>
<sub>Subtext_3</sub>
</ul>
</nav>
I have a simple horizontal menu. On some of the menu headings, i would like to split them so the text starts on a new line.
HTML:
<ul class="tabs">
<li>
<div class="home">
Home
</div>
</li>
<li>
<div class="contact">
How to
Contact Us
</div>
</li>
<li>
<div class="products">
About Our
Products
</div>
</li>
</ul>
CSS:
.tabs ul {
list-style: none;
}
.tabs li {
display: inline-block;
}
So, what i am trying to do is, rather than appear as About Our Products.. Instead:
About Our
Products
Here's my fiddle: http://jsfiddle.net/oampz/dWbx5/
Ideally without using br
So like I said in the comment, you can maybe use max-width
HERE is a fiddle using it.
EDIT: I added it to the inline CSS, but you can move it into your CSS page.
Simply use a break <br />?
<div class="products">
About Our<br />Products
</div>
I also prefer to use a float: left; on the li instead of inline-block, it's easier (and more logic) to work with:
http://jsfiddle.net/2EDbr/
<div >
About Our
</div>
<div>
Products
</div>
similarly u can use for all
http://jsfiddle.net/dWbx5/4/
I have the following html as part of my layout page:-
<div class="top-nav nav-collapse">
<ul class="nav">
<li class="customTitle">custome Title </li>
<li>
</li></ul>
</div>
but the title was at the top of the page as follow:-
so I added a before the title text as follow:-
<div class="top-nav nav-collapse">
<ul class="nav">
<li class="customTitle"><br/>custome Title </li>
<li>
</li></ul>
</div>
and the title was shifted to the bottom as follow:-
but my question is wheatear adding the <br/>, is the right approach to follow to achieve my layout requirement ?
thnaks
Try adjusting the line-height of the .customTitle class. In particular, if you set line-height to be equal to the height, then your text will appear in the middle of the title bar.
try this one,
.customTitle
{
line-height:(somevalue)px;
}
You can Use padding-top: which sets the top padding (space) of an element
.nav .customTitle { padding:YYYpx; }
or
line-height: specifies the line height
.nav .customTitle { line-height:XXXpx; }
Never use<br/>'you can use padding or line height.
.customTitle
{
line-height:___px;
}
or
.customTitle
{
padding-top:___px;
}
Never use <br/> for styling!
You can use
li.customTitle { line-height:...; }
or
li.customTitle { padding:...px; }
you can youse style tag. And give padding....
<li class="customTitle"><span style="padding-top:10px">custome Title</span> </li>
you can adjust height according to your need....
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.