SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Background image Image wont stretch down....

    Here: http://www.stanmore.ac.uk/images/nav/tableless4a.html

    I want the picture of the students in the top left to stretch down to the blue bar at the bottom of the picture.

    I have a feeling the address line could be messing it up, although i could be wrong.

    Heres the CSS:

    html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
    font-size: 100%;
    letter-spacing: 1px;
    text-align: left;
    background: #FCFCFC;
    }

    #outer{
    min-height:100%;
    margin-bottom:-44px;
    height:auto;
    }
    * html #outer{height:100%;}
    #footer {
    width:100%;
    clear:both;
    height:30px;
    margin-top:0px;
    margin-bottom:0px;
    padding-top:3px;
    color: #FFFFFF;
    background: #183788 url(http://www.stanmore.ac.uk/images/nav/headerbg.jpg);
    text-align: right;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 70%;
    border-top: 10px solid #6699FF;
    }
    div#footer a:link {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    }
    div#footer a:visited {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    }
    div#footer a:active {
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#footer a:hover {
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    #clearfooter{clear:both;height:30px;}
    div p {margin-top:14px}
    #minHeight{float:left;width:0px;height:100%;margin-bottom:-32px;} /*safari wrapper thanks

    to Tim Connor*/* html #minHeight{margin-bottom:-30px;}
    div#menu {
    background: #FFFFFF url(http://www.stanmore.ac.uk/images/nav/ccbg.jpg);
    padding: 0px;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    text-align: left;
    border-top: 2px solid #999999;
    border-bottom: 2px solid #222222;
    }
    div#menulinks img {
    vertical-align: middle
    }
    div#menulinks {
    line-height:25px;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    width: 100%;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 86%;
    font-weight: bold;
    color: #6699FF;
    letter-spacing: -0.5px;
    }
    div#menulinks a:link {
    color: #6699FF;
    text-decoration: none;
    }
    div#menulinks a:visited {
    color: #6699FF;
    text-decoration: none;
    }
    div#menulinks a:active {
    text-decoration: none;
    border-bottom: 2px solid #6699FF;
    }
    div#menulinks a:hover {
    text-decoration: none;
    border-bottom: 2px solid #6699FF;
    }
    div#menulinks a:focus {
    text-decoration: none;
    border-bottom: 2px solid #6699FF;
    }

    abbr {
    cursor:help;
    border-bottom:1px dotted #FFFFFF;
    }

    img {
    border: none;
    }

    img.b23070 {
    width: 15em;
    height: 4.6em;
    }

    div#header {
    width: 100%;
    height: 5.5em;
    text-align: right;
    background: #183788 url(http://www.stanmore.ac.uk/images/nav/headerbg.jpg);
    position:relative;
    }

    div#header img {
    position:absolute;
    top:0px;
    right:0px;
    }

    div#header span {
    font-size: 67%;
    font-weight: bold;
    color: #FCFCFC;
    position:absolute;
    bottom:0;
    right:0;
    padding-bottom: 2px;
    }

    div#toplinks {

    height: 5.5em;
    left: 0px;
    top: 0px;
    text-align: left;
    background: url(http://www.stanmore.ac.uk/images/nav...r_students.jpg);
    background-repeat: no-repeat;
    font-size: 76%;
    font-weight: bold;
    color: #FCFCFC;
    }
    div#toplinks a:link {
    color: #FCFCFC;
    text-decoration: none;
    }
    div#toplinks a:visited {
    color: #FCFCFC;
    text-decoration: none;
    }
    div#toplinks a:active {
    color: #FCFCFC;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#toplinks a:hover {
    color: #FCFCFC;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#toplinks a:focus {
    color: #FCFCFC;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    form {
    padding: 0px;
    margin: 0px;
    }
    div#search {
    width: 100%;
    height: 1.8em;
    line-height:24px;
    padding-top: 0.2em;
    background: #6699FF url(http://www.stanmore.ac.uk/images/nav/searchbg.jpg) repeat-x ;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 88%;
    text-align: right;
    font-weight: bold;
    color: #FFFFFF;
    }

    #searchlinks {
    float:left;
    padding-top: 0.1em;
    font-weight: bold;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 95%;
    text-align: left;
    }

    #searchlinks span {
    border-bottom: 1px solid #FFFFFF;
    }

    #searchlinks a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    #searchlinks a:visited {
    color: #FFFFFF;
    text-decoration: none;
    }
    div#searchlinks a:active {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#searchlinks a:hover {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#searchlinks a:focus {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#cookiecrumbs {
    width: 100%;
    height: 1.4em;
    background: #FFFFFF url(http://www.stanmore.ac.uk/images/nav/ccbg.jpg);
    padding-top: 2px;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 75%;
    font-weight: bold;
    text-align: left;
    color: #686868;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #FFFFFF;
    }
    div#cookiecrumbs a:link {
    color: #6699FF;
    text-decoration: none;
    }
    div#cookiecrumbs a:visited {
    color: #6699FF;
    text-decoration: none;
    }
    div#cookiecrumbs a:active {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#cookiecrumbs a:hover {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#cookiecrumbs a:focus {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#titletext {
    text-align: left;
    font-size: 70px;
    color: #639EFF;
    letter-spacing: -4px;
    }

    div#sublinks {
    position: relative;
    left: 0px;
    top: -10px;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 75%;
    color: #686868;
    letter-spacing: -0.5px;
    }

    div#sublinks a:link {
    color: #6699FF;
    text-decoration: none;
    }
    div#sublinks a:visited {
    color: #6699FF;
    text-decoration: none;
    }
    div#sublinks a:active {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#sublinks a:hover {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#sublinks a:focus {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#sublinks span{
    color: #183788;
    font-weight: bold;
    }
    div#content {
    width: 100%;
    }

    div#mainpics {
    position: relative;
    top: 5px;
    margin-left: 20px;
    width: 200px;
    height: 150px;

    }

    div#maintext {
    position: relative;
    top: -165px;
    margin-left: 240px;
    text-align: left;
    font-size: 82%;
    color: #183788;
    padding: 4px;
    background: url(http://www.stanmore.ac.uk/images/nav/arrowbg.gif) right top;
    background-repeat: no-repeat;
    }

    Any ideas? Any help would be greatfully appriciated

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Instead of making the image of the students a background-image, you could use img tags and use:

    position: absolute:

    on the img tag, and for the address a margin-right slightly bigger than the image width.

    Or, you could use:

    float: left;

    on the img tag, and for the address a margin-top slightly less than the image height.

    Then, since the image in the upper right of the college name is a link, I think you have to deal with it separately.

  3. #3
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for replying,

    Could you explain a little more what you mean?

    Cheers

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just take the break out of the top links and set the height for the toplinks and take the height out of header.
    Code:
    div#header { 
    width: 100%;
    text-align: right;
    background: #183788 url(http://www.stanmore.ac.uk/images/nav/headerbg.jpg);
    position:relative;
    }
     
    div#toplinks {
    height: 7.5em;
    left: 0px;
    top: 0px; 
    text-align: left;
    background: url(http://www.stanmore.ac.uk/images/nav...r_students.jpg);
    background-repeat: no-repeat;
    font-size: 76%;
    font-weight: bold;
    color: #FCFCFC;
    }
    Code:
    	<div id="toplinks">&nbsp;[&nbsp;<a href="http://www.stanmore.ac.uk/accessibility/" accesskey="a" tabindex="2">Accessibility 
    	  Options</a>&nbsp;]</div>
    	<a href="http://www.stanmore.ac.uk/" tabindex="11"><img class="b23070" src="http://www.stanmore.ac.uk/images/nav/logo.gif" alt="Stanmore College Further Education Corporation"></a>
    	<span>Stanmore College, Elm Park, Stanmore, Middlesex, HA7 4BQ&nbsp;&nbsp;&nbsp;<abbr title="Telephone">Tel.</abbr> 
    	020 8420 7700 &nbsp;&nbsp;Minicom. 020 8420 7803&nbsp;&nbsp;</span></div>
    I think thats what you want

    paul

  5. #5
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As always, you are correct Paul.

    Cheers matey.

    Really appriciate it


Bookmarks

Posting Permissions

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