I want css-menu width would be 100% of parent element.
But, sometimes menu has 4 items, sometimes it has 5 items and I want menu would be independent of this.
Look images. 1 & 3 are ok. Now menu has 100% width, ok for 4 items:
Now too, but -_-:
Now all fine for 5 items too (I edited css manualy):
I tried to do this next way:
1) I check if user is authorised
2) I calculate li width (perl),
2) I try to change li width parameter (js)
Perl
if ($authorised eq true)
{
$width = 100/5;
}
else
{
$width = 100/4;
}
$widthString = $width."%";
JavaScript code in perl print( java here );
<SCRIPT LANGUAGE="JavaScript">
var li = this.document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
var status = li[i].style.width="'.$widthString.'";
console.log(li[i]);
}
</SCRIPT>
css for li: width: 25%; float: left;
css for ul: width: 100%;
But it not worked for me.
Can anybody explain me why? And for "css" tag followers. I had doubts. Perhaps it is easier to do via css I just do not know.
Thank you.
p.s.: sorry about non-english menu-items, but it's not neccessary for solving problem :)
You can use flexbox! Its part of CSS3 and it's supported in all major browsers!
Working example: http://jsfiddle.net/976eh/3/
the HTML:
<nav>
<a>Hello</a>
<a>World</a>
<a>Hello</a>
<a>World</a>
</nav>
the CSS:
nav {
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
nav>a {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
background: #dadada
}
nav>a:nth-child(odd) {
background: #e5e5e5
}
This is best solved inside the CSS. Consider a table with n columns:
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
...
<td> n </td>
</tr>
</table>
You can provide the table with a maximum width. Then with table-layout: fixed, the horizontal space is divided equally among all cells. See the jsfiddle here – insert more cells into the row and see how the space is divided.
But do not (mis-)use tables for this! Instead, you can use the CSS display property to assign other elements the behavior of the table, the table-row and the table-cell. Semantic markup is important, after all.
One caveat with this: You should also make sure that you don't insert so many cells that their content overflows. Set minimum widths and control the overflow to guard against this. However, the Flexbox model has better ways to deal with this (e.g. starting another row). See devian's answer for that.
A note on your Perl code: $authorized eq true does not make any sense: Perl does not have a true keyword. This will therefore fail to compile if you put use strict; use warnings; at the top of each Perl source file – consider using this safety net in the future. To test whether a variable contains a true value, simply use it in a condition: if ($authorized) { ... }. To test whether it actually contains the string true, use quotes: if ($authorized eq "true") { ... } (this is how your code is currently interpreted by the compiler).
Make sure your li element is getting the correct width percentage for the quantity of elements you are showing.
If you have 5 elements the li width must be 20% (Example #1). If it's taking 25% instead, it creates an overflow and you end up with image #2 (Example #2).
So, your error must be in your perl code. When you check if it's authorized...
Hope this helps.
Related
I have a table that is 650px wide and I add words to this table...each word is in its own cell.
However if I have too many words then it expands the table.
What I want to do is allow it to limit the X and auto go to a new row or under the current content so it doesn't resize the table.
I thought about calculating the width of each cell using JS..but it says each is 0px as the cells are created programmatically using JS.
Perhaps a table is not the best solution for you, since it doesn't have this functionality.
You could try simple <div>'s, they will wrap, but you could also have a look at the newer, and more advanced, Flexbox. Have a look at the Wrapping section on that page.
I got it work by using
#tGrammar {
display: block;
}
#tGrammar td {
display: inline-block;
}
in CSS
and in JS where is tChoicesMain is table
tChoicesMain.style.tableLayout = "fixed";
tChoicesMain.style.maxWidth = "650px";
tChoicesMain.setAttribute("id", "tGrammar");
Good day... yes I am a nOOb. So I apologize for my nOObness right off the top. I have searched this site and many like it for a week without any resolution. I believe my problem is unique.
I have a site with about 10 pages that I am creating that have lots and lots of tables on them. Most of the tables are formatted the same way so I immediately went to CSS for my needs.
So now I am trying to understand CSS and selectors and how to combine them etc.
Here is my dilemma. I have created a tag style for the <td> tag which works great on about 95% of everything I am doing. I have also created an "override" class for it for those instances when I want to align left and indent the <td>:
TD {
text-align: center;
vertical-align: middle;
all other rules;}
td.overide_l {
text-align: left;
vertical-align: middle;
padding-left: 1em;
all other rules;}
My problem comes from a piece of corporate controlled javascript that creates a lefthand nav menu. Apparently, there are td's in that code that is affected by my rule. The problem is that the javascript is not something that I can make changes to. It is a corporate script saved on a corporate site, yet needs to be on each of my pages.
If I change the <td> style to left align the script will align to the left. If I remove the <td> tag all together it will align to the left. If I make the <td> style center aligned like I want it, the script center aligns the left nav and I can't override it.
I have tried a thousand things. I tried to put the script in a separate table with the class override in it, I tried placing it in a separate td that surrounded it, I have put the class="overide_l" class in a <span>.
Lastly, I tried creating <div>'s that had id's associated with them which worked, but then my Class="overide_l" (and a plethora of other class styles I had created), didn't work within the new divs anymore...
div#content-section td {
text-align: center;
vertical-align: middle;}
Ultimately what I want to do is leave the tag style like it is at the top of this post and simply create a <div> or something that will shut off the <td> tag style for that one piece of code. Is this even possible?
Can you please help me!
Can't you just do the same thing you did with your td selector with your override class?
#content-section td.overide_l {
text-align: left;
vertical-align: middle;
padding-left: 1em;
}
The problem is specificity:
100 points for an ID selector
10 points for a class selector
1 for a tag selector
If you add up the selectors, you get the selector that will take precedence.
In your case:
td.overide_l = 11
div#content-section td = 102
So the second wins. Changing td.overide_l to #content-section td.overide_l will make it 111.
What you need to do here is be more specific in your css rules. Putting a rule on all elements (td) is a bad idea for exactly the reason you are illustrating here. Have the tables in your code have a different class so that your CSS rules know the difference between those and the nav tds. Also, if you guys are using tables for so much, you guys are going to have a bad time.
I have problems to place N divs side by side with full browser width
I want like this. when you resize browser space between divs must stay same and divs must resize in width.
|div| |div| |div|
| div | | div | | div |
One solution would be to use percentages:
div.mydiv {
width: 33%;
display: inline-block;
}
If you do this, be careful with padding: that adds to a div's width, possibly causing overflow. This can be fixed if you support only IE >=8, by doing
div.mydiv {
width: 33%;
display: inline-block;
-moz-box-sizing: border-box; /* OMG why doesn't Firefox support this yet */
-webkit-box-sizing: border-box; /* Safari below 5.1, including 5 */
box-sizing: border-box;
}
And if you do that, there's even one more possible problem: space between the divs. This occurs because you have empty text nodes in between them, and display: inline-block thinks that's OK: elements laid out in an inline-type fashion can be interspersed with blank text nodes. To fix this, there's a pretty bad hack:
div.containerOfAllTheDivs {
font-size: 0;
}
div.mydiv {
font-size: 12px; /* or whatever */
/* plus the above stuff */
}
This makes it so that any text (e.g. whitespace) that appears inside the container is zero-sized, unless it appears inside the divs you are stacking next to each other, in which case it reverts back to 12px. As I said, a pretty bad hack. But it works.
The more general solution is the new flexbox proposal, but that is still under heavy revision: there are two outdated versions implemented in various browsers, with the latest one not being implemented in any as of today (2012-05-15). If you know your exact environment, though, this might be a good solution.
For two divs, just do (Demo):
div
{
width: 49%;
float: left;
}
For three, do (Demo):
div
{
width: 33%;
float: left;
}
If you need an arbitrary number of divs, you have two options:
If the number is determined by the server (value is coming from a database or a session or whatever), you can generate appropriate CSS on the server side. This solution is preferable.
If not, you need JavaScript to calculate the viewport's width, and assign width values accordingly to your divs.
The same thing could be achieved using CSS3 Flexible Box Style Layout with very less coding. Well it depends upon the browser you are planning to support.
Now Flexible box layout is supported only in webkit engines & mozilla
Putting this as an answer because I guess it's valid and may serve you well. 960.gs and bootstrap both provide scaffolding for layouts identical to what you want. 960.gs is just layout but if bootstrap suits you, you can customize it on their site to just get the bits that deal with layout. One caveat for bootstrap, I haven't found a way to remove the left margin on the div columns. 960.gs includes alpha and omega classes that set margin-left and margin-right to 0 respectivley. I had to add these to bootstrap when I used it.
Using one of those scaffoldings will save you a lot of time and effort. If you have to hand your code off to somebody else later or even just have somebody else working on it with you, using a scaffolding will help them work with your code too.
My situation -
Within a 4x4 table grid (16 cells total), I'm trying to display up to 7 divs in their own individual cell (whichever div is visible, have it be in its own cell - 1 div per cell).
What I need/My Question -
If divs "Test1", "Test3", "Test6" fade in, then have these divs display on a 3 different cells,..if 6 divs come in, 6 different cells, etc..
Note: The numbers appended after "Test" (Test0, Test1, etc.) are all being auto-generated and is actually 18 digits long (e.g., 123456789012345678), so I will never know the actual number. I was thinking of using the below function to find all the div id's containing "Test", place those results in the an array, and then somehow pull each result and append it to a random cell. But I'm not exactly sure how to go about it... :
$("div[id^='Test']").each(function(n, i) {
var id = this.id;
});
My main question - How can I display currently visible divs on their own cell?
What I have tried -
My work in progress : http://jsfiddle.net/xVDm9/
Edit: I commented out the black reappearing div out of the code as this might have been confusing and did not really make a case.
I'm not quite sure what you're trying to build. Hoewever, wouldn't it be easier to give all tablecells a div? And then fade those in and out? It would be faster than manipulating the DOM each time you want to show/hide a div.
This way, you could use the :visible selector to test if the selected div is already visible. If it is, fadeIn the next one.
Also, in some browsers, dynamically appending/mutating the table itself causes issues. Besides that, I'd recommend not using a table, but the following structure (it's easier to traverse and more scalable):
<div style="width: 400px;">
<div class="tcell">
<div id="yourUniqueID">
</div>
</div>
<!-- ...repeat the div.tcell as often as you need -->
</div>
and style it like so:
.tcell{
float: left;
height: 100px;
width: 33.33%; /* that's for 3 on a row, use whatever value you need */
}
.tcell > div{
display: none; /* hide by default, since you'll be using jQuery to fadeIn/Out */
width: 100%;
height: 100%;
background: #000;
}
I have a page with 3 columns of links at the bottom. Each column is put into a div and all three divs are wrapped into a big div that is centered on the page. Is this something that is better suited to a table or is a table the wrong element for the job?
You can also use <ul> & <li> for this.
#horizontal {
width: 100%;
background: #eee;
float: left;
}
#horizontal ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}
This will create horizontal columns using li elements, and then you can stuff the HTML to create individual links in each li.
The Rule of Thumb is:
Use Divs for layout, tables for tabular data.
On a side note, check out etymology of the term Rule of Thumb, quite humorous.
the question you want to ask yourself is, are your links a part of any tabular data?
if yes, tables are your choice. If no, then you should use divs.
Its important to use the semantically correect element to create a page, although other elements may result in the same effect, possibly with less effort.
As for your links, it seems they are not part of a table. I'd suggest the use of divs and proper css.
jrh
I don't think tables are a good choice for this. Simply having three columns doesn't constitute tabular data in my book. With some clean markup and a good stylesheet, you can have a much more flexible way to accomplish this. If you use left floated divs, simply give them a percent width so that they fill up the parent container (100 / number of elements)%. That way, if you want to add another column its a simple markup change a single stylesheet change. This way you wont have to deal with browser table wonkyness and have a great deal more flexibility in its design - on top of that you can change the layout completely without leaving your stylesheet.
The main principle behind HTML is to "markup" the MEANING of your data.
I'll use the above principle as a guide:
If you have 3 columns just because it looks nice - then there is no meaning to your columns, and you should try to use DIVs (which are meaningless "container" elements).
If you have 3 columns because there are 3 categories of links, then a TABLE is fine. Imagine if you gave headers to each list of links - this makes a TABLE with a THEAD necessary.
And in fact, each column is an "unordered list" - which translates into a UL element with LI elements.
And since you have a list of links, you will use, of course, A elements.
So from first-principles, you should have this structure:
<DIV> or <TABLE> (with <TR>/<TD>)
-> <UL>
----> <LI>
-------- <A>
Contrary to other answers, a table could be a semantic solution. If the three sections are distinct from each other and have a title, you can use <th> for the titles and <td> for each of the links. I think that's perfectly semantic.