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>
Related
I'd like to have an html file that organizes certain files scattered throughout my hard drive. But after saving file, my text i.e "Indian" got underlined. My code is
<a href="file:///G:\work files\project\indian.html" target="_blank">
<div class="button-1">
Indian
</div>
</a>
My question: is there any rule or tag in css or html to remove that underscore?
I'd keep my <div> under <a>, so why text contained in <div> got underlined
Add you must use css to change the way your links look like. Use a selector ("a") and set the text-decoration property to none:
<html>
<head>
<title>TITLE</title>
<style>
div a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>PAGE CONTENT</h1>
<div>
Link here
</div>
</body>
</html>
body { background-color: bisque;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
I have tried many styles to see what's wrong, but I can't seem to change the background color. This webpage works, but it's just plain. I am required to use CSS in order to compare both styles.
I copy and paste you're code and its working fine
i guess the problem is that you didn't refresh the page
try to do hard reload
CTRL+ F5 or in mac command+R
It actually does. I edited your question so it should be a snippet, and it worked in your source too. The only change I made was to change the p tag into div tag since p tag is meant for a paragraph, and what you wanted is a block.
Look how I changed the background color to blue:
body {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
Maybe the page is not refreshing right
PRESS Ctrl + F5
I want to hide a header text from the website.
because the same element "h2" has been used in more than one page, i can't apply a "display:none" to it.
I have tried it. The result is that it will remove other page's header too.
is there a way to apply CSS so that it only hides when the header text contains specific words?
i will be appreciate for any help i may get here
If I understand correctly, you can hide the header by removing the html on the specific page or with inline css, only on the page where you want to hide it ofcourse.
<header style="display: none;"></header>
Edit: If you only have access to css (not the the html or js) you can't achieve this unless the element has unique parents, attributes or something. You can find a list of css selectors here.
There is no way in CSS to select anything by its content currently. You can only select elements based on their ID, class, other attributes, specific ancestors, specific previous siblings, or their serial number among their siblings. So if you wand special styling for a specific element and you control the markup, the easiest way is to set this element a class or ID, as suggested above.
In your H2 tag that you want to hide, you can apply a class.
<html>
<head>
<style>
.hide-me { display: none; }
</style>
</head>
<body>
<h2>First header</h2>
<h2 class="hide-me">Your header</h2>
</body>
</html>
It's better to move the tag into a CSS file, but this will accomplish what you want.
You need to just add a id to your specific header and apply style to it.
CSS 101.
<head>
<style> //Internal CSS
#hide {
display: none;
}
</style>
</head>
<body>
<h2 id="hide"> Hello World </h2>
<h2> ... </h2>
<h2> ... </h2>
</body>
If you want to apply the same style from an external file copy the style inside the tag and paste it onto your style.css document.
The last and least used method is to use inline CSS :
<h2 style="display: none"> ... </h2>
More reference here : https://developer.mozilla.org/en-US/docs/Web/CSS/display
If you want to use the same style in more than one place use 'class' instead of id.
<head>
<style> //Internal CSS
.hide {
display: none;
}
</style>
</head>
<body>
<h2 class="hide"> Hello World </h2>
<h2> ... </h2>
<h2 class="hide"> Lorem Ipsum </h2>
</body>
The problem I am having with my website is that I am trying to make different sections of background colors on one page. I was able to get the main background color, but then I want a portion of the rest of the site to be another, and the footer to also be a different color. Here is the html code and css that I tried. I couldn't for the life of me figure out what I was doing wrong so if you know what I'm doing wrong that would help a ton! thanks!
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Travel</title>
</head>
<body bgcolor="#045889">
<table>
<tr>
<th><font color="white"><strong>Share Your Travels</strong>
</font> </header></th>
</table>
<table>
<td> <font color="white">Let Us Know Where You've Been</font></td>
</table>
<section>
<h2>Description</h2>
<p>
<i>Photo by Randy Connolly</i>
</p>
<p>
This photo of Conservatory Pond in
Central Park in
New York City
was taken on October 22, 2014 with a Cannon EOS 30D camera.
</p>
<p><img src="images_Travel/large-central-park.jpg" alt="Travel"/></p>
<p><i>Conservatory Pond in Central Park</i></p>
<p>
Share: <img src="images_Travel/social/email_16.png" alt="Travel"/>
<img src="images_Travel/social/rss_16.png" alt="Travel"/>
<img src="images_Travel/social/twitter_16.png" alt="Travel"/>
<img src="images_Travel/social/facebook_16.png" alt="Travel"/>
<img src="images_Travel/social/flickr_16.png" alt="Travel"/>
</p>
</section>
<h2>Related Photos</h2>
<p>
<img src="images_Travel/related-square1.jpg"alt="Travel"/>
<img src="images_Travel/related-square2.jpg"alt="Travel"/>
<img src="images_Travel/related-square3.jpg"alt="Travel"/>
</p>
<h2>Reviews</h2>
<p>
<i>by Ricardo on September 25th, 2015 </i>
</p>
<p>Easy on the HDR Buddy</p>
<p><i>by Susan on October 1, 2015</i>
</p>
<p>I Love Central Park.</p>
<footer>
Copyright ©
</footer>
</body>
</html>
CSS:
body {
background-color: #045889;
}
table{
font color= ''white'';
text-wrap: normal;
}
Ok, first off we need to clean up your HTML:
Tables are a Really Bad thing to use for formatting (almost always). Instead, it's best to use other html elements as appropriate. However, if you are going to use them make sure to put the <th> first (that's your Table Header), then <tr> (that's your Table Rows), then put <td> (your Table Data) inside of those as cells.
But a better solution than <table> is a <header> with <h1> and <h2> tags in it. Cleaner to style.
You need to double check that all of your opening tags have closing tags, and vice versa (see the </header> tag in your original code)
The font tag really isn't used anymore. Your CSS for the table shows that you can format that text color in a better way - we just have to get it to work!
I've also enclosed the rest of your content in another <section> tag so we can target that with CSS separate from the body.
Formatting your code can seem a bit of a waste of time, especially when you're just working on something for yourself, but it's REALLY helpful when you have a problem you can't sort out. Generally, you indent 1 tab/a few spaces each time you go a level deeper (nested) into the HTML. This makes it super easy to see when you've missed closing a tag.
<header>
<h1>Share Your Travels</h1>
<h2>Let Us Know Where You've Been</h2>
</header>
<section>
<h2>Description</h2>
<p>
<i>Photo by Randy Connolly</i>
</p>
<p>
This photo of Conservatory Pond in Central Park in New York City was taken on October 22, 2014 with a Cannon EOS 30D camera.
</p>
<p>
<img src="images_Travel/large-central-park.jpg" alt="Travel"/>
</p>
<p>
<i>Conservatory Pond in Central Park</i>
</p>
<p>
Share: <img src="images_Travel/social/email_16.png" alt="Travel"/>
<img src="images_Travel/social/rss_16.png" alt="Travel"/>
<img src="images_Travel/social/twitter_16.png" alt="Travel"/>
<img src="images_Travel/social/facebook_16.png" alt="Travel"/>
<img src="images_Travel/social/flickr_16.png" alt="Travel"/>
</p>
</section>
<section>
<h2>Related Photos</h2>
<p>
<img src="images_Travel/related-square1.jpg"alt="Travel"/>
<img src="images_Travel/related-square2.jpg"alt="Travel"/>
<img src="images_Travel/related-square3.jpg"alt="Travel"/>
</p>
<h2>Reviews</h2>
<p>
<i>by Ricardo on September 25th, 2015 </i>
</p>
<p>Easy on the HDR Buddy</p>
<p>
<i>by Susan on October 1, 2015</i>
</p>
<p>I Love Central Park.</p>
</section>
<footer>
Copyright ©
</footer>
For the CSS, there are a couple of fixes and some new styles
font color = ''white''; isn't proper CSS. It should be color: white; as is mentioned in the comments already.
To get the background color to change on elements, you just need to assign classes or ids to those elements, then style them appropriately (background-color: red; for example will do it).
That * is a wildcard: it applies the following styles to everything on the page. Needed to get rid of some default margins on the HTML elements
CSS:
* {
margin: 0;
}
body {
background-color: #045889;
}
header {
color: white;
background-color: green;
text-wrap: normal;
}
section {
background-color: yellow;
}
footer {
background-color: red;
}
In the parts where you want a different color, try adding a style
<footer style="background-color:green">
Copyright ©
</footer>
Your code has several errors, and you may want to have a look through it first. Here is a good tool to help you with that: W3C Markup Validator and CSS Validator
To change the background color of an element, simply use: background-color: followed by the color you want.
So for example, to change your footer to red, and your section to green, you can do:
footer {
background-color: #ff0000;
}
section {
background-color: #00ff00;
}
You can also use classes or ids' to mark sections of your page that you want to style. W3Schools - CSS Selectors
In WordPress, am creating a new post. In the HTML section of the post am using the following code:
<html>
<head>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
The text h1 font size is not coming that much, please help with this.
Within the <style> section, add:
h1, p {font-size:14px} or whatever size you want to use.
First, if your writting into the POST (html) you should not use the and so into the field.
Your post should only looks like this
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
But the fact is that why your not placing your css into a specific CSS file? In the root of your theme, your should have a default style.css to use.
Also, can you check that your using a reset.css or something like this that would overwrite what your entered into the field?