I'm very new at CSS and i want to put a header on to my new web site.
A simple one, only an image who goes on the top background. I really don't know how to do it with out much coding.
So, this is what i have, and this is what i want. And at the end of this question is the code of the actual page. Any ideas? Thanks so munch!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tablon</title>
<link rel="stylesheet" href="LIB/main.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="LIB/titulos.css">
<!--[if IE]>
<link rel="stylesheet" href="LIB/ie.css" type="text/css" media="screen" />
<![endif]-->
<style type="text/css">
.style1 {
text-align: right;
}
.style2 {
vertical-align: top;
margin-top: 3pt;
margin-bottom: 3pt;
}
#apDiv1 {
position:absolute;
left:116px;
top:398px;
width:800px;
height:37px;
z-index:1;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
}
</style>
</head>
<body>
<script type="text/javascript" src="JS/jquery-1.3.2.js"></script>
<marquee>
</marquee>
<div class="wrapper">
<p> </p>
<p><br />
</p>
<center> </center>
<div class="aux">
<div id="container">
<ul class="menu">
<li id="noticias" class="active">Mensajes</li>
<li id="tutoriales">Profesores</li>
<li id="enlaces">Enlaces</li>
</ul>
<span class="clear"></span>
<div class="content noticias">
<h3>Ultimos mensajes</h3>
<br />
<div class="style1" style="vertical-align: middle; text-align: right; background-color: #1E1E1E; height: 21px;">
<img alt="" height="16" src="IMG/feed16.png" width="16" class="style2" />
Subscribirce al canal RSS
</div>
<ul>
<br>
<div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
djsoftlayer: Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=44&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br><div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
djsoftlayer: testing
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=43&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=testing">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br><div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
nata: grande
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=42&autor=nata&foto=http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80&sms=grande">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br> </ul>
</div>
<div class="content tutoriales">
<h3>Profesores</h3>
<ul>
<br><li><IMG src="IMG/bullet.png" alt="-" />djsoftlayer</li><li><IMG src="IMG/bullet.png" alt="-" />nata</li><body style="background-image: url('IMG/bg.png')">
</ul>
</div>
<div class="content enlaces">
<h3>Deberías Visitar...</h3>
<ul>
<li><IMG src="IMG/bullet.png" alt="-" /> www.plusmusica.com - Online jukebox!</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.cokidoo.com - Nuestra startup! :)</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.pixelartgames.com - Te gustan los juegos pixel art? ;)</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.dmsconsulting.es - Anterior empresa</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="JS/tabs.js"></script>
</body>
</html>
Here is the basic html structure you have
<body>
<div id="wrapper">
<div id="container">
<p>content</p>
</div>
</div>
</body>
Here is the basic css you need to place your banner image:
#wrapper {
width: 600px; /* this is the width of your background image */
background: url(/path/to/image.jpg); /* this sets the div background as an image */
margin: 0px auto; /* this centers the div */
padding-top: 20px; /* this "pads" the div 20px on the top */
}
#container {
width: 400px; /* this sets the width of the container, it is narrower than the wrapper div to get the effect you are looking for */
margin: 0px auto; /* to center the div with the div#wrapper */
}
A bit more information on the CSS would be good. In your "what you want" link there is an specified width -- there needs to be a wrapping element on the page (possibly your #wrapper division), then do something like:
background: url(/link/to/background/image.ext)
And you'll be set.
You're going to like CSS after you get used to it. The section like this:
<p> </p>
<p><br />
</p>
<center> </center>
can be completely replaced with a little padding-top or margin-top setting like this:
.wrapper {
padding-top: 25px;
To address your question, Kerry was on the mark. Set the background property, specifying the url similarly to as he advises to get your desired effect. You probably want to do this on your wrapper class. Algo asi:
background-image: url('relative/path/toImage.png');
background-repeat:no-repeat;
background-position:center top;
}
See this for more. Enjoy!
Others have answered your question, but I'd like to add that there are a couple things I'd do to improve your HTML code.
Move the Javascript tag which loads jQuery to the last line before . The current position will block rendering until the script has loaded.
<script type="text/javascript" src="JS/jquery-1.3.2.js"></script>
<script type="text/javascript" src="JS/tabs.js"></script>
</body>
Get rid of the , tags (and center your #wrapper as superUntitled proposes)
Good luck!
Related
I'm trying to personalize the reset password email template from firebase.
It should look something like this:
but instead it looks like this:
I've tried with the tag but that didn't work so i individually put the style in ach element, it kinda worked for like one email, but now is completely broken, seems like it isn't reading the flow-direction: column, but seeing it in the browser the styling looks fine, someone knows what is happening?
here is the code i'm puting in the message
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recover Password Email</title>
</head>
<body style="font-family: 'Poppins', sans-serif;box-sizing: border-box;margin: 0;padding: 0;background: #fff; display: flex; flex-direction: column;justify-content: center;align-items: center;height: 100vh;text-align: center;">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;700;800&display=swap" rel="stylesheet">
<img src="https://tutorstripe.netlify.app/image.svg" alt="Fingerprint Icon" style="width: 100%;max-width: 70px;margin: 0 auto;"/>
<h1 style="font-size: 2rem;font-weight: 700;margin: 0;padding: 0;color: #486EFF;margin-top: 1rem;margin-bottom: 1rem;">¡Hola, Lucas!</h1>
<p class="message" style="font-size: 0.75rem;font-weight: 400;padding-left: 8vw;padding-right: 8vw;color: #000;margin-top: 1rem;margin-bottom: 1rem;">
Recibes este correo porque nos notificaron que olvidaste tu contraseña, desafortunadamente nosotros tampoco sabemos cuál es tú contraseña 😵, toda la información sensible que recibimos de ti esta encriptada 🔒 para mantenerte seguro.
<br><br>
Pero no hay de qué preocuparse 😅, para recuperar el acceso a tú cuenta puedes cambiar la contraseña y podrás seguir usando nuestra aplicación de inmediato
</p>
<p class="warning" style="font-size: 0.6rem;font-weight: 500;padding-left: 8vw;padding-right: 8vw;color: #000;margin-top: 1rem;margin-bottom: 1rem;">
🚩 Si tú no solicitaste restablecer tu contraseña puedes ignorar este correo 🚩
</p>
<button onclick="window.open('%LINK%')" style="padding: 0.5rem 2rem;border-radius: 0.25rem;background-color: #486EFF;margin-top: 1rem;margin-bottom: 1rem;cursor: pointer;outline: none;border: none;color: #fff;font-size: 0.9rem;font-family: 'Poppins';font-weight: 600;">
Cambiar contraseña
</button>
<h3 style="font-size: 0.7rem;font-weight: 500;margin: 0;padding: 0;color: #000;margin-top: 1rem;margin-bottom: 1rem;text-decoration: underline;">Attentamente</h3>
<h2 style="font-size: 0.75rem;font-weight: 600;margin: 0;padding: 0;color: #486EFF;margin-top: -0.8rem;margin-bottom: 1rem;">El frutifantástico equipo de Tutor</h2>
<br><br><br>
<div class="footer" style="background: #486EFF;width: 100vw;display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;position: fixed;bottom: 0;">
<p class="copyright" style="font-size: 0.6rem;font-weight: 300;margin: 0;padding: 0;color: #fff;margin-top: 1rem;margin-bottom: -1rem;">© 2022 Tutor. Todos los derechos reservados</p>
<h4 style="font-size: 0.8rem;font-weight: 700;opacity: 0.6;">Tutor</h6>
</div>
</body>
</html>
HTML Email doesn't support a lot of modern CSS such as flex, nor SVG images.
Check https://caniemail.com for what you can use.
You also can't use JavaScript - change the onclick event to a URL.
You can use divs for single column layouts, but you will still need one outer table for Outlook as that doesn't support max-width and doesn't work well with divs in general.
Outer structure example:
<div style="max-width:600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
..Content here..
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
Looks like you need a primer to HTML Email, or perhaps a framework if you didn't want to think too hard, and I'd recommend this page of resources: https://emailresourc.es/#code-frameworks
i'm currently developing a page for a friend and the goal is for the sardines cans to work as a kind of menu to display some details.
Before having the tabs it was working fine as presented in the image:
after using the tabs i lost my original layout... anyone has a clue how to solve this? I'm sure my problem is in my css.
Used Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mar de Sardinhas</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i" rel="stylesheet">
<!-- scripts de visivel / invisivel
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
css para styling -->
<style type="text/css">
.off {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.on {
}
.position{
position: relative;
bottom: -30%;
transition: 0.3s;
}
.position:hover {
position: relative;
bottom: 0%;
transition: 0.3s;
}
.imgsize{
max-width: 10vw;
}
.wide-as-needed {
position: fixed;
bottom: 0;
left: 0;
overflow: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap; width:100%;
}
.fundo{
background:rgba(255,255,255,0.5);
}
.texto {
font-family: 'Open Sans', sans-serif;
}
.preview{
max-width:100%;
max-height:100%;
}
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0)
),
/* bottom, image */
url(bg.jpeg);
}
.lata {
position: relative;
text-align: center;
color: white;
}
.hide {
display:none;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body background="bg.jpeg" class="tinted-image" style="background-attachment: fixed;">
<div class= "row tabcontent" id="London">
<!-- parte do texto episodio 1-->
<div class="col-sm-12 col-lg-4 m-4 " style="overflow-y:scroll; max-height: 65vh; position: static;">
<div class="texto m-2">
<h2>Origens</h2>
<p>
A arte de conservar alimentos foi sempre uma constante na história da humanidade. Os métodos mais ancestrais como a defumação e a salga permitiram o consumo de peixe em larga escala e o seu transporte para zonas distantes do litoral. Até o século XVII, parte do pescado conservado tinha por objectivo o fornecimento de navios envolvidos na expansão Ultramarina.
No entanto Portugal tem uma tradição milenar na conservação de pescado que remonta ao período grego e romano, com a produção do Garum – uma afamada conserva de sangue e vísceras de peixes que se deixava a secar em salmoura e que era exportada para todo o mediterrâneo.
</p>
</div>
<div class="texto">
<h2><i>Origins</i></h2>
<p><i>
The art of preserving food has always been a constant in the history of mankind. More ancestral methods such as smoking and salting have allowed the consumption of fish on a large scale and its transport to areas far from the coast. Until the seventeenth century, part of the preserved fish had the objective of supplying ships involved in the Overseas expansion.
However Portugal has a millennial tradition in the conservation of fish that goes back to the Greek and Roman period, with the production of Garum - a famous preserve of blood and viscera of fish that was allowed to dry in brine and that was exported to all the Mediterranean.</i> </p>
</div>
</div>
<!-- segunda coluna episodio 1-->
<div class="col m-4 ">
<div >
<img src="e01.png" class="preview mt-2">
</div>
<div class="d-flex justify-content-center ">
Ver Filme / Watch Movie
</div>
</div>
</div>
<div class= "row tabcontent" id="Paris">
<!-- parte do texto episodio 1-->
<div class="col-sm-12 col-lg-4 m-4 " style="overflow-y:scroll; max-height: 65vh; position: static;">
<div class="texto m-2">
<h2>Origens 2</h2>
<p>
testeeee
No entanto Portugal tem uma tradição milenar na conservação de pescado que remonta ao período grego e romano, com a produção do Garum – uma afamada conserva de sangue e vísceras de peixes que se deixava a secar em salmoura e que era exportada para todo o mediterrâneo.
</p>
</div>
<div class="texto">
<h2><i>Origins</i></h2>
<p><i>
The art of preserving food has always been a constant in the history of mankind. More ancestral methods such as smoking and salting have allowed the consumption of fish on a large scale and its transport to areas far from the coast. Until the seventeenth century, part of the preserved fish had the objective of supplying ships involved in the Overseas expansion.
However Portugal has a millennial tradition in the conservation of fish that goes back to the Greek and Roman period, with the production of Garum - a famous preserve of blood and viscera of fish that was allowed to dry in brine and that was exported to all the Mediterranean.</i> </p>
</div>
</div>
<!-- segunda coluna episodio 1-->
<div class="col m-4 ">
<div >
<img src="e01.png" class="preview mt-2">
</div>
<div class="d-flex justify-content-center ">
Ver Filme / Watch Movie
</div>
</div>
</div>
<!-- barra de baixo-->
<div class="container-fluid fixed-bottom">
<div class="row flex-row flex-nowrap ml-1 mr-2 wide-as-needed">
<div>
<a href="#" class="tablinks" onclick="openCity(event, 'London')">
<img src="1.png" class="on position imgsize">
</a>
</div>
<div>
<a href="#" class="tablinks" onclick="openCity(event, 'Paris')">
<img src="2.png" class="off position imgsize">
</a>
</div>
<div>
<img src="3.png" class="off position imgsize">
</div>
<div>
<img src="4.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="off position imgsize" >
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
</div>
</div>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
The page can be found here: working page
Thank you in advance!
A visible "row" class's display value should be "flex" when utilizing Bootstrap 4. In this line from your JavaScript, your "tabcontent" DIV is being overridden to display "block":
document.getElementById(cityName).style.display = "block";
Switch "block" to "flex" and you should get the behavior you're looking for.
HI. What i Want to do is i want to color up my homepage with 2 colors, where the centre of the page is different color with the whole's background color. So, the blue gridlines is the part where i want it in white color.
below is the code:
<body>
<style>
body {
background-color: #A2D8EB;
}
#wrapper
{
background-color:#F4F4F4;
}
</style>
<center>
<br>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'>Utama</a></li>
<li><a href='login design.php'>Log Masuk</a></li>
<li><a href='contact.php'>Hubungi Kami</a></li>
</ul>
</div>
</center>
<center>
<br><br>
<img src="bilik/a.gif">
</center>
<center>
<div id="wrapper">
<p font face="Verdana,Arial,Helvetica size="6" color="black">Sistem ini dibangunkan oleh Cawangan Teknologi Maklumat </p>
<p font face="Verdana,Arial,Helvetica size="6" color="black"> Jabatan Kastam Diraja Malaysia Wilayah Persekutuan Kuala Lumpur </p>
<p font face="Verdana,Arial,Helvetica size="6" color="black">bagi memudahkan semua staf untuk membuat tempahan bilik di JKDM WPKL </p>
</div>
</center>
</body>
so i really hope you guys can help me out. thank you :
Hi I have understood your problem and here is the solution of it. Try it may be this is what you wanted.
<body>
<style>
body {
background-color: #A2D8EB;
}
#wrapper
{
background-color:#F4F4F4;
width: 60%;
text-align: -webkit-center;
}
</style>
<div style="text-align: -webkit-center;">
<br>
<div id="cssmenu">
<ul >
<li class='active'><a href='index.html'>Utama</a></li>
<li><a href='login design.php'>Log Masuk</a></li>
<li><a href='contact.php'>Hubungi Kami</a></li>
</ul>
</div>
</div>
<div style="text-align: -webkit-center;">
<div id="wrapper" >
<div style="text-align: -webkit-center;">
<br><br>
<img src="bilik/a.gif">
</div>
<div style="text-align: -webkit-center;">
<div >
<p font face="Verdana,Arial,Helvetica" size="6" color="black">Sistem ini dibangunkan oleh Cawangan Teknologi Maklumat
</p>
<p font face="Verdana,Arial,Helvetica" size="6" color="black"> Jabatan Kastam Diraja Malaysia Wilayah Persekutuan Kuala Lumpur </p>
<p font face="Verdana,Arial,Helvetica" size="6" color="black">bagi memudahkan semua staf untuk membuat tempahan bilik di JKDM WPKL </p>
</div>
</div></div></div>
</body>
Hope this may help you.
html css background
I know this might be staring at me right in the face, but I can't quite pin-point what might be causing my problem. I have a footer and an iframe that aren't playing nice together. My footer is sitting on top of my iframe. I need my footer to sit at the bottom of my page, just like all of my other pages, and stay there, regardless if a user scrolls up and down. Just need it to stay at the bottom. I'm not quite sure if its a positioning issue, a div issue, if it's the footer's problem, or the iframe's problem. I'm guessing it's the footer's problem, but the footer is placed where I need it on all of my other pages. That's what's confusing me. Still new to web page design, so I'm still wrapping my head around positioning properties and what not. Here is what I have:
CSS:
/*BODY*/
html, body {
background:White;
font-family:Segoe UI;
width:100%;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height: 100%;
position:relative;
}
#body {
padding:10px;
padding-bottom:460px;
}
.footer1 {
background-color:#494949;
display:inline-block;
width:100%;
height:360px;
position:absolute;
bottom:100px;
left: 0;
}
.footer2 {
background-color:black;
display:inline-block;
width:100%;
height:100px;
/*margin-top:0px;*/
position:absolute;
bottom:0;
left:0;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Pagina De Informacion General</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="CaseTypes/style.css" type="text/css" media="screen"/>
<script src="/NewWebTest/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<!--HEADER-->
<div id="header">
</div>
<!--PAGE TITLE-->
<div id="pageTitle">
Pagina De Informacion General
</div>
<!--NAVIGATION MENU-->
<div id="navigation">
</div>
<br/>
<div id="body" style="height:100%">
<div style="height: 532px">
<div id="openingImage">
<img src="../images/Blended Courthouse JPG Less Opacity.jpg" alt="Courthouse" height="274" width="1271"/>
</div>
<!--DIV LEFT: ANNOUNCEMENTS-->
<div id="annouceDiv">
<div class="sectionHeader">
   Ubicación Central
</div>
<br/>
<div class="announceSection" style="text-align:center">
Pima County Consolidated Justice Court<br/>
240 N. Stone Avenue, segundo piso<br/>
Tucson, AZ 85701<br/>
(520) 724-3171 <br/><br/>
Para obtener información sobre estacionamiento, visite el sitio web de la Ciudad de Tucson:<br/>
City of Tucson Downtown Parking
</div>
<!--SECTION DIVIDER IMAGE-->
<div class="breakImageDiv">
<img src="../images/EchoPet_Line_Break_PNG.png" class="breakImagePic" alt="Divider"/>
</div>
</div>
<div id="annouceDiv">
<div class="sectionHeader">
   Horario y Cierre por Dias Festivos
</div>
<br/>
<div class="announceSection" style="text-align:center">
Lunes a Viernes, 8:00 a.m. to 5:00 p.m., excepto días festivos<br/>
<table style="margin:auto; width:100%">
<tr>
<td>Año Nuevo</td>
<td>Día del Obrero</td>
</tr>
<tr>
<td>Día de Martin Luther King</td>
<td>Día del Armisticio</td>
</tr>
<tr>
<td>Día de los Presidentes</td>
<td>Día de Acción de Gracías</td>
</tr>
<tr>
<td>Día de los Caídos</td>
<td>Día despues de Acción de Gracías</td>
</tr>
<tr>
<td>Día de la Independencia</td>
<td>Navidad</td>
</tr>
</table>
</div>
<!--SECTION DIVIDER IMAGE-->
<div class="breakImageDiv" style="width: 100%">
<img src="../images/EchoPet_Line_Break_PNG.png" alt="Divider" style="width:100%" height="39"/>
</div>
</div>
</div>
<div style="float:left; width:100%">
<div id="annouceDiv" style="width:100%">
<div class="sectionHeader" style="margin-right:60px">
   Plano
</div>
<br/>
<div class="announceSection" style="text-align:center; margin-right:60px">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3375.2154892306807!2d-110.97141080000001!3d32.22536379999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d6711e54972b5f%3A0x655603b7f78ec698!2s240+N+Stone+Ave%2C+Tucson%2C+AZ+85701!5e0!3m2!1sen!2sus!4v1422889378316"
width="95%" height="450" postion="relative" bottom="460px" frameborder="0" style="border:0">
</iframe>
</div>
<!--SECTION DIVIDER IMAGE-->
<div class="breakImageDiv" style="width:100%">
<img src="../images/EchoPet_Line_Break_PNG.png" class="breakImagePic" alt="Divider" style="width:100%"/>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div id="footer" style="position:relative; bottom:0">
</div>
<!--Javascript for header, nav, and footer-->
<script type="text/javascript" src="/NewWebTest/jquery.min.js"></script>
<script type="text/javascript" src="/NewWebTest/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$("#header").load("/NewWebTest/header.html");
$("#navigation").load("/NewWebTest/navigation.html");
$("#footer").load("/NewWebTest/footer.html");
});
</script>
</div>
</body>
</html>
A lot of the other CSS styles in the middle are lined up and fine, didn't feel the need to add those, unless it is requested. I've looked everywhere on here and other articles for the past day, and can't quite find what I'm looking for. Any help would be appreciated.
In your <div id="footer"> add a style with clear:both; reason it's sitting on top of your iframe is because you have your iframe float:left. You need to clear your floats.
i use the following code to put text beside image:
<div style="display:inline-block;vertical-align:bottom">
<p><img src="CIMA/CimaMetanoia.png" alt="Cool" height="50%" width="50%" /></p>
</div>
<div style="display:inline-block;">
<p class="text">
<div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
<div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
<div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
<div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
</p>
</div>
However, even if i change the size of my image, it is always above the text... why?
Finally i used the template "initializr" (see google), because it makes all responsive too, which i needed! thank you all anyway!
you might try adding the position property to the image
so, in this case,
image{position:fixed , absolute , relative; top:50%; left:50%;}
or this may work as well:
<div>
<image></image>
<p></p>
</div>
A commenter asked that I work with your code only. So, here's a solution using your code, to make the 2 divs sit next to each other.
<div style="float: left; width: 49%;">
<p><img alt="Cool" src="http://placehold.it/350x150" height="50%" width="50%" /></p>
</div>
<div style="float: right; width: 49%;">
<p class="text">
<div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
<div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
<div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
<div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
</p>
</div>
EDITED
Below I've posted code that in my mind is better formatted for your solution. Just wanted to offer up some alternatives.
<style type="text/css">
.left {
float: left;
width: 50%;
height: 50%;
}
.left img {
width: 100%;
height: 100%;
}
.right {
float: right;
}
.movida strong {
color: #d54646;
}
.common strong {
color: #2089a4;
}
.text strong {
display: block;
font-weight: bold;
}
</style>
<div class="left">
<p><img src="CIMA/CimaMetanoia.png" alt="Cool" /></p>
</div>
<div class="right">
<p class="text">
<div><span class="movida"><strong>MOVIDA</strong>es un ministerio christiano, latino, internacional e interdenominacional con el propósito de:</span></div>
<div><span class="common"><strong>DESAFIAR</strong>al joven christiano a una entrega total a Dios y a crecer en su relación con El.</span></div>
<div><span class="common"><strong>PROVEERLE</strong>herramientas para que descubra sus dones y talentos.</span></div>
<div><span class="common"><strong>MOTIVARLO</strong>a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.</span></div>
</p>
</div>
The text is pushed below the image because the combined width of the two container divs is wider than the page, so it pushes the second div below the first one:
<div style="display:inline-block;vertical-align:bottom;width:200px;">
http://jsfiddle.net/3Luby/