I have been searching all around for solutions as this is a common problem.
All the 'solutions' that has worked for others has not worked for me :(
This is the body of my index.html file:
<body>
<div id="header">
<table width="100%" height="auto" border="0">
<tr>
<td><h1 id="logo">WEBSITE</h1></td>
<td><div id="navigation">
<ul>
<li>HOME</li>
<li>FORUM</li>
<li>NEWS</li>
<li>INFORMATION</li>
<li>GALLERY</li>
<li>STAFF APPLICATIONS</li>
<li>CONTACT US</li>
</ul>
</div></td></tr></table>
</div>
<div id="announcement">
<center>
<p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
</center>
</div>
<div id="slider">
<center>
<h1>IMAGE SLIDER COMING SOON</h1>
</center>
</div>
<div id="featured">
<table width="100%" height="100%" border="0">
<center>
<tr>
<!-- Column 1 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
<h3>Our Community, Your Community</h3>
<p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
Register
</div></td>
<!-- Column 2 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
<h3>Virus & Spyware Free</h3>
<p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
</div></td>
<!-- Column 3 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
<h3>Free Open-Source Projects</h3>
<p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
are open-sourced which means the source code is available to the public to use however they want as long as they leave
credits in the project that they created! The projects we create can range between Websites, programs and on special
occasions, games.</p>
Read More
</div></td>
</center>
</div>
<div id="footer">
Test
</div>
</body>
This is the CSS for my footer:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
}
If anyone knows how i can fix this then please say,
Thanks in advanced
Unique
I have solved your problems. I spent some more hours for you and i get solution for set footer at bottom of page.
Live Working Demo
HTML Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
<table width="100%" height="auto" border="0">
<tr>
<td><h1 id="logo">WEBSITE</h1></td>
<td><div id="navigation">
<ul>
<li>HOME</li>
<li>FORUM</li>
<li>NEWS</li>
<li>INFORMATION</li>
<li>GALLERY</li>
<li>STAFF APPLICATIONS</li>
<li>CONTACT US</li>
</ul>
</div></td></tr></table>
</div>
<div id="content">
<div id="announcement">
<center>
<p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
</center>
</div>
<div id="slider">
<center>
<h1>IMAGE SLIDER COMING SOON</h1>
</center>
</div>
<div id="featured">
<table width="100%" height="100%" border="0">
<center>
<tr>
<!-- Column 1 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
<h3>Our Community, Your Community</h3>
<p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
Register
</div></td>
<!-- Column 2 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
<h3>Virus & Spyware Free</h3>
<p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
</div></td>
<!-- Column 3 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
<h3>Free Open-Source Projects</h3>
<p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
are open-sourced which means the source code is available to the public to use however they want as long as they leave
credits in the project that they created! The projects we create can range between Websites, programs and on special
occasions, games.</p>
Read More
</div></td>
</center>
</div>
</div>
<div id="footer">
This is footer Section
</div>
</div>
</body>
</html>
CSS Code:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:white;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:red;
color:white;
}
Result:
I am not sure what you are looking to do. Are you looking for the footer to be permentaly immovable at the bottom of the page, so that when the rest of the page scrolls it doesn't? Or are you looking to keep the footer under the table, and it scrolls with the rest of the site?
If you are looking for the former, you need to change "relative" to "absolute" and make sure your left, right and bottom margins are set to 0.
If you just want the footer to stay under the table, the rest of the code is needed to see how it's interacting with the other elements and their css styles.
To know about positioning visit http://www.w3schools.com/css/css_positioning.asp
I ran your code and the relative positioning is working fine on my chrome browser. Please set the position of the elements of your body of the page so that its relative.
1.Change your css code as
#footer {
clear: both;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
position:relative; //or any of the other positions as per your page
}
2.One more thing you can do as i did is to set your footer styles as an inline styling like so
<div style="clear:both;z-index:10; height:3em; margin-top:-3em; background-color:red; position:relative;">
Test
</div>
3.If inline styling doesnt work go for internal style set the styles for the footer in a style tag embedded in the head tag
4.You need to keep your div tag outside the main div tag. keep it as a separate element rather than being a child of another element. I have faced similar problems while working with my projects and changing the tag position and the structure of the body helps. You just need to have patience and keep on trying different methods.
you not close your tag
see Demo after add
<html>
<head>
<style>
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
}
</style>
</head>
<body>
<div id="header">
<table width="100%" height="auto" border="0">
<tr>
<td><h1 id="logo">WEBSITE</h1></td>
<td><div id="navigation">
<ul>
<li>HOME</li>
<li>FORUM</li>
<li>NEWS</li>
<li>INFORMATION</li>
<li>GALLERY</li>
<li>STAFF APPLICATIONS</li>
<li>CONTACT US</li>
</ul>
</div></td></tr></table>
</div>
<div id="announcement">
<center>
<p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
</center>
</div>
<div id="slider">
<center>
<h1>IMAGE SLIDER COMING SOON</h1>
</center>
</div>
<div id="featured">
<table width="100%" height="100%" border="0">
<center>
<tr>
<!-- Column 1 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
<h3>Our Community, Your Community</h3>
<p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
Register
</div></td>
<!-- Column 2 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
<h3>Virus & Spyware Free</h3>
<p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
</div></td>
<!-- Column 3 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
<h3>Free Open-Source Projects</h3>
<p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
are open-sourced which means the source code is available to the public to use however they want as long as they leave
credits in the project that they created! The projects we create can range between Websites, programs and on special
occasions, games.</p>
Read More
</div></td>
</center>
</table>
</div>
<div id="footer">
Test
</div>
</body>
</html>
Related
I am currently building my first webpage using a custom font from the CSS. This looks like this:
#font-face {
font-family: "Baiti";
src: url("./fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
.navbar
{
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
.container{
width:900px;
margin:auto;
}
.box-2 /*targeting class from HTML*/
{
border:8px dotted #ccc;
}
I am now putting some text into my page. Some is inside a table while other is outside of a table:
<html>
<head>
<title>innomotion media</title>
<!--reference CSS file, will only affect CSS PART, HTML comes first-->
<link rel="stylesheet"
type"text/css"
href="styles.css">
</head>
<body>
<!--NavBar-->
<div class="navbar">
Contact
What we do
Who we are
Home
</div>
<!--Heading-->
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
</div>
</body>
</html>
But the result looks like this:
So, if my eyes aren't deceiving me, both texts don't look the same, or do they? To me, the one inside the table seems to be "bolder" or "bigger" in a way? or maybe even a bit darker. However, this cannot be from the HTML code I wrote, or am I just blind here?
The problem is that you are using a th tag, which applies the style font-weight:bold (in my browser at least, and presumably yours).
One simple solution is to add a css rule to override this browser default. A better solution is probably to change the ths (table header) to tds (table cell).
I was able to find this problem by copying your html into the stack editor, then right clicking on the bold text, choosing Inspect, then going to computed properties and looking at the applied properties. I suggest you get comfortable with the inspector; it's invaluable in debugging webpage problems.
th {
font-weight:normal;
}
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
If you use the dev tools in Chrome to inspect the element, you will see that the font-weight is being inherited from the th cell. You should not be using table headers this way.
I would strongly recommend against using table-based layouts in modern web development, but in this instance, you should be putting your header on one row and move your image and paragraph to a new row, using proper td table cells.
[Edit]
To elaborate further, tables are the old way to achieve a small part of what the modern grid properties achieve. To achieve the desired layout, you will need to use two rows, the first of which should span both columns:
.center{
text-align:center;
}
<table border="0">
<tr>
<th colspan=2>
<h1>Julius Tolksdorf</h1>
</th>
</tr>
<tr>
<td class="center">
<img
src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
width=60%
/>
</td>
<td class="center">
<font color="#534f4f" size="+2" >
<p>CEO of innomotion media and head of software developement.
<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</td>
</tr>
</table>
You are applying size = "+2" to all the text and not just the title
Change this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
</font>
To this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
</font>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
Also, check class="box-2" which is assigned only to the first text
I'm a beginner with responsive sites and having a problem with this one. Everything shows up fine for me on my Mac, iPad and iPhone, but apparently the nav bar is going blank on a Windows machine in Explorer 11 (11.0.25 to be exact). What am I missing? I've tried researching but haven't been able to figure out the problem and can't replicate it since it all looks fine on my end. The site is at http://muconf.missouri.edu/boats2016/
(http://muconf.missouri.edu/boats2016/boatsproblem.png) My contact says the only reason the Home button is showing up in this screenshot is she is hovering over it, otherwise everything is blank.
CSS
<!doctype html>
<html><!-- InstanceBegin template="/Templates/index.dwt"
codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway|Lato|Oxygen">
<link rel="stylesheet" type="text/css" href="boats2.css" />
<style>
* {
box-sizing: border-box;}
.row:after {
content: "";
clear: both;
display: block;}
</style>
<!-- InstanceBeginEditable name="Based on a True Story" -->
<title>Based on a True Story</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
HTML
<body>
<!-- begin header -->
<div class="header">
<img src="images/header_2016.jpg" width="3300" height="446" alt=""/>
</div>
<!-- end header -->
<!-- begin nav menu -->
<nav class="clearfix" id="nav">
<ul class="clearfix">
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>Presenters</li>
<li>Location/Travel</li>
<li>Contact Us</li>
<li>Previous Years</li>
</ul>
</nav>
<!-- end nav menu -->
/*** showing the menu ***/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
</script>
<!-- begin content area -->
<div class="TextOnlyContainer" style="margin: 0 auto"><!-- InstanceBeginEditable name="EditRegion3" -->
<!-- start left column -->
<div style="float:left; width:75%"><h2>Reporting Real Life, Telling True Stories</h2>
<p align="left" class="text">Join us once again in Columbia, Missouri, from March 2-4, 2016, as a dynamic group of filmmakers, journalists, and film critics engage in a series of thoughtful and energetic discussions about telling true stories in film and journalism. The fifth year of <em>Based on a True Story: The Intersection of Documentary Film and Journalism</em> will again set about analyzing the intersection of nonfiction storytelling forms, advocacy in that storytelling, and the cultural and ethical implications of the convergence between journalism and documentary film.</p>
<p class="text">An interdisciplinary group of scholars at the University of Missouri — sponsored by the Mizzou Advantage Program — will be partnering again with the True/False Film Fest to continue our tradition of light-hearted yet serious-minded discussions about documentary film. Conference attendees will spend time engaging with some of the top thinkers, purveyors, and practitioners of documentary film. It will be the perfect run-up to the 12th annual True/False Film Festival, March 3–6, 2016!</p></div>
<!-- end left column -->
<!-- start right column -->
<div style="float:right; background-color:#ccc; padding:1em;">
<a href="http://truefalse.org/"><h5 style="text-align:center">True/False Film Fest</h5>
<img src="images/tf2016.jpg" alt="True/False Film Fest" width="175" height="212" border="0" /></a>
</div>
<!-- end right column -->
<div style="clear:both"></div>
<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
</p>
<p></p>
<p></p>
<div class="dwuserEasyRotator" style="width: 100%; height: 400px; position:relative; text-align: center; margin:0 auto" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-87-111-111-100-121-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-ername="slideshow" data-erResponsiveRatio="{600:400}" data-erTID="{jz42jpztf5098200863541}">
<div data-ertype="content" style="display: none;"><ul data-erlabel="Main Category">
<li>
<span class="text"><img class="main" src="images/slideshow/slide05.jpg" />
<img class="thumb" src="images/slideshow/slide05.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide04.jpg" />
<img class="thumb" src="images/slideshow/slide04.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide03.jpg" /> <img class="thumb" src="images/slideshow/slide03.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide02.jpg" /> <img class="thumb" src="images/slideshow/slide02.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide01.jpg" /> <img class="thumb" src="images/slideshow/slide01.jpg" /></span>
</li>
</ul>
</div>
<div data-ertype="layout" data-ertemplatename="NONE" style=""> <div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:0;" data-erConfig="{__numTiles:3, scaleMode:'scaleDown', imgType:'main', __loopNextButton:false, __arrowButtonMode:'rollover'}">
<div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
<div class="erimgMain_slide">
<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
</div>
</div>
<div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
</div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br />
<br />
Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds. <br />
<br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a></div>
<noscript>
Rotator powered by EasyRotator, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
</noscript>
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
</div>
</div>
<!-- End DWUser_EasyRotator -->
<!-- InstanceEndEditable -->
<!-- footer -->
<div class="Footer" style="padding:0">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="273" align="center" valign="middle"><p><img src="images/MU_Advantage_sm.jpg" width="130" height="75" alt="Mizzou Advantage" /></p>
<p>Mizzou Advantage</p></td>
<td colspan="2" align="center" valign="middle" ><p><img src="images/Murraylogo3.jpg" alt="T/F logo" width="86" height="86" border="0" /> </p>
<p>Jonathan B. Murray <br />
Center for Documentary Journalism</p></td>
<td width="273" align="center" valign="middle"><p><img src="images/tf_logo_sm.jpg" alt="T/F logo" width="75" height="75" border="0" /> </p>
<p>True/False Film Fest</p></td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Missouri Humanities Council</td>
<td height="40" colspan="2" align="center"><a href="http://grs.missouri.edu">Univ. of Missouri <br />
Department of German & Russian Studies</a></td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Missouri School of Journalism</td>
<td height="40" colspan="2" align="center">Chancellor's Distinguished Visitors Program</td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Donald W. Reynolds Journalism Institute</td>
<td height="40" colspan="2" align="center"><p>Department of Women's and Gender Studies</p></td>
</tr>
<tr>
<td height="40" colspan="4" align="center">Univ. of Missouri Film Studies Program</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td style="text-align:center">MU Conference Office © 2016, University of Missouri</td>
</tr>
</table>
</div>
<!-- end Footer -->
</div> <!-- end TextOnlyContainer -->
</body>
<!-- InstanceEnd --></html>
Seems to be a problem with the background going white when the link is visited
Try to get rid of the a:visited selector altogether, it is not needed
#nav a:link, a:visited {
...
}
To
#nav a {
...
}
Hi Im making a theme for my website which has a user menu in the top right corner of the page. This is inside a purple bar which also holds the title of the page. I have managed to get the user menu on the right hand side but I'm unable to get it into the top bar, it just sits bellow the bar. To see exactly what I mean here's a link to my site http://cpanel.gaigo.org
I believe it has something to do with the header div spreading accross the whole page but im unable to get it to shrink down to only fill 250px.
The HTML code is bellow:
<div id="headerWrap" style="position:fixed;width:100%; height:59px;z-index:1;background-color:#494158;">
<div id="header" style="width:250px;">
<h1 style="margin-bottom:0; margin-left:20px; color:#fff;" id="Title">GaiGO CPanel</h1>
</div>
<div id="userMenuButton" style="float:right;margin-right:10px;width:auto;">
<span style="color:#fff;">Hi, Riley Evans</span>
<img src="user.png" height="30" width="30"/>
</div>
</div>
Thanks for any responses in advance I'm sure they will help me figure this out.
You just try this code inside your body tag.I maked some changes inside your inline css in header,userbutton div id's
<div id="container">
<div id="headerWrap" style="position:fixed;width:100%; height:59px;z-index:1;background-color:#494158;">
<div id="header" style="width:250px;float:left">
<h1 style="margin-bottom:0; margin-left:20px; color:#fff;" id="Title">GaiGO CPanel</h1>
</div>
<div id="userMenuButton" style="float:right;margin-right:10px;width:auto;margin-top:25px;">
<span style="color:#fff;">Hi, Riley Evans</span>
<img src="user.png" height="30" width="30">
</div>
</div>
<div id="menuWrap" style="position:fixed; height:100%; z-index:0;">
<div id="menuHolder" style="background-color:#77bb66;height:inherit;width:50px;float:left;margin-top:21px;position:relative;">
<table class="menu" style="margin:0 auto; margin-top:38px;">
<tbody>
<tr>
<td class="sideMenuOption" id="dashboardButton" onclick="menuSlider('dashboardSubMenu')">
<img src="/style/images/designer-icons/Home-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="pagesButton" onclick="menuSlider('pagesSubMenu')">
<img src="/style/images/designer-icons/Multi-Page-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="mediaButton" onclick="menuSlider('mediaSubMenu')">
<img src="/style/images/designer-icons/Picture-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="stylesButton" onclick="menuSlider('stylesSubMenu')">
<img src="/style/images/designer-icons/Brush-01-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="settingsButton" onclick="menuSlider('settingsSubMenu')">
<img src="/style/images/designer-icons/Settings-02-48.png" width="40" height="40">
</td>
</tr>
</tbody>
</table>
</div>
<div id="subMenuHolder" class="hide">
<ul class="subMenu dashboardSubMenu" id="dashboardSubMenu">
<li>Home</li>
<li>My Site</li>
<li>Stats</li>
</ul>
<ul class="subMenu pagesSubMenu" id="pagesSubMenu">
<li>Pages</li>
<li>New page</li>
</ul>
<ul class="subMenu mediaSubMenu" id="mediaSubMenu">
<li>Library</li>
<li>Upload</li>
</ul>
<ul class="subMenu stylesSubMenu" id="stylesSubMenu">
<li>Themes</li>
<li>Customise</li>
<li>Menus</li>
<li>Mobile</li>
</ul>
<ul class="subMenu settingsSubMenu" id="settingsSubMenu">
<li>General</li>
<li>Site</li>
<li>Account</li>
</ul>
<div id="closeSubMenuButton" onclick="subMenuClose()">
<img src="/style/images/designer-icons/Arrowhead-Left-01-48.png" height="30" width="30">
</div>
</div>
</div>
<div id="contentWrap" style="width:100%;height:2000px;">
<div id="content" style="background-color:#EEEEEE;float:left;width:100%;height:2000px;margin-top:59px;margin-left:0px;">
<div id="contentHolder" style="margin-left:50px;">Content goes here</div>
</div>
</div>
</div>
The div element automatically is given the display:block property/value. Try display:inline-block. Some additional tweaks may be necessary but this should get you on your way. You may also consider wrapping the code with span elements instead of div elements.
I'm very new to this so I apologise if this is a simple thing. I seem to be unable to keep the bottom div inside the wrapper, even though it closes after. I've validated the code and this hasn't helped. Please can someone cast some light on where I'm going wrong? Many thanks in advance.
This is my code:
<!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">
<head>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:300|Raleway:300,700|Droid+Serif:700' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width; initial-scale=0.95; maximum-scale=1.0; user-scalable=no;"/>
<link href="/css/simplegrid.css" rel="stylesheet" type="text/css" >
<link href="css/a_main_structure.css" rel="stylesheet" type="text/css" />
<link href="css/birthgently.css" rel="stylesheet" type="text/css" />
<link href="css/menu_styling.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Optima' rel='stylesheet' type='text/css'>
<style type="text/css">
a:link {
color: #8A8A8A;
text-decoration: none;
}
a:visited {
color: #8A8A8A;
text-decoration: none;
}
a:hover {
color: #5F5F5F;
text-decoration: none;
}
a:active {
color: #5F5F5F;
text-decoration: none;
}
body {
background-color: #F4F4F4;
background-repeat: repeat-x;
}
</style>
</head>
<body text="#000000" link="#0000ff" dir="ltr" lang="en-GB">
<div id="container">
<div id="content">
<div class="wrapper">
<div class="width_100_percent" align="center">
<div class="headerStretch">
<img src="images/birthgently-topstrip.jpg" width="960" height="232" alt="alt tag change me"/>
</div>
</div>
<div align="center">
<div class="menuback">
<div class="paddingtop8px">
<nav>
<ul align="centre">
<li>Home</li>
<li>Weekly Class</li>
<li>The Course</li>
<li>Hypnobirthing</li>
<li>Contact</li>
<li>Bookings</li>
</ul>
</nav>
</div>
</div>
</div>
<br />
<div class="width_100_percent">
<div class="width7_percent"> </div>
<div class="width86_percent"><div class="headerStretch"><img src="images/about-hypnobirthing.jpg" width="800" height="469" alt="alt tag change me" /></div></div>
<div class="width7_percent"> </div>
</div>
<br />
<br />
<br />
<br />
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left"><h1 class="contentheadings">The principles of Hypno-birthing</h1>
</div>
<p align="left" class="bodytext">Giving birth calmly, safely and gently is every woman's and every baby's birth right. A woman's body has been perfectly designed to give birth to her baby. Free of fear, stress and anxiety her body is able to work in synchrony with her baby to naturally produce a beautiful blend of birthing hormones. <br/>
<br/>
When a woman is calm and relaxed the muscles which assist in the birth her baby are able to work harmoniously and effectively which means she has an easier, more gentle birth that is often also accompanied by a significant reduction in pain. These wonderful birthing hormones and muscles help to ensure that a woman can have the amazing, beautiful and profound experience that nature intended birth to be.
</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<br />
<br />
<br />
<br />
<div class="clear_both">
<div class="width_100_percent">
<div class="width29_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> If the birth is calm, gentle & drug free for you, it's also calm, gentle & drug free for your baby - K Graves <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="center" class="width50_percent">
<div align="left">
<p class= "bodytext">Hypno-birthing is not about training mothers to give birth. It is about helping woman to release fear and anxiety and it teaches them how to use self-hypnosis and relaxation so their bodies and minds can relax and they can birth their babies gently. <br />
<br />
Hypno-birthing is now widely recognised by birth professionals and is regularly discussed in the media. Hypno-birthing is commonly accepted as an effective approach to childbirth with many midwives training in the technique having witnessed 'hypno-births' first-hand. </p>
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">The History of Hypno-birthing</h2>
</div>
<p align="left" class="bodytext">More natural and gentle approaches to childbirth including hypno-birthing began in modern times with the work, amongst others, of Dr Grantly Dick-Read, an obstetrician working in England in the early 19th century. His careful observations of women giving birth led him to develop the theory of the 'fear-tension-pain syndrome'.
</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent"><br />
<div class="width15_percent"> </div>
<div align="center" class="width50_percent">
<div align="left">
<p class="bodytext">Having witnessed women giving birth easily, calmly and comfortably he concluded that what made the process of birth painful was fear. Fear caused tension in the woman's body and disrupted the natural processes of labour and birth. Dr Dick-Read documented the negative effect of fear on childbirth. In his books he argued that childbirth did not have to be the painful ordeal that women had been led to believe they must suffer. He suggested that when fear is not present a woman can give birth comfortably and pain-free.</p></div>
</div>
</div>
</div>
<div class="width35_percent">
<div class="headerStretch">
<div class="image-pad-left"><img src="images/about-hypno.jpg" width="265" height="177" /></div></div></div>
<div class="width15_percent"> </div>
<div class="clear_both">
<div class="width_100_percent">
<div class="width29_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> My dream is that every woman, everywhere, will know the joy of a truly safe, comfortable, and satisfying birthing for herself and her baby. Marie Mongan <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="center" class="width50_percent">
<div align="left">
<p class= "bodytext">Unfortunately the view that labour and birth are painful and traumatic continues to be one which is still widely circulated in the media. Even amongst well meaning friends and family the negative view often persists and pregnant women are frequently bombarded with negative and fear evoking images and stories..</p><br />
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">Getting past fear</h2>
</div>
<p align="left" class="bodytext">One of the main elements of hypno-birthing is the removal of such fears and the use of positive images, positive language and positive affirmations about birth. Marie Mongon, an American hypnotherapist was one of the first people to use the phrase HypnoBirthing. She developed a teaching program for parents to be which she brought to the UK in the early 90's. Since then hypno-birthing has gained in popularity and many practitioners including Katherine Graves have gone on to adapt and enhance hypno-birthing techniques specifically for the UK.
There are now many hypno-birthing practitioners and whilst each have a slightly different approach the key elements of hypno-birthing remain the same - free of fear and tension a woman can give birth to her baby calmly, safely, gently.</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent"><br />
<div class="width15_percent"> </div>
<div align="center" class="width50_percent">
<div align="left"><h2 class="contentsubheadings">birthgently classes
</h2>
<ul type="square">
<li type="square" class="bullets">
<p class="bodytext">teaches deep relaxation which keeps you and your birth partner free of stress and fear</p></li>
<li type="square" class="bullets">
<p class="bodytext"> facilitates your body's production of powerful, natural pain relieving endorphins and feel good hormones</p></li>
<li type="square" class="bullets">
<p class="bodytext"> helps to shorten the length of the first stage of labour</p></li>
<li type="square" class="bullets">
<p class="bodytext"> reduces the need for surgical interventions</p></li> <li type="square" class="bullets">
<p class="bodytext">helps to keep baby calm and well oxygenated</p></li>
<li type="square" class="bullets">
<p class="bodytext"> eaves you and baby feeling calm but alert and able to fully experience those special first few hours together </p></li>
<li type="square" class="bullets">
<p class="bodytext"> empowers you and your birth partner to remain calm and in control even if there are unexpected circumstances</p></li>
</ul>
</div>
</div>
</div>
</div>
<div class="width35_percent">
<div class="headerStretch">
<div class="image-pad-lefttop"><img src="images/grey-baby.jpg" width="265" height="177" /></div></div></div>
<div class="width15_percent"> </div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">The common view</h2>
</div>
<p class= "bodytext" align="left">
Unfortunately the view that labour and birth are painful and traumatic continues to be one which is still widely circulated in the media. Even amongst well meaning friends and family the negative view often persists and pregnant women are frequently bombarded with negative and fear evoking images and stories..</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<div class="width50_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> My son was born at 4:50am. I sat back having been on all fours, and just stared at him swimming up on his back, eyes open in the water. The midwife had to prompt me to pick him up. I came out of this trance-like state and I scooped him up and suddenly the power of speech returned and I felt euphoric. <br />
AB -hypno-birthing Mum <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="left" class="width35_percent">
<br />
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
</div>
</div>
</body>
</html>
I've had a look at this and cant see what is or isn't happening as desired. Take a look at this JSFIDDLE I've added border the main container and bottom div and it is sitting within the container.
Take a look yourself, add this css to your page to see whats going on
#container
{
border: 1px solid blue;
}
.width15_percent
{
border: 1px solid red;
}
Add overflow: hidden; to .wrapper
so im new to html and need help formatting. i wasnt the first two images to have 10px of space between them but also centered above the bottom image. ive tried padding and margin any ideas?
<table>
<tbody>
<tr>
<td>
<div style="margin-right: 10px;" align="center"><a title="RSA Cat allows you to see what current books that our library and others have based on your own search!" href="http://rsacat.alsrsa.org/uhtbin/cgisirsi/x/0/0/57/49?user_id=DOMINY-MLWEB" target="_blank"><img alt="Resource Sharing Alliance" src="http://0367168.netsolhost.com/tbc1/images/rsaCat.jpg" width="117" height="50" border="5" /></a> <a title="Alliance is one of our two new e-book companies. Choose from hundreds of books to keep with you electronically!" href="http://alliance.lib.overdrive.com" target="_blank"><img alt="Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. " src="http://0367168.netsolhost.com/tbc1/images/AllianceDigitalLibrary.gif" width="99" height="50" border="5" /></a></div>
<div style="padding-left: 10px;" align="center"></div></td>
</tr>
<tr>
<td colspan="2">
<div align="center"><a title="The Reaching Across Illinois Library System (RAILS) is one of two multitype regional library systems in the state." href="http://www.alliancelibrarysystem.com/" target="_blank"><img alt="Alliance Library System" src="http://0367168.netsolhost.com/tbc1/images/allianceLogo.jpg" width="160" height="40" border="0" /></a></div></td>
</tr>
<tr>
<td colspan="2">`enter code here`
<div align="center">Axis 360 Digital Media Library</div></td>
</tr>
<tr>
<td colspan="2">
<div align="center"><span style="color: black;">Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. Your library card and your pin/password are required to download books.</span></div></td>
</tr>
</tbody>
</table>
<div style="margin:auto; width:(xx+yy+10)px;" >
<img src="image1" style="margin-right:10px;" widht="xxpx">
<img src="image2" width="yypx">
</div>
<div style="margin:auto; width:image3widht px;">
<img src="helloworld" style="margin:auto;" width="image3widthpx;">
</div>
See fiddle
I would do it like this:
<div class="topRow">
<a title="RSA Cat allows you to see what current books that our library and others have based on your own search!" href="http://rsacat.alsrsa.org/uhtbin/cgisirsi/x/0/0/57/49?user_id=DOMINY-MLWEB" target="_blank"><img alt="Resource Sharing Alliance" src="http://0367168.netsolhost.com/tbc1/images/rsaCat.jpg" width="117" height="50" border="5" /></a>
<a title="Alliance is one of our two new e-book companies. Choose from hundreds of books to keep with you electronically!" href="http://alliance.lib.overdrive.com" target="_blank"><img alt="Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. " src="http://0367168.netsolhost.com/tbc1/images/AllianceDigitalLibrary.gif" width="99" height="50" border="5" /></a>
</div>
<div style="padding-left: 10px;" align="center"></div>
<div align="center">
<a title="The Reaching Across Illinois Library System (RAILS) is one of two multitype regional library systems in the state." href="http://www.alliancelibrarysystem.com/" target="_blank"><img alt="Alliance Library System" src="http://0367168.netsolhost.com/tbc1/images/allianceLogo.jpg" width="160" height="40" border="0" /></a>
</div>
<div align="center">
Axis 360 Digital Media Library
</div>
<div align="center">
<span style="color: black;">Browse downloadable audiobooks and eBooks from Alliance Digital Media Library. Your library card and your pin/password are required to download books.</span>
</div>
With CSS:
.topRow {
text-align: center;
}
.topRow > a {
display:inline-block;
}
.topRow > a:first-child {
margin-right: 10px;
}
And the finished product: http://jsfiddle.net/D7rvc/