Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh #footer in place in live view, not in browser preview

    Hello everyone
    I'm trying to design a first website in Dreamweaver and I'm new to CSS. I've understood it somewhat, and my site is working pretty well so far. Only problem is that, on pages with much more main content, when I preview the page in a browser (so far I'm only using Safari and Google Chrome), the footer is cutting through the main text. It is, however, in the right place in live view. I'll post the code here (all of it, since I'm worried about leaving anything out) in case someone can tell me what I'm doing wrong, and I thank you all in advance just for even having read this.


    Code:
    html {
    	height: 100%;
    	width: 100%;
    }
    #container #main #sidebar #photos p {
    	font-family: Didot, Verdana;
    	font-size: 18px;
    	line-height: 7px;
    	margin-right: 100px;
    	text-align: center;
    	vertical-align: middle;
    	margin-bottom: 0px;
    }
    #container #main #sidebar #photos p {
    	margin-bottom: 0px;
    	margin-top: 15px;
    }
    body {
    	margin: 0px;
    	background-color: #000;
    }
    #container {
    	font-family: Didot, Verdana;
    	font-size: 16px;
    	color: #f69d26;
    	background-color: #000;
    	text-align: left;
    	padding: 0px;
    	height: auto;
    	min-height: 800px;
    	width: 1026px;
    	margin-right: auto;
    	margin-left: auto;
    }
    a:link {
    	font-weight: bold;
    	color: #f69d26;
    	text-decoration: none;
    }
    a:visited {
    	font-weight: bold;
    	color: #f69d26;
    }
    a:hover {
    	font-weight: bold;
    	color: #e43b01;
    }
    a:hover {
    	color: #e43b01;
    }
    #header {
    	padding: 0px;
    	height: 403px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #main {
    	padding: 0px;
    	height: auto;
    	min-height: 800px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: auto;
    	margin-left: auto;
    	position: relative;
    	background-image: url(pages/layout/phot_bkgd.png);
    	background-repeat: repeat;
    	background-position: center;
    }
    #footer {
    	font-family: Didot, Verdana;
    	font-size: 10px;
    	font-weight: bold;
    	text-decoration: underline;
    	text-align: right;
    	height: 48px;
    	position: relative;
    	top: auto;
    	bottom: auto;
    	margin-top: auto;
    	margin-bottom: auto;
    }
    #name {
    	background-image: url(pages/layout/name_bkgd.png);
    	height: 61px;
    	width: 1026px;
    	position: relative;
    	font-size: 40px;
    	text-align: center;
    }
    #header #photo {
    	background-image: url(pages/layout/phot_bkgd.png);
    	height: 279px;
    	width: 1026px;
    	position: relative;
    }
    #header #navbar {
    	background-image: url(pages/layout/nav_bkgd.png);
    	height: 44px;
    	width: 1026px;
    	position: relative;
    }
    #header #bottom {
    	background-image: url(pages/layout/head_bottom_bkgd.png);
    	height: 22px;
    	width: 1026px;
    	position: relative;
    }
    #container #main {
    	background-image: url(pages/layout/background.png);
    	height: auto;
    	width: 1026px;
    	position: relative;
    	background-repeat: repeat;
    	min-height: 850px;
    }
    #container #footer {
    	background-image: url(pages/layout/footer.png);
    	height: 48px;
    	width: 1026px;
    	position: relative;
    	top: auto;
    	bottom: auto;
    }
    #container #header #name {
    	margin-top: 0px;
    	padding-top: 10px;
    	padding-bottom: 0px;
    }
    #container #header #photo img {
    	position: relative;
    	margin-left: 80px;
    }
    #container #header #navbar {
    	font-family: Didot, Verdana;
    	font-size: 20px;
    	text-align: left;
    	height: 44px;
    	margin-left: 0px;
    }
    #container #header #navbar ul {
    	margin: 0px;
    	list-style-type: none;
    	font-family: Didot, Verdana;
    	font-size: 20px;
    	padding-top: 11px;
    	text-align: left;
    	text-indent: 46px;
    }
    #container #header #navbar ul li {
    	display: inline;
    	font-size: 20px;
    	padding-right: 13px;
    	text-align: left;
    	text-indent: 12px;
    }
    #container #footer a {
    	color: #e43b01;
    	font-size: 16px;
    	padding-right: 45px;
    	padding-top: 30px;
    	margin-top: 30px;
    	display: inline;
    	text-align: left;
    	vertical-align: middle;
    	font-weight: bold;
    	text-decoration: none;
    }
    #footer a:link {
    	font-size: 16px;
    	font-weight: bold;
    	color: #e43b01;
    	text-decoration: none;
    	text-align: left;
    	vertical-align: middle;
    }
    #container #main #sidebar {
    	clear: left;
    	float: left;
    	height: 622px;
    	width: 266px;
    	left: 73px;
    	position: absolute;
    	padding-top: 20px;
    }
    #container #main #sidebar #join {
    	background-image: url(pages/layout/join_bkgd.png);
    	position: absolute;
    	height: 159px;
    	width: 266px;
    	background-repeat: no-repeat;
    	top: 120px;
    	clear: left;
    	float: left;
    	background-position: center top;
    }
    #container #main #sidebar #join {
    	font-family: Didot, Verdana;
    	font-size: 18px;
    	font-weight: bold;
    	text-align: center;
    	padding-top: 16px;
    	margin-left: 0px;
    }
    #container #main #sidebar #upcoming p {
    	padding-left: 20px;
    }
    #container #main #sidebar #upcoming div p strong {
    	padding-right: 37px;
    }
    #container #main #sidebar #facebook div p {
    }
    #container #main #sidebar #facebook div p {
    	font-family: Didot, Verdana;
    	font-size: 14px;
    	font-weight: bold;
    	color: #000;
    }
    #container #main #sidebar #facebook div p {
    	font-family: Didot, Verdana;
    	font-size: 18px;
    	font-weight: bold;
    	color: #000;
    	padding-left: 25px;
    	padding-top: 4px;
    }
    #mc_embed_signup {
    	margin-left: 50px;
    }
    
    	#mc_embed_signup{background:#f69d26; font:14px Helvetica,Arial,sans-serif; }
    #container #main #sidebar #join #mc_embed_signup #mc-embedded-subscribe-form .clear div #mc-embedded-subscribe {
    }
    #container #main #sidebar #join #mc_embed_signup #mc-embedded-subscribe-form .clear div #mc-embedded-subscribe {
    	background-color: #f69d26;
    	color: #000;
    	margin-top: 0px;
    	margin-left: 0px;
    	width: 0px;
    }
    #container #main #sidebar #facebook {
    	background-image: url(pages/layout/facebook_bkgd.png);
    	background-repeat: no-repeat;
    	background-position: center top;
    	position: absolute;
    	height: 82px;
    	width: 266px;
    	top: 283px;
    }
    #container #main #sidebar #facebook {
    	font-family: Didot, Verdana;
    	font-size: 18px;
    	font-weight: bold;
    	text-align: left;
    }
    #container #main #sidebar #facebook {
    	text-align: center;
    }
    #container #main #sidebar #facebook img {
    	top: 21px;
    	position: absolute;
    	left: 177px;
    	width: 21px;
    	height: 22px;
    }
    #container #main #sidebar #photos {
    	background-image: url(pages/layout/photo_bkgd.png);
    	background-repeat: no-repeat;
    	background-position: center top;
    	height: 85px;
    	width: 266px;
    	position: absolute;
    	top: 368px;
    	font-size: 20px;
    	font-weight: bold;
    	font-family: Didot, Verdana;
    	color: #000;
    	text-decoration: none;
    	padding-top: 13px;
    	text-align: center;
    }
    #container #main #content p {
    	padding-left: 20px;
    	padding-right: 20px;
    }
    #container #main #sidebar #upcoming {
    	background-image: url(pages/layout/upcoming_bkgd.png);
    	background-repeat: repeat;
    	background-position: center top;
    	height: 196px;
    	width: 266px;
    	position: absolute;
    	top: 455px;
    }
    #container #main #sidebar #join #mc_embed_signup {
    	width: 150px;
    	height: 60px;
    	padding-left: 40px;
    	font-family: Didot, Verdana;
    	color: #000;
    	vertical-align: middle;
    }
    #container #main #sidebar #join #mc_embed_signup {
    	margin-left: 40px;
    }
    #container #main #sidebar #join div style {
    }
    #container #main #sidebar #upcoming p a {
    	color: #000;
    }
    #container #main #sidebar #upcoming p a:hover {
    	color: #e43b01;
    }
    #container #main #sidebar #photos a {
    	color: #000;
    }
    #container #main #sidebar #photos a:hover {
    	color: #e43b01;
    }
    #container #main #content {
    	font-family: Didot, Verdana;
    	font-size: 20px;
    	color: #f69d26;
    	height: 635px;
    	width: 611px;
    	position: absolute;
    	left: 350px;
    	top: 15px;
    	clear: right;
    	float: right;
    }
    #container #main #content div {
    	font-family: Didot, Verdana;
    	font-size: 24px;
    	color: #f69d26;
    }
    #container #main #content ul {
    	list-style-image: url(pages/bullet.png);
    }
    #container #main #content img {
    	margin-left: 220px;
    }
    #container #main #content p {
    	padding-bottom: 20px;
    }
    Thanks again for any help any of you may be able to offer.
    Last edited by VIPStephan; 08-30-2012 at 03:45 PM. Reason: added code BB tags

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,031
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Please put code between tags. We also need the html for this.

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Like this?

    Code:
    <link href="magsis.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    <body>
    <div id="container">
    <div id="header">
          <div id="name"><a href="home.html" target="_self">--the logo--</a></div> <!-- end name -->
          <div id="photo"><img src="pages/images/trailer.jpg" width="873" height="277" alt="mags on trailer">
      </div> <!-- end photo -->
          <div id="navbar">
            <ul>
              <li></li>
              <li><a href="news.html" target="_self">NEWS</a></li>
              <li><a href="music.html" target="_self">MUSIC</a></li>
              <li><a href="meet_sisters.html" target="_self">MEET THE SISTERS</a></li>
              <li><a href="dates.html" target="_self">DATES</a></li>
              <li><a href="store.html" target="_self">STORE</a></li>
              <li><a href="contact.html" target="_self">CONTACT/EPK</a></li>
              <li><a href="french.html" target="_self">FRANÇAIS</a></li>
            </ul>
          </div> <!-- end navbar -->
        <div id="bottom">
        </div> <!-- end bottom -->
      </div> <!-- end header -->
    <div id="main">
          <div id="sidebar">
          <div id="magradio"><a href="magradio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('magradio','','pages/layout/listen_over.png',1)"><img src="pages/layout/listen.png" alt="listen to our music" name="magradio" width="266" height="90" border="0"></a>
          </div>
          <div id="join">
            <div align="center">join our mailing list
              <!-- Begin MailChimp Signup Form -->
            </div>
            <link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
            <div align="center">
    
            </div>
            <div id=--the signup form for their mailing list--
                
                <div class="clear">
                  <div align="center">
                    <input type="submit" value="OK" name="join" id="mc-embedded-subscribe" class="button">
                  </div>
                </div>
    </form>
    </div>
    
    <!--End mc_embed_signup--></div>
          
          <div id="facebook">
            <div align="left">
              <p>follow the sisters -link to their facebook- </p>
            </div>
          </div>
            <div id="photos">
              <p>photos and</p>
              <p>videos</p>
            </div>
            <div id="upcoming">
              <div align="center"><br><strong>UPCOMING SHOWS</strong></div>
              <p align="left">00/00 Cleoma play
              <br>
              00/00 Concert
              <br>00/00 France
              <br>
              <strong><a href="dates.html" target="_self">more dates</a></strong></br></p>
            </div>
          </div> 
          <!-- end sidebar -->
          <div id="content">
            <div align="center">NEWS</div>
            <p>--very long text here with photos--</div> <!-- end content -->
      </div> <!-- end main -->
      <div id="footer"><a href="mailto:(email address)">website by Sarah Savoy-Gonzales</a></div> <!-- end footer -->
    </div> <!-- end container -->
    </body>
    </html>
    Last edited by VIPStephan; 08-30-2012 at 03:46 PM. Reason: added code BB tags

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sticky footer doesn't work either

    I've tried the sticky footer, since I found that advice in other similar posts before posting my own question, but that didn't help.

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Highlight your code..

    Code:
    #some css {
        color: red;
    }
    and press the hash button!
    Attached Thumbnails Attached Thumbnails #footer in place in live view, not in browser preview-codewrap.png  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    full CSS with HTML

    I'm going to leave all the text and everything else in here in hopes that makes the problem clear and that it doesn't adversely get lost in all the detail.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <head profile= "http://www.w3.org/2005/10/profile">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Magnolia Sisters::Soulful Cajun Music with a Woman's Heart</title>
    <meta name="Keywords" content="cajun, creole, zydeco, louisiana, americana, women, female, ann, savoy, jane, vidrine, accordion, acadian, violin, fiddle" />
    <meta name="Description" content= "Magnolia Sisters::Soulful Cajun Music with a Woman's Heart" />
    <meta name="Publisher" content="Magnolia Sisters" />
    <meta name="Copyright" content="Copyright 2012, Magnolia Sisters. All rights reserved." />
    <meta name="Author" content="Sarah Savoy Gonzales" />
    <meta name="Language" content="en-US" />
    <meta name="distribution" content="global" />
    <meta name="Robots" content="All" />
    <link rel="icon" type="image/png" href="/favicon.ico">
    <style type="text/css">
    html {
    	height: 100%;
    	width: 100%;
    }
    body {
    margin: 0px;
    background-color: #000;
    }
    #container {
    font-family: Didot, Verdana;
    font-size: 16px;
    color: #f69d26;
    background-color: #000;
    text-align: left;
    padding: 0px;
    height: auto;
    min-height: 800px;
    width: 1026px;
    margin-right: auto;
    margin-left: auto;
    }
    a:link {
    font-weight: bold;
    color: #f69d26;
    text-decoration: none;
    }
    a:visited {
    font-weight: bold;
    color: #f69d26;
    }
    a:hover {
    font-weight: bold;
    color: #e43b01;
    }
    #header {
    padding: 0px;
    height: 403px;
    margin-right: auto;
    margin-left: auto;
    }
    #name {
    background-image: url(pages/layout/name_bkgd.png);
    height: 61px;
    width: 1026px;
    position: relative;
    font-size: 40px;
    text-align: center;
    margin-top: 0px;
    padding-top: 10px;
    padding-bottom: 0px;
    }
    #header #photo {
    background-image: url(pages/layout/phot_bkgd.png);
    height: 279px;
    width: 1026px;
    position: relative;
    }
    #container #header #photo img {
    position: relative;
    margin-left: 80px;
    }
    #header #navbar {
    background-image: url(pages/layout/nav_bkgd.png);
    height: 44px;
    width: 1026px;
    position: relative;
    font-family: Didot, Verdana;
    font-size: 20px;
    text-align: left;
    height: 44px;
    margin-left: 0px;
    }
    #container #header #navbar ul {
    margin: 0px;
    list-style-type: none;
    font-family: Didot, Verdana;
    font-size: 20px;
    padding-top: 11px;
    text-align: left;
    text-indent: 46px;
    }
    #container #header #navbar ul li {
    display: inline;
    font-size: 20px;
    padding-right: 13px;
    text-align: left;
    text-indent: 12px;
    }
    #header #bottom {
    background-image: url(pages/layout/head_bottom_bkgd.png);
    height: 22px;
    width: 1026px;
    position: relative;
    }
    #container #main {
    	background-image: url(pages/layout/phot_bkgd.png);
    	height: auto;
    	width: 1026px;
    	position: relative;
    	background-repeat: repeat-y;
    	min-height: 800px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: auto;
    	margin-left: auto;
    	position: relative;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 20px;
    	padding-left: 0px;
    }
    #container #main #sidebar {
    clear: left;
    float: left;
    height: 622px;
    width: 266px;
    left: 73px;
    position: absolute;
    padding-top: 20px;
    }
    #container #main #sidebar #join {
    background-image: url(pages/layout/join_bkgd.png);
    position: absolute;
    height: 159px;
    width: 266px;
    background-repeat: no-repeat;
    top: 120px;
    clear: left;
    float: left;
    background-position: center top;
    font-family: Didot, Verdana;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-top: 16px;
    margin-left: 0px;
    }
    #container #main #sidebar #join div {
    	font-family: Didot, Verdana;
    	color: #000;
    	position: relative;
    }
    #mc_embed_signup{background:#f69d26; font:14px Helvetica,Arial,sans-serif; }
    #container #main #sidebar #join #mc_embed_signup #mc-embedded-subscribe-form .clear div #mc-embedded-subscribe {
    background-color: #f69d26;
    color: #000;
    margin-top: 0px;
    }
    #container #main #sidebar #join #mc_embed_signup {
    width: 150px;
    height: 60px;
    padding-left: 40px;
    font-family: Didot, Verdana;
    color: #000;
    vertical-align: middle;
    margin-left: 50px;
    }
    #container #main #sidebar #upcoming p {
    padding-left: 20px;
    }
    #container #main #sidebar #upcoming div p strong {
    padding-right: 37px;
    }
    #container #main #sidebar #facebook div p {
    font-family: Didot, Verdana;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    padding-left: 25px;
    padding-top: 4px;
    }
    
    #container #main #sidebar #photos p {
    font-family: Didot, Verdana;
    font-size: 18px;
    line-height: 7px;
    margin-right: 100px;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 0px;
    margin-top: 15px;
    }
    #container #main #sidebar #photos {
    background-image: url(pages/layout/photo_bkgd.png);
    background-repeat: no-repeat;
    background-position: center top;
    height: 85px;
    width: 266px;
    position: absolute;
    top: 368px;
    font-size: 20px;
    font-weight: bold;
    font-family: Didot, Verdana;
    color: #000;
    text-decoration: none;
    padding-top: 13px;
    text-align: center;
    }
    #container #main #sidebar #photos a {
    color: #000;
    }
    
    #container #main #sidebar #facebook {
    background-image: url(pages/layout/facebook_bkgd.png);
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    height: 82px;
    width: 266px;
    top: 283px;
    font-family: Didot, Verdana;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    }
    
    #container #main #sidebar #facebook img {
    top: 21px;
    position: absolute;
    left: 177px;
    width: 21px;
    height: 22px;
    }
    #container #main #sidebar #upcoming {
    background-image: url(pages/layout/upcoming_bkgd.png);
    background-repeat: repeat;
    background-position: center top;
    height: 196px;
    width: 266px;
    position: absolute;
    top: 455px;
    }
    #container #main #sidebar #upcoming div strong {
    	color: #000;
    }
    #container #main #sidebar #upcoming p {
    	color: #000;
    }
    #container #main #sidebar #upcoming p a {
    	color: #000;
    	clear: none;
    	float: none;
    	position: relative;
    	padding-bottom: 60px;
    	margin-left: 68px;
    }
    #container #main #sidebar #upcoming p a:hover {
    color: #e43b01;
    }
    #container #main #content {
    	font-family: Didot, Verdana;
    	font-size: 20px;
    	color: #f69d26;
    	height: 635px;
    	width: 611px;
    	position: absolute;
    	left: 350px;
    	top: 15px;
    	clear: right;
    	float: right;
    	padding-bottom: 20px;
    	bottom: auto;
    	min-height: 635px;
    	text-align: justify;
    	margin-top: auto;
    	margin-bottom: 30px;
    }
    #container #main #content ul {
    list-style-image: url(pages/bullet.png);
    }
    #footer {
    	background-image: url(pages/layout/footer.png);
    	font-family: Didot, Verdana;
    	font-size: 10px;
    	font-weight: bold;
    	text-decoration: none;
    	text-align: right;
    	position: relative;
    	top: auto;
    	bottom: auto;
    	margin-top: auto;
    	margin-bottom: auto;
    	clear: both;
    	height: 44px;
    	width: 1026px;
    }
    #footer a {
    color: #e43b01;
    font-size: 16px;
    padding-right: 45px;
    padding-top: 30px;
    margin-top: 30px;
    display: inline;
    text-align: left;
    vertical-align: middle;
    font-weight: bold;
    text-decoration: none;
    }
    #footer a:link {
    font-size: 16px;
    font-weight: bold;
    color: #e43b01;
    text-decoration: none;
    text-align: left;
    vertical-align: middle;
    }
    </style>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    
    <body>
    <div id="container">
    <div id="header">
          <div id="name"><a href="home.html" target="_self">THE MAGNOLIA SISTERS</a></div> <!-- end name -->
          <div id="photo"><img src="pages/images/trailer.jpg" width="873" height="277" alt="mags on trailer">
      </div> <!-- end photo -->
          <div id="navbar">
            <ul>
              <li></li>
              <li><a href="news.html" target="_self">NEWS</a></li>
              <li><a href="music.html" target="_self">MUSIC</a></li>
              <li><a href="meet_sisters.html" target="_self">MEET THE SISTERS</a></li>
              <li><a href="dates.html" target="_self">DATES</a></li>
              <li><a href="store.html" target="_self">STORE</a></li>
              <li><a href="contact.html" target="_self">CONTACT/EPK</a></li>
              <li><a href="french.html" target="_self">FRANÇAIS</a></li>
            </ul>
          </div> <!-- end navbar -->
        <div id="bottom">
        </div> <!-- end bottom -->
      </div> <!-- end header -->
    <div id="main">
          <div id="sidebar">
          <div id="magradio"><a href="magradio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('magradio','','pages/layout/listen_over.png',1)"><img src="pages/layout/listen.png" alt="listen to our music" name="magradio" width="266" height="90" border="0"></a>
          </div>
          <div id="join">
            <div align="center">join our mailing list
              <!-- Begin MailChimp Signup Form -->
            </div>
            <link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
            <div align="center">
    
            </div>
            <div id="mc_embed_signup">
              <form action="http://magnoliasisters.us5.list-manage1.com/subscribe/post?u=3b99d56211030d65c0a94e214&amp;id=5246b56782" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <input type="email" value="email address" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
                
                <div class="clear">
                  <div align="center">
                    <input type="submit" value="OK" name="join" id="mc-embedded-subscribe" class="button">
                  </div>
                </div>
    </form>
    </div>
    
    <!--End mc_embed_signup--></div>
          
          <div id="facebook">
            <div align="left">
              <p>follow the sisters<a href="http://www.facebook.com/pages/Magnolia-Sisters/286803363696"><img src="pages/layout/fb.png" width="25" height="21" alt="facebook"></a></p>
            </div>
          </div>
            <div id="photos">
              <p>photos and</p>
              <p>videos</p>
            </div>
            <div id="upcoming">
              <div align="center"><br><strong>UPCOMING SHOWS</strong></div>
              <p align="left">00/00 Cleoma play
              <br>
              00/00 Concert
              <br>00/00 France
              <br>
              <strong><a href="dates.html" target="_self">more dates</a></strong></br></p>
            </div>
          </div> 
          <!-- end sidebar -->
          <div id="content">
            <div align="center">OUR MUSIC</div>
            <p>We are an all-woman band who can play many styles of French music from southwest Louisiana. (See our press reviews). From dancehall Cajun to primitive Creole, from house music to front porch ballads, we are an ideal band for concerts, festivals, or rockin' dance parties. Part of the body of The Magnolia Sisters' music has been gleaned from a long-buried wealth of Cajun jewels found in our extensive personal music archives.
    
    <p>Though these older songs are some of the most unusual aspects of our sound, we also love to play Cajun standards in a hardcore dancehall style, as well as primitive Creole numbers that we learned from Creole masters like Canray Fontenot and Preston Frank. We take beautiful and long-lost songs from old collections and sweep off the cobwebs to bring them back in all their richness.
    <p>One thing that makes the Sisters' music so appealing is our shared ability as multi-instrumentalists; each band member plays several different instruments. During our shows we move between twin fiddle tunes, heavy bass Creole hits, dancehall standards and a cappella ballads.* This makes a musical evening with the Magnolia Sisters a fun and enriching experience.<p>Our latest CD, Stripped Down, landed us back on the Arhoolie label. This CD was nominated for a Grammy in 2010. Before that we released two CDs on the Rounder label, Apres Faire le Boogie Woogie and Chers Amis (2000). Our first CD, Prends Courage, was released in 1995 on Arhoolie Records. Our second release, Chers Amis was on Rounder Records in 2000. All of these recordings include Cajun standards, riotous swingband numbers, blues, a cappella ballads, and fiddle duets, some slightly altered to reflect a woman's viewpoint.</p></div> <!-- end content -->
      </div> <!-- end main -->
      <div id="footer"><a href="mailto:lesyeuxnoirs@gmail.com">website by Sarah Savoy-Gonzales</a></div> <!-- end footer -->
    </div> <!-- end container -->
    </body>
    </html>
    Thanks again. I don't know why I can't get this. I'm losing sleep thanks to obsessing over it!
    Last edited by VIPStephan; 08-30-2012 at 03:46 PM. Reason: added code BB tags

  • #7
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've gone back in and cleaned up the CSS. The problem now is that the main content text runs into the footer. I'd like to be able to add some photos within that text (or main content area), but I know that at this point, doing so will only push the text further below the footer. I just need to know how to get that footer moving down no matter how much I put on the page.

  • #8
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <head profile= "http://www.w3.org/2005/10/profile">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Magnolia Sisters::Soulful Cajun Music with a Woman's Heart</title>
    <meta name="Keywords" content="cajun, creole, zydeco, louisiana, americana, women, female, ann, savoy, jane, vidrine, accordion, acadian, violin, fiddle" />
    <meta name="Description" content= "Magnolia Sisters::Soulful Cajun Music with a Woman's Heart" />
    <meta name="Publisher" content="Magnolia Sisters" />
    <meta name="Copyright" content="Copyright 2012, Magnolia Sisters. All rights reserved." />
    <meta name="Author" content="Sarah Savoy Gonzales" />
    <meta name="Language" content="en-US" />
    <meta name="distribution" content="global" />
    <meta name="Robots" content="All" />
    <link rel="icon" type="image/png" href="/favicon.ico">
    <style type="text/css">
    html {
    	height: 100%;
    	width: 100%;
    }
    body {
    margin: 0px;
    background-color: #000;
    }
    #container {
    font-family: Didot, Verdana;
    font-size: 16px;
    color: #f69d26;
    background-color: #000;
    text-align: left;
    padding: 0px;
    height: auto;
    min-height: 800px;
    width: 1026px;
    margin-right: auto;
    margin-left: auto;
    }
    a:link {
    font-weight: bold;
    color: #f69d26;
    text-decoration: none;
    }
    a:visited {
    font-weight: bold;
    color: #f69d26;
    }
    a:hover {
    font-weight: bold;
    color: #e43b01;
    }
    #header {
    padding: 0px;
    height: 403px;
    margin-right: auto;
    margin-left: auto;
    }
    #name {
    background-image: url(pages/layout/name_bkgd.png);
    height: 61px;
    width: 1026px;
    position: relative;
    font-size: 40px;
    text-align: center;
    margin-top: 0px;
    padding-top: 10px;
    padding-bottom: 0px;
    }
    #header #photo {
    background-image: url(pages/layout/phot_bkgd.png);
    height: 279px;
    width: 1026px;
    position: relative;
    }
    #container #header #photo img {
    position: relative;
    margin-left: 80px;
    }
    #header #navbar {
    background-image: url(pages/layout/nav_bkgd.png);
    height: 44px;
    width: 1026px;
    position: relative;
    font-family: Didot, Verdana;
    font-size: 20px;
    text-align: left;
    height: 44px;
    margin-left: 0px;
    }
    #container #header #navbar ul {
    margin: 0px;
    list-style-type: none;
    font-family: Didot, Verdana;
    font-size: 20px;
    padding-top: 11px;
    text-align: left;
    text-indent: 46px;
    }
    #container #header #navbar ul li {
    display: inline;
    font-size: 20px;
    padding-right: 13px;
    text-align: left;
    text-indent: 12px;
    }
    #header #bottom {
    background-image: url(pages/layout/head_bottom_bkgd.png);
    height: 22px;
    width: 1026px;
    position: relative;
    }
    #container #main {
    	background-image: url(pages/layout/phot_bkgd.png);
    	height: auto;
    	width: 1026px;
    	position: relative;
    	background-repeat: repeat-y;
    	min-height: 800px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: auto;
    	margin-left: auto;
    	position: relative;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 20px;
    	padding-left: 0px;
    }
    #container #main #sidebar {
    clear: left;
    float: left;
    height: 622px;
    width: 266px;
    left: 73px;
    position: absolute;
    padding-top: 20px;
    }
    #container #main #sidebar #join {
    background-image: url(pages/layout/join_bkgd.png);
    position: absolute;
    height: 159px;
    width: 266px;
    background-repeat: no-repeat;
    top: 120px;
    clear: left;
    float: left;
    background-position: center top;
    font-family: Didot, Verdana;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-top: 16px;
    margin-left: 0px;
    }
    #container #main #sidebar #join div {
    	font-family: Didot, Verdana;
    	color: #000;
    	position: relative;
    }
    #mc_embed_signup{background:#f69d26; font:14px Helvetica,Arial,sans-serif; }
    #container #main #sidebar #join #mc_embed_signup #mc-embedded-subscribe-form .clear div #mc-embedded-subscribe {
    background-color: #f69d26;
    color: #000;
    margin-top: 0px;
    }
    #container #main #sidebar #join #mc_embed_signup {
    width: 150px;
    height: 60px;
    padding-left: 40px;
    font-family: Didot, Verdana;
    color: #000;
    vertical-align: middle;
    margin-left: 50px;
    }
    #container #main #sidebar #upcoming p {
    padding-left: 20px;
    }
    #container #main #sidebar #upcoming div p strong {
    padding-right: 37px;
    }
    #container #main #sidebar #facebook div p {
    font-family: Didot, Verdana;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    padding-left: 25px;
    padding-top: 4px;
    }
    
    #container #main #sidebar #photos p {
    font-family: Didot, Verdana;
    font-size: 18px;
    line-height: 7px;
    margin-right: 100px;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 0px;
    margin-top: 15px;
    }
    #container #main #sidebar #photos {
    background-image: url(pages/layout/photo_bkgd.png);
    background-repeat: no-repeat;
    background-position: center top;
    height: 85px;
    width: 266px;
    position: absolute;
    top: 368px;
    font-size: 20px;
    font-weight: bold;
    font-family: Didot, Verdana;
    color: #000;
    text-decoration: none;
    padding-top: 13px;
    text-align: center;
    }
    #container #main #sidebar #photos a {
    color: #000;
    }
    
    #container #main #sidebar #facebook {
    background-image: url(pages/layout/facebook_bkgd.png);
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    height: 82px;
    width: 266px;
    top: 283px;
    font-family: Didot, Verdana;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    }
    
    #container #main #sidebar #facebook img {
    top: 21px;
    position: absolute;
    left: 177px;
    width: 21px;
    height: 22px;
    }
    #container #main #sidebar #upcoming {
    background-image: url(pages/layout/upcoming_bkgd.png);
    background-repeat: repeat;
    background-position: center top;
    height: 196px;
    width: 266px;
    position: absolute;
    top: 455px;
    }
    #container #main #sidebar #upcoming div strong {
    	color: #000;
    }
    #container #main #sidebar #upcoming p {
    	color: #000;
    }
    #container #main #sidebar #upcoming p a {
    	color: #000;
    	clear: none;
    	float: none;
    	position: relative;
    	padding-bottom: 60px;
    	margin-left: 68px;
    }
    #container #main #sidebar #upcoming p a:hover {
    color: #e43b01;
    }
    #container #main #content {
    	font-family: Didot, Verdana;
    	font-size: 20px;
    	color: #f69d26;
    	height: 635px;
    	width: 611px;
    	position: absolute;
    	left: 350px;
    	top: 15px;
    	clear: right;
    	float: right;
    	padding-bottom: 20px;
    	bottom: auto;
    	min-height: 635px;
    	text-align: justify;
    	margin-top: auto;
    	margin-bottom: 30px;
    }
    #container #main #content ul {
    list-style-image: url(pages/bullet.png);
    }
    #footer {
    	background-image: url(pages/layout/footer.png);
    	font-family: Didot, Verdana;
    	font-size: 10px;
    	font-weight: bold;
    	text-decoration: none;
    	text-align: right;
    	position: relative;
    	top: auto;
    	bottom: auto;
    	margin-top: auto;
    	margin-bottom: auto;
    	height: 44px;
    	width: 1026px;
    }
    #footer a {
    color: #e43b01;
    font-size: 16px;
    padding-right: 45px;
    padding-top: 30px;
    margin-top: 30px;
    display: inline;
    text-align: left;
    vertical-align: middle;
    font-weight: bold;
    text-decoration: none;
    }
    #footer a:link {
    font-size: 16px;
    font-weight: bold;
    color: #e43b01;
    text-decoration: none;
    text-align: left;
    vertical-align: middle;
    }
    </style>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    
    <body>
    <div id="container">
    <div id="header">
          <div id="name"><a href="home.html" target="_self">THE MAGNOLIA SISTERS</a></div> <!-- end name -->
          <div id="photo"><img src="pages/images/trailer.jpg" width="873" height="277" alt="mags on trailer">
      </div> <!-- end photo -->
          <div id="navbar">
            <ul>
              <li></li>
              <li><a href="news.html" target="_self">NEWS</a></li>
              <li><a href="music.html" target="_self">MUSIC</a></li>
              <li><a href="meet_sisters.html" target="_self">MEET THE SISTERS</a></li>
              <li><a href="dates.html" target="_self">DATES</a></li>
              <li><a href="store.html" target="_self">STORE</a></li>
              <li><a href="contact.html" target="_self">CONTACT/EPK</a></li>
              <li><a href="french.html" target="_self">FRANÇAIS</a></li>
            </ul>
          </div> <!-- end navbar -->
        <div id="bottom">
        </div> <!-- end bottom -->
      </div> <!-- end header -->
    <div id="main">
          <div id="sidebar">
          <div id="magradio"><a href="magradio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('magradio','','pages/layout/listen_over.png',1)"><img src="pages/layout/listen.png" alt="listen to our music" name="magradio" width="266" height="90" border="0"></a>
          </div>
          <div id="join">
            <div align="center">join our mailing list
              <!-- Begin MailChimp Signup Form -->
            </div>
            <link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
            <div align="center">
    
            </div>
            <div id="mc_embed_signup">
              <form action="http://magnoliasisters.us5.list-manage1.com/subscribe/post?u=3b99d56211030d65c0a94e214&amp;id=5246b56782" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <input type="email" value="email address" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
                
                <div class="clear">
                  <div align="center">
                    <input type="submit" value="OK" name="join" id="mc-embedded-subscribe" class="button">
                  </div>
                </div>
    </form>
    </div>
    
    <!--End mc_embed_signup--></div>
          
          <div id="facebook">
            <div align="left">
              <p>follow the sisters<a href="http://www.facebook.com/pages/Magnolia-Sisters/286803363696"><img src="pages/layout/fb.png" width="25" height="21" alt="facebook"></a></p>
            </div>
          </div>
            <div id="photos">
              <p>photos and</p>
              <p>videos</p>
            </div>
            <div id="upcoming">
              <div align="center"><br><strong>UPCOMING SHOWS</strong></div>
              <p align="left">00/00 Cleoma play
              <br>
              00/00 Concert
              <br>00/00 France
              <br>
              <strong><a href="dates.html" target="_self">more dates</a></strong></br></p>
            </div>
          </div> 
          <!-- end sidebar -->
          <div id="content">
            <div align="center">OUR MUSIC</div>
            <p>We are an all-woman band who can play many styles of French music from southwest Louisiana. (See our press reviews). From dancehall Cajun to primitive Creole, from house music to front porch ballads, we are an ideal band for concerts, festivals, or rockin' dance parties. Part of the body of The Magnolia Sisters' music has been gleaned from a long-buried wealth of Cajun jewels found in our extensive personal music archives.
    
    <p>Though these older songs are some of the most unusual aspects of our sound, we also love to play Cajun standards in a hardcore dancehall style, as well as primitive Creole numbers that we learned from Creole masters like Canray Fontenot and Preston Frank. We take beautiful and long-lost songs from old collections and sweep off the cobwebs to bring them back in all their richness.
    <p>One thing that makes the Sisters' music so appealing is our shared ability as multi-instrumentalists; each band member plays several different instruments. During our shows we move between twin fiddle tunes, heavy bass Creole hits, dancehall standards and a cappella ballads.* This makes a musical evening with the Magnolia Sisters a fun and enriching experience.<p>Our latest CD, Stripped Down, landed us back on the Arhoolie label. This CD was nominated for a Grammy in 2010. Before that we released two CDs on the Rounder label, Apres Faire le Boogie Woogie and Chers Amis (2000). Our first CD, Prends Courage, was released in 1995 on Arhoolie Records. Our second release, Chers Amis was on Rounder Records in 2000. All of these recordings include Cajun standards, riotous swingband numbers, blues, a cappella ballads, and fiddle duets, some slightly altered to reflect a woman's viewpoint.</p></div> <!-- end content -->
      </div> <!-- end main -->
      <div id="footer"><a href="mailto:lesyeuxnoirs@gmail.com">website by Sarah Savoy-Gonzales</a></div> <!-- end footer -->
    </div> <!-- end container -->
    </body>
    </html>
    Last edited by VIPStephan; 08-30-2012 at 03:44 PM. Reason: added code BB tags

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Please, please, please, if you post any code put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •