What I'd expect from the HTML below is that I'd see woo1 and woo2 overlapping while hiiii remains in its own cell away from the woos. However, everything runs together. Why?
http://jsfiddle.net/T4Jgx/
<table>
<tr>
<td style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</td>
<td>
<span>hiiii</span>
</td>
</tr>
</table>
Edit: Weird. When I remove the style from woo2, it appears to work. When I remove it from woo1, woo2 overlaps hiiii. Da fu...?
Edit2: For Reconstruct, your comment has to do with tables, so how come the exact same effect can be reproduced with this?
<div>
<span style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</span>
<span>hiiii</span>
</div>
Edit3: Arrghh... I believe I understand what is happening. By adding absolute positioning to the two spans, they are removed from the control flow and the first TD is collapsed. I am thinking about deleting this question, but maybe someone can just confirm what I just said and get the answer?
Wrap your TD content in a DIV and transfer position:relative to that.
<td>
<div style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</div>
</td>
Related
I have a list of page titles that I want to display with a font awesome symbol next to them.
<div>
<ul class="form-navigation">
<li ng-repeat="..."
ng-click="...">
<div>
{{QuestionGroup.Title}}
<span class="pull-right fa fa-exclamation-triangle" style="color: red;"></span>
</div>
</li>
</ul>
</div>
I want the text to be centered vertically and the FA symbol to be centered horizontally and vertically. I've tried a range of different things with putting them in different divs and applying various styles but I can't get anything to work.
The symbol is the biggest issue, because I could centre it by adding padding at the top/bottom but because my page titles have random lengths they might take up more than 1 row causing the div to be a different size.
Use table to align them properly
<div>
<tr>
<td>
This is lol
<td>
<td>
<span class="fa fa-exclamation-triangle" style="color: red;"></span>
<td>
</tr>
</div>
This is sort of a general web development question that I need some experts' advice on. This is probably quite a no brainer for some of you, but I am having trouble getting this to display properly.
I have a database table set up where each entry has 5 text fields, and one image. What I want to do is use the repeater to display the text on the left hand side of the div, and the image on the right hand side of the div (basically aligned with the center of the text).
Company Name
Description1
Description2
Description3 Image goes about here.
Description4
Description5
I have the repeater all configured properly and ready to go, it's displaying the text just fine in a well formatted way. However, I'm having trouble getting that image to display properly. Do I need to use text wrapping here to accomplish this? I'm pretty stuck and don't know where to proceed. I can post my ASP.net code here if desired.
Thank you so much in advance. Very helpful site for new programmers.
I'm assuming you can't set a fixed height on your column divs? Is so, and if you're happy to use an HTML table (many aren't) then your life will be much simpler than trying to vertically align an image inside a floated div using CSS. Try this:
<!DOCTYPE html>
<html>
<body>
<table style="width:960px; margin:auto 0;">
<tr>
<td style="width:75%;">
<asp:repeater...>
</asp:repeater>
</td>
<td style="width:25%;" valign="middle">
<asp:Image .../>
</td>
</tr>
</table>
Notice the valign="middle" attribute on the right td. Although valign is deprecated in HTML5, it still works in all modern browsers and all supported versions of IE.
NOTE: many will argue that tables aren't SEO friendly or that tables aren't intended for this, plus it's not strictly html5 compliant, so you'll need to way that up. Personally, because it just works and solves a simple problem that CSS can't without silly hacks, I'd use it without worrying too much.
If you want to have the div with the text inside to the left and the image to the right, you can use "Float: Left" to the div with the text inside and "float:right" to the div of the image. This should look like this :
<div style="float: left;"> <--- float:left
<table>
<asp:Repeater ID="TournoiAvenirRep" runat="server">
<ItemTemplate>
<tr>
<td>...</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div style="float:right"> <--- float:right
<img src='...' />
</div>
And if you want to have an other div BUT not on the same line , you must add a "clear:both" to the new div :
<div style="float: left;">
<table>
<asp:Repeater ID="TournoiAvenirRep" runat="server">
<ItemTemplate>
<tr>
<td>...</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div style="float:right">
<img src='...' />
</div>
<div style="clear:both"> <------ here clear both
...
</div>
Hope this will help you ! , vinc
EDIT : If you want learn more about css positioning and float you can go to W3 school, they have some nice tuto about it.
This is a CSS issue. You'll need two floated divs, something like this:
<div class="clearfix">
<div style="float:left; width:75%;">
<asp:Repeater ID="MyRepeater" runat="server" [etc] />
</div>
<div style="float:right; width:25%;">
<asp:Image ID="MyImage" runat="server" [etc] />
</div>
</div>
If you want specific examples, please see http://www.vanseodesign.com/css/vertical-centering/.
I have a site that generates related video's to a topic. I have 4 thumbnails and I want to add a css play button on the thumbnails, which can be done with this code: ► | It will be like this: http://i47.tinypic.com/250qis9.png
Here is a demo: http://jsfiddle.net/vtPhZ/2/
The problem is that it won't recognize the a:before tags that I gave it to. What am I doing wrong?
The HTML snippet which generates the list:
<div id="youtubeThumbs">
<ul class="ytlist">
<li>
<table cellspacing="3" cellpadding="3" border="0">
<tbody>
<tr>
<td valign="top" rowspan="2">
<a class="clip" style="cursor: pointer;">
<span>
<img src="http://i.ytimg.com/vi/1q47bOtV3-Y/hqdefault.jpg">
<em></em>
</span>
</a>
</td>
<td valign="top">
</tr>
</tbody>
</table>
</li>
And the CSS I tried to use (without success):
.ytlist li > a:before {
content: "►";
}
How can I make it work?
I can't explain why but for some reason your change of methods for declaring a child element is causing the problem. Using my first two recommendations of using the unicode entity for the content and using the pseudo element rather than the pseudo class, the CSS should work. However, it did not initially work. When I removed > from the first line the CSS worked.
Here's a demo: http://jsfiddle.net/vtPhZ/4/
Your method was strange but the fact that it didn't work was even more strange...
I want to wrap two spans in one line with CSS.
Here is my code:
<div style="width:60px;">
<span id="span1" style="float:left; display:inline;"></span>
<span id="span2" style="float:left; display:inline; "></span>
</div>
But it doesn't work.
How to do that?
Edit:
I want to use the "id", either use div or span, I just want them to be in one line.
When I just use span without style, the content are not in the same line. The second line will go down.
Here is the working example:
<div style="float:left;">
<span style="display:inline; color: red;">First Span</span>
<span style="display:inline; color: blue;">Second Span</span>
</div>
The float will mess things up. Usually with a float to work you need a width with it as well. It can't float them against each other because it doesn't know how much space each span will occupy in relation to the div. Spans are inherently inline elements unless you define them otherwise, so they should just display that way without the float.
<div style="float:left;">
<span style="display:contents; color: red;">First Span</span>
<span style="display:contents; color: blue;">Second Span</span>
</div>
'display:contents' Makes the container disappear, making the child elements children of the element the next level up in the DOM which I believe is the right answer.
Another way which works on ie too is this:
<div style="float:left; display:flex;">
<span style="color: red;">First Span</span>
<span style="color: blue;">Second Span</span>
</div>
In some cases display:inline does not work, in such case try adding both spans in one parent span like below
<span>
<span id="span1">Span 1</span>
<span id="span2">Span 2</span>
</span>
It's the float left that is causing it to be on separate lines. Maybe try a (non breaking space) in between the spans.
Overflow maybe?
<div style="width:60px; overflow:hidden;">
The float and display styles are mutually exclusive, so there's no point using them together. Also <span> defaults to display:inline; so that's redundant anyway (unless you have some other style elsewhere setting them to something else?).
You can use Table.
<table>
<tbody>
<tr>
<td><span>Span 1 text</span></td>
<td><span>Span 2 text</span></td>
</tr>
<tr>
<td><span>Span 3 text</span></td>
<td><span>Span 4 text</span></td>
</tr>
</tbody>
</table>
I start with a td cell like this
<td>
<span>123</span>
<input style="display:none;">
</td>
I'm looking for a way to style this so that the orignal content is hidden, the input box is shown and overflowing instead of resizing the td, and keeping the td sized to just its original content.
State A, which I have now, looks like this
[123][45aaaaaaaaaaaaaaa6][7aaaaaa89]
I want state B to look like this
[*input text field*aaaaaaaaa6][7aaaaaa89]
<td>
<span>123</span>
<input style="display:none;">
</td>
Is the correction for your markup, but what exactly is the effect you want to achieve and what have you tried so far?
<td>
<span>123</span>
<div id="hidden">
<input type="text" />
</div>
</td>
in style define :
#hidden{
display:none;
position:absolute;
margin:.5em;
}
make script that shows the div on over (you will need to include jquery js ...)
<script type="text/javascript">
$(document).ready(function(){
$('table tr td').children().find('div').hover(function(){
$(this).show();
}
)
});
</script>
Figured it out. What I did not realize is that an element with position:absolute cannot be assumed to be defaulting to a 0,0 position, so I need to set the Left to 0 explicitly
<td>
<div style="position: relative;">
<span style="visibility:hidden;">123</span>
<input style="position: absolute; left:0; display:inline;">
</div>
</td>