need corrections in css image gallery - css

In the image gallery in the below page, how do i align the thumbnails of the image gallery to the center.
http://kbay.in/details.php?id=5
I tried everything including aligning the tables and tds too...need help badly.

Try this
1) - Remove align="center" from the table data which is right above div id="galleryVideo"
<td colspan="4" height="310" align="center" valign="middle">
2) - Then to the ID Gallery add padding-left: 50px; or percentage which ever you prefer.
<div id="gallery" style="padding-left: 50px;">

I am afraid that using a table for that sort of layout isn't optimal. You should reconsider creating it with div elements instead.
Here's a jsfiddle with an example layout: http://jsfiddle.net/J4bkm/10/

Related

prevent div resizing because of inner text

Here is my code:
<div>
<table>
<tr><td>
<img ...>
</td></tr>
<tr><td>
<p style="text-overflow: ellipsis;white-space: nowrap;">HERE MAY BE SONE VERY LONG TEST!!!</p>
</td></tr>
</table>
</div>
I want the width of my div as wide as my image, but since I don't know how wide my image is, I can't specify a width for the p to keep it in bounds.
I am looking for an html(+css) only solution, if there is any. I know how I could accomplish this in js, but that gets messy since the image size is changed over time.
Is there a way to do this in pure html/css?
You could simply set the width of the table to be very small:
FIDDLE
table
{
width: 1px;
}

CSS scrollable table with fixed header, but using the browser scrollbar, not overflow

This is what I've done. http://jsfiddle.net/FeHdS/5/
As you can see, when you use the browser scrollbar the whole table goes behind the "mainwrapper" div. I would like to have my table with a fixed header and I don't want to use overflow scroll.
What I tried was to simply assign a fixed position to thead.
thead{
position: fixed;
}
but then, the first row of the table takes the header place.
Is there a way to do that only with CSS? If not, what would be the best solution?
You can do this using CSS with javascript.
Basically, you use CSS to position the table and table header row, and to trick the table into behaving like divs. Then use javascript to manipulate the CSS positioning of the table header row and a "mask" div that hides the regular table rows as the table scrolls. Because your table now thinks it's divs and sizes the cells without matching them up in width, you also need to use CSS to set the widths so that the table header widths match the td widths.
The relevant components are:
<!-- divs with IDs are manipulated with javascript -->
<div class="fixedTableHolder">
<div class="maskHolder">
<div id="mask" class="mask"> </mask>
</div>
<div class="fixedTable">
<div id="theTable" class="theTable">
<!-- here is the table, header row must have an ID -->
<table border="0" cellspacing="5" cellpadding="5">
<tr id="thFixed" class="thFixed">
<td class="col1">Header cell 1</td>
</tr>
<tr>
<td class="col1">regular cell</td>
</tr>
</table>
</div>
</div>
</div>
It is fairly complex, and takes more than a minute or two to implement. I did it for an app where I was going to re-use it often. Here is a demo in jsFiddle (contains the CSS and javascript as well as html): http://jsfiddle.net/deborah/Msvvr/

White space between image and td when zooming in or out in the browser

I browsed some other questions, but couldn't find something that fixes my issue.
I created a code snippet here:
http://jsfiddle.net/manoj382/3SeB7/embedded/result/
I have a table with one row and six cells. The width of each td/cell is defined and it matches the width of the image inside of it (the width of each image is defined, too). Everything works fine, but when I zoom in or out in the browser, white gaps appear somewhat sporadically.
I tried removing white space in the code, I defined the width and height, the images are set to display:block, the total width of each cell/image matches the total width of the entire table, which is also defined. The client is being picky about the gaps when zooming, though, and I'm out of ideas.
*This is for an HTML newsletter, which is why I'm using the old school table layout method.
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="31">
<img src="http://placekitten.com/g/31/64" style="width:31px; height:64px;">
</td>
<td width="65">
<img src="http://placekitten.com/g/65/64" style="width:65px; height:64px;">
</td>
<td width="411">
<img src="http://placekitten.com/g/411/64" style="width:411px; height:64px;">
</td>
<td width="64">
<img src="http://placekitten.com/g/64/64" style="width:64px; height:64px;">
</td>
<td width="29">
<img src="http://placekitten.com/g/29/64" style="width:29px; height:64px;">
</td>
</tr>
</tbody>
</table>
The relevant css:
<style type="text/css">
img {display:block !important;}
</style>
While zooming in/out, the browser has to round the box widths to integers. You cannot assume that things will always be properly aligned.
One solution could be to use float: left boxes instead of table cells so that the boxes are always guaranteed to be flush against each other.
Another solution could be to use background images instead of <img> tags as #user1760422 mentioned in a comment above. You could make the images slightly wider than the cells or just allow background-repeat: repeat-x to show a patch of pixels instead of a white strip between the images.
I cannot explain why it's doing this (I'm able to duplicate it on my Mac). But I do have a fix.
For some reason, your table cell with the width of 411 pixels is showing as 412px wide. The image is also showing as 412px wide, even though the image itself is only 411px wide. You can see this if you run Chrome Dev Tools and mouse over the table cell. It will show that it has an actual width of 412 for some reason that I cannot explain.
If I delete the table width of 600 at the top, the problem goes away.
Change this:
<table width="600" cellpadding="0" cellspacing="0" border="0">
to:
<table cellpadding="0" cellspacing="0" border="0">
See: http://jsfiddle.net/3SeB7/1/embedded/result/
The issue is your sliced images are sometimes odd integers. If you change the image slice widths to an even number (and of course in the widths in the img and td tags), it should eliminate the gaps at certain zoom levels.
insted of giving width in the table, try giving the width in the style tag:
Insted of
Try the below
<table style="width:700px" cellpadding="0" cellspacing="0" border="0">
I just had a similar issue. What the browser is doing is increasing the <td> cells so that combined they fill the whole width of the table, which is causing the white space between the image which is XXpx and the td which is now XX.2313px. You can fix this by setting the min-width of all your images to 100%.

Table style in CSS

I currently have a little HTML page with following HTML/CSS codes inside.
<table style="width: 300px;">
<tr style="height: 120px;">
<td width="width: 100px;">
<img src="images/lol/avatars/3.png" style="vertical-align: middle; width: 100px; height: 100px;">
<img src="images/score/3.png" style="display: block; background: #0c0c0c;" alt="3" title="5 üzerinden 3" />
</td>
<td width="width: 200px;">
aaaa bbb cccc ddddd
<h2 style="font-size: 1.6em; text-shadow: 0 -1px 1px #0c0c0c; text-transform: none; color: #fcfcfc; ">Anil wrote.<h2>
</td>
</tr>
</table>
The current output is:
(Live example is here: http://www.sobafire.com, under the right side of slider.)
The picture pretty much explains what I need, but I'll write them regardless.
The text at top (aaa bbb...) should be centered. Also, it should automatically keep centering itself if the text is long. (It shouldn't go upside or downside, it should be going upside by %50 and downside by %50.)
The "score" image with stars has a background color, which is "#0c0c0c". It should be the background color of entire bottom area, including "Anil wrote." text.
"Anil wrote." text should be aligned to right side.
I'll be glad if you can help me in this case.
Ps. There will be 3x TR in the current table, not a single like this. It won't make a difference but just a side note.
Ps 2. Live example added for users who would like to see it live.
Use two TR for this, first row has the main image and the "aaaa bbb cccc ddddd"
Second row has the stars and the "Anil wrote" info
you will probably need a rowspan=2 for the first column.
Sorry, forget about the rowspan.
Then if you have additional rows, just add them at the end, so you might have 4x TR and not 3.
Move all of your style items to a CSS style sheet
In general div is a better choice for layout, but you will find various points of view on this topic.
Tables should be used for tablular data, not for layout.
Harv
You need to add another <tr> containing two td's one with the rating and one with the 'Anil wrote' bit.
then you can add text-align: center to the comment td
I would suggest you to add another <tr> and <td> and use valign:xxx; and align:xxx;
CSS on divs and spans will work fine

How can I keep an element in the same place regardless of browser size (not static though) within flow of page

I am taking care of a website where the company logo is part of a huge background image which includes about 1/5th of the page design. My boss has asked me to place an image of the logo over that background image so that it can be copied or saved as a separate file. He also wanted users to be able to link back to the homepage by clicking the logo.
I have managed to position an anchor tag over the background image, which I can then put the logo image inside of when the problem is resolved. The problem is that the positioning of the element changes when the browser is resized. How do I keep this element in the same place (over the logo section of the background image) regardless of browser size?
I took over the typo3 site and found that the design was in some sort of DW tables layout. I need to add this without totally restructuring into a DIV layout.
The site is here http://overbeckanalytics.com/typo3/menu-top/about-us.html and if you need any more code info please ask!
You need to position the a within the table structure. Using firebug, the below code generally worked for me (a bit of tweaking would be in order to smooth it out). It adds a div inside your table row that holds the "Home" and "Contact" links. That div has a position relative set so that the a tag can then be positioned absolutely to the bottom of it, in order to keep it aligned with your logo area. Again, some pixel positioning might need to be tweaked to get it located just right, but the general idea is that you need the a tag positioned within that tr to get your effect to move with resizing.
<tr height="104">
<td height="104" width="25" background="fileadmin/images/line_li.jpg"></td>
<td height="162" width="826" valign="top" background="fileadmin/images/header_about_us2.gif" rowspan="2">
<div style="width: 300px; height: 162px; position: relative; margin-bottom: -162px; z-index: 1;"><a style="background:none; position:absolute; bottom: 0; left: 0; height: 125px; width:300px;" href="http://overbeckanalytics.com"> <!-- <!-- <img src="fileadmin/images/OAL_LOGO.png" border="none"> --> </div>
<table height="104" width="826" cellspacing="0" cellpadding="0" border="0">
...more of you nested table code here...
</table>
</td>
<td height="104" width="25" background="fileadmin/images/header_re.gif"></td>
</tr>

Resources