Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Member ladydiella's Avatar
    Join Date
    Mar 2009
    Posts
    45
    Member #
    18566
    I am in the middle of designing my very first portfolio website. I am trying to get the text in my menu bar to sit to the right of the picture, but for some reason only the first few moved to the right and the rest will only sit under the picture. Here is the link to my site. If you look at the menu on the left you will see what I am talking about.

    http://daniellasweb.com/design1.htm

    to get the text to sit to the right of the pictures I put a <br> (highlighted in green below). I did the EXACT SAME THING to each line yet only the first two sit to the right. Well I believe I did the same to each line but obviously something is different which is why all the others are acting up :cry:

    I could not attach the file because its a .js. If you could please please help me I would really appreciate it!

    Thanks,
    Daniella


    document.write('<a href="design1.htm"><img src="picts/sidebar-1.jpg" border="0" width="'+imagewidth+'" height="'+imageheight+'" class="Galborder"></a>');
    document.write(' Identity<br> ');

    document.write('<img src="picts/spacer.gif" width="5" height="'+spacerheight+'"><br>');

    document.write('<a href="design2.htm"><img src="picts/sidebar-2.jpg" border="0" width="'+imagewidth+'" height="'+imageheight+'" class="Galborder"></a>');
    document.write(' Web<br> ');

    document.write('<img src="picts/spacer.gif" width="5" height="'+spacerheight+'"><br>');

    document.write('<a href="design2.htm"><img src="picts/sidebar-2.jpg" border="0" width="'+imagewidth+'" height="'+imageheight+'" class="Galborder"></a>');
    document.write(' Packaging<br> ');

    document.write('<img src="picts/spacer.gif" width="5" height="'+spacerheight+'"><br>');

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    Danielle ...

    You have specified in your CSS, the width of the sidebar:

    .sidebarwidth { width: 140px; }

    You are exceeding that width with a few of your links ...
    the lines that have longer words extend it out beyond 140 pixels,
    so it collapses the line.

    Simply increase the width until they fit.
    That will push the middle over to the right, but it looks
    like you have room to make it grow.

    Example:
    .sidebarwidth { width: 160px; }


  4. #3
    Member ladydiella's Avatar
    Join Date
    Mar 2009
    Posts
    45
    Member #
    18566
    ahhhh thank you!!

    One last thing. On this page, my footer has shifted to the bottom right hand corner. It is in a table that commands it to be aligned center bottom but something happened when I was editing all the tables. Below is the html for the pages middle content and the html for the footer is in green. Do you know what went wrong?

    Thanks again




    </td></tr>
    <tr>
    <td width="115" valign="top" align="center">
    <p><embed src="movies/bluetooth.mov" width="500" height="395" autostart="false" controller="true" loop="false"></embed><br>
    <span class="designtitle">&quot;Blue Tooth&quot;<br>
    </span><br>
    Edited in Final Cut Pro<br>
    <br></p></td>
    <td><br>
    </td>
    <td width="115" valign="top" align="center"><embed src="movies/humps.mov" width="500" height="395" autostart="false" controller="true" loop="false" border="3"></embed><span class="designtitle">&quot;My Humps&quot;</span><br>
    <br><span class="contactline">900 photographs placed together<br>
    </span><span class="contactline">to make animation</span><br>
    <br><br>
    </td></tr>
    <tr>
    <td width="115" valign="top" align="center">
    <p><br>
    <br></p></td>
    <td>&nbsp;<br>
    </td>
    <td>&nbsp;<br>
    </td>
    <td width="115" valign="bottom" align="center"><br>
    <br><br><br>
    <!-- END THUMBNAIL TABLE --><!-- COPYRIGHT FOOTER --><span class="footer">
    <script language="JavaScript" type="text/javascript" src="footer.js"></script></span><!-- COPYRIGHT FOOTER --></td></tr></tbody></table>
    <!-- END PAGE TABLE--></td></tr></tbody></table></td></tr></tbody></table>
    </body>
    </html>

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    This is missing for the title under the 2nd photo:

    <td width="115" valign="top" align="center"><embed src="movies/humps.mov" width="500" height="395" autostart="false" controller="true" loop="false" border="3"></embed> <br /> <span class="designtitle">&quot;My Humps&quot;</span><br>
    <br><span class="contactline">900 photographs placed together<br>
    </span><span class="contactline">to make animation</span><br>


    The next part I didn't test out ... just taking a stab at it.

    Change this:

    <tr>
    <td width="115" valign="top" align="center">
    <p><br>
    <br></p></td>
    <td>&nbsp;<br>
    </td>
    <td>&nbsp;<br>
    </td>
    <td width="115" valign="bottom" align="center"><br>
    <br><br>
    <!-- END THUMBNAIL TABLE --><!-- COPYRIGHT FOOTER --><span class="footer">
    <script language="JavaScript" type="text/javascript" src="footer.js"></script></span><!-- COPYRIGHT FOOTER --></td></tr>

    to this ...

    <tr>
    <td valign="bottom" align="center" colspan="3"><br>
    <br><br>
    <!-- END THUMBNAIL TABLE --><!-- COPYRIGHT FOOTER --><span class="footer">
    <script language="JavaScript" type="text/javascript" src="footer.js"></script></span><!-- COPYRIGHT FOOTER --></td></tr>

    =================

    The bottom <td> is going to span 2 or 3 (or 4?) columns.
    That's why it's pushed over, because you didn't specify how many columns.
    I'm just guessing it is supposed to span 3 columns.

    My final say on this ...
    Your site (and your problems) is a good example of why not to use <table>s
    for laying-out a page. That's what CSS and <div> and classes are for.


    .


  6. #5
    Member ladydiella's Avatar
    Join Date
    Mar 2009
    Posts
    45
    Member #
    18566
    Thank you for your help

    See I am still kind of new to composing sites. I just feel more comfortable with tables because I don't know divs very well. Don't div tags move around on a page depending on the browser? I did once make a site out of divs and when I opened it on safari it shifted slightly by a few pixels opposed to firefox and the same with IE. Since then I haven't gone back.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    Browser compatibility is still the hardest part about designing web sites.
    Whether using CSS (and table-less) designs, or using tables for layout, there
    ends-up being rendering problems with various browsers. Very hard to get
    things pixel-perfect.

    The best option I've seen so far is to design for FireFox and then adjust or
    add hacks (only if necessary) to correct for IE.

    I would say 80% of my time is spent on just dealing with IE browser issues,
    IE5, IE6, IE7, and now IE8 ... which has it's own problems. Oh the headache


  8. #7
    Member ladydiella's Avatar
    Join Date
    Mar 2009
    Posts
    45
    Member #
    18566
    It seems like you are pretty good at all of this. How do tables cause more problems compared to divs?


    I am also looking for a java code to make a "print" button which would print just a part of the page, not the whole window. Do you know of any?
    I would like a button to print my resume "resume.gif" on my portfolio website.

    I am currently using this code but it prints the whole window

    <p><input name="cmdPring" value="Print Resume" onclick="parent.print()" type="button"></p>

    http://daniellasweb.com/resume.htm

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    I recommend you scan your resume and make it a PDF file (instead of .gif).
    Give the user a link to the PDF. Anyone with a Mac or PC can open a PDF
    and they can format it properly for printing on their own printer.

    You can use CutePDF (free) and/or some online services for converting.
    http://www.cutepdf.com/

    But to answer your question. Most sites talk about making your .gif a pop-up
    on a page by itself, and then you can use JS to print page. You can put your
    .gif into an <iframe> and print it using Javascripting:
    http://www.eggheadcafe.com/PrintSear...asp?LINKID=449

    You create an <iframe> the same dimensions as your .gif and the contents
    of the <iframe> is the .gif itself. Tutorial on the eggheadcafe site explains
    how to set focus and print the contents of the <iframe>.

    I didn't try it out myself ... but it looks like it should work ??

    ======

    Tables are good (and used properly) for tabular data, such as data that
    is retrieved from a database. Grid-type outputs where data is listed in a
    controlled row/column type of format.

    Once tables get used for layouts, where sections are various sizes, locations,
    and the content changes from time to time, that's where problems occur,
    especially between IE and Mozilla browsers. It basically becomes a lack of
    control and editing is nearly impossible.

    Most people are now using larger monitors and a fixed width website of
    about 960 - 1000 pixels usually looks very nice. Having the fixed width allows
    content to change within <div> sections and nothing collapses. The user can't
    shrink the page down (like a fluid design).


  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    Here's another example I found:


    <script>
    function iprint(ptarget)
    {
    ptarget.focus();
    ptarget.print();
    }
    </script>

    <body>
    <iframe name="theiframe" id="theiframe" width="500" height="200" src="some.file"></iframe>
    <input type="button" value="print iframe" onclick="iprint(theiframe);" />
    </body>


  11. #10
    Member ladydiella's Avatar
    Join Date
    Mar 2009
    Posts
    45
    Member #
    18566
    For some reason that link didn't open for me but I remember seeing a tutorial on egghead that I didn't understand. I tried your code but it made a weird window right in the middle of the page.

    I would like the viewer to be able to click on the button and either be able to print just the resume without the browser screen or white space around the resume or it open acrobat for them to print. I made a PDF of my resume through illustrator. Can you tell me how to do either one, sorry you'll have to give baby steps I'v never done this.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com