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.
Related
How do I fill the first 11 columns with a table, but then have the last 1 column be empty?
Right now my HTML is throwing my <h4> after my <div class='col-md-11' to the right of it just squishing it into the page
my HTML:
<nav class='page_element'>
<div class="table-responsive col-md-11">
<table>
</table>
</div>
<br>
<div class="table-responsive col-md-11">
<table>
</table>
</div>
<hr>
</nav>
<nav class='page_element'>
<div class="table-responsive col-md-11">
</div>
<h4><strong>Question 3</strong></h4>
....
This all got worked out in comments, but here's an answer for good measure.
The Bootstrap classes for col-x-n really aren't meant to be used as standalone classes. They work, sometimes, but, in part because they depend on a styling of float: left, they can have some funky behavior when paired with non-col-x-n classes. It's best, whenever possible, to wrap them in rows.
In that ideal situation, it would look something like this:
<nav class='page_element'>
<div class="row">
<div class="table-responsive col-md-11">
...
</div>
</div>
<h4><strong>Question 3</strong></h4>
</nav>
If that isn't, for one reason or another, a good option, I would suggest against using those classes at all. Particularly in a situation like this, they give you a lot of functionality that you don't need, or even want, like the ability to have two columns sit next to each other.
In that case, I would suggest (and I was about to, but then my computer battery died and you beat me to it) using a good-ol'-fashioned width: x%. It's always nice to bring that kind of design implementation out from your HTML and into a CSS file, but for the sake of simplicity, a style attribute does the same thing.
<nav class='page_element'>
<div class="table-responsive" style="width: 92%">
...
</div>
<h4><strong>Question 3</strong></h4>
</nav>
I picked 92% because that's approximately 11/12, which is what col-md-11 aims for.
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 have a web layout I have been working on today with one static column and one fluid column.
My problem is that the code suddenly broke (I'm not sure why) and it is now floating incorrectly.
My structure is this:
<div class="side-wrap">
<div class="side">
<div class="side-menu">
<ul>
<li class="brand">ProbabilityWolf</li>
<li class="active">Home<span>»</span></li>
<li>About<span>»</span></li>
<li>Contact<span>»</span></li>
</ul>
</div>
</div>
</div>
<div class="page-wrap">
<div class="page">
</div>
</div>
I am posting the CSS externally becuase there is quite a bit of it.
Here is my code (and the website): http://jsfiddle.net/QTbtA/
Since I am asking anyway, is there any way to improve my layout to make it work better? I am writing this out of my head, and I am a beginner when it comes to fluid layouts.
EDIT: I have now resolved the problem, although tips would be appreciated.
If I understand you right - it works for me in chrome if I remove margin-right:400px from your .side-wrap class.
Here is an updated jsfiddle. I hope it does what you want.
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
I'm using the jQueryUI accordion widget to provide the functionality I need. I'm not that familiar with IE tweaks so the solution escapes me.
If you visit my test site, try to expand the categories using a modern browser such as Firefox, Opera or Chrome. It works as intended.
However when using IE8, the category tree moves to the left a bit, and there is even some bigger separation between the categories themselves.
What can I do to fix this bad behavior?
(Note: Forget about IE6,7 support, it just has to work, not look pretty. )
remove width from categories class, tried in ie8 and problem disappear
You have poorly formed HTML5 markup. That might not be helping. The number of list elements you have is real long so I'll just give a snippit.
<div class="widget-box">
<h1>MENÚ PRODUCTOS</h1>
<div class="content">
<div class="categories">
<h3><img src="http://i.imgur.com/TThAk.gif" />CCTV<p class="subtext">Circuito cerrado de televisión </p></h3>
<div>
<ul>
<div class="categories">
<h3><img src="http://i.imgur.com/TThAk.gif" />Camaras<p class="subtext"></p></h3>
<div>
<ul>
<div class="categories">
<h3><a class="nochild" href="/Productos/Categoria/115">Camaras Infrarrojas</a><p class="subtext nochild"></p></h3>
<div>
<ul></ul>
</div>
</div>
<div class="categories">
<h3><a class="nochild" href="/Productos/Categoria/116">Profesional</a><p class="subtext nochild"></p></h3>
<div>
<ul></ul>
</div>
</div>
On the 7th and 11th line above, you have UL tags but then proceed to use DIV tags. UL tags can only have LI elements as a child per W3. http://www.w3.org/TR/2011/WD-html-markup-20110113/ul.html
I think your HTML could be closer to this:
<div class="widget-box">
<h1>MENÚ PRODUCTOS</h1>
<div class="content">
<ul>
<li>
<h3>CCTV <b>Circuito cerrado de televisión</b></h3>
<ul>
<li>
<h3>Camaras</h3>
<ul>
<li>Camaras Infrarrojas</li>
<li>Profesional</li>
</ul>
</li>
Though, there's probably better semantic use of tags possible than what I've got here.
You can then add a little padding to the left of your H3 > a tag and use the +/- gif as a background image that can be swapped with a CSS class. That will make the swap real straight forward in jQuery to simply toggle the clicked anchor class. That will help solve the previous bug I mentioned.
I hope that helps a little as Yucel seems to have a solution for the other issue, but there might be more going on with the HTML issues.
Cheers!