So I am trying to create a signature in Exchange using HTML (I read that you can use inline CSS along with HTML in Exchange (https://learn.microsoft.com/en-us/Exchange/organization-wide-disclaimers-signatures-footers-or-headers-exchange-2013-help), but I'm unfamiliar with CSS so I'm not sure where to begin with using it or the syntax). My goal is to create a signature at the end of my email that will pull my AD credentials and display an image next to that text. I read that a float will allow me to display the text on say the right and the image on the left, but all the examples I've seen don't really make sense to me. So I was hoping someone could explain how to use inline CSS to display an image parallel to a column of text.
The article I found that makes sense to what I need to do is located here: CSS - Positioning images next to text
Specifically, Emily's comment makes sense to me logically (make a div and position the text to one location and the image to another), but her .info lines in her comment are what confuse me. I didn't want to comment on a 14 year old post so I figured I'd open a new one.
I'm sure there's a simple solution that I'm missing, but any help is appreciated!
Here is the HTML that I wrote to simply display the text and the image under the text:
%%displayname%%<br>
%%title%%<br>
%%company%%<br>
%%street%%<br>
test.com<br>
%%city%%, %%state%% %%zipcode%%<br>
%%phonenumber%%
<a href="https://www.test.com/"> <img src="https://www.test.com/image.jpg" alt="TestImage.jpg"
style="width:150px;height:150px"></a>
Related
I already have a piece of css/html code which display 4 images, 2 per row, 2 rows, and logo in the middle of them all.
Now I need to add another set of 4 images right below the first 4 in the same format, with the same logo in the middle
Each image has some text added and a link in it, visible when hoovering over the image.
I've been trying to have it done but can't make it. Was wondering if you're willing to help me out.
My code is here
jsfiddle.net/Cristian_C/b9961995/1/
Thank you
I have no idea how to add the code for a link here
I'm not entirely sure why you're mixing inline styles with stylesheets, but you should (as a rule) avoid it, as it will make maintaining your CSS a nightmare (separation also makes the DOM more readable for you, too).
Because of the code bloat, I'm not sure if you have important styles in there that are essential to your markup; however, there's an easy way to achieve what you want to do by utilizing z-index, float and clear.
See my demo fiddle.
I'm trying to make a blogpost into a forum-format, which i thought would be quite simple with html-tables and some css. I can't attach an image because this is my first question/answer here, but everyone knows the forum/disqus format: two-column with a narrow one on the left for the avatar and a wider one for the text.
Fact is that using just hmtml-css tables, the text floats to the left as soon as it (vertically) passes the image. That is solved by using "position:absolute", but then the whole image&text overlap each other AND most or everything that is beneath it, depending on how one resize the window.
Anyway, it's just the old forum-format, what am I doing wrong. Can't link to a page, not a live site yet. I'm using WP with the (modified) Blaskan theme.
It is isn't clear if you're trying to add a forum or just a table that looks like a forum-format table.
If you want to a forum in WP, then you might want to follow
http://wordpress.org/support/topic/add-forum-to-wordpress
http://wpmatter.com/top-5-wordpress-forum-plugins/
If you are trying to add a two column table, you'll need to post the html and css using.
For example, you can post like this http://jsfiddle.net/minerva/UJjup/. You must've added a "position: absolute" in the <td> tag and that is why your text is overlapping
Remove the position:absolute from the tag.
table td
{
position:absolute
}
Then add your css style specifically on the first column and or second column.
By the look of the posts here I'm in the deep end with the big boys whereas I need the toddlers paddling pool. So apologies if I'm in the wrong place with my basic problem.
I can't get images to float with LightBox [v. 2.6]
I have a sample problem page here - http://quivis.co.uk/PROBLEMS/lightbox-float/index.html
That page has 2 copies of the same image. Both 'work' in the sense that when you click them LightBox does its brilliant thing and fires up correctly, but both image links display incorrectly.
The top image looks as it should i.e. with mouse-over highlights/border colours etc but will not float right. In some browsers there is also a large redundant area to the left that I am unable to remove.
The bottom image floats as I want it to but in the process the image link styling is lost.
As all things are possible it must be possible to combine the look of 1 with the positioning of 2 but I can't see how to do it!
All the related files are within the 'PROBLEMS' folder. Please let me know if I should paste the html or css here.
Any help much appreciated. Thanks, Duncan
Set float:right style to a tag instead of float:right to images.
And there is mis-spelling of class attribute in second a tag, it is mentioned as 'xclass', correct that spelling too.
I am very new to this and have a very hard time understanding my lecturer (who unfortunately helps me very little)
This is my assignment (image below). It's a mock up clothing website and my desired layout is on the left, whereas my current progress is on the right. This is my first ever attempt at HTML/CSS so if you could please help me out that would make me a happy man!
Paragraphing the categories like I have to the right
Aligning the black text boxes with the photos above them
Floating the titles on the left, with the paragraphs to the right. (I have tried multiple things with this but to no avail)
Also, I put <h1> for each heading but they aren't going to that size?
using CSS you can set "position: absolute" then use something like "left:100px;"
that is assuming your div tags are correctly set up (or set up in general) from your last statement "Also, I put for each heading but they aren't going to that size?" it seems that your div id, or class id's are incorrectly labelled.
I highly recommend taking a look at http://jsfiddle.net/
It's very possibly the single most useful tool I've ever encountered for css/html/javascript testing/editing/learning. (short of something like Dreamweaver, I suppose).
There are plenty of good tutorials around on how to use it, but it'll really let you toy with little options along the learning process, and will help you 'teach yourself' when things get rough with the teacher.
Is there a way with CSS to wrap text on both sides of an element (an image for example). I am trying to have an image positioned in the middle of a paragraph and would like text to flow over it. Please see the image for an example.
Positioning an element typically takes it out of the document flow; so that doesn't work.
I don't think so, no. Not without working with multiple text-columns.
I just threw together one possible solution. You can access it at http://www.sampsonresume.com/labs/img-in-middle/
The only thing that I have seen similar to this would be the A List Apart article: Cross-Column Pull-Out Part Two: Custom Silhouettes. You still need multiple text columns, and even ALA lists it as "experimental". It may be worth checking out, though.
Example here.
Not without some very tricky/tedious text parsing. But anyone trying to read that text would hate you if you made them jump back and forth across an image twice per line, so that's probably a good thing.