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.
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 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'm trying to have these 5 images to line up left to right however they are stacking top to bottom.
This is my HTML code
<div style="backgroundColorButtons">
<img src="images/white01.jpg" alt= "White Background" width="236" height="35" type='button' value='White Background' onClick="javascript:changeBGC('#ffffff');return false"
onmouseover="this.src='images/white02.jpg';"
onmouseout="this.src='images/white01.jpg'"
onmousedown="this.src='images/white04.jpg'"
onmouseup="this.src='images/white01.jpg'" />
</div>
<div style="backgroundColorButtons">
<img src="images/black01.jpg" alt= "Black Background" width="236" height="35" type="button" value='Black Background' onClick="javascript:changeBGC('#000000');return false"
onmouseover="this.src='images/black02.jpg';"
onmouseout="this.src='images/black01.jpg'"
onmousedown="this.src='images/black04.jpg'"
onmouseup="this.src='images/black01.jpg'" />
</div>
<div style="backgroundColorButtons">
<img src="images/red01.jpg" alt= "Red Background" width="236" height="35" type='button' value='Red Background' onClick="javascript:changeBGC('#ff0000');return false"
onmouseover="this.src='images/red02.jpg';"
onmouseout="this.src='images/red01.jpg'"
onmousedown="this.src='images/red04.jpg'"
onmouseup="this.src='images/red01.jpg'" />
</div>
There are two more buttons with similar code
This is the CSS Code that I am using;
.backgroundColorButtons{
float: left;
}
Instead of style use class
<div class="backgroundColorButtons">
I've also noticed that the way you use JS to change states is pretty painful, both for you, somebody who will edit the code one day, and the user it self. On every event (till all images are cached by the browser) you request the server for a new image resulting in an unprofessional time gap / wait - for the new image to be loaded.
Avoid where possible (anywhere is possible) inline JavaScript.
Explore the sprite images technique.
In your div declaration you have invalid syntax:
<div style="backgroundColorButtons">
If you want to assign class backgroundColorButtons to a div, you need to change it to:
<div class="backgroundColorButtons">
<div style=""> is allowed. but is used only for defining inline style, like so:
<div style="float: left;">
You should also consider defining width for your floated elements.
#container
{display:table;width:100%;}
#row{display:table-row;}
.left{display:table-cell;padding:10px;}
the html
<div id="container">
<div id="row">
<div class="left">1st image</div>
<div class="left">2nd image</div>
<div class="left">3rd image</div>
</div>
</div>
try using class instead of style should work
In Example <div class="backgroundColorButtons">
try to use .class in place of style="backgroundColorButtons" and style="backgroundColorButtons" is not valid inline css. you can do one of the below
1. add style="float:left" in place of style="backgroundColorButtons"
or
2. Make class name as
<style>
.backgroundColorButtons{
float:left;
}
</style>
and remove style in div add class="backgroundColorButtons"
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;"
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>