control placement of text next to image - html

I'm trying to edit a wordpress theme. I created a child theme and need to change the header. The current header has the following:
<hgroup>
<h1 class="site-title">sustainablewestonma</h1>
<h2 class="site-description"></h2>
</hgroup>
What I want to be able to do is independently control the placement of the span but margin-top or padding-top is being applied to both the image and the span. How can I control that?
<hgroup>
<img style="vertical-align:middle;" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/cropped-45795044_561214090992995_7744636018275385344_n.jpg" class="header-image" width="25%" alt="sustainablewestonma">
<span style="display:inline-block;margin-top:10px"> Educate Initiate collaborate</span>
</hgroup>

Is the style supposed to go in the html tag? If so, try putting a margin-top:0; on the image alongside the margin-top:10px; on the span.

Related

Coding mailchimp email inline styles not working as usual

so i have pretty easy coding running right now on the email we want to send out for the company consist of our logo a picture of the new company where we are a new agent in and the i don't have any Blurb yet for the company but it will still come
so whats happening is want to add a small background change to my emailer where our logo is in white and the rest of the body is in a dark grey but as soon as i create a div in my body it breaks where my picture and text appear
CODE
<html>
<header>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/_compresseds/03bb5db7-9357-47d4-b8ab-a6f0ae575554.jpg" style="max-width:80%;height:auto;padding-left:9%;"/>
<style>
body {Color: ; background-color:white} div {background-color:#545454;padding-top:20px;padding-bottom:0.2px}
</style>
</header>
<body>
<br>
<h2 Style="Text-align:center;color:#A6ACAF;text-size:100%">We Are Now A</h2><h1 Style="text-align:center">LUK Agent <br><br>
<div>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/images/08ed7f7f-6417-4719-a3bc-3bf29a97bd1b.jpg" style="max-width:70%;height:auto;padding-left:0%;"/> <p Style="Text-align:Center;Border:5% solid #364C94;Align:Center;padding:5px;width:68.5%;margin-left:15%">Small Blurp of LUK</p>
</div>
when running it in a w3schools it works perfectly
if anyone can add this coding to their Mailchimp will see what i mean with it breaks the code and structure
Here are some guidelines:
Close all tags that are not self-closing (img tags are self-closing, but body, html and h1 are not).
Do not put an img tag in the header. It is not allowed there. Move it to the body.
Do not use empty CSS commands, like 'Color: ;'.
Do not make up your own CSS commands, like 'Align';
Write CSS commands and attributes in small letters (not sure this is mandatory, but it is very uncommon to capitalize them).
Use indentation for clarity (of the HTML structure).
This would result in the following code:
<html>
<header>
<style>
body {color: black;background-color:white;}
div {background-color:#545454;padding-top:20px;padding-bottom:0.2px;}
</style>
</header>
<body>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/_compresseds/03bb5db7-9357-47d4-b8ab-a6f0ae575554.jpg" style="max-width:80%;height:auto;padding-left:9%;" />
<br>
<h2 style="text-align:center;color:#A6ACAF;text-size:100%">We Are Now A</h2>
<h1 style="text-align:center">LUK Agent</h1>
<br>
<br>
<div>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/images/08ed7f7f-6417-4719-a3bc-3bf29a97bd1b.jpg" style="max-width:70%;height:auto;padding-left:0%;" />
<p style="text-align:center;border:5% solid #364C94;padding:5px;width:68.5%;margin-left:15%;">
Small Blurp of LUK
</p>
</div>
</body>
</html>

How to close the space between two elements

I am trying to close the gap between my top two elements (an h1 tag and an image tag which is wrapped in a link tag).
I've tried changing margins and floating... I'm stuck :(
<div align="center">
<h1 style="color:blue; background-color:lightgrey; font-size:100px;">Inner Planets - Museum</h1>
<img src="http://csc2.madonna.edu/~brabahy/hw5/images/Banner1.jpg" height="400" width="1250">
</div>
And another style to h1 element in order to close the space.
Add margin-bottom:10px in style of h1.
<h1 style="color:blue; background-color:lightgrey; margin-bottom:10px; font-size:100px;">Inner Planets - Museum</h1>
Here is a plunker for same - http://plnkr.co/edit/1zvOxIar7RQOVcwmKV7B?p=preview

Text Image Text inline HTML CSS

What is the best way to have text and then an image with text following? I dont want to use table if possible but I am running into issues with the items breaking onto their own lines.
Below is my code and css so far:
<div id="header_number">
<h2 class="phone_title">Call Us Today!</h2>
<img src="images/phone_icon.jpg" alt="Call us Today"/>
<h2 class="large_num">1-800-555-9999</h2>
</div>
CSS:
h2.phone_title{font: 13px arial;Color:#013173;text-align:left;}
h2.large_num{font:29px arial;Color:#013173;text-align:left;}
#header_number{float:right;height:60px;width:332px;display:inline;}
I thought the display:inline; in the container div (header_number) would line everything up but that didn't work. If needed I can add a class to the img and float everything left if that is my only option.
Now Define your some element display:inline-block; or vertical-align:top
as like this
h2.phone_title, h2.large_num, img
{display:inline-block;vertical-align:top;
margin:0;
}
Now check to live demo

Positioning elements like a table, without using the table tag

I am trying to position some stuff in 3 columns. The first column has an icon, 2nd column has text, and the 3rd column has an image.
I wish to do this without using the Table tag. Using CSS I have gotten the first 2 columns placed correctly, here is an image:
On the right, I need to add another image, without disturbing the text on the left.
This is my HTML code (stripped down to the basics):
<img src="Images/icon-1.png" />
<span class="content-title">My title 1</span>
<p>
Here is my text ...
</p>
<br />
<img src="Images/Icon-2.png" />
<span class="content-title">My Title 2</span>
<p>
Here is my text ...
</p>
<br />
And the CSS that emulates the table layout:
.content-title
{
font-size: 26px;
font-family: Helvetica,Arial,sans-serif;
color: #363636;
top: -28px;
position:relative;
left:+10px;
font-weight: bold;
}
#content-benefits p
{
margin-left:80px;
top:-30px;
position:relative;
width:325px;
}
My issue is, that I can't figure out how to place my image on the right, without making it's position:absolute;, but if I do that, I have to (AFAIK) use JavaScript to place the images relatively to their corresponding paragraphs.
If you want another image add it to the HTML before the rest of the "section" and then float it right with:
img {
float: right;
}
On another note, why aren't you using heading tags to display your headings?
You could use the css display:table to make it apear using a table take a look at the docs for this found here
Place the image after the titles span end tag
<img src="Images/icon-1.png" />
<span class="content-title">My title 1</span>
<img src="Images/icon-1.png" />
<p>
Here is my text ...
</p>
<br />
if i properly understand your layout i would do this
<img style="float:left; width:80px" src="image/icon-1.png"/>
<div style="width:405px">
<img style="float:right; width:80px"/>
<div style="float:left; width:325px">
<span/>
<p>
...
</p>
</div>
</div>
you wont need the other positioning you used
if you cannot change the markup,
than put width to the span and p and float:left, and put float:right and width to img
putting float automatically converts the element to display:inline-block which mean that it no longer distributes to the free page width, but takes the minimal allowed space (set by width) and stays rectangular. This way it becomes something like a column.

How to add the border to Jquery Modal Dialog

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>