I have a link and an iframe side-by-side. I want the link to appear over the iframe. This occurs inside of a td element. this pattern is iterated over a few rows. When I use relative css positioning, I am able to display the link over the iframe, but the space the link would have been in, still appears. and it add unnecessarily to the column height. I want to eliminate this space. How can I do this?
I looked at this but it seems that this solution would still jack up the tr/td height. I also have a sample of my issue
Collapsing the lineheight should do it. Be sure to put a measurement, and not just "0" so it will work in ie6. I added the .collapse class to the divs containing the anchors. http://jsfiddle.net/grs53/20/
HTML
<table>
<tbody>
<tr>
<td class="donotwant">
<div class="collapse">
<a class="top" href="bing.com">link</a>
</div>
<div>
<iframe class="bottom" src="http://www.google.com" ></iframe>
</div>
</td>
</tr>
<tr>
<td class="donotwant">
<div class="collapse">
<a class="top" href="bing.com">link</a>
</div>
<div>
<iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
</div>
</td>
</tr>
</tbody>
</table>
CSS
.donotwant {
border:2px dotted green;
}
.top {
top:80px;
left:120px;
position:relative;
z-index:2;
background:red;
}
.bottom {
position:relative;
z-index:1
}
.collapse {
line-height:0px;
}
Change your HTML to this
<table>
<tbody>
<tr>
<td class="donotwant">
<div class="top">
link
</div>
<iframe src="http://www.google.com" ></iframe>
</td>
</tr>
<tr>
<td class="donotwant">
<div class="top">
link
</div>
<iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
</td>
</tr>
</tbody>
</table>
And you CSS to this:
.donotwant {
border:2px dotted green;
position:relative;
height:180px;
width:300px;
}
.top {
top:80px;
left:120px;
position:absolute;
z-index:2;
}
.bottom {
position:relative;
z-index:1
}
A relative position object keeps it's initial placement but is displayed elsewhere. An absolute positioned element is actually moved to a new position. You can move absolute positioned elements on top of relative positioned.
In the example above I created a div that is relative positioned in which any absolute position element can be moved around from of the top left corner of the relative positioned element. If the relative positioned element is moved anywhere else on the page the absolute one will follow.
That unwanted space is from the DIV element you have wrapped around you link. Remove that.
http://jsfiddle.net/saad/grs53/12/
Just collapse the <div /> that holds the link (e.g. set height to 0). Cross browser might require additional styles but here is an example tested in Chrome
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 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?
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
<style>
.special p { display:none; }
.special:hover p { display:block; }
</style>
<table>
<tr>
<td style="width:200px">Things</td>
<td style="position:relative; width:220px">
<div style="position:absolute;right:0" class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
<tr>
<td style="width:200px">Things</td>
<td style="position:relative; width:220px">
<div style="position:absolute;right:0" class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
</table>
Can I make this work? Ie, can I make the #special p expand over the top of 'Things'? As I currently have it set up #special won't ever grow outside the 220px wide td. Any ideas?
I am still not fully clear, but try this. This will allow the TD to grow when the content is displayed.
<table>
<tr>
<td style="width:200px">Things</td>
<td style="text-align: right;">
<div class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
</table>
I'm not 100% sure what you are trying to achieve, but wow about taking away the position: relative from the td and making the .special p s position: absolute but not the special elements themselves?
That way, your special elements will be in the normal table flow, and the paragraphs popping up will leave the table cell's boundaries.