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 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    73
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Banner Links not floating and non fluid image.

    Hello,

    Sorry to bother you on a sunday however im at that crucial hit your screen phase lol. Anyway...

    I cannot get the banner links to float alongside each other you will see what i mean when you open site.

    Secondly i have jquery cycle it wont resize automatically when i drang the screen smaller or larger - only when its refreshed.

    Any help with either of these would be greatly appreciated.

    Enjoy your sunday dinner

    site www.bushcottages.co.uk/purecss.htm


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">




    <html>
    <head>

    <meta http-equiv="Content-Language" content="en-gb">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

    <title>Excelsior Academy Microsite</title>

    <meta name="description" content="Welcome to the Excelsior Academy Newcastle Microsite. This is a Site in development and there is no content currently hosted.">
    <meta name="keywords" content="Excelsior, Academy, Newcastle, School, UK, Denton, Scotswood">
    <meta name="author" content="Peter Devlin">

    <script type="text/javascript" src="jquery-1.3.js"></script>
    <script type="text/javascript" src="jquery.cycle.all.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
    });
    </script>

    <style type="text/css">

    #logos
    {
    width: 90%;
    height: 70px;
    background-color: #ffffff;
    margin-bottom: 15px;
    margin-left: 5%;
    background-image: url('logo.jpg');
    background-position: left top;
    background-repeat: no-repeat;
    }

    #banner
    {
    float: left;
    width: 90%;
    background-color: #000066;
    margin-bottom: 2px;
    margin-left: 5%;
    }

    #menu
    {
    float: left;
    width: 90%;
    background: #000066;
    margin-bottom: 2px;
    margin-left: 5%;
    font-size: 1em;
    text-align: center;
    white-space: nowrap;
    }

    #sidebar
    {
    float: left;
    width: 20%;
    height: 200px;
    display: inline;
    background-color: #013999;
    margin-bottom: 2px;
    margin-left: 5%;
    }

    #main
    {
    float: left;
    width : 70%;
    height: 200px;
    background-color: #000066;
    margin-left: 0px;
    margin-bottom: 2px;
    }

    #footer
    {
    width: 90%;
    height: 120px;
    background: #000066 url(banner.jpg) no-repeat top left;
    clear: both;
    margin-left: 5%;
    font-size: 0.8em;
    font-weight: bold;
    float: left;
    }

    #footerlt
    {
    float: left;
    width: 18%;
    }

    #footerltmid
    {
    float: left;
    width: 18%;

    }

    #footercenter
    {
    float: left;
    width: 18%;
    }

    #footerrtmid
    {
    float: left;
    width: 18%;
    }

    #footerrt
    {
    float: left;
    width: 18%;
    }

    #footer ul
    {
    float: left;
    display: inline;
    width: 18%;
    margin-left: 3%;
    margin-top: 2%;
    padding: 0px;
    white-space: nowrap;
    }

    #footer ul li
    {
    list-style-image: url('bullet.png');
    margin: 0px;
    padding: 2px, 15px;
    }

    #footer a
    {
    padding: 0px 10px;
    text-decoration: none;
    color: white;
    border: 0px solid #000066;
    }

    footer a:hover
    {
    border: 0px solid #d8d8d8;
    color: black;
    }

    #menu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: block;
    text-align: center;
    white-space: nowrap;
    }

    #menu li {
    display: inline;
    padding: 0px 0px;
    text-align: center;
    margin: 0px 0px 0px 0px;
    list-style: none;
    border: 0px solid #c8c8c8;
    }

    #menu a {
    padding: 0% 2%;
    text-decoration: none;
    color: white;
    border: 0px solid #000066;
    }

    #menu a:hover {
    background-color: white;
    border: 0px solid #d8d8d8;
    color: black;
    }

    /*#bannerimage
    {
    width: 100%;
    }*/

    /*imgmenu
    {
    width: 100%;
    left: 0;
    z-index:-1
    }*/

    body
    {
    background-color: #FFFFFF;
    font-family: "Calibri", Lucida Grande, Verdana, Arial, Sans-Serif;
    font-size: 1em;
    margin: 0px;
    padding: 2px;
    color: black;
    }

    p
    {
    text-align: right;
    }

    p.text1
    {
    font-family: "Calibri", Lucida Grande, Verdana, Arial, Sans-Serif;
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    font-size: .875em;
    color: white;
    }

    </style>

    </head>

    <body>
    <div id="logos">
    <p>News and Events&nbsp; |&nbsp; Directions&nbsp; |&nbsp; Contact Us</p>
    </div>

    <div id="menu">
    <li><a href="url">Home</a></li>
    <li><a href="url">VLE</a></li>
    <li><a href="url">Videos</a></li>
    <li><a href="url">Email</a></li>
    <li><a href="url">VPN</a></li>
    <li><a href="url">Podcast</a></li>
    <li><a href="url">Forum</a></li>
    <li><a href="url">Schools</a></li>
    <li><a href="url">Contact</a></li>
    </ul>
    </div>

    <div id="banner">
    <div class="slideshow">
    <img src="rotate5.jpg" alt="Views of Excelsior Academy" width="100%" align="left" height="190" />
    <img src="rotate4.jpg" alt="Views of Excelsior Academy" width="100%" align="left" height="190" />
    <img src="rotate3.jpg" alt="Views of Excelsior Academy" width="100%" align="left" height="190" />
    <img src="rotate2.jpg" alt="Views of Excelsior Academy" width="100%" align="left" height="190" />
    <img src="rotate.jpg" alt="Views of Excelsior Academy" width="100%" align="left" height="190" />
    </div>
    </div>

    <div id="sidebar">
    </div>

    <div id="main">
    <p class="text1">This is a first test for both text and margins. If this works the text will be white and aligned to the left. It will also have a 10px margin</p>
    </div>

    <div id="footer">
    <ul id="footerlt">
    <li><a href="url">Principal's Message</a></li>
    <li><a href="url">Hadrian School</a></li>
    <li><a href="url">Armstrong School</a></li>
    <li><a href="url">Milburn School</a></li>
    <li><a href="url">Jefferson School</a></li>
    <li><a href="url">6th Form College</a></li>
    </ul>
    </div>

    <div id="footer">
    <ul id="footerltmid">
    <li><a href="url">Inspection Report</a></li>
    <li><a href="url">School Uniform</a></li>
    <li><a href="url">Location</a></li>
    <li><a href="url">Term Dates</a></li>
    <li><a href="url">Contact</a></li>
    <li><a href="url">Where to find us</a></li>
    </ul>
    </div>

    <div id="footer">
    <ul id="footercenter">
    <li><a href="url">Key Staff</a></li>
    <li><a href="url">Governors</a></li>
    <li><a href="url">Specialisms</a></li>
    <li><a href="url">Recruitment</a></li>
    <li><a href="url">Prospectus</a></li>
    <li><a href="url">Disclaimer</a></li>
    </ul>
    </div>

    <div id="footer">
    <ul id="footerrtmid">
    <li><a href="url">Privacy Policy</a></li>
    <li><a href="url">Legal Information</a></li>
    <li><a href="url">Site Map</a></li>
    <li><a href="url">Latest News</a></li>
    <li><a href="url">Documents</a></li>
    <li><a href="url">Weather & Transport</a></li>
    </ul>
    </div>

    <div id="footer">
    <ul id="footerrt">
    <li><a href="url">Excelsior Academy</a></li>
    <li><a href="url">Denton Road</a></li>
    <li><a href="url">Newcastle</a></li>
    <li><a href="url">Tyne and Wear</a></li>
    <li><a href="url">NE15 6AF</a></li>
    <li><a href="url">Tel: 0191 2280000</a></li>
    </ul>
    </div>
    </div>

    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Fix the errors in your markup first, see http://validator.w3.org/check?verbos...%2Fpurecss.htm
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Good Morning far2many,
    Do you mean for the 5 ul's in the footer to float beside each other?
    If so, you need only one #footer for that.

    If there is something about your design that needs 5 footer elements, you can do that too. They cannot be the id footer though, would have to be a class since you can use an id only once.

    When you post a link there is no need to post the code also. When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Feb 2011
    Posts
    73
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Now no errors in CSS or HTML

    Thanks for looking ive almost got it but cant ge the bullet image to distance from the text etc.

    Any help or advice woud be great.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by far2many View Post
    Thanks for looking ive almost got it but cant ge the bullet image to distance from the text etc.

    Any help or advice woud be great.
    ul li {padding: 0 0 0 10px;} would move the text 10px from the bullet.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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