SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: css page layout

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    Maryland
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post css page layout

    How does one code a background image in css and call it in html code. I having problems displaying a background image pattern and a drop show effect image background to sit on top of the patterned image. Heres my code


    html:

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="file:///C|/Program%20Files/Macromedia/Dreamweaver%20UltraDev%204/Tutorial/UltraDev%20ASP%20tutorial/Compass%20Intranet/keytest.css" type="text/css">
    <style>
    A:link {text-decoration: none; color: #B4C480;}
    A:visited {text-decoration: none; color:#8EB3BE;}
    A:active {text-decoration: none}
    A:hover {text-decoration: underline; color: #B4C480;}
    </style>
    </head>

    <body class="keytest" text="#000000" leftmargin="0" topmargin="0">

    <table bgcolor="white" width="778" border="0" cellspacing="0" cellpadding="0" height="61">
    <tr>
    <td width="445" rowspan="3"><img src="file:///C|/Program%20Files/Macromedia/Dreamweaver%20UltraDev%204/Tutorial/UltraDev%20ASP%20tutorial/Compass%20Intranet/top-menu.jpg" width="201" height="59" align="absbottom"></td>
    <td width="333"><font size="-1" color="#B4C480"><a href="main.php">Main</a>
    &nbsp;&nbsp;|&nbsp; &nbsp;<a href="history.php">History</a>&nbsp;|&nbsp;
    <a href="perspective.php">Perspective</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="ourmission.php">Our
    Mission</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="contactus.php">Contact Us</a></font></td>
    </tr>
    <tr>
    <td width="333">&nbsp;</td>
    </tr>
    <tr>
    <td width="333" height="30">&nbsp;</td>
    </tr>
    </table>
    <table cellpadding="0" cellspacing="0" width="775" border="0">
    <tr>
    <td>
    <p><img src="file:///C|/Program%20Files/Macromedia/Dreamweaver%20UltraDev%204/Tutorial/UltraDev%20ASP%20tutorial/Compass%20Intranet/keys-banner.jpg" width="778" height="153"></p>
    <p>&nbsp;</p>
    </td>
    </tr>
    </table>
    <table width="779" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="582"><img src="file:///C|/Program%20Files/Macromedia/Dreamweaver%20UltraDev%204/Tutorial/UltraDev%20ASP%20tutorial/Compass%20Intranet/flowericon.jpg" width="47" height="20"><b>Our
    Model </b></td>
    <td width="197"><img src="file:///C|/Program%20Files/Macromedia/Dreamweaver%20UltraDev%204/Tutorial/UltraDev%20ASP%20tutorial/Compass%20Intranet/sidebox-header1.jpg" width="196" height="22"></td>
    </tr>
    </table>
    <table width="779" border="0" cellspacing="0" cellpadding="0" height="24">
    <tr>
    <td height="28" width="578">&nbsp;</td>
    <td height="28" width="201">&nbsp;</td>
    </tr>
    </table>

    </body>


    </html>



    CSS:

    .key-banner{ background-image: url(keys-banner.jpg)}.
    .main-bg { background-image: url(theactualkeyback.gif)}
    .keytest { background-image: url(key-back.jpg)}



    I cant seem to figure this out. What i am doing wrong?

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all your paths are messed up. Below,

    Code:
    <link rel="stylesheet" href="file:///C|/Program%20Files/Macromedia/Dreamweaver%20UltraDev%204/Tutorial/UltraDev%20ASP%20tutorial/Compass%20Intranet/keytest.css" type="text/css">
    The value for href Is not a correct path. Why on earth the css in under the program files is beyond me. Set it relative to a folder like C:\Project, within this folder, create a stylesheet and name it keytest.css and link like so:

    Code:
    <link rel="stylesheet" href="keytest.css" type="text/css">
    Clean those file issues up, they are in the <img> tags as well (with the same concept) and see if this helps. Plus move this out of your <head></head> tags and move into your external stylesheet keytest.css:

    Code:
    A:link {text-decoration: none; color: #B4C480;}
    A:visited {text-decoration: none; color:#8EB3BE;}
    A:active {text-decoration: none}
    A:hover {text-decoration: underline; color: #B4C480;}
    Also, change the A:link to a:link and change the rest respectivefully. This should help out. Post back if you have more issues.
    Ryan Butler

    Midwest Web Design

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    Maryland
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So once i do this i should be able to have the drop shadowed content on the patterned background?


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
  •