I currently have a Table "solution" to formatting the AddThis Div Buttons.
You can see this at: http://www.siding4u.com/save-on-siding.php
At the top of the page it shows correctly:
Here's the Code (work around) for that:
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60%" align="right"><img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23" /></td>
<td width="40%" align="left"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=siding4u"></script>
<!-- AddThis Button END --></td>
</tr>
</table>
I'm having/wanting to convert all of my table layouts to CSS but I can't seem to get the AddThis buttons to cooperate. They always seem to "LEFT JUSTIFY" or BREAK Somehow - no matter what I try.
I'm guessing this is an easy fix but I'm one of those CSS "block heads" that can't seem to whip the CSS into shape.
Please help...
In css aligning images is based on their position on the page rather than their justification ( the elements with class addthis_button_preferred_1...n should probably control this ) In a table you justify it left/center/right etc. while with CSS your aim is to align the in a way that it's child elements will be in the middle.
HTML:
<div id='wrapper'> <!-- parent div containing the help-us-help-you image and the buttons-->
<div id="help_us"><!-- float:left because we want the image div and the button dive to be besides eachother -->
<img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23"/>
</div>
<div id='buttons'><!-- this div should also be floated left and have padding, to align the buttons correctly -->
<!-- each of the link elements should get some padding -->
<a class="addthis_button_preferred_1 button_preferred"></a>
<a class="addthis_button_preferred_2 button_preferred"></a>
<a class="addthis_button_preferred_3 button_preferred"></a>
<a class="addthis_button_preferred_4 button_preferred"></a>
<a class="addthis_button_compact button_preferred"></a>
<a class="addthis_counter addthis_bubble_style button_preferred"></a>
</div>
</div>
The whole example is online on this fiddle, and should hopefully help with the alignment, and is a pure CSS solution, no tables there at all!
p.s. As a side note, I do recomend you use jsfiddle for CSS/HTML/javascript issues, it does help us see the problem better, and make changes faster.
EDIT
For the second issue:
<div align="center" style="margin-bottom:0; margin-top:5px;">
<div id='wrapper'>
...
</div>
...
</div>
For this element the height for some reason is 48 px, which creates a gap between the two elements. So apply a height to it, change:
style="margin-bottom:0; margin-top:5px;"
TO:
style="margin-bottom:0; margin-top:5px;height:23px;"
Related
I'm creating a personal website using Github. In this markdown file, I'm trying to align a photo to the left then have a brief intro of myself right next to the photo. This is my current code.
<img align="left" width="300" height="440" src="image/photo.JPG">
my introduction text goes here
What do I need to do to add some margin to the image so that the text is not bumping into the image? Thank you so much!
You can try this:
<img style="margin-right: 1.5rem" align="left" height="auto" width="300" src="https://thumbs.dreamstime.com/b/introduction-concept-word-cork-board-77226561.jpg" />
<p>Hi, this is the introduction...</p>
Or you can opt to use a multi-column layout and specify a column gap to your liking:
<section id="introWrapper" style="column-count: 2; column-gap: 50px">
<img>
<p></p>
<section>
I need to build some image in my html. I can't use css styles, because I want to use this markup for email mailing.
I need to build image like that:
I need doing it in HTML because I have some text that might be change.
Now I have this markup:
<td>
<div style="background-color: white;width: 702px;height:100px;border-radius:20px; ">
<img style="float: left;margin-top: 2%;margin-left: 2%;" src="rux.png" alt="" />
<p style="color:lightslategrey;font-size: 2em;padding-left: 5%;display: inline-block;">ДАЙДЖЕСТ НОВИН</p>
</div>
</td>
but I don't know how to add shape like right(orange one) and grey shape in bottom.
Appreciate for all kind of help.
Here's my code
<div class="table">
<div class="tr">
<div class="td">
<h1 class="logo-fill">
<a href="#" title="Logo">
<img alt="logo" src="./images/logo.png" />
</a>
</h1>
</div>
<div class="td">
<a href="#" title="AdSpace">
<img alt="adspace" src="./images/adspace.png" />
</a>
</div>
</div>
</div>
For some reason, the second image (adspace.png) is not displaying at all. If I remove the entire img tag and replace it with text, the text is displayed. Alternativly if I change the img tag to:
<iframe src="https://clients.ragezone.com/out.php/display/show_custom?id=48" scrolling="no" style="padding: 0px; overflow: hidden;" width="468px" height="60px" frameborder="no"></iframe>
Apparently that works as well. adspace.png is simply a 468px x 60px green box.
My money would be on the fact that you have an adblocker in your browser. Try changing class names and img name.
Adblocker plugins search for certain keywords in the code and block the page elements based on that.
In your image source path I saw one [dot] miss placed that may be a one problem.
This is your code
<img alt="adspace" src="./images/adspace.png" />
And try with this one
<img alt="adspace" src="../images/adspace.png" />
And other problem is your image name I also faced to this issue your image name is adspace.png and you added alt="adspace" and wrap it with link tag having the title with Adspace so the reason is some of plugins in your browser block all the images and divs starting with "ads / ad" this is called adblock plugins.
So you can easily change your img name and change everything starting with "ad" then you can find some useful fixing. Other way is you can remove the adblock plugins from your browser.
And please check your network too some networks admin can block ads too.
I have a forum # http://forum.banaisbul.com
If you check the site you can see there's a problem with the header background. I want to change the entire header background to the color of the logo background. But I don't know which codes to put where.
Matthew Rath gave you the correct answer to the problem that you wrote. But the bigger problem that you have revealed is that you do not know how to use your resources. Take some time and learn to use your web developer tools (web inspector, etc). Then you can solve these issues quickly by yourself.
It's #404040 - Tested in Photoshop:
HTML:
<div style="background-color: #404040;">
<a href="http://forum.banaisbul.com">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</a>
</div>
Photoshop Image:
From the looks of it you can simply add some CSS to the div that contains the header image.
<div class="imgheader">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
Then in your CSS file out could do
.imgHeader{
background-color: #3D3D3D;
}
Alternatively,
<div style="background-color: #3D3D3D">
</div>
The hardest part will likely be matching the CSS color hex code (e.g. #3D3D3D) to your image. You may want to look here to try to get an exact match : Paletton.com
You need to style the container div which currently has no selector assigned to it:
http://puu.sh/blDRr.png
This being the case you could do:
.cnt-container > div {
background-color: "your colour"
}
you could also add it directly in your page-template (this is called 'inline styling'):
a couple of lines below your opening body tag you'll find
<div>
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
and you need to change it to
<div style="background-color:#404040">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
I have a div inside that div i have an image which says "Searching .." Now for this modal How to apply the border
<div id="waiting-dialog" title="Waiting" style="display:none">
<img src="myimage.gif" border="0" align="middle" hspace="20" vspace="5"/>
Retrieving all the required information based on your selection.This may take a few moments. Please wait...
</div>
And for this Modal I am having the image Appearing on Left side and Text not appearing properly .How can I make tthe text to
appear in neatly manner
Take the text in a separate div inside the "waiting-dialog" div only, then use the use style float:left for that new div and image. Now you can play around the new div position with paddings, margins and fonts etc to make it neat. see the below sample code.
<div id="waiting-dialog" title="Waiting">
<img src="myimage.gif" border="0" align="middle" hspace="20" vspace="5" style=" float:left;"/>
<div style=" float:left; padding: 5px;"> Retrieving all the required information based on your selection.This may take a few moments. Please wait...</div>
</div>