Let's say i have,
<div style="padding: 15px; width: 100%;">
<div style="margin: -15px;; width: 100%;">
<img src="http://imageshack.us/scaled/landing/51/tigerso.jpg" alt="" style="width: 100%;">
</div>
</div>
The parent div contains 15px padding and - child div wanted to remove this padding by using margin but it does not work. See this fiddle. It's showing me a horizontal scrollbar always.
http://jsfiddle.net/2GJnG/
Remove the width properties of the two div elements:
<div style="padding: 15px;">
<div style="margin: -15px;">
<img src="http://imageshack.us/scaled/landing/51/tigerso.jpg" alt="" style="width: 100%;">
</div>
</div>
See a demo here > http://jsfiddle.net/2GJnG/5/
Related
I'm creating a responsive email... and tested it out on mail chimp and it was fine all throughout. but when tested on exact target (the email client needed to send out this email)
the image I need to center near bottom of email... WILL not center. see code:
<div class="layout one-col fixed-width" style=
"Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style=
"border-collapse: collapse;display: table;width: 100%;background-color: #f8f6f6;"
margin-left:="" emb-background-style="">
<!--[if (mso)|(IE)]><table align="center" cellpadding="0" cellspacing="0" role="presentation"><tr class="layout-fixed-width" emb-background-style><td style="width: 600px" class="w560"><![endif]-->
<div class="column" style=
"text-align: center; position: absolute !important; color: #8e8e8e;font-size: 14px;line-height: 21px;font-family: Cabin,Avenir,sans-serif;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);">
<div style=
"Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;font-size: 12px;font-style: normal;font-weight: normal;"
align="center">
<a href="url"
target="_blank"></a>
<center>
<img style=
"Margin-top: 10px; Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;border: 0;display: block; text-align: center; position: absolute !important;height: auto;width: 100%;max-width: 257px;"
alt="Partnerships" src="image7_1112017.png" />
</center>
</div>
</div><!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
</body>
Everything else seems to be fine... but this is the only image that needs to be centered. fyi i got got the template from campaign monitor and modified accordingly. image was not centered in template.
Setting the width of a block-level element will stop it from filling the width of its container. Taking advantage of this you can set the margin to automatically split the remaining space evenly on the left and right side.
<div style="width: 200px; margin: auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
Here we set the image container width to 200px and the image to 100% so it will scale to the width given. So even if an image is 500px wide, it will be centered and scaled down to 200px because that is the defined size of the container. If you know the width of your image, assign that to the container then setting the image element width becomes unnecessary.
EDIT
You may want to consider reformatting the body of your html. You will want to remove display:table; from the container with the layout__inner class.
<body>
<div class="layout one-col fixed-width" style="max-width: 600px;min-width: 320px;">
<div class="layout__inner" style="background-color: #f8f6f6;">
<!-- Content Body -->
<div style="margin-bottom:15px;">
Here is some example content. This is where you want your main content to be.
</div>
<!-- /Content Body -->
<div style="width:200px;margin:auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
</div>
</div>
</body>
Here is a working example: JSFiddle
All you need is a one column one row table (maybe). You have a lot of divs in your code, way too many. And also a lot of CSS that won't work in an email. Keep the CSS simple, use tables to center things. Use a lot of nested tables rather than one table with many rows and columns. Try this in your DIV. It may work, but you may have to rework the rest of your code too.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img
alt="Partnerships" src="image7_1112017.png" style="margin-top: 10px; margin-left: 20px;margin-right: 20px;margin-bottom: 15px;border: 0;" /></td>
</tr>
</tbody>
</table>
I have the following HTML:
<div style="display: table-cell; width: 500px;">
<img src="http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_k4PiHxO.jpg" style="max-width: 90%">
</div>
I want the image to be 90% of the container div, and it works in chrome. But in firefox the max-width property doesnt work here. Instead I have to use something like 90px to make it work.
How do I solve this?
Inspiration : This answer
What you need to do is to put your wrapper div (the one with display: table-cell) inside another div that has display: table and table-layout: fixed. That makes both Firefox and Opera respect the max-width rule.
<div style="display: table; table-layout: fixed; width: 500px;">
<div style="display: table-cell;">
<img src="http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_k4PiHxO.jpg" style="max-width: 90%">
</div>
</div>
Fiddle
Try this
<div style="display: table; width: 500px; table-layout:fixed">
<div style="display: table-row;">
<div style="display: table-cell;">
<img src="http://dummyimage.com/3000x760/adadad/fff.jpg" style="max-width: 90%">
</div>
</div>
</div>
If you go to the following page: play.yoozon.com
and do an inspect element on the gallery in the section titled "Screenshots", you should see the widths and margins I've used. For some reason, the group of screenshots seem to be shifted to the left, and I can't seem to center them without using padding, which adds extra space to the entire page and looks bad on mobile.
The reason why I haven't included code here is because I can't figure out which div is the relevant one for this problem, and a lot of it makes use of bootstrap, which would take up a ton of space here to include everything.
your container: .owl-wrapper has a width of 1232px while it's parent seems to be significantly smaller and set to overflow: hidden. Change .owl-wrapper to width: 100%. Then remove float: left from .owl-item and add display: inline-block instead. That should do it.
Replace your column with this..
<div class="col-sm-12 col-md-12 col-lg-12" style="width: 100%;">
<div id="owl-gallery" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 100%; left: 0px; display: block;">
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot1#2x.png" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot1#2x.png">
<img src="images/screenshot1.png" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot3#2x.jpg" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot3#2x.jpg">
<img src="images/screenshot3.jpg" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot2#2x.png" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot2#2x.png">
<img src="images/screenshot2.png" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot4#2x.jpg" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot4#2x.jpg">
<img src="images/screenshot4.JPG" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
</div>
</div>
<div class="owl-controls clickable" style="display: none;">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
</div>
</div>
</div>
</div>
I have not worked with Bootstrap, but I know HTML & CSS.
I would set the width of your owl-wrapper div to 750px (this should be large enough to contain the 4 owl-item divs set to their current width of 182px). Then change the display to inline-block, the position to relative, and use margins to center like so:
<div class="owl-wrapper" style="width: 750px; position: relative; margin: 0 auto; display: inline-block; -webkit-transition: all 0ms ease; transition: all 0ms ease;">
Also, if you want backwards compatibility with older versions of firefox, you may still wish to include the animation code with -moz prefix as well.
I hope that works for you! :)
I'm trying to center my image inside the div, but its seemingly glued to the right.
Here are my divs:
<div align="left" style="display:inline-block;">
<div style="width:210px;">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
</div>
This is what it looks like:
How can I fix this?
img tags are inline by default so all you have to do is call text-align: center on its parent:
<div style="display:inline-block;">
<div style="width:210px;text-align: center;">
<img src="res/img/TopAd.png" style="padding:10px 0;">
</div>
</div>
A few other notes:
You can remove align="left", that's not supported in HTML5.
You can also remove top: -100px because the top, left, right, and bottom properties don't work unless an element is set to fixed, absolute or relative.
This line: padding: 10 0 10 0; is missing px added to it and can be condensed to padding: 10px 0; which is top and bottom.
UPDATE
if you want to just center all of this in the middle of the page you can add text-align: center to the body but I would suggest removing the first div and adding margin:auto to the second one which has a defined width:
<div style="width:210px;text-align: center; margin: auto;">
<img src="http://www.placecage.com/200/400" style="padding:10px 0;"/>
</div>
FIDDLE
<div align="left" style="display:inline-block;">
<div style="width:210px; vertical-align:middle; text-align:center">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
</div>
The following code will do the task.
<div align="left" style="display:inline-block;">
<div style="width:210px;" align="center">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
<div align="left"
The align attribute was deprecated in HTML4. Use style="text-align: left;" instead of align="left".
padding:10 0 10 0;
10 of what? You are missing the units. You probably want 10px for pixels:
padding:10px 0 10px 0;
I don't see any code in there that even looks like it's trying to center the image. Try text-align: center on the container that the image should be centered within.
<div style="display:inline-block;">
<div style="width:210px; text-align: center; border: 1px solid #ccc;">
<img src="http://placecage.com/160/160" style="padding: 10px 0 10px 0;" />
</div>
</div>
i am trying to reduce the the width of slider using boot strap responsive css to display it in iphone
but i am not able to do it
can you please help me with it
http://jsfiddle.net/CXkQp/4/
screenshot
https://docs.google.com/file/d/0B3IBJKENGE7RQkk1eEI3TDNoN2c/edit
providing my code below
<div id="banner" class="clearfix" style="border-bottom: 2px solid #cacaca;">
<div class="bx-wrapper" style="width:100%; position:relative; margin-top: 0px; margin-bottom: 0px;">
<div class="bx-window" style="position:relative; overflow:hidden; width:100%">
<div class="container">
<div id="da-slider" class="da-slider" style="margin-top: 0px; margin-bottom: 0px; height: 300px; background-position: 247950% 0%;">
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate1A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate1B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate2A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate2B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-fromright da-slide-current" style="width: 100%;">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate3A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate3B.jpg" alt="image01"></div>
</div>
<nav class="da-arrows" style="width: 100%">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
<nav class="da-dots"><span class=""></span><span class=""></span><span class="da-dots-current"></span></nav></div>
</div>
</div>
</div>
</div>
A couple of points to get you started. In your jsFiddle, there doesn't seem to be a closing tag for your container div # line 120.
Also you want your slider to scale but it's not inside a fluid row div. I think your bootstrap grid needs work. Check the structure for fluid grid carefully: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
Hope this helps.