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/
Related
I'm using :target in html and I code something like that:
<div class="1">
<div>
<ul>
link to part 2
</ul>
</div>
<div class="ex">
<ul id="2">
<p>hi</p>
</ul>
</div>
and I've done this in css:
.ex ul {
display: none;
}
.ex ul:target {
display: block;
}
I need to make so that when you click on the link (in this case the words 'link to part 2') the #2 ul show, (alredy done this) and the ul whit the link disappears, how can I do?
One way this can be accomplished is with JavaScript. I added the id remove-on-click to your link which you want removed, and then created a JavaScript event listener to alter the style of this item when it is clicked. You can see the code working here.
<div class="1">
<ul>
link to part 2
</ul>
</div>
<div class="ex">
<ul id="2">
<p>hi</p>
</ul>
</div>
<script>
document.getElementById('remove-on-click').addEventListener('click',function(){
this.style.display = "none";
})
</script>
I did not edit any of your other code, but keep in mind that ul tag should be used with li descendants. If you do not have a li descendant, use another tag, such as a div. Also, you may want to become more familiar with proper naming of class and id attributes, especially in regards to not beginning them with a digit:
https://www.w3.org/TR/CSS2/syndata.html#characters
What are valid values for the id attribute in HTML?
The key consideration to note is that you must write the markup in reverse order.
This is because CSS selectors can only select:
an element itself (or a pseudo-element)
an element's descendant elements
an element's subsequent siblings
It cannot select an ancestor element or (in this scenario) a previous sibling.
Once you have written the markup in reverse order, you can achieve the effect you want using CSS.
Working Example:
#part2,
#part3 {
display: none;
}
#part2:target,
#part3:target {
display: block;
}
#part2:target ~ [id^="part"],
#part3:target ~ [id^="part"] {
display: none;
}
<div id="part3">
<p>This is Part 3.</p>
</div>
<div id="part2">
<p>This is Part 2.</p>
<ul>
<li>Link to Part 3</li>
</ul>
</div>
<div id="part1">
<p>This is Part 1.</p>
<ul>
<li>Link to Part 2</li>
</ul>
</div>
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 have a <ul> with a couple of <li>. In my css with li { display: inline; } I put the li elements in a horizontal order. The li elements contain a picutre and text. But now the picture and the text are also in horizontal order, but I want them to be under neeth each other. How can I do that?
<ul>
<li>
<img src="img/a.png" />
A
</li>
<li>
<img src="img/b.png" />
B
</li>
<li>
<img src="img/c.png"/>
C
</li>
</ul>
You will need to change your CSS as follows:
li {
display: inline-block;
}
li img {
display: block;
}
Here is a quick demo: http://codepen.io/anon/pen/VLLoEZ
This is not a bug but a normal behaviour. <img> tag is by default inline. You could solve this non-issue by either wrapping either your image or, better, your text into a block element. For example, a <p>tag for your text :
<ul>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
</ul>
jsFiddle
Note I use display:inline-block on li elements, taking advantage of both inline (putting things side-by-side, alignment,...) and block (fixed size, top/bottom margins) properties. Although it has a strange but easilly fixed "feature/issue", this is most of the time the best way to put elements side-by-side. display: inline or floating elements are also used but come with some other issues sometimes a bit trickier to be fixed.
Guys can anyone tell me why I can't remove the list-style-type from the <ul> below using the specificity defined below the html.
<footer><!-- this is where the footer starts-->
<div class="container_12">
<div class="grid_2">
<ul>
<li>
<strong>
test
</strong>
</li>
<li>
Home
</li>
<li>
Why
</li>
<li>
Get Started
</li>
<li>
Customers
</li>
<li>
Careers
</li>
</ul>
footer ul {
list-style-type:none;
margin:0px;
padding: 0px;
}
I've also tried footer div div ul {} but I can't seem to address the ul element.
Css class needs to be called .footer ul {...}, and footer has to actually use it: <footer class="footer"> - because in IE6, and any other browser that doesn't understand HTML5 tags, <footer> is renamed to <div> by whichever solution you are using, so the css selector would not apply any longer...
UPDATE: check in any browser developer tools if anything is overriding your style, or try forcing it with list-style-type: none !important;
Your example definitely references the Unordered List without issue, both examples in fact. Perhaps you have other conflicting styles which are giving you the issue?
To see it working click here. Please notice that I have put a red border around it to help make it clearer.
I want to make my menu and image appear on the same line but sadly that doesn't seem to be happening. Could anyone tell me why and how I would solve my problem? I've got the following image and menu...
HTML
<div id="header">
<img alt="" height="67" src="Aidanlogo.png" width="400" />
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
<br style="clear: left" />
</div>
</div>
Menu CSS: http://pastebin.com/drMD7gwg
Header CSS
#header {
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
try this
#menu ul li { display: inline; }
Divs are block elements, so by default it will always appear on a separate line.
You could make the image a block and float it left (display:block; float:left;)
You could make your div display:inline-block, or float:right; it, assuming there's room in the parent (700px).
DIV is a block element, so it won't display on the same line as anything else unless you change it's inline property:
#myslidemenu { display:inline; }
Also note that you'll have to modify the <ul> styles to display the <li> tags on a single line. See this link for more on that part.
edit I'm not sure what the jQuery slide menu does to the <div> or <ul> styles - you might have a look in Firebug after it's rendered.