I have 3 div-s inside a div, I want to put a picture in red area which have a 500px height, I want to fix red height area to 500px and want to stretch other div-s to fill the pages, I don't know hot fit that, also tests put 50% to each blue div-s but don't worked.
<html>
<head></head>
<body>
<div>
<div style="background-color: blue; height:100%"></div>
<div style="background-color: red;height:760px"></div>
<div style="background-color: blue;height:100%"></div>
</div>
</body>
</html>
My solution:
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
}
.main{
background: yellow;
height: 100%;
display: table;
min-width: 100%;
}
.box{
background: blue;
width: 100%;
height: 100%;
display: table;
}
.image{
background: red;
width: 100%;
height: 100px;
display: table-row;
}
</style>
<div class="main">
<div class="box">#1</div>
<div class="image">#2</div>
<div class="box">#1</div>
</div>
Easiest solution: Use a table (they are valid again for layout thanks to html5 and it's presentational role attribute)
Works in "modern" browsers (IE 8 at least): use css display table + display: table-cell etc to use table rendering on other elements
Works when you have javascript: Use javascript. This will lag behind most of the time and might file when the JS engine encounters an error, so it should be your last resort (or actually past that). Example (with explanation) can be found here: http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/
If it's only about a visual effect: Use a container div for the blue color and 100% height and then center the red one in it (again, multiple ways to achieve that, e.g. tables, table display + css vertical align, ...)
Regarding a correct HTML5 solution (using role attribute marks table as presentational according to W3C spec)
<table style="width:100%;height:100%;border-collapse:collapse" role="presentation">
<tr>
<td style="background-color: blue;"></td>
</tr>
<tr>
<td style="background-color: red;height:760px"></td>
</tr>
<tr>
<td style="background-color: blue;"></td>
</tr>
</table>
Complete working fiddle here (css part is also important for it to work correctly): http://jsfiddle.net/8jFan/
Additional info regarding HTML5 + Tables:
http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#table-layout-techniques
On one hand tables are disencouraged to fix layouting ("Tables should not be used as layout aids."), on the other hand the spec goes on to describe how to use tables for layouting. As tables are - in contrast to css alternatives - backwards compatible really far (they are used for most newsletters because of that), they still seem to be the better choice to me than css "display attribute hacks".
Related
1.) This works in Chrome.
In Firefox, however, a django tables table that we are rendering on our site is not observing the overflow style. From what I read, table cell elements may be a "per browser" decision because they aren't pure block elements (if I am understanding the standard correctly), but here's a picture of my problem.
I've tried fussing with the max-width tag (to no effect other than the width changes but the overflow is still garbled into the next cell). I could technically wrap the line (white-space), but we don't want huge table rows on the page.
The Mozilla developer page (Overflow) says "In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap." The height property doesn't seem to change this either. No other CSS property I've tried seems to have an effect.
I keep thinking that this is something Firefox may not support (i.e. table cells aren't "block-level"?), but I can't quite say that for certain.
EDIT: Here's the html. It's just a basic table produced by django tables. Please ignore the inline style I attempted which is commented out.
EDIT: Here's inline code and a JSFiddle link at the bottom.
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<style>
<body {font-family: Arial, Helvetica, sans-serif;}
th {
padding: 8px;
}
td {
padding: 8px;
}
td.content {
overflow-x: scroll;
max-width: 0;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<thead><th>Column 1</th><th>Column 2</th><th>Column 3</th></thead>
<tbody>
<tr><td>Other stuff</td><td class="content">A REALLY REALLY REALLY
REALLY LONG MESSAGE</td><td>Other stuff</td></tr>
</tbody>
</table>
</html>
JSFiddle
I made a simple code for you, i hope help you, tell me if this is what you want:
.msg_list{
border:1px solid red;
}
.td-content{
border:1px solid blue;
max-height:100px;
max-width:100px;
}
.content{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
.content div{
width:200px;
}
<table class="msg_list">
<thead>
</thead>
<tbody>
<tr>
<td class="td-content">
<div class="content">
<div>One really really really really really long message</div>
</div>
</td>
</tr>
</tbody>
</table>
If you watch you can see in the css the class .content and his property max-width, i tested it in firefox, you can try it
So I'm designing an org chart based on the table element and I have a problem. I'm using <hr> elements to create the connectors; however, I can't get the dead space inbetween elements to go away. I've spent the last hour trying to figure out how the hell to get it to work and I just can't seem to figure it out.
I've included a picture to show:
The other issue is more of a question I haven't really looked into but figured I'd ask anyway. How can I lock the height of my table items. I've locked the width just fine but I can't seem to lock the height to 70px.
And here is some choice code:
<table class="orgchart" cellspacing="0" cellpadding="0">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td class="item">Director</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr class="divider"><td></td><td></td><td></td><td></td><td></td><td></td><td><hr width="1" size="20"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td class="item">Assistant to the Director</td><td></td><td class="item">Deputy Director</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
And the CSS:
.orgchart td {
width: 70px;
height: 70px;
text-align: center;
overflow: hidden;
white-space: no-wrap;
}
.divider td {
height: 20px;
}
.item {
border: 2px solid black;
}
And here is the CodePen: http://codepen.io/jacob_johnson/pen/GpEjmm?editors=110
There's a margin all the way around the <hr>. Remove the top and bottom margins from the <hr>. All browsers apply default styling to elements, though not always the same. As a result you will see reset and normalize stylesheets used to improve visual consistency and development pains.
Updated Codepen with CSS below added.
hr {
margin: 0 auto;
}
If I was doing this project I would find a simple grid framework to layout with DIVs or more than likely I would create this chart as an inline SVG.
I am trying to have a div then inside the division have some different places where I can place stuff. For example.
<div blah>
<table blah>
content...
</table>
<table blah>
content...
</table>
<table blah>
content....
</table>
</div>
I am not really a web developer so I know this question might seem simple but any help is greatly appreciated. Oh and I am using Macromedia Dreamweaver 8.
Thanks.
I would suggest using three different divs and then using CSS to place the divs. Check out this w3 schools article on CSS positioning: http://www.w3schools.com/css/css_positioning.asp
This probably isn't the place for tutorials and "hello world"s, but here's something to get you started:
http://jsfiddle.net/rBNUy/
HTML:
<div class="main">
<div class="sidebar"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
CSS:
.main{ /* this makes the containing box 200x200 */
width: 200px;
height:200px;
background: #eee;
}
.sidebar{ /* this makes the sidebar 100x200 and makes it stick to as far left as it can */
background:blue;
float:left;
height:100%;
width: 100px;
}
.top, .bottom{ /* this makes the boxes 96x96 and makes them stick to as far left as they can , eventually till they hit the sidebar */
width: 96px;
height:96px;
float:left;
background:red;
border:solid 2px green;
}
comments are obviously over-simplified, but in essence, "floating" stacks elements onto one another very much the same as you would stack letters in a word.
When a floated element runs out of space to be stacked in the same line, it just hops to the next line, and finds the closest "wall" to stack to.
In general, try not to use tables for non-tabular data - in other words, don't try to build a webpage using tables. Here is a good article which might get you thinking: http://www.alistapart.com/articles/practicalcss/
On a side note, a lot of people try to use w3schools for learning HTML and CSS. w3schools is an excellent reference for more experienced programmers, but I feel like it fails to teach novice programmers the big picture. You actually learn a lot from trial and error, and from looking at other people's work (source code). http://www.csszengarden.com/ has a great collection of webpages which will certainly help you pick up some new HTML and CSS techniques.
I implemented a rough solution for you of how (horrendous) your markup would have to look if you were to use tables.
http://jsfiddle.net/Wexcode/vMXQe/
HTML:
<table id="container">
<tr>
<td id="sidebar"></td>
<td id="main">
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
CSS:
table { background: #000; }
td { background: #fff; }
#container {
width: 600px;
height: 400px;
margin: 0 auto; }
#sidebar { width: 35%; }
#main { width: 65%; }
#main table { width: 100%; height: 100%; }
#main table tr { height: 50%; }
I want use a div that has a background-color, but if I print the page it appears in white .
When I create a table using <tr bgcolor="#333333"> it also does not work.
How I can create a print page using css and html ?
My code :
<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
<tr bgcolor="#999999">
<td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
</tr>
</table>
CSS: box-shadow: inset 0 0 0 1000px gold;
Works for all browsers and on table cells and rows.
I would look into the media query way of targeting a stylesheet to the print. I don't believe you will find a common way cross-browser of doing what you want to do (control whether the user's printer prints a background) without using PDFs of your content, which may not be desirable/doable. However, you should consider specially handling your print styles and perhaps avoid backgrounds in your design of the printed page.
http://www.w3.org/TR/css3-mediaqueries/
EDIT
Seeing your other comment, if you have to make the backgrounds print and have a single user, teach your user to make the printer print backgrounds. See for example in Firefox (checkbox):
Background colors and images don't print by default.
It is a printer option your users could change, but you absolutely can't count on your users knowing or doing that. You cannot control this from the web side (as far as I know).
In Crome "-webkit-print-color-adjust: exact;" works for me.
Use:
#media print {
.collage_bg {
background-color: #E6E7E9 !important;
-webkit-print-color-adjust: exact;
}
}
Or Check Background Graphics option:
Both options working fine for me.
Here is something worked for me as I was using Fixed size block element. The image used is 1px X 1px but forced to expand to the size of box. This way we are printing image directly instead of background color/image.
<style type="text/css">
.outer {
width: 200px;
height: 80px;
position: relative;
}
.outer .grayBg {
position: absolute;
left: 0;
top: 0;
height: 80px;
width: 100%;
z-index: 1
}
.inner {
width: 100%;
position: relative;
z-index: 10
}
</style>
<div class="outer"><img src="grayBg.png" class="grayBg" />
<div class="inner">Some text</div>
</div>
You could however always use an image for that. Make an image with a width of 1px and repeat it like this:
background: url('path/to/image.png') repeat-x;
Is there anything I can do to make IE display table cells as actual blocks?
Given this style:
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
And this html:
<table>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
</tbody>
</table>
<div>
<div>
<div>
<div>R1C1</div>
<div>R1C2</div>
<div>R1C3</div>
</div>
</div>
</div>
The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.
My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)
I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.
So once again, is there anything I can do to make IE render table cells as block?
(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)
I applied float: left to stuff. It kinda works.
Live Demo
The biggest problem is width: 100% combined with the padding is making things too wide.
So:
Live Demo (without the problematic padding)
That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.
This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).
IE7:
The following worked for me for IE6+:
tr {
display: block;
position: relative
}
td.col1 {
display: block;
left: 0;
top: 0;
height: 90px;
}
td.col2 {
display: block;
position: absolute;
left: 0;
top: 30px;
}
td.col3 {
display: block;
position: absolute;
left: 0;
top: 60px;
}
Assumptions:
cell height 30px
Drawbacks:
Fixed cell height
Cumbersome specification of top property (maybe generate)
Only works when HTML provides classes for columns
Advantage:
Works in all browsers.
When to use:
When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.
Just figured it out with a collegue of mine.
ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE!
Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.
That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.
table {
width: 100%;
}
td {
float: left;
width: 100%;
}
<table>
<tbody>
<tr>
<td>cell-1</td>
<td>cell-2</td>
</tr>
</tbody>
</table>
add this code:
<!DOCTYPE html>
我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。
you need add this code in the top.
<!DOCTYPE html>
<html>
<head>
<style>
td {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Job Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><div>James</div></td>
<td><div>Matman</div></td>
<td><div>Chief Sandwich Eater</div></td>
</tr>
<tr>
<td><div>The</div></td>
<td><div>Tick</div></td>
<td><div>Crimefighter Sorta</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Add this line of code in the top, but use 'float' and 'width' is very good.
sorry, my english so poor.
make it display:table-row; instead of display:block
It will work like it is supposed to