I'm styling the mail I send to my clients and I want the image to float but the text shouldn't be wrapping underneath it. I've tried
#left-image {
float:left;
}
#right-text {
display:table-cell;
}
and
#left-image {
left: 0;
position: absolute;
}
#right-text {
padding: 0 0 0 100px;
position: relative;
}
the first code still wraps the text around the image and the second set of codes puts the image on top of the texts. I've been using the second code for my confirmation page before sending and it works as how I want it to but how come my mail comes out differently?
Today I used the align (html) attribute I just wrote
<table align="left"></table>
this solved my float problems.
Why are you mixing methods? Stick to one, either float or use the display table-cell on both elements .
#left-image {
float:left;
}
#right-text {
float: left;
}
#left-image {
display: table-cell;
}
#right-text {
display: table-cell;
}
I presume that you are creating the email with ordinary div tags which is not recommended to achieve cross-platform compatibility. Use HTML email structure with no floats as well as margins and then you can see a browser as well as platform independednt mail. Instead of float:left, you can go for text-align:left if you are using html tables.
Related
This is more complicated than it should be, but I'm having trouble displaying an input width of literally 100% of within its div.
Example here:
http://jsfiddle.net/aml90/mfdtk/
I'm using Twitter Bootstrap. I want the inputs to be 100% of the width of the span6 classes, like the blue highlights:
Despite the lack of CSS, I have tried many things -- just didn't put the non-working CSS on there.
You will need to resize the windows, like this:
well it have to be something like this LINK
.input-prepend{
width:100%;
}
.input-prepend input{
width:95%;
}
.span6 .input-prepend {
padding-left:28px;
display:block;
}
.span6 .input-prepend .add-on {
float:left;
margin-left:-28px;
}
.span6 .input-prepend input {
width:100% !important;
}
this will put the add-on to the left side, and let the input take up remaining space
JSFiddle
Patching Bootstrap in such a way is a bit tricky, since there can be different "side effects". Maybe something along those lines will do the trick for you:
.span6 { width: 100% !important; margin-left: 0 !important }
.span6 input { width: 92%; }
.input-prepend { display: block; }
Play around with overriding these CSS directives and test you layout with it. Good luck!
http://jsfiddle.net/Yuv3H/
It took some manipulating to get the username and password form boxes next to eachother. I have it looking good on chrome, but then when I went to safari and firefox, the boxes were at drastically different heights.
The site is www.EpicSwap.com I can't seem to get the code formatted properly Thank you for any help.
Try making your form a little bit wider, reducing padding-right (I took it out completely) on the the formleft element, and making formright float left as well. Notice I took out float:left on the form as well because it was unnecessary.
Like this:
form {
padding-top:6em;
width:450px;
}
#formleft {
float:left;
}
#formright {
float:left;
}
I would recommend you remove the float and use positioning as shown here
#formright
{
//float: right;
position: relative;
left: 250px;
top: -58px;
}
I'm writing a chat and i would like to have the incoming messages on the right and the outgoing on the left. Every message has a user picture, name, messages, time.
My problem is that I can't manage to have the text NOT to flow under the picture.
http://jsfiddle.net/4MVd2/2/
My other questions would be then, how to get the picture on the right to be right from the text without changing the order in the HTML and how to get the username aligned with the top of the picture.
Thank you!
.messagetext{
display:inline-block;
}
.incomingMessage img{float:right;}
.outgoingMessage img{float:left;}
That should get you going. Now you just need to tweak that image, I wasn't sure if you wanted it at the top or bottom, and what not.
http://jsfiddle.net/4MVd2/10/
EDIT: Addressed your image positioning, I didn't see that the first time I read through. This should be what you want.
sorry I entirely missed the question float: right on the css for the image should fix it. http://jsfiddle.net/4MVd2/8/
1) You might want to convert your images to block level elements and give them a high enough bottom border to prevent text from sneaking bellow the images (either way you have a fixed message row height).
.message img {
height: 40px;
width: 40px;
display: block;
}
.incomingMessage img {
float:right;
margin: 0 0 3em 0.8em;
}
.outgoingMessage img {
float:left;
margin: 0 0.8em 3em 0;
}
2) Add a wrapper container around that block of code and float it instead of the image and the message content.
I agree with Chris Sobolewski and learned how to use inline-block from him.One way I used to use is use a class named`clearfix'.
First float your image like this:
.incomingMessage img{float:right;}
.outgoingMessage img{float:left;}
Then add a class clearfix like this :<div class="message incomingMessage clearfix">
And here is clearfix:
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
I created a spanned line with dots to fill in between text of links and phone number, but i cant get it so that if i have to many dots that the text does not go underneath. The problem is on some different brwosers and computers the .... will look fine or it will push it out of the way. How wouldi go about making it so the dots.... would span and the text would not go below the width its supposed to.
<style type="text/css">
#contactInfo {
margin:auto;
width: 480px;
height: auto;
}
</style>
<div id="contactInfo">
<p>Email: .........................................................................info#hereistheemail.com</p>
<p>Phone: ..................................................................................<span class="redBold">888-888-8888</span></p>
</div>
I tried putting less dots buton some browsers it just doesnt look right.
A better way to do what you want is with a definition list. This will semantically present the information you want and not require you to type out a bunch of dots:
HTML
<dl>
<dt>Phone</dt>
<dd>123-4567</dd>
<dt>Email</dt>
<dd>info#email.com</dd>
</dl>
CSS
dl {
/* Adjust as needed. Note that dl width + dt width must not be greater */
width: 300px;
}
dt {
/* The definition term with a dotted background image */
float: left;
clear: right;
width: 100px;
background: url(1-pixel-dot.gif) repeat-x bottom left;
}
dd {
/* The definition description */
float: right;
width: 200px;
}
You can see an example of it here.
You will have to try and create a workaround for this, instead of just using characters.
Some solutions could be using a background image that repeats itself inside some div/span: http://www.htmlforums.com/html-xhtml/t-toc-style-dotted-line-tab-fill-in-html-103639.html
Or you could think of creating a span between the word e-mail and the e-mail address and try to create a border-bottom: dotted 1px black or something equivalent. Or maybe put the information in a table and create one td with that border-bottom.
Another solution would be to check the number of dots needed with some javascript, but this is most certain not robust at all and will not justify-align your content.
So, be creative with a solution. Filling the line with characters is probably not the way to go.
Try this:
#contactInfo {
[ your other styles ]
white-space: nowrap;
}
Another method is with position:absolute
Demo
#contactInfo p
{
position:relative;
}
#contactInfo span,#contactInfo a
{
position:absolute;
right:0px;
}
Edit (cleaned up version)
I want to show images on the page but I don't want to hardcode the references to the images in html.
Is it possible to do something like:
HTML:
<span id="got-easier"></span>
CSS:
#got-easier { image: url(/i/trend-down.gif); }
(IE6 should be supported)
Yes, use a background image :)
#got-easier { background-image: url(/i/trend-down.gif); }
Remember to set a span to display: block; and set width/height of your image if you use it.
As David Dorward pointed out, if it's an image relevant to the information, it should be included in the document with an <img> tag and alt attribute.
Heya, the common term for it is css Image Replacement technique (or IR). Here are the commonly used methods currently. Just choose any of the two ;)
/* Leahy Langridge Method */
span#imageName {
display: block;
height: 0 !important;
overflow: hidden;
padding-top: 0px; /* height of image */
width: 0px; /* width of image */
background: url(url/of/image.jpg) no-repeat
}
/* Phark Method */
span#imageName {
display: block;
width: 0px;
height: 0px;
background: url(url/of/image.jpg) no-repeat;
text-indent: -9999px
}
In case you want to display the images inline, position:absolute does the trick:
#got-easier {
display:inline;
position:absolute;
width:img-Xpx;
height:img-Ypx;
background:url(/i/trend-down.gif) no-repeat;
}
The only problem with this is that, since the image position is absolute, it will overlay whatever is next to it (in IE6 it might appear behind), and the workarounds that I found to fix this (with both CSS and jQuery) aren't supported in IE6. Your image-container will have to be followed by new line.
This might be useful when, for instance, you'd like to place a (?) image next to a form caption or a button (that usually have nothing next to them) to display help with onmouseover.