Jump to content

Website Help


Recommended Posts

I am creating a website for somebody, and I have run into a bit of an issue regarding the footer. In the design it is shown to be at the bottom of the page or the bottom of the viewport if the page is a short one. However, this website does not scale very well ( :/ ). I know how this is normally done. But for that system to work the footer text must appear at the bottom of the page. And, even though I have set a sansFooter content wrapper the footer seems to stick to the right of the content. I will give you guys a zip file of everything I have done so far, and I will keep at it, and see what we can come up with. In all honesty, it is probably something simple I have missed :) .

http://www.davidclarkwebdesign.com/0037_rowmote/Archive.zip

Link to comment
Share on other sites

Do you want this footer "test writing" area to be at the bottom of the page?

If so, here is what I changed.

stylesheet

@charset "UTF-8";
/* CSS Document */

body {
    background-color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    margin:0px;
    padding:0px;
    height:100%;
}

.container {
    position:relative;
    width:auto;
    min-height:100%;
}



.Header {
    background-image:url("img/headerbg.jpg");
    background-color:#ffffff;
    background-position:top;
    background-repeat:repeat-x;
    height:250px;
    min-width:1100px;
    width:inherit;
    margin:0px;
    padding-bottom:10px;
}

img.logo {
    height:250px;
    width:250px;
    float:left;
    margin-top:10px;
    margin-left:10px;
}

img.title {
    float:left;
    vertical-align:top;
    margin-left:25px;
    margin-top:40px;
}

.headerCaption {
    width:250px;
    height:77px;
    float:left;
    margin-left:15px;
    margin-top:40px;
}

.midSectionWrapper {
    padding-left:10px;
    margin-top:10px;
    min-width:1100px;
    width:inherit;
    position:relative;
    margin-bottom:120px;
}

.contentImage {
    padding-left:50px;
    height:580px;
    float:left;
}

.Content {
    background-image:url("img/contentbg.png");
    background-colour:transparent;
    background-position:center;
    background-repeat:no-repeat;
    width:410px;
    min-width:410px;
    max-width:410px;
    min-height:580px;
    margin-left:20px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-top:10px;
    float:left;
}

.contentContainer {
    padding:10px;
}
.sideBar {
    background-image:url(img/logo_highlight.png);
    background-position:top;
    background-repeat:no-repeat;
    background-colour:transparent;
    padding-top:125px;
    width:250px;
    min-width:250px;
    max-width:250px;
    min-height:100%;
    float:left;
}

.sideBarItem {
    width:250px;
    min-width:250px;
    max-width:250px;
    height:45px;
    min-height:45px;
    max-height:45px;
    background-color:#fafafa;
    line-height:45px;
    color:#cccccc;
    text-transform:uppercase;
    font-size:24px;
}

.sideBarItem:hover {
    width:250px;
    min-width:250px;
    max-width:250px;
    height:45px;
    min-height:45px;
    max-height:45px;
    position:relative;
    left:10px;
    background-color:#cccccc;
    line-height:45px;
    color:#ffffff;
    text-transform:uppercase;
    font-size:24px;
}

.sideBarItemSelect {
    width:250px;
    min-width:250px;
    max-width:250px;
    height:45px;
    min-height:45px;
    max-height:45px;
    position:relative;
    left:20px;
    background-color:#cccccc;
    line-height:45px;
    color:#ffffff;
    text-transform:uppercase;
    font-size:24px;
}


.contentSansFooter {
    height:100%;
    width:inherit;
    position:relative;
    float:left;
}

.Footer {
    height:100px;
    background-color:#cccccc;
    width:100%;
    min-width:1100px;
    position:relative;
    bottom:0px;
    float left;
}

span.headerCaptionText {
    color:#999999;
    font-size:24px;
}

span.normalText {
    color:#666666;
    font-size:12px;
}

span.footerText {
    color:#ffffff;
    font-size:12px;
}

span.footerText span.DavidClarkCaption {
    position:absolute;
    bottom:5px;
    left:5px;
}

index.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rowmote Home - Rowmote</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>
<div class="container">

<div class="Header">
    <div align="left"><img src="img/logo.png" class="logo"/></div>
    
    <div>
        <div>
            <div style="float:left;">
                <img src="img/title.png" class="title" float="left"/>
            </div>
            <div height="77" width="250" class="headerCaption">
                <span class="headerCaptionText">The complete <strong>remote control</strong> solution for your <strong>Mac</strong></span>
            </div>
            <a href="http://click.linksynergy.com/fs-bin/stat?id=gpYxc2PNMKc&offerid=146261&type=3&subid=0&tmpid=1826&RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D300265786%2526mt%253D8%2526partnerId%253D30"><img src="img/AvailableontheiPhoneAppStore.png" style="position:absolute;top:40px;right:10px;border:0px;"/></a>
        </div>
        
    </div>
    <center>
    <div class="Menu">
            <ul>
                <li><img src="img/menu_cap.png"></li>
                <li><a class="menuLink" href="#">ROWMOTE</a></li>
                <li><img src="img/menu0.png" /></li>
                <li><a class="menuLink" href="#">SUPPORT</a></li>
                <li><img src="img/menu0.png" /></li>
                <li><a class="menuLink" href="#">CONTACT</a></li>
                <li><img src="img/menu0.png" /></li>
                <li><a class="menuLink" href="#">ABOUT THE DEVELOPER</a></li>
                <li><img src="img/menu_cap2.png" /></li>
            </ul>
  </div>
  </center>
</div>
<div class="midSectionWrapper" >
<div class="sideBar" style="float:left;">
    <div class="sideBarItemSelect"><center>rowmote</center></div>
    <div class="sideBarItem"><center>features</center></div>
    <div class="sideBarItem"><center>requirements</center></div>
    <div class="sideBarItem"><center>reviews</center></div>
    <div class="sideBarItem"><center>download</center></div>
</div>
<img class="contentImage" src="img/phone-main.png" />
<div class="Content">
<div class="contentContainer">
<span class="normalText">
<strong>Why should you carry a second device just to control your computer?<p/>
Why should you need line of sight to do so?</strong><p/>
You love the remote control which came with your Mac - so simple yet elegant, with easy control of Front Row, iTunes, Quicktime, DVD Player, Keynote, and more.  You carry your iPhone or iPod Touch wherever you go...<p/>
<strong>Enter Rowmote!</strong>
</span>
</div>
</div>
</div>
</div>
<div class="contentSansFooter">
<div class="Footer">
test writing
</div>
</div>
</body>
</html>

You should also go back and add a fixed width for the ul/li menu elements so the highlighted menu is the same width for each button, not jagged like you have now.The side bar elemnts are not aligned. At first I thought iut was the ul/li menu, but I went back and looked at it, its the class="sideBar" area where the highlighted button does not line up with the ones below it.

Link to comment
Share on other sites

heh, digip, its meant do that (sideBarItemSelect {position:relative;left:10px;}), <- or something like that. :P, but what you did, whatever it was, it worked :P, I don't quite understand how, but thanks :) saved me a few more hours of pain.

Link to comment
Share on other sites

I did a float left, relative. Absolute positioning with floats would move it on top of other objects and then up the page vertically. Relative allows things in order above it to have their space, and it uses the remaining space, floated left up unto the object above it. I also moved the div in the html file down to the bottom of the page, since its a footer, it would have shown up higher in the page where you had it located. You can adjust the width of the footer to span the width of the page, but I gues syou want it set to 1100px.

The part about the side bar I was saying, when you highlight one of th emenu items, the grey box is not aligned with the item above it that is always highlighted, but if thats what you are going for, then ok. :)

Link to comment
Share on other sites

I think I just deleted the contentSansFooter class from index.html and kept your edits to the Footer class and it all seems to work including flexible width for everything (up til 1100px). Seems to be a classic case of over engineering on my part :P, but its all good now. Evan shall be pleased :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...