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; }
Related
I have been struggling to find a simple solution to the following problem using the CSS inline styles due to being on a free wordpress.com blog.
a table
inside each table cell there is an three parts
a hyperlink to enclose the two objects below
image - align vertical and horizontally centred in the table cell
text at the bottom of the table cell
<psedo markup>
<td>
<a href="#">
<img style="vertical-align:middle" src="" />
<p style="vertical-align:bottom">Text at the bottom</p>
</a>
but just cant seem to get a consistent result, am I better using <div style="display:block"> instead?
If you can use html5, use a figure:
<td>
<a href="http://gravatar.com">
<figure style="text-align: center;">
<img src="https://www.gravatar.com/avatar/5a25eba05dc8ac4384384c7a220958a6?s=32&d=identicon&r=PG&f=1"
alt="" width="32" height="32">
<figcaption>gravatar glyph</figcaption>
</figure>
</a>
</td>
The figure element was added precisely for situations like this, though the needed style here is a bit quirky.
HTML:
<table>
<tr>
<td style="text-align: center;">
<a>link</a>
<img style="display: block; margin: 0 auto;" src="http://placebacn.com/400/300">
<p>Bacon... Bacon... Bacon...</p>
</td>
</tr>
</table>
Even if you can't add a CSS file you may be able to add a <style> block before the HTML which would be better than inline styles:
<style>
td {
text-align: center;
}
td img {
display: block;
margin: 0 auto;
}
</style>
Fiddle: http://jsfiddle.net/xeTPx/2/
Please don't use tables for layout (i.e. non-tabular data - not sure if this is or not), there are other ways to have a similar layout without the bloated markup and accessibility problems. display: flex is often a good option as it now has support in a lot of today's browsers. Sometimes even using other markup with CSS display: table and display: table-cell is another option.
This might be a good read on vertical-align: http://css-tricks.com/what-is-vertical-align/
I would suggest to separate img and text from the same alignment-structure. I think you can manage to center the img but the text ruins this alignment. The trick that I use is position>relative to the parent and position>absolute to the child. Here you go:
<td>
<a href="#" style='**position:relative;**'>
<img style="vertical-align:middle" src="" />
<p style="**position:absolute; bottom:0;**">Text at the bottom</p>
</a>
</td>
By doing this p is not in the same alignment structure anymore.
I hope this solves your problem.
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
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 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