I've been working with a html page that has a form in the bottom of the page. That form is inside a table and table is inside a div. Fiddle here : http://jsfiddle.net/2ZTvQ/
Problem is on smaller screen the div is taking 100% width(full width of the screen) but not width of the whole table containing the form. I'm not an expert with html/css so I'm not even sure if it can be done this way.
Sample HTML:
<div class='wide'>
<table width="100%">
<tr>
<td>
looooooooooooooo ooooooooooo00000 ooooooong text goes here
</td>
</tr>
</table>
</div>
CSS:
.wide {
text-align:center;
background:#e7e7e4;
width: 100%;
padding-top:20px;
}
Remove text-align:center; or create a new aligning style for the table.
What I think you will have to do is add a min-width to .wide of however small the table will get after manually trying to reduce it's width. So once it is as small as you can get it (use media queries to change classes under a certain window width) set
.wide { min-width: thatSize; }
What will happen now is instead of the content disappearing or running out of the div, you will now just have to scroll horizontally to see it all.
Or what you can do is add
.wide { overflow: scroll; }
What that will do is keep the viewport the same size, but make the content inside .wide scrollable like an iframe. Probably better looking than the first solution. Whatever you decide is a design choice on your part. But most important thing would be using media queries and trying to get the form as thin as possible. Display block and percentage widths are your friends there.
Related
I want to make content of <div class="features"> smaller so that it appears like this:
Check this demo here to see what I have been able to achieve so far.As you see in the pic the features icons(No daily limits etc...) are small and the text below them is centered but I haven't been able to do this so far.
Give Some Width to class features in css .
<pre>
.features { width: 800px; }
</pre>
You can use media query for this.(If device size is smaller then you mentioned as above then what will be size of your given width and all thing goes here...As shown below.)
<pre>
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
// font-size , margin , padding etc goes here ...
}
}
</pre>
Disable width in the class .feature. Currently, it is set to 400px. Once done, you should have something like this
I figured, rather than go back and forth in comments, I'd just write an answer.
A couple of things to consider:
your images and your text are in separate areas. For the images you adjust their size using width/height not font-size. If you want to adjust the font-size then adjust the class of the captions.
.features img {
float: left;
padding-left: 50px;
width: 100px; /*add some sort of width/height and that will resize*/
}
Your images and text are in different rows of the table, so adjusting them as a unit will be very hard.
<tr>
<td>
<img src=""/>
<p>text</p>
</td>
</tr>
would probably be a better set up, but to be honest ditching the tables all together and moving to a list would be more semantic.
<ul class="features">
<li>
<img src=""/>
<span>image caption</span>
</li>
</ul>
If you really want to get semantic checkout http://html5doctor.com/the-figure-figcaption-elements/ but long story short, you just need to hit those images with a width/height to adjust the size.
Hello I am trying to make an online chat application.
I have the html:
<body>
<table align="center" width="80%">
<tbody class="scroll">
<!--All of the chat-->
</tbody>
<tbody class="formheight" style="width:100%">
<tr>
<td>
<form style="width:100%" action="Write-to.php" method="post">
<input autocomplete="off" name="txt" type="text" id="usermsg" style="font-size:2.4vw;" value="" />
</form>
</td>
</tr>
</tbody>
</table>
</body>
And the css:
html, body
{
height: 100%;
max-height:100%;
overflow: hidden;
}
table
{
height: 100%;
}
tbody {
overflow: auto;
width:100%;
}
thead > tr, tbody{
display:block;
}
I want the 2nd tbody (The one that contains the form) to lie at the bottom of the page and the first to fill the rest of the page upwards.
Currently I am having to use jquery to (kind of) do what I want. Currently the form is half hidden. I would rather do this all with CSS so that it works better with mobile devices.
How could I do that?
Jquery:
var heighty = $(window).height();
var height = $('.formheight').height();
$(".scroll").css("height", heighty - height + "px");
I also can't for the life of me get the form text input to be 100% width?
Please see JSfiddle
I am also very open to another way of laying out this chat app all together!
This is possible in CSS, but would be very difficult to get working across all browsers. Instead, here is my recommendation:
Create an element that fills up 100% height with a bottom padding set to X px.
Create an element with position:fixed and a height of X px.
Give the latter element a z-index:2 and the former a z-index:1. z-index doesn't need to be assigned manually, elements further down in source code automatically have a higher priority and are displayed over previous elements (if they overlay visually).
If you want, you could use a different unit. Percents are very easy because you can have them add up to 100%, so no need for a margin. Of course each has its respective drawbacks, but in my experience what I've described generally has good compatibility and displays comparably on all devices. You could even use CSS #media queries to change the height, X, for different devices.
You need to use something what we call a "Sticky Footer", In your case, your second body goes in the sticky footer. Have a look at this http://ryanfait.com/sticky-footer/ or this http://www.cssstickyfooter.com/ for the css+html for a sticky footer
It's not easy explaining the need here, but here is the playground for the problem.
Playground
Requirements:
First cell has FIXED width
Middle cell width takes the rest of the space
Last cell's width depends on it's children's width
The Question:
How can the middle cell take the rest of the row's space, without being "taken over" by it's child's greater width?
this is a simplified version of my problem, using real tables instead of CSS tables)
Without specific markup, it's hard to propose an exact solution, but here are some things to consider.
The left-most fixed-width cell is easily handled by setting its width. e.g. width: 100px. (This cell isn't really relevant to the problem; in a sense it can be ignored.)
If I'm interpreting correctly, you want to prevent the right-most cell from wrapping. That's easy or hard, depending on the content. For pure text, it can be achieved with white-space: nowrap. If the content isn't strictly text, perhaps you can coerce it into acting like text, e.g. display: inline.
For the middle cell, you don't specify what you want to happen to the excess content. Hide it? Add a horizontal scroll bar? You also don't indicate what this content is. But most likely you'll want to set the overflow-x property to some suitable value.
Solution playground
HTML
<table>
<tr>
<td></td>
<td>
<div>
<div></div>
</div>
</td>
<td>
<b></b>
<b></b>
<b></b>
</td>
</tr>
</table>
CSS
table{ width:100%; }
/*
This is the trick. There is a wrapping DIV with a position:relative which
holds the actual content DIV which is positioned Absolute, so it's width won't
affect it's own cell width's
*/
td > div{ position:relative; width:100%; height:20px; }
div div{
position:absolute;
background:green; height:100%; width:800px;
}
/* First TD has FIXED width */
td:nth-child(1){ width:100px; background:#EEE; }
/* Middle TD width takes the rest of the space */
td:nth-child(2){ overflow:hidden; }
/* Last TD has width depends on it's children's width */
td:nth-child(3){ white-space:nowrap; width:1%; }
Looking for some expert advice here about how best to style the following HTML:
<body>
-Some content-
<div class="parent" style="height:50%;">
<div class="child" style="background-color:#FF9999;">An image</div>
<div class="child" style="background-color:#9999FF;">Some text</div>
</div>
</body>
To obtain a result that behaves like this:
The criteria that I am working with are the following:
The container div, .parent, is a block element and fills the entire width of the browser window.
I know the width of the first/left inner div, in pixels but not as a percentage, based on the regularity of the images that will go there.
I don't know the width of the second/right inner div - as it contains a variable amount of text that should automatically fill the entire space to the right, regardless of browser window width
The height of the first/left div, when shorter than the second/right div, should stretch to the same height (here's the reason: the first/left div will have a right-border to set it off from the second/right div, and this border should be the height of the .parent div; however, the first/left div is not always present in the mark-up, in which case the border should not appear).
I cannot use JavaScript trickery.
Solutions I have tried based on my experience and help from web sources:
Float:
The traditional method that uses float:left leaves me apparently unable to stretch the first/left div to the (variable) height of either its sibling or .parent.
Inline-block:
.parent {background-color:#999999;}
.parent > .child {display:inline-block;vertical-align:top;height:100%;}
Using display:inline-block appears to work like a charm when the text in the second/right div is not enough to fill an entire line. The moment there is more text, however, the second/right div grows as wide as the outer container will let it, forcing it to wrap under the first/right div.
Any insights would be much appreciated!
Using table based markup is not the answer. However, iff you don't need to support IE7 or lower, you can use display:table to solve this. Check out this demonstration i threw together. Edit the amount of content in the second child div to see the effect.
jsfiddle demonstrating display:table
.parent {
display:table;
}
.child {
display:table-cell;
}
Basically, you tell the parent element to act like a table, the two child elements to act like table cells. This gives you the benefits of the table layout without the accessibility problems and extra markup of html tables. As I mentioned though, this doesn't work in IE7. If you need old IE support, you'll have to resort to less graceful workarounds :(
While tables have gotten a bad reputation, this would be a good application for one.
<body>
-Some content-
<table class="parent" style="height:50%;">
<tr>
<td class="child" style="background-color:#FF9999;" width="10">An image</td>
<td class="child" style="background-color:#9999FF;">Some text</td>
</tr>
</table>
</body>
If you set the width to a minimum, it will push your content over even if it's larger, and no matter which column is taller, it will push the overall content box down.
I having a hard time with my CSS min-height, I have two divs and they are side by said, if one of them expands, I would like the other to expand http://www.willruppelglass.com/
As you can see the leftSideBar stops expanding at its min-height and the content div is expanded past its min-height.
CSS
.leftSideBar{
background:url(../images/leftSide.jpg) repeat-y;
float:left;
margin-top: -49px;
min-height: 591px;
}
.contentWrapper{
background-color:#ebebeb;
width:1411px;
margin:0 auto;
position:relative;
}
.content{
background:#FFF;
width: 1100px;
margin:0 auto;
position:relative;
min-height: 591px;
}
HTML
<div class="contentWrapper">
<div class="content">
<div class="leftSideBar">
<img src="images/leftSideTop.jpg" width="170" height="78" border="0" />
</div><!--leftSideBar-->
</div><!--content-->
</div><!--contentWrapper-->
The reason this is happening is because the content in the content div is pushing past the minimum height but the left nav not actually having content has no reason to get bigger.
My suggestion, even though it is not strictly CSS, I would use a simple piece of jQuery (because I noticed you are already using it) that will dynamically adjust the CSS property of the left div to match the right div. The jQuery version is here:
var div_height = $("#content").height();
$(".leftsidebar").css("height":div_height);
Please note that I have used an ID on the content that doesn't exist in your existing code so you will need to assign an ID to that div to work.
I hope this helps.
You have the first area floating left. Whenever you use float it can act different in various browsers, so I avoid that sort of stuff at all costs for main elements.
If you want your divs to be independent of each other, don't nest them. Better yet, control the positioning yourself using css properties such as "display" and "position". Once you get your divs separated from interacting with each other you'll find you have much more control over them individually.