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.
Related
I'm kind of newbie with CSS and HTML5, I'm using Bootstrap Carousel as my template for the site I'm building and I'm having issues with the 500 x 500 picture, I don't really know how to replace it, it seems like its JavaScript or something, i was wonder if someone can light my way here..
This is the template: http://getbootstrap.com/examples/carousel/
Below is the image of the picture I'm trying to replace.
http://i.stack.imgur.com/9AoxZ.png
The following snippet contains the image:
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="500x500" src="data:image/svg+xml" data-holder-rendered="true">
You should change the src value to where your image is, not the data-src. The data-src attribute is used to include invisible data in an element. You can read more about it here.
please try
<img class="featurette-image img-responsive" ng-src="your-image-path.png" alt="Generic placeholder image">
I am trying to create some responsive images with data-media which is working out quite nicely. Unfortunately when i try to style my thumbnails it literally shows all outlines of the thumbnails which i dont wish, as the class should only be applied to the shown image.
<p><span class="post-img" data-picture data-alt="An unsual picture" >
<span class="img-thumbnail" data-src="/generated/2014-03-06-some-article/IMG_1394-13*10-f320b4.jpg"></span>
<span class="img-thumbnail" data-src="/generated/2014-03-06-some-article/IMG_1394-134*100-f320b4.jpg" data-media="(min-width: 100px)"></span>
<span class="img-thumbnail" data-src="/generated/2014-03-06-some-article/IMG_1394-201*150-f320b4.jpg" data-media="(min-width: 940px)"></span>
<noscript>
<img src="/generated/2014-03-06-some-article/IMG_1394-13*10-f320b4.jpg" alt="An unsual picture">
</noscript>
</span></p>
The example is shown here with a random image from google images: http://codepen.io/anon/pen/bugmi
As seen on the result, there are clearly three outlined thumbnails acting as placeholders. The example does not seem to work as expected with codepen, but i think most would understand the concept.
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).
<img src="#" alt="abc"/>
after above code rendered in browser the position of alt and src are changed like
<img alt="abc" src="#"/>
Is there is any way to fix these problem
"I want that every time src comes before others attributes!"
I have this piece of code:
<ice:panelGroup menuPopup="menuPopup1" onclick="fireContextMenu(this, event);">
<img src="/resources/images/external/bg-suppliers.gif"> </img>
</ice:panelGroup>
it renders this HTML as output (as expected):
<div class="icePnlGrp" id="j_id62" onclick="fireContextMenu(this, event);">
<img src="/resources/images/external/bg-suppliers.gif">
</div>
If i simply add a menuPopup attribute to the ice:panelGroup like:
<ice:panelGroup menuPopup="menuPopup1" onclick="fireContextMenu(this, event);">
<img src="/resources/images/external/bg-suppliers.gif"> </img>
</ice:panelGroup>
it simply CLOSES the divs before img tag:
<div class="icePnlGrp" id="j_id62" onclick="fireContextMenu(this, event);"></div>
<img src="/resources/images/external/bg-suppliers.gif">
which is really strange...
Do you guys have a work-around? It's probably a bug from icefaces but I cannot find anything related to this on their site...
Thanks.
Solution found.
Working with different templates I had two ice:forms in the final page and two body as well, and my panelGroup from one form referenced the menuPopup from the other form which gave the above issue.