I have three words "Chapters in Book" "Journal Papers" "Conference Papers" in one line. I want my end result like "Chapters in" and Book below "Chapters in". Same way "Journal" but "Papers" below "Journal" and "Conference" and Papers below "Conference. Is it possible?
Please help me.
Here's one simple way:
<table>
<tr>
<td>Chapters in<br>Book</td>
<td>Journal<br>Papers</td>
<td>Conference<br>Papers</td>
</tr>
</table>
Here is a way using divs :
<div style="float:left; margin-right:20px">Chapters in<br/>book</div>
<div style="float:left; margin-right:20px">Journal<br/>Papers</div>
<div style="float:left;">Conference<br/>Papers</div>
jsFiddle demo : http://jsfiddle.net/esPRr/
<ul>
<li>Chapters in
<ul><li> book</li></ul>
</li>
</ul>
u may go with this
Related
I have a page that just has a title, header and 3 links.
Is it possible to have them next to each other with a small space in between? I have tried tables but it doesn't create a space, they are too close together. Or if anyone knows a better way to display them please let me know. I just require them to be next to each other.
Eg. Out Of Office--------Leave Application---------Extension List
Just a lot neater and better to look at.
My code:
body {
background-image: url("burg.jpg ");
}
<CENTER>
<h1> Alpine Motors Local Services </h1>
<HR>
<table border="0">
<td>
<h2>*Set Out Of Office*</h2 </td>
<td>
<h2><a href='leaveform/LeaveForm.php'>Leave Application*</a></h2 </td>
<td>
<h2><a href='VW Ext List/index.php'>Extension List Directory*</a>
</h2>
</td>
</table>
<HR>
</center>
Out Of Office Leave Application Extension List
This is the easiest way to achieve this with only html, but there are much better ways. Anyways, the output will be as follows
Out Of Office Leave Application Extension List
if you want more space between them, simply add more $emsp; between words
I have the following sample list. I want to make it collapsible. Please suggest.
<div class="section">
<h2> Accounts:<br />E-interest Certificates</h2>
<ul> <li>Housing Loan</li>
<li>Education Loan</li>
<li>Deposit Accounts</li>
</ul>
</div>
Please refer the below link. I think it's works for you.
jsfiddle.net/VNkM2/2/
Consider using bootstrap accordions, there are a few examples on this website.
I've got a list item which has these elements :
First item
Another list item
Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials
And I want them to look they do look above in this question all in one line or if the item gets too big break it nicely like this :
Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials big name which is aligning nicely
But instead my items look like this(screen shot) :
As you can see it doesn't look good. This is my html structure :
<ul class="something">
<li>
<div style="width:auto; display:inline-block;">
<span>This is where super long text goes text goes</span>
</div>
</li>
</ul>
ul and li don't have any style on them just those inherited from bootstrap css.
Which css do I use so that my list from the screen shot looks like the first one in this question?
<ul class="something">
<li>
This is where super long text goes text goes
</li>
</ul>
Just add
ul.something li div {vertical-align: top}
and it should work as you want it to.
If you want horizontal lists, use the following CSS:
li{display:inline;}
Put this on your stylesheet:
.something li div{display:inline;}
Try this: In your code display:inline-block is breaking the list. So try after removing that
<ul >
<li><div style="width:auto; "><span>First item</span></div></li>
<li><div style="width:auto;"><span>Another list item</span></div></li>
<li><div style="width:auto;"><span>Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials</span></div></li>
</ul>
I always wondering how can i take css seriously. I'm a very clean developer but my css seems to smell.
Just want to create the layout the extending thing will be made with javascript. Can somebody show me a solution in css how this can be accomplished. Forget the gradients and text color etc. Maybe need somebody in the future that will take this work for some credits.
<div class="FAQ">
<div class="FAQ-Header">
<div class="Help-Title-Label">Questions and Answers</div>
</div>
<div class="FAQ-Entry">
<div class="FAQ-Question">
<div class="FAQ-Question-Left">
<div class="FAQ-Question-State">+</div>
</div>
<div class="FAQ-Question-Right">
<div class="FAQ-Question-Txt">My Question Text</div>
</div>
</div>
<div class="FAQ-Answer">
<div class="FAQ-Answer-Left">
<div class="FAQ-Answer-Title">A:</div>
</div>
<div class="FAQ-Answer-Right">
<div class="FAQ-Answer-Txt">My Question Answer.</div>
</div>
</div>
</div>
<div class="FAQ-Footer"></div>
</div>
I wouldn't recreate the wheel just use the JqueryUI accordion. http://jqueryui.com/accordion/ takes the css out of the picture and adds the implementation in one step.
In general I agree with vikingben. Try to avoid reinventing the wheel.
If you do need to make your own accordion I recommend using a table for your HTML:
<table class="faq">
<thead>
<tr><th colspan="2">Questions and Answers</th></tr>
</thead>
<tbody>
<tr><th>-</th><td>My Question Text</td></tr>
<tr class="selected"><th>A:</th><td>My Question Answer.</td></tr>
<tr><th>+</th><td>My Question Text</td></tr>
</tbody>
</table>
You are modeling tabular data here and a table is a fine construct for modeling tabular data. If you use a table the CSS will be trivially easy. Example.
If you are concerned that you'll need to change the format later, restructure at that point. You shouldn't fret over a future HTML tag refactor unless you think it's likely to happen and the effort spent upfront to avoid it is worth it.
I am redesigning my website so that the right navigation categories -Occasion and Project Type - are side by side ([http://www.merrimentdesign.com][1]). However, when I implement the table, I can't seem to get them to align correctly. Here is my code:
I've taken some of your advice and div'd them up as opposed to using tables. But now, I'm wondering how to style them so that they are side by side. New with CSS so bear with me.
<div id="right">
<table class="categories">
<tr>
<td>
<img class="categories" src="<?php bloginfo('url'); ?>/images/sidebar.gif" alt="Let The Merriment Begin..." title="Let The Merriment Begin..." /></td>
</tr>
<tr>
<td class="categorycontent">
<br />
<div id = "occasion">
<h1>Occasion</h1>
<ul>
<?php wp_list_categories('show_count=1&title_li=&child_of=537'); ?>
</ul>
</div>
<div id = "ptype">
<h1>Project Type</h1>
<ul>
<?php wp_list_categories('show_count=1&title_li=&child_of=538'); ?>
</ul>
</div>
float:right; the div with a fixed width, float:left; the list elements within? I can't really tell what it is you are asking but from looking at your site, it seems that's what you want to do.
What's wrong with how it is displayed now? That is, what is the result you'd like to have?
If you'd go tableless, which some of the commenters suggested (and I do too), you'd solve this using divs instead. Have a look at for instance http://webdesign.about.com/od/css/a/aa102102a.htm to learn more about how to do that. Or google "tableless css" for even more.