I have a div inside a td element with overflow:hidden set to it (the td). I want the inner div to be positioned in the document flow, and then detached from it so that it is allowed to overflow a little. How do I achieve that using CSS?
The HTML:
<table>
<tr>
<td id="projectDetails">
<div class="edit">
Edit
</div>
<span id="projectName">Project Name</span><br />
Category 1, Category 2<br />
<hr />
<span class="descriptor">Event Date</span>: 22/12/10 12:30<br />
<span class="descriptor">Event Location</span>: Technion, Haifa<br />
<span class="descriptor">Supervisor</span>: Yosi
</td>
<td id="projectDescription">
<div class="edit">
Edit
</div>
<span class="descriptor">Description</span>:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
</table>
The CSS:
table{
table-layout: fixed;
border-bottom: 1px solid;
width: 1008px;
}
td{
border-width: 0px solid;
vertical-align: top;
padding: 5px 5px 5px 5px;
}
#projectName{
font-size: 22px;
color: #892345;
}
td#projectDetails{
width: 350px;
border-right: 1px solid;
overflow: hidden;
}
Basically I want the "edit" div to be positioned at the top right of both td's, but in the projectDetails td to not be constrained by its overflow:hidden attribute.
you can remove the td from the document flow by using the position css attribute. This allows you to move the div around.
#projectDescription {
display: block;
position: relative;
top: 50px;
left: 50px;
}
example
but I'm not sure this is the best way to go about it.
A better way to go about it is to ditch the table, and do the layout using only divs and css, which would simplify your code, make it more readable, less confusing, and separate layout from content. I can post a simplified example if you'd like.
Related
I'm having a little difficulty getting this fade effect to work. I basically have two images on top of each other, and I have a hover effect that makes the opacity of the top image go to zero, which reveals the second image.
This effect is currently working when I have only one section. When I add another section, everything goes out of place. I suspect this has something to do with the fact that I'm using position: absolute, but I'm not sure how to go about fixing it.
I made a simple example to show you what is happening. This is what it looks like with one section (functional):
<body>
<header>
<h1>Projects</h1>
<h3>
Home | GitHub
</h3>
</header>
<hr>
<section>
<h2>Some project</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="container">
<img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
<img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
</div>
</section>
</body>
header {
text-align: center;
}
section {
width: 960px;
margin: 0 auto;
}
.container {
position: relative;
}
img {
position: absolute;
width: 650px;
height: 400px;
display: block;
}
.main {
z-index: 5;
transition: opacity .3s ease-in-out;
}
.main:hover {
opacity: 0;
}
You can see it here: http://jsfiddle.net/503dhw51/
When I try using two sections, the entire thing breaks. This is the code for two sections:
<body>
<header>
<h1>Projects</h1>
<h3>
Home | GitHub
</h3>
</header>
<hr>
<section>
<h2>Some project</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="container">
<img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
<img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
</div>
</section>
<section>
<h2>Some project</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="container">
<img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
<img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
</div>
</section>
</body>
and the CSS is the same.
Here is the jsfiddle for it: http://jsfiddle.net/5asgswxr/1/
I basically have two issues I need to fix:
Getting this to work for multiple sections
Somehow centering the images once I've fixed the first part
I would appreciate any help with either of these issues. Thanks in advance!
Here is my attempt. You can use this with other tags instead of images.
/*assures images to be of the same size*/
.frame { height: 300px; width:300px; }
/* code for effect you are looking for*/
figure { overflow: hidden; position: relative; border:solid lightgray 2px;}
.img1 { left: 0; position: absolute; right: 0; top: 0;
-webkit-transition: all 100ms ease-out;-moz-transition: all 500ms ease-out;transition: all 500ms ease-out;
border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;
}
.img1:hover { opacity: 0;}
/** important having things not "float" around*/
.clearfix:after { content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
edit: Ahh.. I should have looked at the other submission before posting mine. Sorry.
As you suspected, the issue is that you are absolutely positioning all of the img elements. When an element is absolutely positioned, it is removed from the normal flow, resulting in other elements not taking it into consideration (thus, the overlap).
Since the .container element only contains absolutely positioned elements, it collapses upon itself and has a height of 0. To avoid this, one option would be to set an explicit height/width on the parent element.
Alternatively, the better option would be to only absolutely position a single img element. In doing so, the .container element will remain in the normal flow (because one of the img element's isn't removed from the flow). In this case, you could absolutely position the img element with class .main. In doing so, the other img element remains in the normal flow and defines the height/width of the parent, .containerelement.
Updated Example
.container {
position: relative;
}
.container img.main {
position: absolute;
}
For your second question (about centering), take a look at this updated example.
This code works in every browser just fine, of course except IE8 and IE9. Unfortunately those specific users are not allowed to use any other browsers in their environment. Googled for 3 hours, tried all possible CSS solutions, but it wont work. Please advice.
table-layout: fixed is not going to work, because table cells need to have specific width.
http://jsfiddle.net/s7va8mLc/1/
http://jsfiddle.net/s7va8mLc/1/embedded/result/ (for IE8 view)
HTML:
<table>
<tr>
<th>Test</th>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
</table>
CSS:
table {
width: 500px;
border: 1px dotted blue;
}
th {
width: 250px;
}
td {
width: 250px;
max-width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px dotted red;
}
Expected result:
IE8-9 result:
Try this, hope it helps (tested in IE8 natively).
http://jsfiddle.net/s7va8mLc/7/
http://jsfiddle.net/s7va8mLc/7/embedded/result/
HTML
<table>
<tr>
<th>Test</th>
<td>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</td>
</tr>
</table>
CSS
table {
width: 500px;
border: 1px dotted blue;
}
th {
width: 250px;
}
td, span {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
span {
display: block;
border: 1px dotted red;
}
For getting internet explorer's compatibility you need type tag at the top like that :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Now run this again, I hope it will solve your issue.
In your td put a tag like p, span, label and fix its width some less than div width.
Then it will work.
just use td width property to 50% instead of tag it will work on all the browsers i believe.
check this fiddle
<table>
<tr>
<td class="text-center" width="50%">Test</td>
<td width="50%">
Lorem ipsum dolor sit amet, ...
</td>
</tr>
</table>
.text-center{
text-align:center;
font-weight:bold;
}
I'm trying to implement the following text wrapping in HTML. I want the image to always appear below the first line of text, whatever the width of the page is.
Illustration:
And when the page is resized to be a bit narrower, it should look like this:
Basically the same way Word does it when you choose "Top and Bottom" in the image text wrapping options.
I'm pretty sure there's no built-in CSS feature for this layout. I think it could be implemented with text-measurements in JS - but it doesn't seem like a very elegant solution.
Any ideas?
Edit
The solution should also work for placing the at the n-th line, not just the first line.
This seems to work - FIDDLE.
CSS
.bigdiv {
border: 1px solid black;
width: 80%;
}
.picturediv {
width: 100%;
float: right;
}
.picturediv img {
width: 100%;
}
I've adapted TimSPQR's answer to allow placing the image on any line.
This is achieved by adding a narrow div that floats above the image, the line-height of which controls how many lines of text appear before the image.
HTML:
<div class='bigdiv'>
Lorem
<div class="clear">
</div>
<div class='picturediv'>
<img src='http://www.hdpaperwall.com/wp-content/uploads/2013/11/Mickey-Mouse-Wallpaper-disney-6628369-1024-768.jpg'/>
</div>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
CSS:
.bigdiv {
border: 1px solid black;
width: 80%;
line-height: 1em;
}
.picturediv {
width: 100%;
float: right;
}
.picturediv img {
width: 100%;
}
.clear
{
float: right;
line-height: 2em;
}
Fiddle
I've got this container with 2 elements inside: http://jsfiddle.net/scQa2/1/ (JSFiddle doesn't seem to center properly so it's best to copy and paste the code)
test.html
<div id="main">
<img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249402_1024_768.jpg" id="image"/>
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
test.css
#main {
width: 410px;
margin: auto;
}
#image {
max-width: 200px;
width: 100%;
float: left;
border: 1px solid blue;
}
#text {
max-width: 200px;
width: 100%;
float: left;
border: 1px solid red;
}
What I am to do is have the contents align in the centre of the container, rather than have the container centred as since the two elements are both using max-width.
If I set the margin of the container to auto and set it to a specific width (say 410px, just enough for the 2 max-widths of 200px) , I get this:
But if the child elements shrink below the max-width they do not align as the container has not changed width:
Is there a way I can ensure that the two child elements are centred horizontally at all times, preferably without JavaScript and with just pure CSS/HTML?
Try this, hope its what you're after...
#main {
border: 1px solid red;
display: block;
width: 90%;
margin: 0 auto;
text-align: center;
}
.image{
vertical-align: top;
border: 1px solid blue;
display: inline-block;
}
.image img {
max-width: 200px;
}
#text {
vertical-align: top;
max-width: 200px;
border: 1px solid red;
display: inline-block;
}
html
<div id="main">
<p class="image">
<img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249402_1024_768.jpg"/>
</p>
<p id="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
I want to position a div in the middle of the page. The solution I found on the internet assumes that the div will be of static size. I need the div to be in the middle, if the content is the right size, but if it is over the size of the div, it should become bigger, and eventually allow scrolling without changing the width.
PS: I don't need support for IE, just XULRunner (Firefox) and Webkit based browsers.
Edit: The whole page must be scrollable, not just the content div. And I need to preserve all the line breaks.
Here you go:
<style>
.container{
border: 1px solid Red;
width: 300px;
height: 500px;
display:table-cell;
vertical-align:middle;
}
.content{
border: 1px solid Blue;
width: 100px;
height:auto;
min-height: 100px;
max-height:200px;
margin-left:auto;
margin-right:auto;
overflow:auto;
}
</style>
<div class="container">
<div class="content">
add content here
</div>
</div>
How it looks like:
Test it.
If you don't need IE support use vertical-align property:
make the body displays as table
an outer div as table-cell and set it's vertical-align as 'middle'
like:
<style type="text/css" media="screen">
html{
height: 100%;
}
body {
width: 100%;
height: 100%;
display: table;
margin: 0;
}
#div_1 {
display: table-cell;
text-align: center;
vertical-align: middle;
line-height: 100%;
}
#div_2 {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: auto;
}
</style>
<body>
<div id="div_1">
<div id="div_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
EDIT: A more cross-browser implementation you would make the body like that:
<body>
<table>
<tr><td>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</td></tr>
</table>
</body>
once display: table doesn't works well with IE7 and early (looks like should work on ie8, but I still couldn't make it)