<span><img src="1.png" style="padding-left:10px;float:left;">
<img src="2.png" style="margin-left:10px;float:left;"></span>
This puts the two images right next to each other, I want to insert a text that says " into... " in the middle. If I try to add the text, it will start a new line for the image.
You could set both as 'display: inline-block' instead of 'float:left'
"<span><img src="1.png" style="padding-left:10px;display:inline-block;"> into...
<img src="2.png" style="margin-left:10px;display:inline-block;"></span>"
but be aware of vertical-alignment, because you might have to set 'vertical-align: middle' or even 'vertical-align: top' on both images and on the wrapper, in this case the 'span' tag
You can easily do it like this:
<span>
<img src="1.png" style="padding-left:10px;float:left;">
<i style="float:left; padding-left:10px;"> into... </i>
<img src="2.png" style="margin-left:10px;float:left;">
here is working example JSFiddle
try style="float:left" for every of your tags. it will make them stick to the left side. if you want them to have space between, set margin
(if you don't understand what i'm saying, you should google css tutorial. it will help you style your websites
Related
By minus i mean margin/padding:-#px
I have an image which I have put as a div background. Now I need to put three bottoms on the image. SIMPLE SAID : i need three bottoms on the image...in a browser i do it in a matter of seconds but I've found no way how to do it in outlook. My last attempts where to wrap the divs in table and giving parameters to the table itself still not working.
A simple example of what I need to get in an email template.
That's what I receive in output no matter what manipulation I do
My first and cleanest code were simple as the idea itself (just to put three bottoms on an image) but obsolute not working padding not working margin not working in outlook:
<body>
<div class="MainImage" align="right">
<img class="topimage" style="width:600px;height:900px;position:absolute;" src="Files/Meuhedet_eMailTemplate.png" alt="">
<img class="topimage" style="width:150px;height:25px;position:absolute;margin-top:750px;margin-left:42px;" src="Files/Meuhedet_buy.png" alt="">
<img class="topimage" style="width:150px;height:25px;position:absolute;margin-top:750px;margin-left:230px;" src="Files/Meuhedet_Tor.png" alt="">
<img class="topimage" style="width:150px;height:25px;position:absolute;margin-top:750px;margin-left:415px;" src="Files/Meuhedet_Inf.png" alt="">
<img class="topimage" style="width:140px;height:14px;position:absolute;margin-top:857px;margin-left:435px;" src="Files/Meuhedet_Website.png" alt="">
<img class="topimage" style="width:60px;height:12px;position:absolute;margin-top:860px;margin-left:355px;" src="Files/Meuhedet_Tel.png" alt="">
</div>
</body>
This is how my code looks now...still no results
Eventually I got to something very complicated and lots of garbage code but nothing worked including wrapping img in grid table tr td and still am not able to use Margin-top: #px.
I'm trying to display images from my PC on my website, i've tried using floats but nothing works. Everything I try ends up the same:
<div class="feat">
<img src="nirvana.jpeg" style="width:50%;height:50%;" align="left";>
<img src="pup.jpg" style="width:50%;height:50%;" align="right";>
</div>
Remove the align left and right and white space between image tags.
<div class="feat">
<img src="nirvana.jpeg" style="width:50%;height:50%;"><img src="pup.jpg" style="width:50%;height:50%;">
</div>
Read up this blog post about white space. Here is a working plunkr (without your images, obviously): http://embed.plnkr.co/sytM7HeFUVDPT1p3HoXN/preview
I am trying to put a profile image next to names, however they won't go next to the text, instead go below the div containing the text. I'm not sure if I'm being blind, but I can't find how to fix it.
To clarify, I'm attempting to put the images that are on the page next to the text (The white next to 'main, the wolf next to 'joe' and kenny next to 'kenny').
EDIT: I found the stupidly easy solution. Flagged for deletion!
I think this can help you:
<div style="display:inline-block;float:left;">
<img alt="" src="" width="50" />
your text here
</div>
Also if you want text will be in center put text in <Div> element like this:
<div style="display:inline-block;float:left;">
<img alt="" src="" width="50"/>
</div>
<div>
your text here
</div>
http://dev.epicwebdesign.ca/karen/2-4/a/#antartica
Absolutely positioning the continents, for some reason the links don't go to the proper place. Is this a shortfall of absolute positioning, or am I doing something stupid?
The anchors are around the headers as they should be.
Just realized it's going to the top of the image, not the headers underneath. Why?
The <a name="fragment_name" /> method of defining fragments has been deprecated in favor of using ids. So when you go to http://dev.epicwebdesign.ca/karen/2-4/a/#antartica, the browser thinks you want to go to <div id="antarctica"/>, which is at the top of the page, instead of <a name="antarctica" />, which is at the bottom of the page.
Turns out, in chrome at least, that it considers an ID an internal link, not just a name. The ID's of the images conflicted with the names of the headers. Once the ids were suffixed with "img" it works
To add to cimmanon's answer (and in case your referenced page changes).
Note: Kindly paste your code for future reference.
Change your anchors at the top of the page from:
<div id="continents">
<img src="northamerica.png">
<img src="southamerica.png">
<img src="asia.png">
<img src="europe.png">
<img src="oceania.png">
<img src="antartica.png">
<img src="africa.png">
</div>
to:
<div id="continents">
<img src="northamerica.png">
<img src="southamerica.png">
<img src="asia.png">
<img src="europe.png">
<img src="oceania.png">
<img src="antartica.png">
<img src="africa.png">
</div>
Notice that I've changed the href on all links.
And change your heading below from:
<a id="antartica">
<h1>Antartica</h1>
</a>
to:
<h1 id="antarticaSection">Antartica</h1>
Without the anchor (unless you plan on linking it to something else).
I'm trying to achieve a layourt like: Search (gif) : TextBox : AjaxLoader (gif) on one line.
I have the following style:
<div>
<img src='<%= VirtualPathUtility.ToAbsolute("~/Content/Images/search.gif")%>' alt="Search"/> 
<%= Html.TextBox("SearchTextBox", string.Empty, new { style = "float:left;" })%>
<div id="LoadingGif" style="float:left;"></div>
<div style="clear:both;"></div>
</div>
The search image is on one line and the textbox and loading gif appear on the next line.
Can anyone help please?
Thanks in advance
The last two elements are floated left, but the search gif isn't.
I removed the outer div and floated all elemets left - this works. Thanks for all your help + 1 to all.
An <img /> and <input type="text" /> will be display:inline by default so shouldn't need float:left.
And you might be better off replacing your <div id="LoadingGif" style="float:left;"></div> with either a tag or an tag: then you'll have 3 inline elements meaning you can remove the surplus <div style="clear:both;"></div> from your HTML :-)
Replacing divs by spans as such:
<div>
<img src='<%= VirtualPathUtility.ToAbsolute("~/Content/Images/search.gif")%>' alt="Search"/> 
<%= Html.TextBox("SearchTextBox", string.Empty, new { style = "float:left;" })%>
<span id="LoadingGif" style="float:left;"></span>
<span style="clear:both;"></span>
</div>
would work...