I'm having trouble with the layout of one of my pages (http://jsfiddle.net/NeonGuilmon/pghtZ/5/)
I'm trying to create the interface of a chatroom, with the section room in the top-left of the screen, (100% - 200px) in width and height, section users in the top-left, 50% height and 200px width, section friends in the bottom left with the same dimensions ad users, and chat-bar in the bottom right, 200px in height and (100% - 200px) in width.
As you can see from my fiddle, I messed up pretty badly, and I have no idea where to go next. Can anyone help me with this?
I really recommend reading the following two links:
http://www.w3.org/TR/CSS2/visuren.html
http://www.w3.org/TR/CSS2/box.html
Correctly understanding how position/display work and the difference between margin/ etc is key.
You are currently working with display:block. This basically means that each element will be placed under the next one.
You are using right-margin. This will force a white margin on the right of the element and will not allow anything to sit in that space
Finally if you want to align 4 block elements side by side using a table can ease a lot of the problem (don't go overboard with tables though).
So the easiest way to set something like this up: (I placed the layout on the html but you can put it in the css. Also remove all the positioning and height hints you currently have on your sections. they should just take all the space they can inside the table cell
<table height="100%" border=1>
<tr height=50%>
<td width=100%><section id="room">room</section></td>
<td width=200px><section id="users">users</section></td>
</tr>
<tr height=50%>
<td><section id="friends">friends</section></td>
<td><section id="chat-bar">chatbar</section></td>
</tr>
</table>
Solved my problem: I didn't realize CSS calc was so widely supported: http://caniuse.com/#search=calc
Related
I've looked everywhere on this forum for a way to vertically align a table in CSS that works for all browsers, IE, Firefox, Chrome and Safari and found this solution, below (which works) but only if you specify the PIXELS of a table.
Since people have different size screens it's not that useful for a text box.
<html>
<head>
<title>Dead Center</title>
<style type="text/css">
.dead_center {
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}
</style>
</head>
<body>
<table class="dead_center" border=5>
<tr>
<td>My centered table</td>
</tr>
</table>
</body>
</html>
How could you modify the above so that your table is just say 50% width of the screen and no height specified. I.e. whatever length of text it is will show up vertically centered.
Here's the page I'm working on fixing up.
What I'd like to do is take the two tables and format them so they fit nicely in the center of the page. The left side has the text/copy and the right side is the GetResponse form. Both should be vertically aligned so it looks nice. Right now they're at the top.
The short answer is to add height="100%" to your largest outer table. This will vertically center your box.
However, I would recommend using divs instead of tables and having each rounded box positioned left and right. Tables is bad practice for web layout.
In either case, when you are viewing on smaller screens you will need to use media queries to adjust your styles.
I think what you wanted to achieve is a much responsive webpage. My advice is that you should take the table tag out (table-less web implementation) and just use div or section tags. And then you can use media queries to make your page responsive or you can use some CSS3 frameworks like bootstrap.
fiddle - here you got 2 exacly same styled tables. TD's width is auto adjusted by table-layout. It works ok, when there is only one line of text. But when there is more text and text is warped it seems like width is calculated by all the text (like it was in one line), not by the longest warped part of text.
Question is how to center content of table nr 2 the same way as it is done in 1'st table? (atm it dont look like centered at all...)
- this is how it should look (lower one) - dont needed yellow space should be cutted to allow table to be centered.
td { text-align:center }
The text in the first table isn't actually centered. It just appears that way because it has no breathing room on either side of the cell.
Making a global declaration like the above would allow additional tweaks to remaining cells.
td.first { text-align:left; font-weight:700 }, etc.
EDIT
You're not going to be able to achieve that effect without declaring a width. Tables don't act like divs by default, so I gave it display:block, width:80% and now the tables center, the td wasn't filling its parent correctly, so I gave it width:100%.
I think this is what you're after: http://jsfiddle.net/hJXb9/
I think you are looking for this.
<table style="width:60%;margin-left:20%;margin-right:20%;">
<tr>
<td style="background:green;text-align: center; vertical-align: middle;">
TADA
</td>
<td style="background:yellow;text-align:center; vertical-align: middle;">
Lorem ipsum dolorsitamet kjfldslggfh;l</td>
</tr>
</table>
Live Demo
Hope, i will helps you. Thanks. !!
So I have a table with only two columns and one row. The second td holds an image, and the first holds text. I would like the td containing the image to be at the minimum size possible with that image inside, and the first td to fill the remaining space. The following works in every browser except IE7 (we are not doing IE6):
<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>
What happens is this:
The page renders correctly, then when you mouse over the table, the first td expands to fill the entire table, pushing the image off the edge.
I could fix this with some jQuery to measure the width of the image and calculate remainder for the first td; but that solution is full of LAME!
Please help. I do not understand why IE7 feels the need to redraw the way it does.
Try the following code instead. Instead of explicitly declaring too much width, try explicitly declaring too little (because the image will push the width beyond 1% anyway.)
I am writing this off the top of my head without actually having looked in IE7, but I have IE7 in a Virtual Machine at home and so I'll comment back later if I find a different solution.
<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>TEXT</td>
<td width="1%" style="width: 1%;"><img src="http://www.google.com/intl/en_com/images/srpr/logo2w.png" alt="Google Logo" /></td>
</tr>
</table>
There are a couple of things that you could try:
Make sure you're using a reset.css stylesheet to reset all of the browser defaults and accommodate any browser quirks. That's especially important with Internet Explorer.
Only use tables for tabular data — I'm not sure what the rest of your table contains, but unless there's going to be rows of data, it would be much easier to use a container div with a p and img floated.
Set the width and height on the img.
Use CSS position: relative; float: left; to see if it helps with positioning issues on hover. I see hover issues a lot with jQuery scripts and browser hacks like CSS3 PIE — if you're using those, try removing them.
Try setting the style="zoom:1" on the element.
I am not sure but looking at
<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>
from what I can see is that there is no table width on this, so IE does not know how to scale the td appropriately.
Another guess is because you're are declaring width as 100% on the first one IE interprets this to shove it off. Which is my guess, you can not have a width of 100% on the first cell because it means to take up 100% of the full table width.
clear you browser cache, specify a width and height on your image
i have seen the most weird stuff on ie7, like pagebreaks \n and such causing this effect, ie:
<a href="#>
<img src="jpg" />
</a>
to fix just put everything on the same line and without spaces (like your table with a space on the right)
also avoid using inline style, use a stylesheet (css)
I wanted to know if I customize a table with <td> and <tr> elements in the same way I usually customize <div> elements of a page.
I'm asking this because I cannot modify the generated html code, and I would like for example to float the rows to right, or to add padding, margin.
Is CSS working perfectly on <tr> or <td> elements ? (I am asking you this before to start).
thanks
Is CSS working perfectly on or
elements ? (I am asking you this
before to start).
Yes, you can apply css to any element. By the way, you can choose the direction of TDs by specifying align="left" or align="right". No need to float them. You could have provided sample of what you want to achieve though.
It all depends what you want to do. If you want to apply custom floating to particular cells (using CSS float) you might get crazy results because you mock around with box-model of <td> element.
If you want to float the text/content inside, you can always use text-align:left / right / center.
Again - if you want to affect content of the TD it should be relatively same as if you used <div>. If you want to affect td itself you might get unexpected results especially around position, float, z-index, display CSS attributes.
"I am asking you this before to start".
That's a bit stupid (no(t too much) offense) don't you think?
If you had give it a try you would have seen that there's no problem. Just be aware that default style is not the same and that there are some constraint due to the displaying of table element (which you can get rid of by using the css display property).
I have a <textarea> that needs to fit into a space whose size is not pre-determined (is a percentage of the screen size). I can get good results if FireFox by setting the regular CSS properties:
#container { width: 70%; height:70% }
#text_area { width: 100%; height: 100%; margin: 0; padding:0; }
However in IE 6 and 7 I get different, odd results. In IE6 the textbox appears to have padding to both the left and the right, pushing the size of my container to grow. In IE7 the textbox has padding to the left, but does not make the size of the container grow - instead its right edge pushes outside of the container.
The height setting seems to have no effect in either IE6 or IE7; the <textarea> is 2 rows long in both cases, ignoring the height:100% directive.
Is there a consistent way to size a <textarea> across browsers?
Is there a way to get rid of the padding to the left of the <textarea>?
Update
Using position:absolute removes the padding, but the width:100% is still screwed up. IE7 seems to calculate the 100% width to be too large, resulting in a <textarea>that spills out of the <div> that contains it.
I'll create a stand-alone example if I get a chance...
I've seen this problem with ASP.Net textbox controls also in IE7. I couldn't remember where I found a solution (but props to the person that found it), but I was having the same problem where the textbox with width="100%" would actually break the DOM and my entire content section would "spill" onto a neighboring section (such as a table based navigation).
The solution I eventually adopted was to wrap the asp:Textbox inside its own table and set the "table-layout:fixed; width: 100%" property and on the textbox/textarea "position:relative; width: 100%;" so the block would look like this:
<table style="width: 100%; table-layout: fixed;">
<tbody>
<tr>
<td>
<asp:Textbox id="txtMyTextbox" runat="server" Width="100%" style="position: relative;"/>
</td>
</tr>
</tbody>
</table>
This is not the prettiest solution, but I have verified that it does work cross all browsers. I have a write-up on this issue HERE.
Hope this helped.
There may be a sneaky CSS way to achieve this that I don't know about, but in my experience this is one of the things where using a bit of Javascript is justified.
You could get the height you need (of the current window I presume) using JQuery or Prototype, or in pure Javascript: Get the height of the current document and then
document.getElementById("text_area").style.height = calculated_height+"px";
The left hand padding I find odd, though. Can you post an example?
In order to solve this kind of problems, one has to think about how percentage is handled in the browser. First of all.... percentages don't exist, they are converted to pixels at some point. The steps are 1) browser renders all tags, 2) browser measures outer, parent, percent-sized boxes to get its size in pixels, and sets the size of the child boxes according to their percentage size.
I think the first thing to verify is the size of textarea's parent box, and it's parent box, and so on. This can be done by checking the "Layout" information in Firebug and IE Developer Toolbar, and find out what's measured differently in both browsers. Once you find that element (or elemets) css can be adjusted to consider them.
Have in mind that percentage sizing considers the width and height of parent box content to size the child element and not padding. So, if a parent box width is 500px and has 100px padding, a child element with 100% width will be 500px and the 100px padding will be around it, and both elements will take 700px of your screen.
Try
adding a min-height:100% on the text area css. On the div containing the absolute positioned , set the position to relative on your css.
also use transistional Doctypes instead of strict, while your at it. Make sure there are no unclosed tags. I would be better if you can make the page XHTML or HTML standard compliant so that you will have less problems with cross browser compatibility.
Try adding display:blockand border:0 to your #text_area.
The former should take care of the height-issue and the latter prevents the width:100% to spill over.