I have some div, inside of which has a couple of tables as below
<div id="div1">
<div id="div2">
<div id="div3">
<table id="table1"><tr><td></td></tr></table>
<table id="table2">
<tr></td></td></td></td></tr>
<tr></td></td></td></td></tr>
</table>
</div>
</div>
</div>
When table2 has lot of rows, am using overflow in css to show the horizontal scroll bars. This scrollbars I am applying to div2, so when we scroll, table1 also scrolls down. How to make sure that table1 is always fixed, that is, it does not scroll down?
Thanks a lot
css
table {max-height: 200px;}
tbody {
height: 180px;
overflow:auto;
}
html
<table id="table2">
<tbody>
<tr></td></td></td></td></tr>
<tr></td></td></td></td></tr>
<tbody>
</table>
For more in depth explanation, see: http://www.imaputz.com/cssStuff/bigFourVersion.html
Related
I have a page where there are two images on top which are floated to left and right as below :
.floatLeft{ float:left;}
.floatRight{ float:right; }
<div>
<img src="firstImage" class="floatLeft"/>
<img src="secondImage" class="floatRight"/>
<!-- wright here -->
</div>
Issue is when i write anything after images (be it in div or a plain text ) and if it goes beyong page width ,
the text after maximum width shifts downwords entirely after images . That is text doesn't wrap inbetween two images
What i understand about float is text should "FLOW" in between two images (unless we use clear which "clears" area around images ) , but its not working like that.
I want to have a text in between two images.
Any help is higly appreciated as a I have done a lot of efforts but it is not working.
Logically, you have 3 blocks of data here, so I suggest using 3 floating divs with set width:
.floatLeft{ float:left}
.div1{width:X%}
.div2{width:Y%}
.div3{width:Z%}
.overflow{overflow: hidden} /* this is optional */
<div class="overflow">
<div class="floatLeft div1">
<img src="firstImage"/>
</div">
<div class="floatLeft div2">
<!-- text here -->
</div">
<div class="floatLeft div3"><!-- or make it float right if you want -->
<img src="secondImage"/>
</div">
</div>
If you want your images a fixed width, try using CSS calc:
.div1{width:100px}
.div2{width:-moz-calc(100%-300px);-webkit-calc(100%-300px);calc(100%-300px);} /* not supported in some browsers */
.div3{width:200px}
But honestly I recommend to go classic way and use a table here:
.table {width:100%;border-collapse:collapse}
.table td {padding:0;margin:0}
.block1 {width:X%} /* or width:Xpx */
.block3 {width:Z%} /* or width:Zpx */
/* do not touch block2 here */
<table class='table'>
<tr>
<td class='block1'>
<img src="firstImage"/>
</td>
<td class='block2'>
<!-- text here -->
</td>
<td class='block3'>
<img src="secondImage"/>
</td>
</tr>
</table>
Remember to wrap your content in "blocks", it always helps when you mark up.
I guess this is the answer that you need jsfiddle
I will explain a little about.
in your div add a class of imgcontainer
in your css, add the following
.imgcontainer{
position:relative;
}
you can add the width of the div, in jsfiddle I set it as 150px. and each of the image is 50px. there you add paragraph with some text
Try this way
<div>
<img src="firstImage" class="floatLeft"/>
<p class="floatLeft">Some textgoes here</p>
<img src="secondImage" class="floatRight"/>
</div>
but give proper width
Another variation is using a CSS version of the table approach proposed by igorpavlov. You have to replace the table/tr/td by divs and to adapt the CSS as proposed here :
.table {width:100%; display: table;}
div{ display: table-cell; vertical-align: top;}
.block1 {width:33%} /* or width:Xpx */
.block3 {width:33%} /* or width:Zpx */
img {width: 100%; height: auto;}
<div class='table'>
<div class='block1'>
<img src="firstImage"/>
</div>
<div class='block2'>
<!-- text here -->
</div>
<div class='block3'>
<img src="secondImage"/>
</div>
</div>
It provides better semantics and works IE8+!
I am writing my first CSS lines. I want to align all rows of the same block together but I am not sure how to do this. This is what I am trying to do:
Using regular HTML I would have created a table with as many rows as days and 2 columns. However since CSS is about separating content from presentation I think this violates the principles of CSS. I am thinking that the needed code will have the form:
<div>
<div>days</div><div>hours</div>
</div>
but I am not sure how the CSS should look like. I don't even understand the CSS defines exactly where to load the different areas.
Thank you
Always use table for table structured data, so that it can be easily styled using css like the way you wanted.
Also Table will be easier to understand when one looks at the source!
What if the developer later wants to have a striped row or a hover over effect on a row or a column? so use table and leave all the styling part to be dealt in CSS.
here is a typical html and CSS for your need, view it in jsfiddle
HTML
<table id="schedule">
<tbody>
<tr>
<td>monday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>tuesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>wednesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>thursday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>friday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>saturday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>sunday</td>
<td>closed</td>
</tr>
</tbody>
</table>
CSS
#schedule td:first-of-type
{
text-transform: capitalize;
text-align: left;
padding-right: 10px;
}
#schedule td:last-of-type
{
text-align: center;
padding-left: 10px;
}
I have created a fiddle that should solve your problem.
Here is the link to the fiddle
Below is the HTML and CSS Code
HTML
<div id="outer">
<div class="push-left">Monday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Tuesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Wednesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Thursday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
</div>
CSS
#outer{
width:170px; //width of the container
}
.push-left{
float:left; //pushes the element to the left
}
.push-right{
float:right; //pushes the element to the right
}
.clearfix{
clear:both; //clears any applied floats
}
Hope this solves your problem!
Try
dayshours
Then CSS
.holder{
clear:both;
}
.test{
width:200px;
}
The holder will keep the lines separate
And the test will define 200px or what ever width you want to each field
Either that or use tables
I have 4 divs in my .html:
<div id="div">
<div class="contenido">1</div>
</div>
<div id="divSupIzq">
<div class="contenidos"><div id="textoDinamico">120 </div><div id="textoEstatico">KM/H</div></div>
</div>
<div id="divSupDer">
<div class="contenidos">zona de</br>avisos</div>
</div>
<div id="divInfIzq">
<div class="contenidos">zona de</br>información</div>
</div>
In .css, I've applied border-radius in order to give these divs circular form.
I've applied text-align:center because I want the content of each div being centered
But how to center the content in the height?? I give some margin-top in .css, but it's wrong, because the interface is adaptable to the size screens (responsible design - css queries) and margin-top isn't sufficient for me...
I don't know if I'm explaining myself well...I try that yes.
Sorry for my bad english. Regards, Daniel
Live example: http://jsfiddle.net/cN2pS/
Another question: what tools do you use in order to test these type of apps for differents resolutions?
Use a table and set the align for each td center
<table>
<tr>
<td align="center">
Your text or elements
</td>
</tr>
</table>
Or set the div display as table-cell
So I have one row with 5 cells. The widths of the inner 3 are static. The first and last (far left and far right) should expand to fill the page so the inner 3 are centered. The outer cells are necessary, because they contain a repeating background image. Using tables, this is easy, because not supplying a width to the outer cells allows them to expand and make up the extra space:
<table width="100%">
<tr height="400">
<td></td>
<td width="200"></td>
<td width="300"></td>
<td width="200"></td>
<td></td>
</tr>
</table>
But I can't seem to get the same effect using DIV's and CSS, except for using the display:table; properties. I'm hoping to find another way around this, since this property isn't supported in IE6 and IE7.
<div id="container">
<div id="stretchLeft"></div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<div id="stretchRight"></div>
</div>
You could do it with javascript / jQuery on load and on resize.
Get the full page width.
Then (full page width - left width - center width - right width)/2
That will be the width for your stretches.
If the only purpose of #stretchLeft and #stretchRight are to center the remaining three divs, then simply leave them out.
body{
text-align:center;
}
#container{
width:700px;
margin:auto;
}
<body>
<div id="container">
<div id="stretchLeft"></div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<div id="stretchRight"></div>
</div>
</body>
Would do what you want.
If they have content, something along these lines will work, but it needs tweaked to your own personal situation:
http://jsfiddle.net/YFx2m/
Also, FWIW, unless you have business reasons for supporting them, IE6 is less than 1% market share, and IE7 is under 5%.
I have a page with a couple of divs, sort of like this:
<div id="content">
<div id="topDIV" style="background-color: #0000C9; position:absolute; width:100%; top:0px; left:0px; height:44px;">
<table cellpadding="0" cellspacing="0" border="0" style="height:44px; width:100%;">
<tr><td>header div<td></tr>
</table>
</div>
<div id="mainTableDIV" style="background-color: #f00; padding: 10px; position:absolute; top:44px; left:0px;">
<table cellspacing=0 cellpadding=0 border=0 style="width:1400px;height:800px">
<tr><td><td></tr>
</table>
</div>
</div>
So second div (mainTableDIV) populates via AJAX request and width is set to approx 1400px depends on data.
so when i shrink browser less that this width i see horizontal scrollbar. when i scroll to the right first div (topDIV) which is a header div is not expanding to the same width as second div.
How can i make first header div to be always the same width as second width?
Wrap them in a div tag of their own
<div id='content'>
<div id="div_one" style="width:100%;">
<table width=100%...>
...
</table>
</div>
<div id="div_two" style="width:100%;>
<div id="data_div"></div>
</div>
</div>
First, you do not need width:100% when dealing with a div (as long as there is not a float). A div will AUTO FILL in the area that its placed in. So If content 2 exceeds the size of content 1, as long as the overall content container does not have a RESTRICTION on it, in terms of width, the content 1 will grow to meet content 2.
You've got some quotes in strange places, try fixing those and it should work. Besides that, it's a bit clearer if you instead use CSS to set the styles of these divs:
HTML:
<div id="div_one" class="divider"></div>
<div id="div_two" class="divider"></div>
CSS:
.class {
width: 100%;
}
Is this what you're looking for?