I want to make a scalable 100% table using DIV's only. I don't want to use to display:table or display: table-cell since this doesnt work with IE7. The goal is to make this as cross browser compliant as possible.
<div class="Wrapper">
<div class="Row">
<div class="Cell">1</div>
<div class="Cell">2</div>
<div class="Cell">3</div>
</div>
<div class="Row">
<div class="Cell">4</div>
<div class="Cell">5</div>
<div class="Cell">6</div>
</div>
</div>
If it's possible, I would like to make the cell width auto so if I add in more cells, it would fit into the row perfectly without pushing the cell to a second row. Been trying to figure this out. Any help would be awesome. Thanks
You can give your cells a width of 100/amount of cells %.
But if you want it automatically adjusted to the number of cells you will need javascript.
But I can't really get what advantage you see making a table out of divs.
I think it's not a nice idea to...reinvent tables (what about header, footer and groups?). You may use 100% width (so it'll works with 90% of browsers) and conditional include for IE7, patching them with a CSS workaround (anchors?) for that people that are still using IE7.
Something like:
http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-tables/
But what for?
I recently did this as, even for tabular data, I wanted to challenge myself to present it using ul and li. You can emulate ul and li to act as your rows and columns.
Consider the following:
<ul id="column-one">
<li>Cell #1</li>
<li>Cell #2</li>
<li>Cell #3</li>
</ul>
<ul id="column-two">
<li>Cell #1</li>
<li>Cell #2</li>
<li>Cell #3</li>
</ul>
CSS
ul { list-style: none; }
ul li { height: 20px; }
#column-one,
#column-two {
float: left;
position: relative;
width: 50%;
}
If you need to emulate colspan:
.span-4 {
clear: left;
float: left;
position: relative;
width: 100%; /* if you have 4 UL elements */
}
You'll run into issues if the height of your cells is different. You could create "rowspan" classes which would increase the height.
It's totally up to you. I have always been a proponent for displaying tabular data within a <table>, but if you want to challenge yourself, please do so!
Related
I am using the pagination component in bootstrap, the pagination itself is simple:
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
</ul>
However I want to show the metadata like total pages, total records beside the pagination, and I want the information can be aligned at middle by the pagination control.
And I can not add the page information inside the ul element since it is generated by a third-party library.
I have tried this:
http://plnkr.co/edit/abVwf6rnluYKiOOzXNrt?p=preview
As shown it does not align as expected.
And it seems that I can set the padding or margin for the div.pageinfo or set the height and line-height, but I wonder if this is possible without harding coding
The Problem
There are two main issues to contend with:
One issue blocking you from being able to move your blocks around is that you had the wrapping div with an inline-style of display: inline-block and Bootstrap classes like pull-left which were forcing your elements to display as they were.
The need for IE8 support will make it difficult at best to provide the same experience for your users without a hit to the performance of your site.
Recommendation
The expectation to have websites render identically in IE8 as to their modern counterpart is more or less unreasonable in this day and age. The number of hoops you'll have to jump through to do that is pretty insane. Bootstrap itself is also deprecating IE8 support as of Bootstrap 4. The only way I'd see a reasonable case for this is if there was Google Analytics data to show that a majority of your users are on IE8.
So the best thing you can do is to either (1) recommend that the pagination items are limited to X number so that it fits a certain width and update the fixed width every time something is added, or (2) accept graceful degradation of your site on IE8 in order to provide a better experience for what I am assuming is the majority of your users on modern browsers.
Solution: Modern Browsers
The easiest way to achieve what you want is to utilize flexbox. I've removed any unnecessary class names and included the simplest code sample below (that would primarily work in Chrome). The code with all the prefixes can be found in the demo, but this should get you what you want (minus IE8 and IE9).
Code (Demo)
HTML
<div class="text-center">
<div id="nav">
<div class="pageinfo">Total:xxx 1/xx</div>
<div>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">
1 <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
CSS
#nav {
display: flex;
justify-content: center;
align-items: center;
}
.pageinfo {
margin-bottom: 5px;
margin-right: 10px;
}
Update: IE8 Solution
Here is a demo for an IE8 alternative that utilizes blocks in order to achieve the effect. However, while I know that you specifically requested not to hard code the size of the elements, that is not something (to my knowledge) that can be avoided due to the need to support legacy browsers like IE8.
The key thing to understand is that legacy browsers are far less intelligent than their modern counterparts. The only other alternative I can think that you can try is to use JavaScript to determine the width of the element dynamically, but it begins to be a lot of effort and impacts performance as well.
HTML
<div class="text-center">
<div id="nav">
<div class="pageinfo">Total:xxx 1/xx</div>
<div>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">
1 <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
</div>
CSS
#nav {
display: block;
width: 200px;
margin: 0 auto;
}
#nav div {
display: block;
}
.pageinfo {
float: left;
margin-right: 10px;
margin-top: 8px;
}
.page-menu {
float: left;
}
.page-menu ul {
margin: 0;
padding: 0;
margin-top: 2px;
}
I hope you are looking for something like below,
/* Styles go here */
.mata-data {
display: inline;
position: absolute;
margin-top: 27px;
margin-left: 25px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="text-center">
<div>
<div class="mata-data">Total:xxx 1/xx</div>
<div class="container pull-left">
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Answered
I begin to think I am losing my mind...
Currently I'm trying to set up a simple top navigation which is margin-0-auto-ed in the header. It contains five children <li>-elements with each a width of 200px. If I can still calculate correctly, that equals 1000px in width.
But to hold all children the top <ul>-element requires 1016px width. I just don't get where this comes from. All margins, paddings etc. are removed by a CSS Reset.
Code is as follows:
HTML
<div id="header-wrapper">
<div id="header">
<ul id="head-menu">
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
</ul>
</div>
</div>
CSS
#header-wrapper { width: 100%; height: 56px; position: relative }
#header { width: 100%; height: 56px; background: #111; position: absolute; }
#head-menu { width: calc(5*200px); margin: 0 auto;}
.head-menu-item { display: inline-block }
.head-menu-item-link { display: inline-block; padding: 20px; width: calc(200px - 40px); text-align: center }
Update 29.09.13
If anyone wonders, instead of commenting out the white spaces or going for some negative left-margins, I just used this syntax:
</li><li class="head-menu-item">Navlink
</li><li class="head-menu-item">Navlink
That has done it easily, without altering the code too much and keeps it clean.
The problem is inline elements add a extra space between each other because of the empty space on your html ( even a simple line-break ) here is your fix jsfiddle
HTML
<div id="header-wrapper">
<div id="header">
<ul id="head-menu">
<li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li>
</ul>
</div> </div>
display:inline-block is inserting spaces in between the li's (that is, displaying the white space shown in the HTML). You can see this more clearly if you put a background color on the li's.
or else if you just want your html to look neat, you can add a negative margin to the display:inline-block elements (to account for the gaps between them in html code), but it would work only if you have a kinda fixed layout, which rarely changes, and you are too adamant to mess up your code by removing spaces or adding comments
I don't have enough 'reputation' to comment, but I would like to restate something Vinícius Moraes said, WHITE SPACES in you code ie...
<div id="foo"></div>
<div id="bar"></div>
<div id="thing"></div>
as seen here by putting on different lines (creating a coded white space) can make a a dramatic effect, where putting...
<div id="foo"></div><div id="bar"></div><div id="thing"></div>
can create the desired effect, as I found after spending several hours wondering why my three 's where next lining when positioned perfectly with a jquery resize. Thank you again Vinícius Moraes for pointing out this rookie mistake.
I have a <table> and I put more than 6 <div>s in one td then I change the display:inline to show these <div>s inside together.
But it just show at most 5 <div>s in first line and show others in in another line below of first line!
where is wrong?
This is my code:
<tr>
<td>
<div id="navigation"> Home </div>
<div id="navigation"> Item1</div>
<div id="navigation"> Item2 </div>
<div id="navigation"> Item3</div>
<div id="navigation"> Item4 </div>
<div id="navigation"> Item5 </div>
<div id="navigation"> Item 6 </div>
<div id="navigation"> Item 7</div>
</td >
</tr>
CSS Code:
#navigation{
display:inline;
padding:0px 10px 0px 10px;
}
this is design view:
You are using table for layout, use div's instead, ya, surely it won't throw you any error but what you are doing is semantically not correct...
The correct way and a better way to have this is as an unordered list, with display: inline-block; CSS property
<ul>
<li>Demo 1</li>
<li>Demo 2</li>
<li>Demo 3</li>
<li>Demo 4</li>
<li>Demo 5</li>
</ul>
ul li {
display: inline-block;
}
You can also wrap the ul inside an nav which is HTML5 element to provide it a meaning that yes, this is a navigation, you'll be probably nesting a element inside the holder so using display: block; for a element will make sense
First off you can't have multiple elements with the same ID. Change id="navigation" to class="navigation" on the elements.
Secondly you can then use this CSS:
.navigation
{
display: inline-block;
}
This will make those elements all appear in a row.
Because there is no fixed table width, the tables maximum width is the window width.
See this fiddle:
http://jsfiddle.net/7QLPW/1/
One Table with specified width and one without
<table width="500px">
...
<table>
The first one does not break as soon as the window width gets too small, the second one does.
What is the width of your table, full layout or how many column you have.
you can see what I try for your issue
http://fiddle.jshell.net/yNF4n/
This question seems to be asked freqeuently over the internet but I still can't find a solution.
I have this navigation bar (It switches between tabs using jQuery) which displays inline. I'm showing a background image on these and to make them more definitive I need to make them wider and higher.
<div id="tabs">
<ul id="tabs-nav-cont">
<li class="tabs-navs">Nav 1</div></li>
<li class="tabs-navs">Nav 2</div></li>
<li class="tabs-navs">Nav 3</div></li>
<li class="tabs-navs">Nav 4</li>
</ul>
</div>
The only way I can seem to do this is by reverting them back to block elements. Which is not what I want because they display vertically. So I tried putting divs in the anchors so I can size them up. However they seem to change them back to block elements too.
Im confused. Someone please help :)
Luckily you live in the year 2009, where inline-block is widely adopted through browsers: Cross browser inline-block.
If it's just for the height (and all the content of the lis fits each on one line), you'd like to go with line-height: 123px, which sets the height of an inline box to 123px (per line, that is).
Or, quite common, if the navigation is left-aligned, float them:
#nav li {
display: block;
float: left;
}
Cheers,
Because it was not 2009 when i first had to solve this :) i got the solution for firefox with following css class:
.ib { display: -moz-inline-block; display: inline-block;}
This is my generic inline-block class that i use where necessary...
Sinan.
Given the following markup:
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
</ul>
Both the uls and the lis widths appear to be 100%. If I apply a background-color to the list item, the highlight stretches the full width of the page.
I only want the background highlight to stretch as wide as the widest item (with maybe some padding). How do I constrain the lis (or perhaps the uls) width to the width of the widest item?
Adding ul {float: left; } style will force your list into preferred width, which is what you want.
Problem is, you should make sure next element goes below the list, as it did before. Clearing should take care of that.
Can you do it like this?
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
Exactly as BoltBait said, wrap your text in an inline element, such as span and give that the class.
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
My extra 2 cents is that if you don't have access to change the HTML, you can do it using Javascript. In jQuery:
$('li.highlight').wrapInner("<span></span>");
and use the CSS:
li.highlight span { background-color: #f0f; }
edit: after re-reading your question, can you clarify: do you want the highlight to only go as wide as the element which is highlighted, or as wide as the widest element in the list? eg:
- short
- items ********************
- here
- and then a really long one
...where the asterisks represent the highlighting. If so, then buti-oxa's answer is the easiest way. just be careful with clearing your floats.
Adding style="float: left;" to ul will cause the ul to only stretch as wide as the widest item. However, the next element will be placed to the right of it. Adding style="clear: left;" to the next element will place the next element after the ul.
Try it out
See documentation on float and clear.
The best way of going about solving this without messing up the style of your existing layout, is by wrapping the ul and li in a div with display: inline-block
<div id='dropdown_tab' style='display: inline-block'>dropdown
<ul id='dropdown_menu' style='display: none'>
<li>optoin 1</li>
<li>optoin 2</li>
<li id='option_3'>optoin 3
<ul id='dropdown_menu2' style='display: none'>
<li>second 1</li>
<li>second 2</li>
<li>second 3</li>
</ul>
</li>
</ul>
</div>
None of the existing answers provide the correct solution, unfortunately. They range from abusing the float property to totally restructuring your HTML, something which often isn't feasible.
The <ul> element has display: block; as its default display property, causing the width to fill 100% of its container.
To change this aspect and still retain all the other default properties of how a <ul> is displayed (e.g. avoid issues with float from other answers), apply display: inline-block; to the list:
ul {
display: inline-block;
background-color: green;
}
.highlight {
background-color: orange; /* for demonstration */
padding: 15px; /* for demonstration */
}
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
<li>banana</li>
</ul>