This is an experiment I'm working on for a layout. I had a lot of issues positioning divs to achieve this effect, so I turned to the old standby, table cascades. My problem here is that that last upper box has extra padding in all 3 browsers and I cannot seem to CSS or HTML it away no matter what I try. The red boxes should be flush over the green bits you see surrounding them and there shouldn't be a 1px visible green line to the right of the blue row between the red boxes. Any insight would be extremely appreciated.
<!doctype html>
<html>
<head>
<style>
table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}
td table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}
img { display: block; }
</style>
</head>
<body style="background-color: black;">
<table style="background-color: white; height: 525px; width: 3200; padding-top: 25px; padding-bottom: 25px;">
<tr>
<td colspan="1" style="width: 350px;">
<table class="container" style="height: 475px; width: 350px; margin-left: 25px; margin-right: 25px;">
<tr>
<td style="background-color: green; height: 225px; width: 350px;" colspan="3">
</td>
</tr>
<tr>
<td style="background-color: blue; height: 25px; width: 350px;" colspan="3">
</td>
</tr>
<tr>
<td style="background-color: green; height: 200px; width: 175px;">
</td>
<td style="background-color: blue; height: 200px; width: 25px;">
</td>
<td style="background-color: green; height: 200px; width: 125px;">
</td>
</tr>
</table>
</td>
<td colspan="1" style="width: 125px;">
<table class="container" style="height: 475px; width: 125px; margin-right: 25px;">
<tr>
<td style="background-color: red; height: 475px; width: 125px;">
</td>
</tr>
</table>
</td>
<td colspan="1">
<table class="container" style="height: 475px; width: 450px; margin-right: 25px;">
<tr>
<td style="background-color: green; height: 25px; width: 225px;">
</td>
<td style="background-color: blue; height: 225px; width: 25px;" >
</td>
<td style="background-color: green; height: 225px; width: 225px;" >
</td>
</tr>
<tr>
<td style="background-color: blue; height: 25px; width: 450px;" colspan="3">
</td>
</tr>
<tr>
<td style="background-color: green; height: 200px; width: 450px;" colspan="3">
</td>
</tr>
</table>
</td>
<td colspan="1">
<table class="container" style="height: 475px; width: 400px; margin-right: 25px;">
<tr style="height: 225px;">
<td style="background-color: green; height: 225px; width: 275px;">
<table style="width: 100%; height: 225px;">
<tr>
<td style="height: 100px; width: 225px; background-color: red;">
</td>
</tr>
<tr>
<td style="background-color: blue; height: 25px; width: 225px;">
</td>
</tr>
<tr>
<td style="height: 100px; width: 225px; background-color: red;">
</td>
</tr>
</table>
</td>
<td style="background-color: blue; height: 225px; width: 25px;" >
</td>
<td style="background-color: green; height: 225px; width: 100px;" >
</td>
</tr>
<tr>
<td style="background-color: blue; height: 25px; width: 400px;" colspan="3">
</td>
</tr>
<tr>
<td style="background-color: green; height: 200px; width: 400px;" colspan="3">
</td>
</tr>
</table>
</td>
</table>
</td>
</table>
</body>
</html>
Do you mean this?
http://jsfiddle.net/Nq8Us/1/
I've edited your code and removed the extra 'padding' of green under red in question, by removing inline-styling, then added some styles in css pointing to the #problem_cell_table.
I suggest you remove all your inline styling and shift them to the stylesheet. Inline-styling overrides all stylesheet code. That's bad and also explains why you don't get any effect from stylesheet changes.
As to why there's a padding, it's because your main table's height that is wrapping all the rows, cells, and inner-tables, is higher than the declared row height added together. The cells in your all the rows automatically adjusts it's size to compensate for pixels that doesn't add up to your total declared of 525px.
In the example I've done, I "cheated" by setting css of the inner-table to height: 100% so it will expand to fit the height, should miscalculations occur.
Give me a moment, I'll add more to the <div> styling methods in my answer.
Edit:
Ok here my attempt at the layout using <div> and CSS. http://jsfiddle.net/XbFcJ/
Remember to use a CSS Reset Stylesheet first!
The CSS:
<style>
body{
background: black;
}
.wrapper{
}
.container{
width: 1500px;
}
.content-table {
border: 25px solid #fff;
overflow: hidden;
background: #fff;
}
.content-column {
margin-right: 25px;
float: left;
height: 475px;
}
.content-column.last {
margin-right: 0;
}
.first, .third, .last {
width: 425px;
background-color: green;
margin-right: 25px;
}
.top{
height: 225px;
border-bottom: 25px solid blue;
}
.left {
height: 225px;
width: 200px;
border-right: 25px solid blue;
}
.content-column.second {
width: 100px;
background-color: red;
}
.last .left {
background-color: red;
}
.last .left .top {
height: 100px;
border-bottom: 25px solid blue;
}
</style>
The HTML:
<body>
<div class="wrapper">
<div class="container">
<div class="content-table">
<div class="content-column first">
<div class="top">
</div>
<div class="bottom">
<div class="left">
</div>
</div>
</div>
<div class="content-column second">
</div>
<div class="content-column third">
<div class="top">
<div class="left">
</div>
</div>
<div class="bottom">
</div>
</div>
<div class="content-column last">
<div class="top">
<div class="left">
<div class="top">
</div>
</div>
</div>
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
</body>
Related
Im facing two problems which are related with each other as i can assume. My webpage is not being fully displayed, a lot of content is hidden down and the scrollbar at the right side and the vertical one are not shown. I have tried to solve that with the overflow property in the body, the scrollbar was there but invisible so it didnt help me a lot. I want the content to be visible even though im zooming in(200% or whatever)
here is a snippet of my code
<nav class="sideBar">
<div class="sideBarHeader" id="wrapper">
<div class="dropdown">
</div>
<div class="ono">
<p style="font-size: 48px;">XXX</p>
</div>
</div>
<div style="padding-left: 2px;">
<div class="searchContainer">
</div>
</div>
</nav>
<div class="mainContentClient">
<div class="clientHeader">
</div>
<div class="clientContent"> <!-- the client content class is not defined yet -->
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;"></th>
</tr>
<tr style="background-color: #DEDEDE; height: 100px;">
<td style="border-bottom: 0;">STATS</td>
</tr>
</table>
<div style="height: 100%;" id="wrapper"> <!-- subcontent -->
<!-- left tables -->
<div class="leftClientContent">
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
<a href="vehicle/">
</a>
</th>
</tr>
<tr>
<td style="border-bottom: 0;"></td>
</tr>
</table>
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
<a href="cargounit/">
</a>
</th>
</tr>
<tr>
<td style="border-bottom: 0;"></td>
</tr>
</table>
</div>
<!-- right table + Map -->
<div class="rightClientContent">
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;" colspan="2">
info
</th>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
</table>
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
</th>
</tr>
<tr>
<td style="border-bottom: 0;"> <!-- map properties -->
<div id="Map" class="mapStyling"></div>
<script>
var lat = 47.35387;
var lon = 8.43609;
var zoom = 18;
var fromProjection = new OpenLayers.Projection("EPSG:4326");
var toProjection = new OpenLayers.Projection("EPSG:900913");
var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
map = new OpenLayers.Map("Map");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));
map.setCenter(position, zoom);
</script>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
and the css :
.sideBar {
height: 100%;
width: 17%;
position: fixed;
top: 0;
left: 0;
background-color: #C0C0C0;
max-width: 250px;
min-width: 250px;
overflow: auto;
}
.sideBarHeader {
padding: 4% 8%;
padding-left: 10%;
height: 85px;
}
.clientHeader {
font-size: 48px;
height: 130px;
}
.mainContentClient {
position: fixed;
top: 0;
height: 100%;
width: 77%;
margin: 0 280px;
}
.ono {
width: 180px;
text-align: right;
/* keep the ono aligned, use a negativ margin*/
margin-top: -28%;
}
.clientContent {
height: 100%;
width: 1130px;
max-width: 1500px;
min-width: 1000px;
}
.leftClientContent {
width: calc(100% - 850px);
margin-top: 2%;
}
.rightClientContent {
width: 850px;
margin-top: 2%;
margin-left: 10px;
}
.mapStyling {
width: 102.5%;
height: 300px;
margin-left: -20px;
}
/* default settings for the tables in part management*/
table.onoTable{
width: 100%;
border-collapse: collapse;
box-sizing: border-box;
table-layout: fixed;
}
table.onoTable th {
background-color: #FBD85C;
border-width: 0 10px;
border-color: #f1f1f1;
border-style: solid;
height: 62.5px;
font-size: 24px;
}
table.onoTable th:first-child {
border-left: 0;
}
table.onoTable th:last-child {
border-right: 0;
}
table.onoTable td {
border-width: 0 10px 4px 10px;
border-color: black #f1f1f1;
border-style: solid;
height: 50px;
font-size: 24px;
}
table.onoTable td:first-child {
border-left: 0;
}
table.onoTable td:last-child {
border-right: 0;
}
/**/
table.noBorder_1_2 td:nth-child(1) {
border-right: 0;
}
table.noBorder_1_2 td:nth-child(2) {
border-left: 0;
}
table.centerContent_24 th, table.centerContent_24 td {
text-align: center;
font-size: 24px;
}
tr.borderBottom_0 > td {
border-bottom: 0;
}
.backgroundColor_grey {
background-color: #DEDEDE;
}
/* shift the content of the main table of the management table a little bit to the right side*/
table.paddedManagementTableContent td {
text-align: left;
padding-left: 20px;
}
table.paddedManagementTableContent th {
text-align: left;
padding-left: 30px;
width:30%;
}
table.paddedManagementTableContent th:first-child {
text-align: left;
padding-left: 20px;
}
here is a live demo
https://jsfiddle.net/edwjvmsc/
thanks everyone!
Well, I'm not sure if this would be correct answer. but I removed the 'position:fixed' property from 'mainContentClient' class and the scrollbar is showing and you can scroll your content. Try it and let me know if it helped :).
.mainContentClient {
top: 0;
height: 100%;
width: 77%;
margin: 0 280px;
}
I have begun creating an OrgChart using HTML and CSS. One issue I have run into is creating an intersecting chart flow-line between <tr> and <td> elements.
I created container, vertical-line and horizontal-line definitions that I wrapped into <td> andtags. The vertical-line works correctly by cantering the line in the. I created a second` for the horizontal-line to intersect in the middle with the vertical-line. However, the line remains at the bottom.
I have added the CSS and HTML to my post and hope that one of you can help me on what I am doing wrong.
table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
width: auto;
}
tr {
border: none;
}
th,
td {
border-collapse: collapse;
border: 1px solid black;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 100;
}
div.container {
width: 40px;
}
div.vertical-line {
border-left: 1px solid red;
height: 55px;
margin-left: auto;
margin-right: auto;
width: 1px;
}
div.horizontal-line {
border-bottom: 1px solid red;
height: 1px;
margin-top: auto;
margin-bottom: auto;
width: 40px;
}
<table>
<tr>
<td style="background-color: goldenrod" colspan="3">
<div>Dept
</br>
<b>EmpName</b>
</div>
</td>
</tr>
<tr>
<td style="width: 42.5%; background-color: wheat">
<div>Dept
</br>
<b>EmpName</b>
</div>
</td>
<td style="width: 15%">
<div class="container">
<div class="vertical-line"> </div>
<div class="horizontal-line"> </div>
</div>
</td>
<td style="width: 42.5%">
<div style="background-color:#CCFFCC">Dept
</br>
<b>EmpName</b>
<div style="border-bottom: 1px solid">
</div>
<div style="background-color:#CCFFFF">Dept
</br>
<b>EmpName</b>
</div>
</td>
</tr>
</table>
Here's a workaround:
add another horizontal line before the vertical line:
<td style="width: 15%">
<div class="container">
<div class="horizontal-line"> </div>
<div class="vertical-line"> </div>
<div class="horizontal-line"> </div>
</div>
</td>
Then change the display of it's container to flex:
div.container {
display: flex;
width: 40px;
}
I´m sure this is the most stupid question for HTML developers. But I´m not one of them.
I have the following table and I need to get the three rounded images inside the table to be a circle and not like they are showing. I cannot get them to be rounded even if I have set width to be on 50px. The divs are like 'filling' the table row. I´m sure that what I ´m trying to do is pretty easy. Can someone help me?:
This is the HTML Code:
<div style="align-items:center; text-align: center; width:300px; height:200px; margin:0 auto">
<table border="1">
<tbody><tr style="height: 200px">
<td style="height: 200px; width: 300px;" colspan="3" align="center" valign="middle">
<div style="background-color: red; width: 150px; height: 150px; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
</tr>
<tr>
<td colspan="3">
<h3 class="col-md-12 text-center" style="align-items: center">
Cantidad de Gente: <strong>Poca</strong>
</h3>
</td>
</tr>
<tr style="height: 50px; padding-top: 10px;">
<td style="height: 50px; width: 50px;">
<div style="background-color: green; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: yellow; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: red; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%; ">
</div></td>
</tr>
<tr>
<td>
Poco
</td>
<td>
Mediana
</td>
<td>
Mucho
</td>
</tr>
</tbody></table>
</div>
If you put the 50px height and 50px width on the circle itself instead of it's container you will get a perfect circle. I also added margin:0 auto to center them but you may not need this.
<div style="align-items:center; text-align: center; width:300px; height:200px; margin:0 auto">
<table border="1">
<tbody><tr style="height: 200px">
<td style="height: 200px; width: 300px;" colspan="3" align="center" valign="middle">
<div style="background-color: red; width: 150px; height: 150px; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
</tr>
<tr>
<td colspan="3">
<h3 class="col-md-12 text-center" style="align-items: center">
Cantidad de Gente: <strong>Poca</strong>
</h3>
</td>
</tr>
<tr style="height: 50px; padding-top: 10px;">
<td style="height: 50px; width: 50px;">
<div style="background-color: green; width: 50px; height: 50px; border-radius: 50%;margin:0 auto;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: yellow; width: 50px; height: 50px; border-radius: 50%;margin:0 auto;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: red; width: 50px; height:50px; border-radius: 50%; margin:0 auto;">
</div></td>
</tr>
<tr>
<td>
Poco
</td>
<td>
Mediana
</td>
<td>
Mucho
</td>
</tr>
</tbody></table>
</div>
The table you created has width 300px, whereas the row with three circle you are defining has width 50px each i.e. 150px total. And since the table row element suppose to fill the table width, it is stretching your row to 300px. You need to increase the width and height of row td element to 100px to make cover the whole row or if you want the circle strictly 25px radius then you can add padding to your td element.
The following code works well in Chrome and IE, but does not working in Firefox.
The table is generated dynamically and tr/td can't be removed from the following example
.widget-table-container,
tr td {
border: 1px solid red;
}
.widget {
border: 1px solid green;
margin: 0px;
padding: 0px;
background-color: #ffffff;
border-radius: 5px;
overflow: hidden;
height: 100%;
width: 100%;
left: 1px;
top: 1px;
bottom: 0px;
right: 0px;
}
<table class="widget-table-container">
<tbody>
<tr>
<td colspan="2" rowspan="2" style="width: 378px; height: 378px;">
<div class="widget" style="width: 371px; height: 371px; background-color:lightblue;">
<div class="widget-title">
<p>Title</p>
</div>
<div class="widget-body"></div>
</div>
</td>
<td colspan="8" rowspan="4" style="width: 1512px; height: 756px;">
<div class="widget" style="width: 1493px; height: 745px;">
<div class="widget-title">Title CPU</p>
</div>
<div class="widget-body">BODY</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" rowspan="2" style="width: 378px; height: 378px;">
<div class="widget" style="width: 371px; height: 371px;">
<div class="widget-title">
<p>Some Title</p>
</div>
<div class="widget-body"></div>
</div>
</td>
</tr>
<tr></tr>
</tbody>
</table>
I have removed last empty and it looks like fixed problem.
I'm not sure why only removing last tr fixed problem not all tr.
But i my case it is working, Thanks All for help.
Given the HTML below how do I limit the min height of my yellow cell with the blue cell's height - I can't use min-height as blue boxes height is defined in the external style.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 600px; height: 400px;">
<table style='background-color: #ccc; width: 100%; height: 100%;'>
<tr>
<td></td>
<td></td>
<td style="width: 100%; height: 100%;"></td>
<td></td>
<td id='ry' style="height: 100%; background-color: green;"></td>
</tr>
<tr>
<td></td>
<td></td>
<td id='bx' style='background-color: yellow;'>
<table style="width: 100%; height: 100%;">
<tr>
<td style='width: 33.33%; height: 100%;'>
<div style="position: relative; width: 100%; height: 100%;">
<div style="position: absolute; width: 100%; height: 100%;">
<div style=" width: 30px; height: 30px; margin-left: auto; margin-right: auto; border: 1px solid #ccc; background-color: blue;">?</div>
</div>
</div>
</td>
</tr>
</table>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>