I am in need of moving a set of tables up in my current document.
I have tried adjusting the margins in the CSS but cannot seem to get it right.
This is what I have:
This is what I am trying to achieve:
The max-width must be 700 px. I have it all set up, apart from the positioning of the tables (images) needing to be moved up onto the background image.
#charset "UTF-8";
/* CSS Document */
body {
margin-top:0;
padding-top:0;
background:#fff;
/*JTL ADDED - Limit container max width within BB Content Area*/
max-width:700px;
text-align:left;
margin-left:auto;
margin-right:auto;
/*End JTL */}
.background-pic {
background-image: url("Image Background.png");
height: 450px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: -100px;
max-width: 700px;
}
h1{
padding-top: 50px;
text-align: center;
font-family: "bebas-neue";
font-weight: normal;
font-size: 50px;
color: #fff;
}
.col-welcome-1 {
float:left;
margin-left: 25px;}
.col-navmenu-1 {
float:right;
width: 250;
height: 255;
margin-right: 25px;
border-radius: 10px;
background: #252525;}
h2 {
color: #FFFFFF;
text-align: center;
font-weight: 200;
font-size: 24px;
font-family: Gotham, "Helvetica Neue", Arial, "sans-serif";
}
.navbuttons {
padding-left: 45px;
}
#footer {clear:both;text-align:left;padding:0 12px 2px 12px;background:#eee;
border-top:1px solid #502e74}
.redline {
border-bottom-style: solid;
border-bottom-color: #502e74;
border-bottom-width: 1px;
}
table { border-spacing: 0px; } /*JTL Added whole section*/
th, td { /*JTL Added whole section*/
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
} /*JTL Added whole section*/
a:link {color:#502e74}
a:visited {color:#036}
a:active {color:#502e74}
a:hover {color:#000;background:#ffc;text-decoration:none}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html PUBLIC>
<html lang="en">
<link href="Professional Development Getting Started Template Style.css" rel="stylesheet" type="text/css">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://use.typekit.net/mlt2oco.css">
<title>Professional Development Overview Template</title>
</head>
<body>
<div class="main-content">
<div id= "banner">
<div class="background-pic">
<h1>Professional Development<br>Overview</h1></div>
<table style="margin-left:auto; margin-right: auto; padding-bottom: 25px;">
<tbody>
<tr>
<td><div class="col-welcome-1"><img src="Welcome Video.png" alt="welcome video" class="rounded" width="320" height="255">
</div></td>
<td>
<div class="col-navmenu-1">
<blockquote>
<h2>NAVIGATION</h2>
</blockquote>
<div class= "navbuttons">
<img src="How to Navigate button.png" alt="How to Navigate Training " class="rounded" width="175" height="45">
<img src="track my progres button.png" alt="Track My Progress" class="rounded" width="175" height="45">
<img src="faq button.png" alt="How to Navigate Training " class="rounded" width="175" height="45">
<img src="access modules button.png" alt="How to Navigate Training " class="rounded" width="175" height="45">
</div>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
<div class="resource-content">
<table style="margin-left:auto; margin-right: auto;">
<tbody>
<tr>
<td>
<div class="col-resource-1"> <img src="FightforFreedom.png" alt="Salvation Army Justice Action Plan" class="rounded" width="165" height="97"></div></td>
<td><div class="col-resource-2"><img src="TNU Graduate Programs.png" alt="Link to Trevecca Gradate Programs" class="rounded" width="165" height="97"></div></td>
<td><div class="col-resource-2"> <img src="Trevecca's Master's in Organizational Leadership Program.png" alt="Trevecca's Organizational Leadership program" class="rounded" width="165" height="97"></div></td>
</tr>
</tbody></table></div>
<div id="footer">
<p class="xsmall"><strong>Trevecca Nazarene University</strong></p>
<p class="xsmall">Helpdesk Support Contact:Online Course Technical Support Site</p>
</div>
</body>
</html>
what I see is that your table content is outside your div class="main-content". I would suggest you to
put the table content inside class="main-content" by removing a closing div after h1 tag Professional DevelopmentOverview
delete closing div before class="resource-content".
rename css .background-pic to .main-content - that styling will make more sense.
But overall I think you have trouble with proper divs - thats causing a lit of trouble in your site and headache in styling process.
One option if you want your table overtop of other content is to change the position to absolute and adjust the top/right/bottom/left as you wish. For example:
.col-navmenu-1 {
position: absolute;
bottom: 20px;
left: 500px;
float:right;
width: 250;
height: 255;
margin-right: 25px;
border-radius: 10px;
background: #252525;}
Keep in mind you will have to adjust your media queries.
Related
I'm building a webpage using DreamWeaver from scratch (no template). It's for a school project.
My DIV formatting was fine until I tried to embed the YouTube video. Why is my YouTube video stuck directly beneath the header? Also, the DIV/Table on the right side of the page is also out of whack. It just want the YT video on the left and the table on the right, and I want them to line up horizontally.
Thanks for any assistance. Click to view the Webpage, with obvious errors.
CODE:
HTML-
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="FamilyBookMain.css">
</head>
<title>FamilyBook.com</title>
<body>
<div id="top">
</div>
<div class="video-container">
<iframe width="560" height="315" src="//www.youtube.com/embed/MQgdE1_lHnA?rel=0" allowfullscreen></iframe>
<div class="famtree">
<img src="images/fambooktree.png" width="705" height="221"/>
</div>
</div>
<div id="body">
<table style="border-collapse:collapse;">
<thead>
<h1>Your Ancestors Are Dead.</h1>
<h1>But Here, They're Still Alive.</h1>
<br>
</thead>
<tbody>
<tr>
<td style="padding:10px">
<p class="table"><br>Welcome to the world's <strong>largest</strong> online resource for social media profiles and data from the twenty-first century. FamilyBook.com is home to billions of profiles from MySpace, FaceBook, Twitter, Instagram, and more. <br> <br>
We are the <strong>leading provider of social media data</strong> from the early 2000s, including searchable image tags, status updates, relationship histories, friendships and family networks. Our mission is to link people to the personal histories of their ancestors- one social media profile at a time.</p></td> </tr>
<tr><td style="padding:10px">
<p class="table">
Imagine the stories that you'll uncover as you explore your loved one's Facebook timeline and likes, private messages and chat logs, Twitter conversations, and Instagram uploads. The <strong>secrets</strong> that you uncover may even surprise you.<br>
<br> Simply start with a name and <strong>we'll do the rest.
</strong> Discover your ancestor's past. Learn where you came from. <br>
</p></td>
</tr>
</tbody>
<thead>
<tr>
<th class="head" colspan="2">
<strong>Our services are coming soon!</strong><br><br>
</tr>
</thead>
</table>
</div>
<div class="footer">
<p id="footer"><img src="http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png" width="139" height="25"/>
<br>Jessica E. Tompkins 2014 | About
</p>
</div>
</body>
</html>
CSS-
#charset "UTF-8";
/* CSS Document */
body {
background-color:#EEEEEE;
position: fixed;
}
#top {
width: 100%;
height: 60px;
background- image:url('http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png');
background-color:#FFF;
background-repeat:no-repeat;
background-position:60px bottom;
border-bottom-width:thin;
border-bottom-color: #333;
border-bottom-style:solid;
position: fixed;
top: 0px;
}
#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: relative;
left: 650px;
bottom: 215px;
}
h1 {
color: #333;
font-family: Arial, Verdana, sans-serif;
text-align: center;
margin: 0px;
top: 10px;
position: relative;
}
.video {
position: relative;
left:170px;
top: 170px;
}
ul.crap {
color: #333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
}
#video {
color: #99aacc;
font-family: Arial, Verdana, sans-serif;
text-align: center;
height: 200;
width: 450;
margin: 350px 0px 0px;
position: absolute;
}
.table {
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:14px;
color: white;
}
.head {
color: #333;
font-family: Verdana, Geneva, sans-serif;
font-size:16px;
padding: 15px;
font-weight:100;
}
.footer{
width: 100%;
height: 60px;
background-color: #99aacc;
border:1px solid #333;
position:fixed;
bottom:0px;
}
#footer{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
padding:5px;
color: white;
text-align:center;
}
a {
text-decoration:none;
}
First of all, welcome to StackOverflow. I only spent about a minute looking over and editing your code, but I think I get the gist of what you want to do. Please see the code below:
Change your #body element to match the code below: (I positioned the div absolutely.)
#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: absolute;
left: 650px;
top:65px
}
Paste this into your CSS:
.video-container{
width:auto;
height:auto;
margin-top:75px;
}
Now, let me just say that your HTML kind of messy and could be streamlined quite a bit. As #Havard Brynjulfsen pointed out, there are a few IDs and classes that remain unused. In any case, the code above, should yield the desired results, but what you are trying to do could be accomplished much more elegantly if you are willing to change up your HTML structure.
Also, there are some bugs in your HTML. I would highly suggest validating your code with the official W3C validator.
There are too many issues for me to list here without going off-topic, but here are the biggies:
Your doctype declaration is incorrect, it should be <!DOCTYPE html>.
Your <title> should be in the <head> of your document.
I tried to make a banner for my website I'm creating, but when I add it to my website, it turns out really bad with the text. I'm wondering if I can add text to my banner using HTML5 and / or CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
display: block;
width: 100%;
}
.banner_h img{
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
I'm trying to center / centre my text on the banner, with a white coloured font (font can be varied). What do I have to do to make this happen? Thanks!
It depends on the kind of text you will be adding to the banner. If you want to add text that will be static (as in, it will never or rarely change) and want to add custom fonts, you should probably edit the image in Photoshop.
On the other hand, if the content in the banner will change constantly, then I would suggest adding the image as a background. Your banner h class would look something like this:
.banner_h{
display: block;
width: *actual pixel size of the banner*;
height: *actual pixel size of the banner*;
background: url('*location of file*') no-repeat;
}
If you leave the width to a percentage what will happen is that the div will not have anything inside of it and thus will not show the banner, so you need to figure out what the actual width and height of the banner is and put it in this CSS declaration so that it shows the banner.
Once you have done this, delete the image from the tag and replace it with the content you wish to add.
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 7 years ago.
I'm creating a webpage for my photography and basically I'm trying to create div boxes that contain the images, with a div for text displayed over the image. For some reason I cannot work out how to make the text div position from the image div. For example, currently "top: 8%;" positions the text 8% from the top of the page not the top of the image div, despite the fact that the text div is withing the image div in the code and positioned relatively.
HTML:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Josh Graham, amateur photographer</title>
<meta name="description" content="Photography by Josh Graham">
<meta name="author" content="Josh Graham">
<!-- CSS Code -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="icon"
type="image/png"
href="images/favicon.png">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="BROKENjs/script.js"></script>
</head>
<body>
<div id="wrapper">
<table id=menu >
<tr>
<td id=josh-graham>josh-graham.com</td>
<td>Home</td>
<td>About</td>
<td>Contact</td>
</tr>
</table>
<div id="home" data-speed="10" data-type="background">
<div></div>
</div>
<div id="ukrainetext">
<img id="ukraine" src="images/ukraine.jpg"/>
<p id="ukrainetextp">Chernobyl,<br>Ukraine</p>
</div>
<div id="cornwalltext">
<img id="cornwall" src="images/cornwall.jpg"/>
<p id="cornwalltextp">Cornwall,<br>England</p>
</div>
<div id="moscowtext">
<img id="moscow" src="images/moscow.jpg"/>
<p id="moscowtextp">Moscow,<br>Russia</p>
</div>
</div>
</body>
</html>
CSS:
html, body{
margin:0;
padding:0;
height:100%;
width:100%;
background: #3e3e3e;
}
#wrapper {
min-width: 640px;
margin-bottom: 0;
}
#menu {
background: #5d5d5d;
font-family: "Kozuka Gothic Pro";
font-size: 20px;
font-weight: lighter;
color: white;
height: 50px;
margin: 0 auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
min-width:640px;
position: relative;
z-index:99;
}
table td {
padding-top: 13px;
}
#josh-graham {
font-size:25px;
padding-top: 6px;
padding-left: 5px;
}
#ukrainetext {
position: relative;
}
#ukrainetextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 6%;
}
#ukraine {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float: left;
}
#cornwalltext {
position: relative;
}
#cornwalltextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 25%;
}
#cornwall {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
#moscowtext {
position: relative;
}
#moscowtextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 43.5%;
}
#moscow {
height: auto;
margin: 0.3% auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
This is a frequently asked question. Your answer: How to position text over an image in css . Jsfiddle: http://jsfiddle.net/EgLKV/3/
HTML:
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
<p id="text">
Hello World!
</p>
</div>
CSS:
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
#text
{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
Just set the z-index in your CSS. Higher numbered elements appear above lower numbered elements. While you can just give elements contiguous whole numbers; generally, you'll want to provide large gaps between lower and higher elements in case you need to add additional elements or change the layering of elements.
I realise this question has been asked multiple times, however all times are irrelevant to my problem. All elements I have used 'position:absolute' on move across the screen as I re-size the browser, meaning all people with a different browser to the one i have designed will see this. It is devastating! I have to use absolute positioning, it lets me stack an image on top of another one which is essential in my site. So how can I fix this and make all elements behave the same? Is there a way to force the browser to be 1366 x 768 (my browser size) as this is the size that the site looks fine on? Thank you very much if you help me.
HTML and CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage</title>
<style type="text/css">
/*<![CDATA[*/
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #cdcdff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */
}
.twoColFixLtHdr #container {
width: 1024px;
background: #f2f2ff;
margin: 0 auto;
text-align: left;
height: 1050px;
}
.twoColFixLtHdr #header {
background: #DDDDDD;
width: 1024px;
height: 200px;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp #hyp {
margin-top: 3%;
visibility: visible;
z-index: 10000;
text-decoration: none;
color: #000;
}
.twoColFixLtHdr #container #sidebar1 #ptext {
font-family: Calibri;
font-size: 12px;
width: 80%;
line-height: 125%;
margin-left: 8%;
margin-top: 2%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #second-pic {
width: 115px;
height: 170px;
margin-left: 6%;
}
.twoColFixLtHdr #container #header #home1 {
width: 110px;
height: 30px;
position: absolute;
top: 170px;
right: 617px;
z-index: 200;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp {
width: 100%;
height: 100%;
margin-top: 5%;
font-size: 12px;
font-family: Calibri;
color: #000;
text-transform: none;
text-decoration: none;
margin-left: 9%;
}
.twoColFixLtHdr #container #header #about1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 507px;
}
.twoColFixLtHdr #container #header #information1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 397px;
}
.twoColFixLtHdr #container #header #contact1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 287px;
}
.twoColFixLtHdr #container #header #usefullinks1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 177px;
}
.twoColFixLtHdr #sidebar1 {
float: left;
width: 25%;
background: #f2f2ff;
padding: 15px 10px 15px 20px;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp #hyp2 {
margin-top: 3%;
margin-bottom: 6%;
color: #000;
}
#bolden {
margin-top: 4%;
font-family: Calibri;
font-size: 18px;
font-weight: bolder;
margin-left: 8%;
}
h1 {
font-family: Calibri;
font-size: 18px;
font-weight: bolder;
}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px;
padding: 0 20px;
}
.twoColFixLtHdr #footer {
padding: 0 0px 0 0px;
background:#DDDDDD;
position: absolute;
width: 1024px;
height: 100px;
top: 1020px;
}
.twoColFixLtHdr #container #mainContent #yourweddingcerelogo {
width: 650px;
height: 49px;
position: absolute;
top: 213px;
left: 503px;
}
.twoColFixLtHdr #container #mainContent #secondlogo {
height: 49px;
width: 650px;
margin-bottom: 4%;
position: absolute;
left: 503px;
top: 650px;
margin-top: 1%;
}
.twoColFixLtHdr #container #mainContent #band {
position: absolute;
width: 130px;
visibility: visible;
left: 27
.%;
top: 200px;
left: 400px;
height: 122
..5%;
height: 1050px;
}
.twoColFixLtHdr #container #mainContent #contenttext {
margin-left: 13.5%;
margin-top: 10%;
width: 80%;
}
.twoColFixLtHdr #footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.twoColFixLtHdr #container #mainContent #secondarytext {
margin-left: 10%;
margin-top: 10%;
width: 60%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #secondtext2 {
width: 170px;
position: absolute;
right: 43
.%;
font-family: Calibri;
font-weight: bold;
font-size: 14px;
right: 525px;
top: 722px;
}
w {
font-family: Calibri;
font-size: 16px;
font-style: italic;
line-height: 1.6;
font-weight: bold;
}
.twoColFixLtHdr #container #mainContent #secondarytext #2ndcoltext2 {
font-family: calibri;
font-size: 14px;
font-weight: bold;
position: absolute;
width: 14.2%;
right: 80%;
top: 87.7%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcoltxt {
position: absolute;
right: 200px;
width: 175px;
top: 720px;
font-family: Calibri;
font-size: 14px;
font-weight: bold;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcolmaintxt {
height: 140px;
width: 320px;
position: absolute;
left: 833px;
top: 820px;
}
.twoColFixLtHdr #container #mainContent #secondarytext #secondtext3 {
width: 280px;
margin-left: 3.5%;
margin-top: 0%;
height: 200px;
position: absolute;
right: 538px;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcolpic {
position: absolute;
height: 95px;
width: 130px;
right: 385px;
clear: both;
top: 723px;
}
.twoColFixLtHdr #container #mainContent #contenttext c {
font-family: Calibri;
font-size: 14px;
font-style: italic;
font-weight: bold;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
p {
font-family: Calibri;
font-size: 14px;
font-weight: 500;
}
-->
/*]]>*/
</style><!--[if IE 5]>
<style type="text/css">
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
</style>
<![endif]-->
</head>
<!-- Main Class Plan -->
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<!--img containing necc header elements -->
<img height="100%" src="BaseImages/MainHeader.png" width="100%" />
<div id="home1">
<!-- hyperlinks following -->
<a href="HomePage.html">
<img height="100%" src="BaseImages/1%20Home%20button.png" width="100%" />
</a>
</div>
<div id="about1">
<a href="AboutBriony.html">
<img height="100%"
src="BaseImages/2%20about%20briony%20button.png"
width="100%" />
</a>
</div>
<div id="information1">
<a href="Information.html">
<img height="100%"
src="BaseImages/3%20Information%20button.png"
width="100%" />
</a>
</div>
<div id="contact1">
<a href="ContactDetails.html">
<img height="100%"
src="BaseImages/4%20contact%20button.png"
width="100%" />
</a>
</div>
<div id="usefullinks1">
<a href="UsefulLinks.html">
<img height="100%"
src="BaseImages/usefullinks1.png"
width="100%" />
</a>
</div>
<!-- end hyperlinks -->
</div>
<!-- end #header -->
<div id="sidebar1">
<img height="30%"
src="BaseImages/label%201%20ceremonies.png"
width="100%" />
<div id="serieshyp">
<!--var of hyperlinks -->
<div id="hyp">
<a href="HomePage.html"
style="text-decoration:none">
Wedding Ceremonies
</a>
</div>
<div id="hyp">
<a href="SameSexWeddingCeremonies.html"
style="text-decoration:none">
Same-Sex Commitment Ceromonies
</a>
</div>
<div id="hyp">
<a href="RenewalofVows.html"
style="text-decoration:none">
Renewal of Vows
</a>
</div>
<div id="hyp">
<a href="CeremonyOptions.html"
style="text-decoration:none">
Ceremony Options
</a>
</div>
<div id="hyp2">
<a href="FrequentlyAskedQuestions.html"
style="text-decoration:none">
Frequently Asked Questions
</a>
<br />
</div>
</div>
<!-- hyp end-->
<img height="30%"
src="BaseImages/label%20extras%20and%20ideas.png"
width="100%" />
<!--uniform label -->
<div id="bolden">
Choosing the Right Celebrant
</div>
<div id="ptext">
When choosing your Celebrant, it’s not all about the money.
it will help if you consider the personality you are looking for, not just the fee.
Choosing a celebrant whose personal style fits in well with the type of ceremony you have in mind is far more important than finding the cheapest price.
The right celebrant can have a hugely positive impact on your wedding
and help make your day go smoothly and happily.
</div>
<div id="bolden">
Poetry
</div>
<div id="ptext">
I have a wide variety of poetry and readings for you to choose from
or you can use special verses which have special meaning to you both.
These can be seamlessly included in your marriage ceremony and often
are a real highlight.
You might like to consider having friends and family members
read one or two poems for you on the day, or I can do it for you.
It’s completely up to you.
<br />
<br />
<br /> <!--find sub for br breaks -->
<br />
<br />
<br />
</div>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<div id="yourweddingcerelogo">
<img height="100%"
src="BaseImages/page%201%20label%20your%20wedding%20ceremony.png"
width="100%" />
</div>
<div id="band">
<!-- change according to page -->
<img height="100%"
src="BaseImages/ElongatedFlower3.png"
width="100%" />
</div>
<div id="contenttext">
<h1>
A Ceremony Designed Especially for You
</h1>
<p>
I believe that you should have exactly what you want on your special day.
</p>
<c>
I understand how much time and effort goes into planning your dream wedding,
so I workwith you to ensure your special day is exactly how you want it.
It means the world to me to help you find the perfect verse,
write the most meaningful vows and put together
a service you will remember for the rest of your lives.
<br />
</c>
<p>
You’re certain to have wonderful ideas and plans for how you would
like your wedding to be, from the cake and flowers, to the head-dresses
for the flower girls, everything has to be considered and plans put
into action to make it work. The Marriage Ceremony should also be considered
as a crucial element in your special day and it too needs
advance planning so that it goes exactly how you want it.
<br />
<br />
Together, we can design a ceremony that fits the style of your wedding
and is all about the two of you. It can be as long or short as you want it.
You can choose the content. Whether modern or traditional, your wedding ceremony
should be as unique as you are and together
we can make one that works perfectly for you both.
<br />
<br />
There are requirements that are integral to the solemnisation
and registration of a marriage and I will ensure that the process
runs smoothly and nothing is overlooked. I’m happy to
explain all of the requirements more fully at our first meeting.
</div>
<div id="secondlogo">
<!-- change according to page -->
<img height="100%"
src="BaseImages/label%20wedding%20client%20testimonials.png"
width="100%" />
</div>
<div id="secondarytext">
<!-- change according to page -->
<div id="second-pic">
<img height="100%"
src="BaseImages/testimonial%20pic%201.png"
width="100%" />
</div>
<div id="secondtext2">
<w>
Thank you so much for making our day so special.
The ceremony you planned for us was perfect!
It fit in with our theme and reflected our individuality perfectly.
</w>
</div>
<div id="nekcolpic">
<img src="BaseImages/testimonial pic 2.png"
alt=""
width="100%"
height="100%" />
</div>
<div id="nekcoltxt">
<w>
Hi Briony,
We can’t thank you enough for the time and
attention to detail you put into our wedding.
</w>
</div>
<div id="nekcolmaintxt">
<w>
Your professionalism was outstanding and helped make our wedding day
run smoothly with everything going off without a hitch.
Thank you for all the different options you gave us.
We ended up with exactly the service we wanted,
even though at the start we had no idea what that was!
</w>
</div>
<div id="secondtext3">
<w>
Thanks for all your time and patience and being there
for us all the way through the process.
It would not have been the same glorious wedding without you.
</w>
</div>
</div>
<!-- end #mainContent -->
</div>
<br class="clearfloat" />
<div id="footer">
<img height="100%"
src="BaseImages/footer.png"
width="100%" />
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
</body>
</html>
Elements positioned with position: absolute are positioned relative to the next element up in the hierarchy with position: relative, or the screen if you don't have one (which you don't). The simple fix to your current code is to add position: relative onto your main container element:
#container {
position: relative;
}
This doesn't make your site work completely, but it stops everything moving. I suspect you'll need to reposition your elements once you've done this, but that might be all you need.
As a general point, you should not be designing for a fixed browser size these days. It's a simple fact that people don't have the same size screens, and there are many people accessing sites from mobile devices. If you're not prepared to make your site work on multiple resolutions, then I would recommend starting from some sort of framework such as Bootstrap which will allow you to pick and choose their grid elements to achieve your desired layout, without needing to put much effort in to make the site work on other resolutions.
I have a webpage with a background graphic that is 1024x768. My CSS and HTML is below. I also have a header graphic and a left side menu that is formatted text.
I want to create a template page. Everything is OK except...
I have a footer that I want to display at the bottom of the background area. How do I position that so that no matter what content I add the footer stays put? Not fixed as in position: fixed but placed in a preset position.
I have tried using a div tag to surround all but the footer with a width and height specified. I then added a div for the footer and expected it to position itself outside the first div. Clearly I have misunderstood.
JSFiddle with following HTML and CSS
HTML
<body>
<div id="allcontent">
<div id="header">
<img src="images/xxxxxxxxxxx.png" alt="xxxxxxxxx" />
<br /</div>
<div id="menu">
Home
<br />
<br />
Weddings
<br />
<br />
Portraits
<br />
<br />
Blog
<br />
<br />
Connect
</div>
</div>
<div id="footer">
<div id="phone">
tel. xxxxxxxx
</div>
<div id="email">
email: xxxx#xxxxxxxxxxxx.co.uk
</div>
<br />
<div id="copy">
© 2012, xxxxxxxxxxxxxx
<br />
Website constructed by <a class="footlink" href="http://xxxxxxxxxxx.co.uk" target="_blank">xxxxxxx</a>
</div>
</div>
</body>
CSS
body {
font-family: Arial,Helvetica,sans-serif;
font-size: large;
width: auto;
margin-left: auto;
margin-right: auto;
background-color: #451918;
color: #221b1b;
}
div#allcontent {
width: 1024px;
height: 768px;
margin-left: auto;
margin-right: auto;
background-image: url("images/web page background 1024x768.jpg");
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
div#menu {
float: left;
}
div#header {
padding-top: 50px;
padding-left: 50px;
text-align: left;
}
div#footer {
bottom: 0;
height: 50px;
text-align: center;
font-size: 85%;
color: #221b1b;
}
div#copy {
font-size: 50%;
}
div#phone {
font-size: 85%;
margin-left: 40px;
float: left;
}
div#email {
margin-right: 40px;
font-size: 85%;
float: right;
}
a.footlink:link {
color: #221b1b;
}
a.footlink:visited {
color: #221b1b;
}
a.footlink:hover {
color: #226225
}
a:link {
color: #9c7f7f;
}
a:hover {
color: #221b1b;
}
a:visited {
color: #5f4d4d;
}
You'll have to clear the floats of any div that precedes the footer.
Go ahead and set clear:both to #footer to see if it addresses the issue.
If all is well, you won't need to set heights for any of the elements before the footer, nor apply any of the workarounds that you may have tried.
Refer to this fiddle
There float in your menu so you have to clear it. Give clear:both on #footer. Like this:
#footer {
clear:both
}
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
here is the trick. You can follow the link to a tutorial for positioning footer