I'm using a theme that has a really nice grid-like effect. The normal amount of td's is 5. But for some sections I only need two, and for others I need more. I'd like to be able to have them all the same size, because whats happening is when I put the proper amount that I require, it will sometimes stretch the boxes too big or too small. Here's the CSS, and if you need anything else, just let me know.
body {background-color:#cccccc; color:#000000; font:16px Arial, sans-serif; word-wrap:break-word; width:100%; height:100%; margin:0; padding:0;}
a {text-decoration:underline; color:black;}
a:hover {text-decoration:none;}
#wrappper {background-color:#ffffff; width:600px; margin:60px auto; padding:0 50px 50px;}
#title {background-color:#000000; color:#ffffff; text-align:center; text-transform:uppercase; padding:20px 0; margin:0 -50px 20px;}
table {width:100%; border-collapse:collapse;}
table th {font-size:20px; padding:24px 0 8px; text-transform:uppercase; text-align:left;}
table td {vertical-align:center; padding:4px 1px;}
table table {width:300px; height:50px;}
table table td {border:solid 1px #000000; width:50px; height:50px; padding:0;}
table table td img {display:block; border:0; max-width:30px; max-height:30px; width:auto; height:auto; margin:auto;}
#credit {border-top:solid 2px black; margin-top:40px; padding-top:20px; text-align:center; font-size:12px;}
And then heres the colspan I believe...
<table>
<col width="auto"><col width="150px"><col width="150px">
<tr><th colspan="2">
jsFiddle: http://jsfiddle.net/Zorabelle/sYJKt/
Add empty <td></td>s where you have less than 5 in a given <tr>. Alternatively, if you want to 'join' <td>s, use colspan.
EDIT: How about using hidden <td>s to maintain the layout, like in this jsFiddle:
td.hidden {
visibility: hidden;
}
Related
This question already has answers here:
Break long word with CSS
(6 answers)
Closed 1 year ago.
So im building a website on which i have a messenger-box implemented. I want the overflow to force the div to expand its height to the bottom of the page.
For now it looks like this:
The html structure would be something like that:
<div class="chat">
<div class="message-box">
<div class="others-message">Wie gehts</div>
<div class="my-message"></div>
<div class="others-message"></div>
</div>
...
Here is my css code:
.chat{
grid-area:chat;
width:400px;
height:600px;
border-radius: 25px;
display:inline-block;
vertical-align:top;
}
.message-box{
display:inline-block;
clear:both;
overflow:auto;
position:relative;
width:360px;
height:75%;
margin:10px;
margin-top:60px;
border-radius:5px;
background-color:#f0ffff;
-webkit-box-shadow: 0px Opx 12px -2px #000000;
box-shadow: Opx Opx 12px -2px #000000;
}
.my-message{
position:relative;
text-align:left;
color:white;
background-color:blue;
border-radius:20px;
padding:10px;
margin:10px;
width:70%;
}
.others-message{
position:relative;
text-align:left;
color: white;
background-color:grey;
border-radius:20px;
padding:10px;
margin:10px;
margin-left:100px;
max-width:70%;
min-height:40px;
}
Use word-wrap: break-word on message class selectors.
The word-wrap property allows long words to be able to be broken and
wrap onto the next line.
You may try adding width and overflow properties to my-message and others-message classes in CSS.
Essentially, my table is flying off the bounds a little bit
I want to be able to have it look better by being in bounds.
This is for firefox and doesn't need to follow any standards because it's for a personal project.
Relevant CSS:
.files{
box-shadow:0px 25px 45px 10px rgba(0,0,0,0.5);
border-radius:4px;
font-family:"Lucida Grande",LucidaGrande;
font-size:8pt;
margin:0 auto;
border:1px solid #888888;
width:50%;
height:50%;
color:#000000;
background:#FFFFFF;
text-align:left;
}
.files a:link,.files a:hover,.files a:focus.files a:visited,.files a:active{
text-decoration:none;
color:#000000;
}
.files table{
margin:2px;
margin-right:6px;
padding:3px;
border-spacing:0;
border-collapse:collapse;
width:100%;
}
.files table th{
padding:3px;
border-bottom:1px solid #888888;
background:#FFFFFF;
color:#555566;
font-weight:1000;
}
.files table tr td{
padding-left:20px;
}
.files table tr:nth-child(even){
background:#FFFFFF;
}
.files table tr:nth-child(odd){
background:#DDEEFF;
}
.separator{
min-height:1px;
background:#FFFFFF;
}
.tablename{
width:60%;
}
.boxheader{
height:20px;
width:100%;
background:#555555;
}
Relevant HTML:
<div id="footer" class="bottom1">
<span id="expo"><span class="searcharrow" onclick="javascript:expand();">⇑</span></span>
<div height="90%" id="footercont">
</div>
</div>
Relevant Javascript (includes table):
var expo = document.getElementById("expo");
var footercont = document.getElementById("footercont");
function expand(){
footer.className = "bottom2";
expo.innerHTML = '<span class="searcharrow" onclick="javascript:collapse();">⇓</span>';
footercont.innerHTML = '<div class="files"><div class="boxheader"></div><table><tr><th class="tablename">Name</th><th>Kind</th><th>Subject</th></tr> <tr class="separator"><td></td><td></td><td></td></tr> <tr><td>img.JPG</td><td>JPEG image</td><td>Mathematics</td></tr><tr><td>img2.JPG</td><td>JPEG image</td><td>Science</td></tr></table></div>';
}
function collapse(){
footer.className = "bottom1";
expo.innerHTML = '<span class="searcharrow" onclick="javascript:expand();">⇑</span>';
footercont.innerHTML = '';
}
Relevant Image:
Margins add spaces outside of a div. Paddings add spaces inside of a div. Both contributes to making table size bigger than container, depending on your you wrote on css.
In your case, your .files table margin:2px added the length.
.files table {
/*margin:2px;*/ /*this caused the extra width*/
margin-right:6px;
padding:20px;
border-spacing:0;
border-collapse:collapse;
width:100%;
}
Looking at the css, I would suggest you remove some margins and paddings that are unnecessary.
Or instead of looking to make the sizes pixel perfect, you can use overflow hidden to hide eveything outside the container:
.files{
box-shadow:0px 25px 45px 10px rgba(0,0,0,0.5);
border-radius:4px;
font-family:"Lucida Grande",LucidaGrande;
font-size:8pt;
margin:0 auto;
border:1px solid #888888;
width:50%;
height:50%;
color:#000000;
background:#FFFFFF;
text-align:left;
overflow:hidden; /*added this line of code */
}
Please see this css code
#ContactForm .wrapper {
min-height:30px;
padding-bottom:8px;
}
#ContactForm .bg {
border:1px solid #aaaaaa;
background-color:#e9e9e9;
float:left;
}
#ContactForm .input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
When I test it in browser (firefox) the input block is of some height.. I try reducing the top and bottom padding value from 6 to zero but no avail.
Also reducing height from 12 to lower value does not help.
It is stubborn and fixed to some height. What could be wrong??
I can provide with other data also, if needed.
This is html code
<div class="wrapper"> <strong>Phone:</strong>
<div class="bg">
<input type="text" class="input" >
</div>
</div>
Thanks in advance
i think reducing the height from wrapper will halp.. if not the height must be controlled from some other factor.. check that..
on a look on your code this is the solution..
update us for the same..
#ContactForm .wrapper {
min-height:30px; (CHECK THIS)
padding-bottom:8px;
}
Make sure the form your input is in is has the id "ContactForm"
Remove the space between #ContactForm and .input like the following example
#ContactForm.input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
That should work.
The problem is that i have a form with different fields of different sizes. Each field is inside a div with float:left. And they distribute automaticlly in 2 columns. If they are all of the same height there is no problem but if not it happens the following:
The divs are selected in blue. I need that the last div for example goes up because if not i have a dead space there and in many other forms of my site. They are dinamic forms so i cant solve it manually. The placement must be automatic. I searched in Stack Overflow and in the internet but i couldnt find any solution.
Here is the Divs CSS
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
And the General CSS
#popup{
width:645px;
height:auto;
background-color:#e3e3e3;
border-style:solid;
border-width:1px;
border-radius:5px;
border-color:#afafaf;
padding:15px;
color:#4d4d4d;
}
#popup #titulo{
font-size:15px;
font-weight:bold;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#afafaf;
padding-bottom:10px;
}
#popup #form #input{
display:block;
width:289px;
margin-top:10px;
}
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
#popup #form .right{
float:right;
margin-right:25px;
}
#popup #form #input label{
font-size:12px;
font-weight:bold;
}
#popup #form #input input[type='text'], #popup #form #input select, #popup #form #input textarea{
font-size:12px;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
width:280px;
background-color:#f0f0f0;
}
#popup #form #input #foto{
width:191px;
height:87px;
background-image:url(images/img_background.png);
border-style:solid;
border-width:1px;
border-color:#afafaf;
border-radius:5px;
}
#popup #form input[type='button']{
text-align:center;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
font-size:12px;
color:#4d4d4d;
-moz-box-shadow: inset 1px 1px 1px #ffffff;
-webkit-box-shadow: inset 1px 1px 1px #ffffff;
box-shadow: inset 1px 1px 1px #ffffff;
}
#popup #form #input input[type='button']{
width:82px;
height:17px;
margin-left:4px;
line-height:14px;
}
#popup #form #submit_buttons{
text-align:right;
border-top-style:solid;
border-top-width:1px;
border-top-color:#afafaf;
padding-top:10px;
margin-top:15px;
}
#popup #form #submit_buttons input[type='button']{
width:82px;
height:30px;
}
#popup #form input[type='button']:hover{
background-color:#cccccc;
cursor:pointer;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#popup #form #input table{
width:284px;
margin-top:2px;
margin-bottom:5px;
}
#popup #form #input table tr{
text-align:right;
vertical-align:top;
}
#datepicker{
background-image:url(images/datepicker.png);
background-repeat:no-repeat;
background-position:right;
}
#popup #form #input textarea{
height:115px;
max-height:115px;
min-height:115px;
width:275px;
max-width:275px;
min-width:275px;
}
I'm providing a simplified version of the problem, but is simple enough to carry on to your example. You just need to alternate the float between left and right so they don't break :)
HTML Code:
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize2"></div>
<div class="box boxSize3"></div>
CSS Code:
.box {float:left; width:48%; height:40px; background:red; margin:0 1% 2%;}
.box:nth-child(even){float:right;}
.boxSize2 {height:80px; background:green;}
.boxSize3 {height:120px; background:blue;}
Live example:
http://jsfiddle.net/h4kE8/
I would try throwing a position:relative; in with those two DIVs. I've found that any sort of positioning problem can usually be fixed by setting a clear position attribute.
Also helps when using position:absolute; to have it's parent's position set. If that doesn't work, don't underestimate tables. People might not like them much, but if you know how to use them, they work well for stuff like this.
Lengthy, but the best advice I can give.
The Multi-column Layout module spec has been around for a long time, but browsers have been slow to implement, so IE is almost definitely out (though there may be a polyfill that will help it limp along).
http://www.quirksmode.org/css/multicolumn.html
http://www.opera.com/docs/specs/presto28/css/multicolumnlayout/
Note that this will change the order that your elements display, but it will eliminate the gap.
I would in your case have the id, nombre and descripcion sit in the same div, call it left div. Then have the rest of the content on the right sit on another div call it right div and have them both float left. as follows
css
.left {
float:left;
}
.right {
float:left;
}
HTML
<div id="left">
/*id, nombre and descripcion */
</div>
<div id="right">
/* the rest */
</div>
Hi I just added cellspacing to get space between the cell, but this has cut out the border of the cell an the left hand side.
This is happening because of the use of border-collapse:collapse for all tables, but I read on the net that this is to standardize for cross browser.
If this is true.
Should I keep border-collapse:collapse for all tables? if so what fix there is for this.
Sorry.
I am using IE7, but it has to be cross browser.
CSS example
/*Universal selector:
This rule set will be applied to every element in a document:*/
*
{
margin:auto;
padding:auto;
/*text-align:center;*/
}
/*The folowing rule will help to minimaze the differences between browesers*/
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
img {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse ;border-spacing:0;font-size:1em; font-weight:normal; font-style:normal; font-family:Times New Roman;}
.divTitle{
margin:10px;
}
}
.title
{
font-weight:bold;
color:#0076BF;
font-size:1.4em;
font-family:Times New Roman;
}
.divContainer
{
margin:10px;
background-color:#C7D8EE;
border:2px solid #0076BF;
text-align:left;
}
.tableContainer1
{
color:#0076BF;
margin:10px;
border-spacing: 15px;
empty-cells:show;
}
.tableContainer1 tbody tr td
{
background-color:white;
border:2px solid #0076BF;
border-collapse:separate;
}
border-collapse is to remove all spacing between cells. If you want cellspacing, you could use the border-spacing css property. It doesn't work in IE7 and below, but all other browsers will ignore the cellspacing attribute if border-spacing is present, so you can use both to get it working in all browsers.
Do not use border-collapse:collapse; if you want to have space...