Jump to content
Killersites Forums

Zad

Member
  • Content Count

    27
  • Joined

  • Last visited

Posts posted by Zad

  1. I pasted your code into this page - and I see several problems.

    • You seem to have more input fields than you have labels
    • The quality of your image is very poor
    • Your Message textbox is 50 cols wide, your image is 499px wide, and the two of them do not have room next to each other in a 900px container (I reduced the column size to make them fit) (instead of your table, I created a wrapper div that's 900px wide)
    • You also should not be using <br> tags to create space. You should use CSS - for example: #wrapper p {margin: 0 15px;}
    • The center tag you're using for your submit button is deprecated. Instead, again, use CSS to center;
    • I added a margin top to the image to direct it towards the bottom of your form, but until the rest of the issues are cleared up, it's hard to see how big that margin will need to be

    Hope this helps - let me know if you have any questions about any of it.

     

    I found the contact form online - the extra field was added as a "honeypot" to foil spambots (that's why the top field was hidden in the original code). The image is just a placeholder; it's not intended as the final version.

     

    Thanks for the corrections on the width, and the break & center tags (I'm used to older HTML - am still learning CSS). I actually wanted to keep the image on the left, but with your code I should be able to puzzle it all out.

     

    Zad

  2. Why are you even using a table? Just put your form inside a division (as you have it) and float your image. Tables aren't meant to be used for layout.

     

    Do you have a link? It's easier (for me, anyway) to help more specifically when we can see the entire page.

     

    Hi Andrea,

     

    I appreciate your feedback. No, I don't have a link to anything yet - the code I submitted is all there is at the moment. Can you give me an example of how to float the image with the form in a div?

     

    Thanks,

    Zad

  3. I'm trying to line up an image and contact form side-by-side using a table. I can't seem to get the bottom of the image to line up vertically with the bottom of the form's message window, and also have it look the same in IE, Firefox, and Chrome.

     

    Thanks for your time...

     

    <html>
    
    <head>
    <style type='text/css'>
       .hidden { 
    display: none; 
    }
    </style>
    </head>
    
    <body>
    
    <table width="900"  border="0" align="center" cellspacing="10">
     <tr>
       <td width="499" height=""><div align="center"><img src="http://farm9.staticflickr.com/8454/8019803735_fc51193fc7.jpg" width="499" height="408" /><span class="style2">Francois taking no prisoners (example image courtesy sim.partners - Flickr)</span></div></td>
       <td width="325">
    
    <div align="center">
    
    <!-- Form Start -->
    <form action="#" method="post">
    <span class="hidden"><input name="text" type="text" maxlength="70" size="47" /></span>
    <p align="left">Your Name:</p>
    <div align="left">
     <input name="name" type="text" maxlength="70" size="47" />
     <br />
     <br />
    </div>
    <p align="left">Your Email Address:</p>
    <div align="left">
     <input name="email" type="text" maxlength="70" size="47" />
     <br />
     <br />
    </div>
    <p align="left">Select a Contact:</p>
    <div align="left">
     <select name="whd">
       <option selected="selected" value="1">Recipient 1</option>
       <option value="2">Recipient 2</option>
       <option value="3">Recipient 3</opt></option>
       <option value="4">Recipient 4</opt></option>
       <option value="5">Recipient 5</opt></option>
       <option value="6">Recipient 6</opt></option>
       <option value="7">Recipient 7</opt></option>
       <option value="8">Recipient 8</opt></option>
       <option value="9">Recipient 9</opt></option>
       <option value="10">Recipient 10</opt></option>
       <option value="11">Recipient 11</opt></option>
       <option value="12">Recipient 12</opt></option>
       <option value="13">Recipient 13</opt></option>
     </select>
     <br />
     <br />
    </div>
    <p align="left">Message:</p>
    <div align="left">
       <textarea name="message" cols="50" rows="13"></textarea>
       <!--cols="56"-->
       <br />
       <br />
    </div>
    <center><input type="submit" value=" Send Message " /></center>
    </form>
    <!-- Form End -->
    
    </div>
    </td>
     </tr>
    </table>
    
    </body>
    
    </html>
    

  4. I started to use this template but discovered that some of the CSS doesn't work in IE7 (as can be seen by pasting the URL into NetRenderer).

     

    In IE7, most of the linked text doesn't show applied styles - only plain blue underlined HTML links are displayed. This doesn't happen in Firefox, Chrome, and newer versions of IE. The CSS appears to validate OK. Does anyone know what's wrong?...

     

    Here's the CSS:

     

    @import  url(http://fonts.googleapis.com/css?family=Vollkorn);
    @import  url(http://fonts.googleapis.com/css?family=Lobster);
    
    * {
       padding: 0;
       margin: 0;
    }
    
    body {
       background: #242424;
       font: 14px Georgia, "Times New Roman", Times, serif;
       color: #242424;
    }
    
    #topbanner {
       height: 80px;
       border-bottom: solid 1px #f2efe9;
    }
    
    #pagewrap {
       background: url(images/bg.jpg) repeat;
       padding-top: 10px;
       padding-bottom: 10px;
    }
    
    #wrap {
       width: 1010px;
       margin: auto;
    }
    
    .clear {
       clear: both;
    }
    
    #homeheader {
       height: 350px;
    }
    
    #mainimg {
       width: 700px;
       height: 330px;
       padding: 10px;
       float: left;
       border: solid 1px #ac9f87;
    }
    
    #rightboxes {
       float: right;
       width: 272px;
       float: right;
    }
    
    #rightboxes .box1 {
       background: url(images/rightimg1.jpg) 10px 10px no-repeat;
       width: 250px;
       height: 90px;
       padding: 10px;
       margin-bottom: 8px;
       border: solid 1px #ac9f87;
    }
    
    #rightboxes .box2 {
       background: url(images/rightimg2.jpg) 10px 10px no-repeat;
       width: 250px;
       height: 90px;
       padding: 10px;
       margin-bottom: 8px;
       border: solid 1px #ac9f87;
    }
    
    #rightboxes .box3 {
       background: url(images/rightimg3.jpg) 10px 10px no-repeat;
       width: 250px;
       height: 90px;
       padding: 10px;
       margin-bottom: 0;
       border: solid 1px #ac9f87;
    }
    
    #maincontent {
       padding: 10px 10px 0;
       font-family: Vollkorn !important;
    }
    
    #threecol .col1 {
       width: 300px;
       float: left;
       padding: 10px;
    }
    
    #threecol .col2 {
       width: 300px;
       float: right;
       padding: 10px;
    }
    
    #threecol .col3 {
       padding: 10px;
       margin: 0 335px;
    }
    
    #maincontent h2 {
       font: bold 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
       margin-bottom: 10px;
       text-shadow: #fff 1px 1px 1px;
    }
    
    #maincontent p {
       font: normal 14px Vollkorn;
       line-height: 22px;
    }
    
    #topbanner .container {
       width: 1010px;
       margin: auto;
    }
    
    #sitename {
       width: 250px;
       float: left;
       display: block;
       color: #f3ebd9;
       font: normal 32px Lobster;
       padding: 13px 0 0 10px;
       line-height: 32px;
    }
    
    #sitename span {
       display: block;
       font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif !important;
       line-height: 17px !important;
       color: #999;
       clear: both;
    }
    
    #sitename a {
       color: #f3ebd9;
       text-decoration: none;
       display: block;
       float: left;
       padding: 0 20px 0 0;
    }
    
    #sitename a:hover {
       background: url(images/homelinkicon.gif) right 8px no-repeat;
    }
    
    #mainnav {
       float: right;
       float: right;
       height: 80px;
       color: #ccc;
       min-width: 600px;
    }
    
    #mainnav ul {
       list-style: none;
    }
    
    #mainnav li {
       display: inline;
       font: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    
    #mainnav li a {
       color: #827b6e;
       text-decoration: none;
       padding: 25px 30px 0;
       height: 55px;
       display: block;
       float: left;
    }
    
    #mainnav li a span {
       display: block;
       font: normal 14px Vollkorn, Georgia, "Times New Roman", Times, serif;
       color: #6c675e;
       text-transform: capitalize;
    }
    
    #mainnav li a:hover {
       color: #f3ebd9;
    }
    
    #mainnav li a:hover span {
       color: #827b6e !important;
    }
    
    #mainnav li.active a {
       color: #f3ebd9;
       background: url(images/menuactive.gif) center bottom no-repeat;
       text-shadow: #222 1px 1px 1px;
    }
    
    #page {
       width: 640px;
       float: left;
       padding: 0 10px 10px;
       border-right: solid 1px #ac9f87;
    }
    
    #sidebar {
       width: 300px;
       float: right;
       padding: 10px;
    }
    
    .bordered {
       border-bottom: solid 1px #ac9f87;
    }
    
    .subhead {
       font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif !important;
       background: url(images/subheadh2bg.jpg) left bottom no-repeat;
       padding: 8px 10px 4px 25px;
       height: 20px;
       color: #b3a893;
       margin: 0 0 25px -10px !important;
    }
    
    .rotate {
       -moz-transform: rotate(-1.5deg);
    /* FF3.5+ */
       -o-transform: rotate(-1.5deg);
    /* Opera 10.5 */
       -webkit-transform: rotate(-1.5deg);
    /* Saf3.1+, Chrome */
       filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.9996573249755573,M12=0.02617694830787315,M21=-0.02617694830787315,M22=0.9996573249755573);
    /* IE6,IE7 */
       -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573)";
    /* IE8 */
       zoom: 1;
    }
    
    .post p {
       margin-bottom: 15px;
    }
    
    .posthead {
       margin-bottom: 15px;
    }
    
    .posthead p,.posthead h3 {
       margin-bottom: 0 !important;
    }
    
    .posthead .date {
       font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif !important;
       color: #8b7f6c;
    }
    
    .post .posthead h3 {
       display: block;
       font: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
       color: #c83d26;
       text-shadow: #fff 1px 1px 1px;
    }
    
    .posthead h3 a {
       color: #222 !important;
       text-decoration: none;
    }
    
    .posthead h3 a:hover {
       background: #f5eee2;
    }
    
    .posthead .postmeta {
       display: block;
       font: italic 11px "Trebuchet MS", Arial, Helvetica, sans-serif !important;
    }
    
    #maincontent a {
       color: #222;
    }
    
    #maincontent a:visited,#maincontent a:active {
       color: #333;
    }
    
    #maincontent a:hover {
       color: #000;
       text-decoration: none;
    }
    
    .post {
       background: url(images/subheadbg.gif) left bottom repeat-x;
       padding-bottom: 10px;
       margin-bottom: 10px;
       padding-top: 10px;
    }
    
    #sidebar ul {
       list-style: none;
       display: block;
       margin-bottom: 15px;
    }
    
    #sidebar ul li {
       display: block;
    }
    
    #sidebar .menu {
       font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    
    #sidebar ul.menu li {
       display: block;
       height: 37px;
       background: url(images/sidebarbullet.jpg) 3px 10px no-repeat;
    }
    
    #sidebar ul.menu li:hover {
       background: url(images/sidebarbulleth.jpg) 1px 8px no-repeat;
    }
    
    #sidebar ul.menu li a {
       display: block;
       height: 30px;
       padding: 5px 5px 0 35px;
       background: url(images/subheadbg.gif) left bottom repeat-x;
       text-decoration: none;
       text-shadow: #fff 1px 1px 1px;
    }
    
    #sidebar ul.menu li a:hover {
       color: #000;
    }
    
    #sidebar .posts li {
       display: block;
       padding: 5px 10px 8px 0;
       background: url(images/subheadbg.gif) left bottom repeat-x;
    }
    
    #sidebar .posts li span {
       display: block;
       font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
       color: #222;
       padding: 3px 0 0 35px;
    }
    
    #sidebar .posts a {
       display: block;
       font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
       text-decoration: none;
       background: url(images/starblt.gif) 3px 2px no-repeat;
       height: 12px;
       padding: 3px 0 7px 35px;
    }
    
    #sidebar .posts a:visited,#sidebar .posts a:active {
       text-decoration: none;
    }
    
    #sidebar .posts a:hover {
       color: #000 !important;
       background: url(images/starblt2.gif) 3px 1px no-repeat;
    }
    
    #sidebar h2 {
       display: block;
       font: bold 18px Vollkorn;
       padding: 5px;
       border-bottom: dashed 1px #c8bead;
    }
    
    #bottom {
       padding: 10px 0 0;
       color: #c2b7a2;
       border-top: solid 2px #111;
    }
    
    #bottom a {
       color: #ece6db;
    }
    
    #btmcontent {
       width: 1010px;
       margin: auto;
       padding-bottom: 25px;
    }
    
    #footer {
       padding: 40px;
       text-align: center;
       background: #111;
       border-top: solid 1px #000;
    }
    
    #bottom .col1,#bottom .col2 {
       width: 30%;
    }
    
    #bottom .col1 {
       float: left;
    }
    
    #bottom .col2 {
       float: right;
    }
    
    #bottom .col3 {
       margin: 0 34%;
    }
    
    #bottom .col1,#bottom .col2,#bottom .col3 {
       padding: 10px;
    }
    
    #bottom h2 {
       display: block;
       font: normal 22px Lobster !important;
       text-shadow: #222 1px 1px 1px;
       color: #e0d8c9 !important;
       margin-bottom: 15px;
    }
    
    #bottom p {
       font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
       line-height: 16px;
       margin-bottom: 15px;
    }
    
    #bottom ul {
       list-style: none;
       font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
       text-transform: capitalize;
    }
    
    #btmcontent ul {
       display: block;
    }
    
    #btmcontent li {
       display: block;
       height: 27px;
       background: url(images/btmlibg.gif) left bottom repeat-x;
    }
    
    #btmcontent li a {
       display: block;
       height: 20px;
       padding: 5px 10px 0 40px;
       background: url(images/btmblt.gif) 8px 8px no-repeat;
       text-decoration: none;
    }
    
    #btmcontent li a:hover {
       text-decoration: underline !important;
    }
    
    #footer p {
       font: normal 14px Lobster;
       margin-bottom: 5px !important;
    }
    
    #footer span {
       display: block;
       font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    
    #pageheader {
       background: url(images/normalheader.jpg) 10px 10px no-repeat;
       height: 200px;
       padding: 10px;
       border: solid 1px #ac9f87;
       margin-bottom: 10px;
    }
    
    .post ul {
       list-style: square;
       padding: 0 15px 0 35px;
       margin-bottom: 15px;
       line-height: 18px;
    }
    
    .post ol {
       padding: 0 15px 0 35px;
       margin-bottom: 15px;
       line-height: 18px;
    }
    
    .post ul,.post ol {
       font-family: Vollkorn;
    }
    
    .post h4 {
       display: block;
       font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
       color: #333;
       margin-bottom: 15px;
    }
    
    .alignleft {
       float: left;
    }
    
    .alignright {
       float: right;
    }
    
    .post img.alignleft,.post img.alignright {
       display: block;
       padding: 10px;
       border: solid 1px #ac9f87;
       margin: 0 15px;
    }
    
    blockquote p {
       margin-bottom: 0 !important;
    }
    
    blockquote {
       margin: 10px;
       border: solid 1px #ac9f87;
       padding: 10px 10px 10px 55px;
       background: url(images/bloqckquote.gif) 10px 10px no-repeat;
       display: block;
    }
    
    blockquote cite {
       font: bold italic 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
       color: #111;
    }
    
    blockquote.alignleft {
       float: left;
       width: 200px;
    }
    
    blockquote.alignright {
       float: right;
       width: 200px;
    }
    
    .post code {
       font: 12px "Courier New", Courier, monospace;
       white-space: pre !important;
       padding: 10px;
       margin: 10px;
       color: #fff !important;
       background: #706a5f;
       display: block;
    }
    
    form {
       font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    
    .form2 {
       padding: 10px;
    }
    
    .formpadding {
       padding: 10px;
    }
    
    .formstyle {
       padding: 15px 0;
    }
    
    .formstyle label {
       display: block;
       padding: 3px 3px 3px 0;
    }
    
    .textfield input,.textfield textarea {
       display: block;
       padding: 3px;
       border: solid 1px #ac9f87;
       background: #f5efe3;
    }
    
    .textfield input:hover,.textfield textarea:hover {
       background: #fff;
    }
    
    .textfield input:focus,.textfield textarea:focus {
       background: #fff;
       border: solid 1px #222;
    }
    
    .textfield input {
       width: 98%;
    }
    
    .textfield textarea {
       width: 98%;
    }
    
    .fields {
       margin-bottom: 5px;
    }
    
    .infobox {
       width: 38%;
       float: right;
       padding-top: 25px;
       font-size: 10px;
       margin-bottom: 5px;
    }
    
    .fieldsets {
       padding: 15px;
       border: solid 1px #ac9f87;
       margin: 5px 10px 20px;
    }
    
    .fieldsets h3 {
       display: block;
       font: bold italic 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
       color: #222;
       background: url(images/bg.jpg) repeat;
       float: left;
       padding: 3px 8px;
       margin: -25px 0 0 5px;
    }
    
    .fieldsets .info {
       font-size: 10px;
       color: #555;
       font-style: italic;
       margin-bottom: 5px !important;
    }
    
    .fields .selectmenu {
       width: 280px;
       display: block;
       padding: 3px;
       border: solid 1px #ac9f87;
    }
    
    .fields .smallselect {
       padding: 3px;
       border: solid 1px #ac9f87;
    }
    
    .widefields {
       padding: 3px;
       margin-bottom: 5px;
    }
    
    .textadblock2 {
       padding: 5px;
       background: #ffc;
       border: solid 1px #666;
       margin-bottom: 8px;
       margin-right: 35px;
    }
    
    .btn1 {
       background: #706a5f;
       padding: 8px 10px;
       text-align: center;
       font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
       color: #efe9df;
       border: none;
    }
    
    #comments h2 {
       background: #c7bdaa;
       padding: 10px;
       font-size: 18px !important;
    }
    
    #comments .entry {
       padding: 10px;
       background: #c7bdaa;
       margin-bottom: 10px;
    }
    
    #comments .entry p {
       display: block;
       margin-bottom: 8px !important;
    }
    
    #comments .entry .avt {
       float: left;
       width: 55px;
       margin-right: 10px;
    }
    
    .avt img {
       background: #706a5f;
       padding: 5px;
    }
    
    #comments .entry .con,#comments .entry .name,#comments .entry .date {
       margin-left: 70px;
       font: italic 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    
    #comments .entry .con blockquote {
    }
    
    h3#respond {
       color: #fff;
       font: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
       margin-bottom: 15px;
    }
    
    .comments-form {
       background: #706a5f;
       padding: 10px;
    }
    
    .formid,.formuri,.formemail {
       padding: 3px;
       height: 25px;
       background: #f2ebdd;
       border: solid 1px #1C1B17;
       width: 250px;
       color: #999;
       font-size: 16px;
    }
    
    .comments-form label {
       padding-left: 15px;
       color: #FFC;
    }
    
    .comments-form .button {
       display: block;
       background: #333;
       border: none;
       padding: 8px;
       font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
       color: #fff;
    }
    
    .comments-form textarea {
       padding: 3px;
       background: #f2ebdd;
       border: solid 1px #1C1B17;
       color: #999;
       font-size: 16px;
    }
    
    .postheader {
       margin-bottom: 18px;
    }
    
    .widepage {
       width: 970px !important;
       border: none !important;
    }
    
    #rightboxes div p {
       display: block;
       padding: 55px 20px 0 0;
       font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    
    #rightboxes div a {
       color: #fff;
       text-decoration: none;
    }
    
    #rightboxes div p a span {
       background: #000;
       padding: 3px;
       font-size: 14px;
    }
    
    #rightboxes div p a:hover {
       color: #ffc;
    }

     

    ...Thanks

  5. Thanks for responding...

     

    I would use the config files if I knew how to reference them from the player html, but there are no instructions on the player site for that.

     

    The "documentation" shows an example HTML file that does not represent what the generator actually spits out. Since I can't extrapolate from the example as to how to modify the generated code, it's of no use.

     

    From the parameter descriptions, it looks like I need to add one or more "|" characters somewhere in each MP3's URL in the player's HTML code to display titles. If I could determine where they go, I think I could get it to work.

  6. I'm trying to use the online generator at http://flash-mp3-player.net/players/multi/generator/ to create an MP3 player for a website. I can get it to work, but I have to guess at things because there are basically NO directions, and a thorough Google search turns up nothing in the way of a useful generic tutorial.

     

    The main problem I'm having is how to get the player to show the actual song title instead of the MP3's URL.

     

    Also, I'm not sure what the "Configuration XML" and "Configuration Text" files are for, or how to implement them. Do I even need either one? Except for the song title issue, the player seems to work fine on it's own.

     

    Thanks :)

  7. First, thanks so much for your help PB1UK. I tried posting on another "beginning CSS" forum several days ago and no one responded :(

     

    I'm still having trouble getting this to work. Here's my actual code - sorry it's such a mess; I'm still trying to make the transition from html to css;

     

    Index page:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Matt's Place</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex,nofollow" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    
    <style type="text/css">
    a:link {color:#E2E2E2; font-family:Impact; font-size: 23px; font-weight: 100; line-height: .5; letter-spacing: .25px; text-decoration: none;}
    a:visited {color:#E2E2E2; font-family:Impact; font-size: 23px; font-weight: 100; line-height: .5; letter-spacing: .25px; text-decoration: none;}
    a:hover {color:#708090; font-family:Impact; font-size: 23px; font-weight: 100; line-height: .5; letter-spacing: .25px; text-decoration: none;}
    a:active {color:#E2E2E2; font-family:Impact; font-size: 23px; font-weight: 100; line-height: .5; letter-spacing: .25px; text-decoration: none;}
    </style>
    
    <script type="text/javascript">
    var revert = new Array();
    var inames = new Array('nav_home-','nav_contact-','nav_bio-','nav_clients-','nav_listen-','nav_studio-');
    
    // Preload
    if (document.images) {
     var swap = new Array();
     for(i=0; i< inames.length; i++) {
       swap[i] = new Image();
       swap[i].src = "images/"+inames[i]+"2.jpg";
     }
    }
    
    function over(num) {
     if(document.images) {
       revert[num] = document.images[inames[num]].src;
       document.images[inames[num]].src = swap[num].src;
     }
    }
    function out(num) {
     if(document.images) document.images[inames[num]].src = revert[num];
    }
    </script>
    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
    <script type="text/javascript" src="fadeslideshow.js">
    //<![CDATA[
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    //]]>
    </script>
    <script type="text/javascript">
    //<![CDATA[
    
    var mygallery=new fadeSlideShow({
           wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
           dimensions: [420, 260], //width/height of gallery in pixels. Should reflect dimensions of largest image
           imagearray: [
                   ["images/record--351_420x260b.jpg"],
                   ["images/gtr_1_420x260b.jpg"],
                   ["images/at_piano_420x260b.jpg"],
                   ["images/u87_420x260b.jpg"],
           ["images/gtr+caseb.jpg"] //--no trailing comma after very last image element!
           ],
           displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
           persist: false, //remember last viewed slide and recall within same session?
           fadeduration: 1500, //transition duration (milliseconds)
           descreveal: "none",
           togglerid: ""
    })
    
    </script>
    
    </head>
    
    <body>
    <!-- Begin Wrapper -->
    <div id="wrapper">
    
    <!--Layout courtesy <http://www.free-css.com/free-css-layouts.php> Free CSS Layouts -->
    
    <!-- Begin Left Column -->
    <div id="leftcolumn"><img src="images/at_bd_insert.jpg" width="224" height="295" alt="" /><br />
    
    <!-- Begin Menu -->
    <div id="nav"><a href="index.html"><img src="images/nav_home-1.jpg" name="nav_home-" onMouseOver="over(0)" onMouseOut="out(0)" border="0"></a>
    <br />
    <a href="bio.html"><img src="images/nav_bio-1.jpg" name="nav_bio-" onMouseOver="over(2)" onMouseOut="out(2)" border="0"></a>
    <br />
    <a href="clients.html"><img src="images/nav_clients-1.jpg" name="nav_clients-" onMouseOver="over(3)" onMouseOut="out(3)" border="0"></a>
    <br />
    <a href="listen.html"><img src="images/nav_listen-1.jpg" name="nav_listen-" onMouseOver="over(4)" onMouseOut="out(4)" border="0"></a>
    <br />
    <a href="studio.html"><img src="images/nav_studio-1.jpg" name="nav_studio-" onMouseOver="over(5)" onMouseOut="out(5)" border="0"></a>
    <br />
    <a href="contact.html"><img src="images/nav_contact-1.jpg" name="nav_contact-" onMouseOver="over(1)" onMouseOut="out(1)" border="0"></a><br />
    </div>
    <!-- End Menu -->
    
    </div>
    <!-- End Left Column -->
    
    <!-- Begin Right Column -->
    <div id="rightcolumn">
    <h1>Matt's Place</h1>
    <br />
    <h2>Mauris Malesuada Erat In Ipsum</h2>
    <br />
    <br />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget risus at ligula ultrices commodo. Curabitur porttitor pellentesque urna eu varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam sed elit ante, eu tempus elit. Suspendisse dictum consequat sapien quis ornare. Proin metus justo ferme.</p>
    <br />
    <p>Integer elit eros, tempus in tincidunt lobortis, pulvinar id est. Nullam accumsan lorem in erat semper at pulvinar augue suscipit. Quisque dapibus euismod risus, in convallis erat pellentesque non. Fusce semper nunc nulla, sit amet accumsan velit. Suspendisse potenti. Proin aliquet iaculis dolor, a lobortis libero mattis eu. Suspendisse convallis pulvinar orci, at sollicitudin est hendrerit at. Maecenas ligula nunc, viverra eu interdum eu, egestas eget diam. Phasellus in quam at massa lobortis luctus at tortor Integer elit eros.</p>
    <br />
    
    <!-- Begin Slideshow -->
    <div id="fadeshow1"></div>
    <!-- End Slideshow -->
    </div>
    
    <!-- End Right Column -->
    
    <!-- Begin Footer -->
    <div id="footer"> <p style="text-align: center;">Copyright © 2011 Matt's Place</p></div> -->
    <!-- End Footer -->
    
    <!-- End Wrapper --></div>
    </body>
    </html>
    
    

    CSS:

     

    * { padding: 0; margin: 0; }
    
    body {
    background:#000000;
    }
    
    #wrapper { 
    margin: 0 auto;
    width: 922px;
    position: relative;
    }
    
    p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #ffffff;
    line-height: 1.5;
    letter-spacing: .25px;
    text-align: left;
    }
    
    h1 {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 20px;
       font-weight: bold;
       color: #ffffff;
       letter-spacing: 1.4px;
    text-align: center;
    }
    
    h2 {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 14px;
       font-weight: normal;
       color: #ffffff;
    letter-spacing: 1.2px;
    text-align: center;
    }
    
    #leftcolumn {
    margin: 0px 0px 0px 0px;
    padding: 10px;
    height: 700px;
    width: 250px;
    float: left;
    }
    
    #nav {
    margin: 25px 0px 0px 30px;
    padding: 10px;
    width: 250px;
    float: left;
    }
    
    #rightcolumn {
    float: right;
    position: relative;
    background-image: url("images/jh-24_stretch2.jpg");
    background-repeat: no-repeat;
    background-position: 14px 20px;
    margin: 0px 0px 0px 0px;
    padding: 10px;
    height: 700px;
    width: 600px; 
    }
    
    #rightcolumn-2 { 
    float: right;
    position: relative;
    background:#000000;
    margin: -100px 0px 0px 0px;
    padding: 10px;
    height: 700px;
    width: 600px;
    }
    
    #fadeshow1 {
    border: 9px double #999;
    position:absolute; left:75px; top:15px; width:422px; height:262px;
    }
    
    #footer { 
    width: 900px;
    clear: both;
    color: #FFFFFF;
    background-color:#000000;
    margin: 0px 0px 10px 0px;
    padding: 10px;
    }
    

  8. I'm creating a site for a friend. The basic 2 column layout is shown in the attachment below. I would like to have the slideshow in the right column remain in exactly the same place from page to page. If the top paragraph length is changed (by removing or adding a line), it causes the slideshow to move up or down. How can I use CSS to prevent this?

     

    Thanks!

    post-15602-028641600 1299868119_thumb.gif

  9. First of all I want to thank those who have helped me earlier :) This is a great forum!

     

    I'm trying to add a centered menu to a page. I can't determine how to position the menu vertically so that it's spaced evenly between the header and the content divs. I placed a break in the HTML just below the menu (to push it up a bit), in order to help illustrate what I'm attempting to do. Here is a link: http://xrl.us/ben37m ...the CSS is here: http://xrl.us/ben38t

     

    BTW, the code for the menu was adapted from this site: http://xrl.us/ok5y9 (Mathew James Taylor's Design blog).

×
×
  • Create New...