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/.
Related
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>
I have a hyperlink that contains an image, nothing special - like this .
I want to align the text to the right of the image as per attachment1, but the result is as per attachment2. I need to also block the hyperlink so that it fills the rectangle (its width and height)
Anyone know how to acheive this?
Bunch of ways to do this:
Using <div>'s
<div style="width: 200px;">
<div style="float: left; width: 70px;">
<img src="http://a0.twimg.com/profile_images/749158551/Ry_reasonably_small.jpg" width="64" height="64" />
</div>
<div style="float: right; width: 130px;">
<p><strong>This is a really really over sized title for a link to neverland</strong></p><p>Some other text</p>
</div>
<div style="clear: both;">
</div>
Using a <table>
<table width="200">
<tr>
<td rowspan="2"><img src="http://a0.twimg.com/profile_images/749158551/Ry_reasonably_small.jpg" width="64" height="64" /></td>
<td><strong>This is a really really over sized title for a link to neverland</strong></td>
</tr>
<tr>
<td>Some other text</td>
</tr>
</table>
put this on your page, see what is happening. Cheers
<div style="width:500px;height:250px; padding:10px; padding-left:250px; border:solid 1px black; background-repeat:no-repeat; background-position:left center; background-image:url('https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAlUA/EHduo3GhTDs/s250-c-k/photo.jpg')">
Google – 52 minutes ago – September 8 marks the anniversary of Star Trek's first broadcast, and naturally ... Amit Singhal originally shared this post: OK, I admit it, I am a die-hard Trekkie. I grew up watching endless ...
Google – 18 hours ago – By now, you may know that when you search for [define] followed by a word, Google will show you the definition. But did you know that there's a Dictionary mode ...
</div>
Similar to #njk, but using the a as the block element.
http://jsfiddle.net/scrimothy/r6TKz/
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
I'm creating a contentEditable div within a table cell to capture user input. The problem is, when I align the text to the right IE8 does not show a text input caret. Every other browser I've tried works. It works if I don't use "text-align: right". It also works if the caret is anywhere other than the far right of the div. Here's some sample code:
<html>
<body>
<table width=400 border=1>
<tr>
<td>
<div contentEditable=true style='outline: none; text-align: right;'>
</div>
</td>
</tr>
</table>
</body>
</html>
What am I doing wrong? If nothing, how can I get around this?
Right padding fixed the problem.
I have a picture on my website which has to much space beneath a picture. I tried to search for extra tags, but I quess it's controlled in a css file. Can someone tell me which part of the css is responsible for the space?
The location is: images/artikelen/123.png
this is a part of the html leading to the css containers which I think would contain the margins. The picture is placed in a table, I know there is no need to have it like this.
The picture is placed in a joomla module in a place called showcase 2
<div id="showcase-surround">
<div id="showcase" class="png"><div id="showcase2" class="png"><div id="showcase3" class="png">
<div class="showcase-inner">
<div id="showmodules" class="spacer">
<div class="block full" style="width: 1004px;">
<div class="module-light">
<div id="row1-block2" class="row"><div class="move-handle"></div><div class="body-surround-top"><div class="body-surround-top2"><div class="body-surround-top3"></div></div></div>
<div class="body-surround"><div class="body-surround2"><div class="body-surround3">
<div class=" showcase2:82">
<div class="moduletable">
<table align="center" border="0">
<tbody>
<tr>
<td> <img style="text-align: center;" src="/images/artikelen/123.png" /> </td>
</tr>
</tbody>
</table>
You can use Firefox browser with its DOM Insector Tool to find out. Is it the piece of code from http://www.friesecomputerservice.nl? (I just googled over 'Friese Computer Service - Computerhulp en PC probleem' :) ) If so, then you've got the following in your http://www.friesecomputerservice.nl/templates/rt_affinity_j15/css/template.css:
.moduletable
{
...
marging-bottom: 15px;
...
}
Remove margin-bottom and you're done.
Without the CSS it's hard to guess what's happening, but try putting this in your CSS:
.moduletable img { display: block; }