I put a banner in the div tags except it is not showing on my website. Here is my html:
.alert-box {
background-color: #DB5461;
color: #ffffff;
font-size: 14px;
line-height: 23px;
padding: 13px 16px;
text-align:center;
font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
border-radius: 20px;
margin-bottom: 20px;
}
#header {
background-image: url(“./background.jpg”);
background-position: center;
background-repeat: no-repeat;
position: relative;
background-size: cover;
top: 0;
height: 40px;
width: 100%;
}
<div id="header">
<div class="alert-box">
<span class="badge">Announcement</span>Announcement text here (I'm not sharing this)
</div><br>
</div>
I don't see an evident problem.
I have tried changing up the CSS to no avail, and I believe the HTML is fine.
Related
I tried to add a verticle bar thats stuck to the top right off my screen but it dosent show up for some reason, i tried everything i could. here is my code.
css: used for the style of my site, just uhh regular old code expect that it show anything thats located at the bottom of my website expressed by the overflow hidden thing. Anyways inspect element tells me that my gradient bar is at the bottom of the site even though its not supposed to be. see last couple lines of the css code for the bar.
body {
margin: 0;
margin: 0;
background-color: #0c7bcb; /* change to desired color */
background-size: cover;
height: 1ch;
height: 150px;
overflow: hidden;
}
.bar {
padding-top: 0.5px;
font-size: small;
border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
border-style: solid;
background-color: #0c7bcb;
background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px; /* adjust as needed to make room for the icon */
border-bottom-width: 0.5px;
border-top-width: 0.5px;
background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
}
#close-button {
padding-top: 1px;
color: aliceblue;
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
font-size: 24px;
}
.updates {
background-color: aliceblue;
border-color: aliceblue;
color: #2bab10;
position: absolute;
top: 135px;
right: 300px;
font-weight: bolder;
font-family: 'main';
width: 1000px;
overflow: auto;
max-height: 6in;
}
.back {
background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
}
#baro {
background-color: #78ac4c;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
#play-btn {
background-color: yellow;
color: black;
border-radius: 100px;
padding: 10px 20px;
cursor: pointer;
border: none;
}
#font-face {
font-family: main;
src: url(font.ttf);
}
.discord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.dickkord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
margin: 0;
background-color: #0c7bcb; /* change to desired color */
background-size: cover;
height: 1ch;
height: 150px;
overflow: hidden;
}
.bar {
padding-top: 0.5px;
font-size: small;
border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
border-style: solid;
background-color: #0c7bcb;
background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px; /* adjust as needed to make room for the icon */
border-bottom-width: 0.5px;
border-top-width: 0.5px;
background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
}
#close-button {
padding-top: 1px;
color: aliceblue;
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
font-size: 24px;
}
.updates {
background-color: aliceblue;
border-color: aliceblue;
color: #2bab10;
position: absolute;
top: 135px;
right: 300px;
font-weight: bolder;
font-family: 'main';
width: 1000px;
overflow: auto;
max-height: 6in;
}
.back {
background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
}
#baro {
background-color: #78ac4c;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
#play-btn {
background-color: yellow;
color: black;
border-radius: 100px;
padding: 10px 20px;
cursor: pointer;
border: none;
}
#font-face {
font-family: main;
src: url(font.ttf);
}
.discord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.dickkord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#gradient-bar {
background: linear-gradient(to right, #000000, #ffffff);
height: 20px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eaglercraft.xyz</title>
</head>
<body>
<div class="bar">
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div id="close-button">×</div>
<div class="back">
<pi></pi>
</div>
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="updates">
<div class="Texty">
<p> Be sure to join our discord!</p>
<div class="discord">
<ul style="color: black; font-weight: 100;"></ulstyle>Stay up to date with the latest news, contests, giveaways and other cool things: discord.gg :)</ul>
</div>
<div class"dickkord">
<p style="color: #298bc4"> Minecraft 1.8</p>
<ul style="color: black;"></ulstyle>Diorite: Crafted using 2 cobblestone and 2 Nether quartz in a checkerboard pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Andesite: Crafted using 1 cobblestone and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Granite: Crafted using 1 Nether quartz and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Coarse Dirt: Replaces grassless dirt found in mega taiga, mesa and savanna biomes. It is slightly darker than regular dirt. Tilling it with a hoe turns it to regular dirt. Can be crafted using dirt and gravel in a 2x2 checkered pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine: Generates in ocean monuments and can be crafted using prismarine shards. Cracks in prismarine slowly change color.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine Bricks: Generates in ocean monuments and can be crafted using prismarine shards.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Dark Prismarine: Generates in ocean monuments and can be crafted using prismarine shards and an ink sac.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Red Sandstone: Can be crafted using 4 red sand in a square. Comes in chiseled, smooth, stair, and slab forms. Generated only in Mesa biomes at cave entrances.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Iron Trapdoor: Can only be opened and closed using redstone. Crafted using iron ingots in a 2x2 pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Sea Lantern: Generates in ocean monuments and can be crafted using prismarine shards and prismarine crystals. Emits light and has an animated texture.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Wet Sponge: Obtained when a sponge soaks up water. Smelting yields a dry sponge. Emits water dripping particles. Dropped by elder guardians.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Slime Block: Crafted using 9 slime balls. Players and mobs bouncing on top. Pushes and pulls blocks when moved by a piston. Does not affect falling items.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Banners: Crafted like signs but using wool. Can be stacked to 16 and have up to 6 layers. Can be placed on walls or on the ground. Different patterns can be made using dyes and certain items.</ul>
</div>
</div>
</div>
<div id="baro">
<select id="menu1">
<option selected value="latest">Latest Releases</option>
<option value="1.5">1.5</option>
<option value="1.8">1.8</option>
</select>
<select id="menu2" style="display: none;">
</select>
<button id="play-button" style="background-color: #f0c43c; border-radius: 20%; align-content: center;">Play</button>
</div>
<script src="epic.js"></script>
</body>
</html>
Reasoning:
Due to the 'back' class div set to the height of '100vh' (Vertical Height), The following div with static positioning will sit just below the div with the class of 'back'
Solution:
Rearranging your code makes it visible just under the blue bar
<div class="bar">
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div id="close-button">×</div>
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="back">
<pi></pi>
</div>
To put it in the very top of the page I used the following
HTML:
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="bar">
<div id="close-button" style="top: 20px">×</div>
<!-- style attr to fix the cross -->
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div class="back">
<pi></pi>
</div>
CSS:
#gradient-bar p {
margin-top: 0;
position: relative;
}
And to half it you could set #gradient-bar width to 50%
And to put it in the top right corner you could put
#gradient-bar {
position: absolute;
right: 0;
}
Hoped I helped in some way!
I was trying to make a website and had an error; I cant make 2 backgrounds in a singular html page: I want to make it so that the header, footer and the body have separate backgrounds but the element repeats when it specifies in the CSS 'no-repeat. Here is the code:
* {
margin: 0 auto;
padding: 0;
background: url(image/stacks.jpg);
background-position: center;
background-repeat: no-repeat;
}
#web {
border: solid 3px;
width: 460px;
height: 40px;
margin: 0 auto;
background-color: black;
font-size: 33px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
color: white;
}
#mar {
border: solid 3px;
width: 230px;
background-color: tomato;
font-size: 30px;
background-color: white;
color: white;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
margin: 0 auto;
}
#OK {
border: solid 3px;
width: 150px;
background-color: tomato;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
background-color: white;
color: white;
background-color: green;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
}
#HI {
margin-left: 100px;
margin-top: 20px;
width: 100px;
color: red;
font-size: 23px;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
}
a {
text-decoration: none;
color: white;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
margin-right: 10px;
}
#hehe {
margin-right: 10px;
}
ul {
float: left;
}
li {
display: inline;
font-size: 30px;
color: white;
background-image: url(https://th.bing.com/th?
id=OIF.X08wRmGQAg%2bBkQmjrlRbWQ&w=348&h=143&c=7&r=0&o=5&pid=1.7);
}
<!DOCTYPE html>
<html>
<head>
<meta keywords="htmls,tech,learn" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>t3lem_تعليم</title>
</head>
<body>
<div id="hehe">
<ul>
<li> Home</li>
<li> الفيديوهات </li>
<li> اتصل بنا</li>
<li> عن الموقع</li>
</ul>
</div>
<div id="HI">
<a href="https://www.youtube.com/channel/UCi0k9ygpc-NXOL090pIUkuw/"> <img src="https://yt3.ggpht.com/4qs1rBAWeor-sAeiNr9fDSHw4dtpF6--drGr70O_xAhA5Zq9LVSZAPe-
vuiVIzRKIxwvlF5Evw=s600-c-k-c0x00ffffff-no-rj-rp-mo" width="80px"> </a>
العودة للقناة
</div>
<div id="wrapper">
<div id="web">
Welocme to T3leem_Website
</div>
<div id="mar">
أهلا بكم في موقع تعليم
</div>
<div id="OK">
الصفحة الرئيسية
</div>
</div>
</body>
</html>
I cant put 2 backgrounds and wanted to know why. I tried methods but nothing seems to work in HTML/CSS
I hope you can answer my question
and thanks
Read this to understand more about specificity .
And you can use one of the following things :
either add !important to background-repeat: no-repeat; in this way :
*{background-repeat: no-repeat !important;}
or you can add background-repeat: no-repeat; to individual element which are using background-image property
I would like to build some cards with categories, like: Men, Women and Kids.
I would like to these cards look like these: .
I want to let user click on one of them and going to Men or Women page.
Any Ideas how I could do that?
I am using JS, BS, CSS, HTML
Here is the HTML CODE For Custom Card
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="custom-card content-left">
<h3>TOP TRENDING</h3>
<h1>SPRING TRENDS</h1>
<h2>Collections</h2>
Discover NOW
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="custom-card content-center">
<h3>TOP WANTED TODAY</h3>
<h1>SPRING TRENDS</h1>
<h2>Jumpsuit</h2>
Discover NOW
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="custom-card content-right">
<h3>SOMETHING NEVER GET OLD</h3>
<h1>For Men</h1>
<h2>Collections</h2>
Discover NOW
</div>
</div>
</div>
</div>
Custom Card Design CSS
/* USE BACKGROUND IMAGE INSTADE OF BACKGROUND COLOR */
.content-left {
background-color: tan;
background-size: cover;
background-position: 50% 100%;
height: 100%;
width: 100%;
padding: 30px 20px;
}
.content-center {
background-color: orange;
background-size: cover;
background-position: 50% 100%;
height: 100%;
width: 100%;
padding: 30px 20px;
}
.content-right {
background-color: powderblue;
background-size: cover;
background-position: 50% 100%;
height: 100%;
width: 100%;
padding: 30px 20px;
}
/* CARD TEXT STYLE */
.custom-card h1 {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 28px;
text-align: left;
padding: 10px 0;
}
.custom-card h2 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 24px;
text-align: left;
padding: 5px 0;
}
.custom-card h3 {
font-family: 'Roboto', sans-serif;
font-size: 18px;
text-align: left;
}
.custom-card a {
font-family: 'Roboto', sans-serif;
color: black;
font-weight: 500;
font-size: 16px;
text-align: left;
padding: 5px 0;
text-decoration: none;
padding-bottom: 5px;
border-bottom-style: solid;
border-bottom-width: 4px;
border-color: red;
}
Source Code: https://github.com/HassanNazmul/stack-Overflow/blob/main/Cards%20with%20image%20in%20BOOTSTRAP/index.html
This is my first html/css project. I tried to use nav and ul tags to put a Log in option on the top right corner over the image. When I do it shifts everything from the middle. I did google before posting but I haven't been successful. I am just wanting to know if I have to float it over or mess with the padding and margins? Here is the html markup`
<!DOCTYPE html>
<html>
<head>
<title>AudioPhile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Audio<img class="logo" src="https://image.ibb.co/n2A7gb/bar_diagram.png" alt=" folder with white music bars">Phile</h1>
<p>Create. Play. Share music anywhere, on any device with unlimited free storage.</p>
<input class="signup" type="email" id="myEmail" value="Type Your Email Here">
<a class="btn-1" href="#">Get Started</a>
<footer class="credits">© Natalie Pickrom</footer>
</div>
</div>
</section>
</body>
</html>`
The CSS:`#import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Nunito:200');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background:linear-gradient(0deg,rgba(64,64,64,0.8),rgba(64,64,64,0.8)),url(https://preview.ibb.co/jZbkZw/james_stamler_153487.jpg) no-repeat 95% 95% ;
background-size: cover;
display: table;
top:0;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%
max-width: none;
}
.content {
max-width:500px;
margin: 0 auto;
text-align:center;
}
.content h1 {
font-family: "Archivo Narrow", Helvetica, sans-serif ;
color: #F9F3F4;
text-shadow: 0px 0px 300px #000;
font-size: 6em;
padding:0px;
margin:0px;
}
.content p {
font-family: Nunito, "Open Sans", sans-serif;
font-size: 1.253em;
color:#F9F3F4;
Paddding: 0px;
margin-top: 0px;
}
.signup {
border: 0px;
font-family: Nunito, "Open Sans", sans-serif;
letter-spacing: 2px;
color: rgba(128,128,128,0.7) ;
padding: 5px;
width: 67%;
}
.btn-1 {
border-radius:0px;
background-color: #008CBA;
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 3px 10px 4px;
width:50%;
}
.credits {
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
padding: 10px;
}
#media screen and (max-width: 768px) {
.content h1 {
font-size:4em;
}
.btn-1 {
padding: 2px 10px 3px;
width: 25%;
}
p {
font-size: .5em;
}
}
`
Here is the JSfiddle https://jsfiddle.net/1ysegrd6/
Here is what I want to achieve. I want log in where they have home subscribe
Whatever reason it is, when I try to send my mailings my css is not loaded correctly. My email background is gone and the email template looks stripped. I tried to use inline CSS but also that was no luck for me. I tried to upload my images to another host to see if that's the reason. But no luck after all.
I have converted my web template to mail template. But still no luck...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html style="margin: 0; padding: 0;">
<head></head>
<body style="background-image: url('http://s30.postimg.org/3zs80ks9t/image.jpg'); background-attachment: fixed; background-position: top; background-repeat: no-repeat; background-color: #5C5959; width: 100%; font-variant: normal; font-style: normal; padding: 0; font-weight: normal; font-size: 13px; margin: 0 auto; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 1.8em; text-align: center; letter-spacing: 0.06em;" bgcolor="#5C5959">
<div style="width: 1000px; min-height: 1000px; text-align: center; color: #595959; background-attachment: fixed; background-repeat: no-repeat; margin: 0 auto; padding: 0;" align="center">
<div style="color: white; float: left; margin-left: 55px; margin-top: 40px;"><img src="http://haptotherapiemris.nl/images/logo.png" border="0"></div>
<div style="color: white;"><div style="color: white;"></div></div>
<div style="color: white; clear: both; height: 50px;"></div>
<div style="color: white; clear: both; text-align: center; width: 1000px; height: 38px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-up.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="center"></div>
<div style="color: white; text-align: center; width: 1000px; margin-top: -2px9; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red.png'); background-repeat: repeat-y; background-color: transparent; background-position: center top;" align="center">
<div style="color: white; text-align: left; width: 760px; height: auto; background-color: transparent; margin: -15px 120px -8px;" align="left">
<h1 style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; line-height: 1.5em; font-size: 19px; font-weight: normal; color: #ffffff;">Titel</h1>
<br>content
</div>
</div>
<div style="color: white; text-align: right; width: 1000px; height: 74px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-down.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="right"></div>
<div style="color: white;">
<a target="_blank" rel="nofollow" href="http://www.facebook.com/HaptotherapieMichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-fb.png"></a> <a target="_blank" rel="nofollow" href="https://twitter.com/#!/Info_MichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-twitter.png"></a> <a target="_blank" rel="nofollow" href="http://blog.haptotherapiemris.nl/" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-blog.png"></a>
</div>
<div style="color: white;"></div>
</div>
</body>
</html>
<html style="margin: 0; padding: 0;">
<head></head>
<body style="background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg.jpg'); background-attachment: fixed; background-position: top; background-repeat: no-repeat; background-color: #5C5959; width: 100%; font-variant: normal; font-style: normal; padding: 0; font-weight: normal; font-size: 13px; margin: 0 auto; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 1.8em; text-align: center; letter-spacing: 0.06em;" bgcolor="#5C5959">
<style type="text/css">
h1 a:hover { color: #5e5e5e !important; text-decoration: none !important; }
.veolay-menu ul li.menuitem a:hover { color: #c20016 !important; text-decoration: none !important; background-color: #ffffff !important; height: 47px !important; }
.menusub ul li.menuitem a:hover { color: #c20016 !important; text-decoration: none !important; background-color: #ffffff !important; background: transparent url('http://nieuwsbrief.michaelris.nl/files/images/menubalksub-hover.png') repeat-x center top !important; }
.menusub ul li.menuitemactief a:hover { color: #c20016 !important; text-decoration: none !important; background-color: #ffffff !important; background: transparent url('http://nieuwsbrief.michaelris.nl/files/images/menubalksub-hover.png') repeat-x center top !important; }
></style>
<div style="width: 1000px; min-height: 1000px; text-align: center; color: #595959; background-attachment: fixed; background-repeat: no-repeat; margin: 0 auto; padding: 0;" align="center">
<div style="color: white; float: left; margin-left: 55px; margin-top: 40px;"><img src="http://haptotherapiemris.nl/images/logo.png" border="0"></div>
<div style="color: white;"><div style="color: white;"></div></div>
<div style="color: white; clear: both; height: 50px;"></div>
<div style="color: white; clear: both; text-align: center; width: 1000px; height: 38px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-up.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="center"></div>
<div style="color: white; text-align: center; width: 1000px; margin-top: -2px\9; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red.png'); background-repeat: repeat-y; background-color: transparent; background-position: center top;" align="center">
<div style="color: white; text-align: left; width: 760px; height: auto; background-color: transparent; margin: -15px 120px -8px;" align="left">
<h1 style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; line-height: 1.5em; font-size: 19px; font-weight: normal; color: #ffffff;">Titel</h1>
<br>content
</div>
</div>
<div style="color: white; text-align: right; width: 1000px; height: 74px; background-image: url('http://nieuwsbrief.michaelris.nl/files/images/bg-red-down.png'); background-repeat: no-repeat; background-color: transparent; background-position: center top;" align="right"></div>
<div style="color: white;">
<a target="_blank" rel="nofollow" href="http://www.facebook.com/HaptotherapieMichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-fb.png"></a> <a target="_blank" rel="nofollow" href="https://twitter.com/#!/Info_MichaelRis" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-twitter.png"></a> <a target="_blank" rel="nofollow" href="http://blog.haptotherapiemris.nl/" style="color: #ffffff; text-decoration: underline;"><img border="0" src="http://haptotherapiemris.nl/images/logo-blog.png"></a>
</div>
<div style="color: white;"></div>
</div>
</body>
</html>
Is it an HTML newsletter?
If so, then i'm sorry but divs are not very well supported and you will have to go back to using tables Unfortunately :(
You have also got two opening html tags - this should only be done once in the whole document
A lot of quirks html email has, check out the link to get you up to speed.
Here are a few of the issues:
For background images, there are only 2 techniques to that work in all major clients. The first technique only works in the entire email (body tag), the second uses VML to support Outlook.
For color declarations you have to use the 6-digit hex code ie color:#FFFFFF; not color:white;, as all other color codes/names are not fully supported.
float:left; isn't fully supported, you need to use align="left" in a <td> element instead.
As mentioned in other answers, you should avoid <div>, but also semantic tags like <h1> as they are not consistently rendered in all clients. Style text in a <td> or in <font> tags instead.
Your CSS selectors won't work also.