Making a border

HI. I want to make a border/frame around a picture and add a caption. Can I do that in this program? If so, how?

In the content palette, there are many frames which you can use.
If you just want a simple border, go to Select menu>all, then Edit menu>stroke(Outline) selection. Place stroke inside.
To add a caption, use the type tool. You can place it right on the picture.
If you want the caption below the picture, you need to enlarge the canvas. To do that, go to Image menu>resize>cancas size and add 5-10 % canvas space below the picture. Then, type caption here.

Similar Messages

  • Making circle border around a div

    Just a second ago I was finally able to turn a square div in a circle.  I been working on trying to achieve that for the last month.  The problem was that after I finished making my circle div I couldnt move the darn thing anymore.  I am trying to make round navigation buttons.  so anyway. I tried getting another page going and try that again without class this time since it seems I could not move teh divs as long as they were tied up to a class.  so I got all my button in the right place now but now I can't make them to go round anymore.... haaaaaaaaaaaaaaaaaaaaaa....... this program is driving me insane.  I am going to start crying soon lol

    Since divs are rectangular or square, you're trying to do something that is not what HTML is designed to do.
    CSS for circles:
    .circleBase {
        -webkit-border-radius: 999px;
        -moz-border-radius: 999px;
        border-radius: 999px;
        behavior: url(PIE.htc);
    .type1 {
        width: 100px;
        height: 100px;
        background: yellow;
        border: 3px solid red
    .type2 {
        width: 50px;
        height: 50px;
        background: #ccc;
        border: 3px solid #000
    .type3 {
        width: 500px;
        height: 500px;
        background: aqua;
        border: 30px solid blue
    HTML:
    <div class="circleBase type1"></div>
    <div class="circleBase type2"></div><div class="circleBase type2"></div>
    <div class="circleBase type3"></div>

  • Chart Prints With a Border

    I am using Crystal 11 over a Citrix connection. I have two pie charts in the report footer section, with one partially overlapping the other one.  I have it set up to show the pie of each chart, but only one legend.  When I print to two different local printers, the top-layered chart prints a border even though the border setting is set to none.  If I make the lower-layered chart the top chart, then IT prints with a border and the other one no longer has a border.  If I export the report as a .PDF and then print the .PDF, both charts print without a border as they should.  If I export as a Crystal Report and then print it using the Crystal Reports installed on my hard drive, both charts again print correctly.
    I've tried putting a white border around the chart, but that didn't help.  If I put a non-white border around the chart, that border surrounds the border that shouldn't be appearing.  I've searched the web and this newsgroup, but haven't found any references to this problem.
    Any help would be greatly appreciated.

    I guess I should have played with it a little bit longer.  While I wouldn't say it's working as designed there is a workaround.  I went into Chart -> Format Background... (which can also be accessed via right-clicking the chart).  The border was set to transparent, but the fill foreground color was set to white.  When I made the foreground color transparent as well, then the border disappeared when printing.  I'm not sure why a white background with a transparent border was making the border appear, but I am now getting the desired results.
    Hopefully someone else will gain from this if they have a similar problem.

  • Excel borders not converting properly into PDF

    Hello,
    I am using Excel 2010 on a PC. I have a double line borders on all my tables. When I convert them to PDF the double lines blur together into one line unless I zoom out pass 100%. I thought I fixed the issue by making the border a darker color but when I imported the PDF into indesign they blur together again and most of them print out that way. (The document I am working on will eventually both be on the web and in print).
    This does not happen with every table and I can't figure out what the difference is between a table that works and one that doesn't. I've played around with the smooth lines with limited results. Below is one of the tables where the double line on top blurs together.
    Thanks!

    Are you printing or using PDF Maker? What job settings are you using? What version of Acrobat? Have you tried using the Press or Print job settings? There may also be an issue with the default display resolution used in the Settings (typically at 1200 dpi) -- I use 300 dpi.

  • MSI GE70 Not Displaying OpenGL in Window

    So I just got this laptop, but it when running any game using OpenGL in a window, it is just white. I have the latest drivers. What can I do?

    Here is a great one, the original angry birds demo is available at the bottom of the screen here:
    http://download.angrybirds.com/
    The original does not show anything at all, as I suspect it runs in a 'fake' full-screen mode by making a border-less window the size of the display. I also tried the newest game 'bad piggies' and interestingly that works even when windowed. They both have the same requirements, but they must be rendering differently.
    SFML is the environment I use for programming, and its example programs are included in the free distribution (/examples/opengl/opengl.exe is one):
    http://www.sfml-dev.org/download/sfml/2.0/
    I have verified that the same program runs fine on other SFML users Windows 8 machines, so it is something specific to my model of or particular laptop.
    Faster Than Light is another released title that shows the same issue:
    http://store.steampowered.com/app/212680/

  • Photoshop: Making a text box with color or border.

    How do you fill a text box in Photoshop?
    Answer: You CAN’T.
    Solution:  You CAN do anything you want in Photoshop -we know it’s GREAT - but the steps are not always so easy.  See below for solutions to making it seem that the text box is filled with color, bordered, semi-tansparent etc.
    In Photoshop, a text box is mostly about the text inside and less about the box that surrounds it.  In other words, the box is always transparent and all effects apply to the font shapes typed inside by the user.  Photoshop (CS4) can produce incredible, professional, amazing text images. No Doubt About It!
    A Photoshop text box can display one of two types of bounding boxes: 
    Its OBJECT bounding box is there for moving the whole text layer, rotating it, duplicating it and distorting.  Clicking once on the text layer pallet and selecting the move tool (v) will produce this bounding box.  The direct selection tool (a) won’t recognize it.  Note:  If you try to resize the box as an object, it also distorts/stretches the text inside.  This can make cool effects but usually you want the text to stay the way the font was designed.  See: Layers>Type>Warp Text.
    The TEXT bounding box is there for highlighting, re-typing and selecting the margins of the actual text/paragraph etc.  Selecting the text tool and clicking over existing text will produce this bounding box.
    Some features are accessible in either mode.
    The Photoshop text tool has two types of cursors:
    The NEW text box cursor looks like a text insertion cursor (often seen in word processing) WITH a dotted box around it.
    To produce the new text box cursor just select the text tool and move over to a new work area.
    The EDIT text cursor looks very much like the ordinary cursor people are familiar with (no dotted box). 
    To produce the edit text tool, hover the text tool over EXISTING text and the cursor changes to the simple insertion shape (without the dotted box).  A click now will put you into text editing mode, not new text box mode.  This drove me batty for a while because I was used to clicking anywhere inside an existing text box and the blinking cursor would pop in automatically - usually at the end of the last letter.  This doesn’t happen in Photoshop; if that NEW text box tool is active, it will try to place a new box anywhere you click sometimes overlapping another.
    When in this mode (edit existing text) you can carefully hover the arrow to the edges of the text box and resize the bounding box without altering the shape of the text itself.  This is how you make the text box larger or smaller to fit/accommodate your needs.  You can also highlight text, insert between words/letters.  Highlighted text is available for changing its font, color, size, cutting/pasting etc. 
    To get OUT of the EDIT text mode, click the check box on the tool column above or type enter (not return) or type cmd-return (MAC), ctrl-return (WIN).  If you want to cancel any changes to an existing text box click the ex-circle on the tool column or press the esc key (top left of keyboard-escape key)
    OK, THE MAIN POINT:
    To make an effect that looks like a text box that is filled, bordered, semi-transparent etc., you will have to create an object shape (box) and place it just behind (under) the text box.  Linking the two allows you to move them around easily.  The drawback is that, when you need a larger box, you’ll have to alter the size of both boxes and possibly re-center them to each other (I know it’s sort of dumb to have so many steps just to get a shaded text box or bordered one.)
    Begin by selecting the Rectangle shape tool and draw a shape on the screen of any size.  In the layers pallet a layer is created with two items (layer thumbnail and vector mask) Double click the one on the left the layer thumbnail).  Change its color to a light one such as baby blue or yellow.
    Now select the text tool and click once over that shape.  A text box is created exactly the same size of the rectangle (any shape will work too).
    Type some text into that box and change the font type, size and color to something you might use regularly.  Check to see that the text color is black (can be changed later).  The text automatically wraps around when you reach the edge of this box and fits well (inside margins can be altered by pixel later).
    Now link the two boxes to one another.  Shift-click each layer in the layers pallet to select both and choose the link button at the bottom of the window for layers or go to Layers>Link Layers.  Now when you move one it will move the other too!
    Using the paragraph tools you can center text, indent first line, and add space between paragraphs.  Except the first paragraph seems too close to the top of the colored rectangle; doesn’t it?  Photoshop won’t add extra leading (horizontal space) between the text box and the top of the first paragraph.
    There are two ways to fix this:
    1.     Select the text tool and click inside the existing text then hover the pointer just above the little box/tab in the top center of that rectangle and bring it down just a bit.
    2.     Or you could unlink the two layers (to unlink just click link again while one of the two layers is selected in pallet) and move the colored rectangle up just a bit.
    In the first instance it was not necessary to unlink the boxes.  This is the advantage because altering the colored rectangle without unlinking will distort your text as will altering the text box if you are not in object text mode (see intro.)
    Ok, some advantages:
    Now that you have this set up you can use the background box (colored rectangle) to make other effects.  Select it as a separate layer but you won’t have to unlink it.  To make the box semi-transparent change either the layer OPACITY or the layer FILL (found in the layer pallet).
    To create a border box:
    1.     Select the colored rectangle box and under Layers>Styles>Blending Options (or just double click in an open area of the layer pallet for that shape.)
    2.     Select Stroke, change:  Fill Type color, Color black, Size 4, Position inside, Blend Mode normal, Opacity 100%. Click OK/Apply
    3.     Back in the layer pallet, change the Fill to 0% and you will just have a border with attached text box.  You may have to alter the inside text box again depending on the thickness of that border especially if you made the Position to be inside to keep the sharpness of the rectangle.
    4.     Yes this will work with other shapes and even custom shapes.  Remember to draw the shape first and immediately place a new text box over it BEFORE any other alteration is done.  This ensures that Photoshop creates a text box exactly the same size/dimension of your chosen shape.  It even makes margins fit irregular shapes like triangles.
    5.     Try it!

    Toxic Cumquat wrote:
    How do you fill a text box in Photoshop?
    Answer: You CAN’T.
    Solution:  You CAN do anything you want in Photoshop -we know it’s GREAT - but the steps are not always so easy.  See below for solutions to making it seem that the text box is filled with color, bordered, semi-tansparent etc.
    In Photoshop, a text box is mostly about the text inside and less about the box that surrounds it.  In other words, the box is always transparent and all effects apply to the font shapes typed inside by the user.  Photoshop (CS4) can produce incredible, professional, amazing text images. No Doubt About It!
    A Photoshop text box can display one of two types of bounding boxes: 
    Its OBJECT bounding box is there for moving the whole text layer, rotating it, duplicating it and distorting.  Clicking once on the text layer pallet and selecting the move tool (v) will produce this bounding box.  The direct selection tool (a) won’t recognize it.  Note:  If you try to resize the box as an object, it also distorts/stretches the text inside.  This can make cool effects but usually you want the text to stay the way the font was designed.  See: Layers>Type>Warp Text.
    The TEXT bounding box is there for highlighting, re-typing and selecting the margins of the actual text/paragraph etc.  Selecting the text tool and clicking over existing text will produce this bounding box.
    Some features are accessible in either mode.
    The Photoshop text tool has two types of cursors:
    The NEW text box cursor looks like a text insertion cursor (often seen in word processing) WITH a dotted box around it.
    To produce the new text box cursor just select the text tool and move over to a new work area.
    The EDIT text cursor looks very much like the ordinary cursor people are familiar with (no dotted box). 
    To produce the edit text tool, hover the text tool over EXISTING text and the cursor changes to the simple insertion shape (without the dotted box).  A click now will put you into text editing mode, not new text box mode.  This drove me batty for a while because I was used to clicking anywhere inside an existing text box and the blinking cursor would pop in automatically - usually at the end of the last letter.  This doesn’t happen in Photoshop; if that NEW text box tool is active, it will try to place a new box anywhere you click sometimes overlapping another.
    When in this mode (edit existing text) you can carefully hover the arrow to the edges of the text box and resize the bounding box without altering the shape of the text itself.  This is how you make the text box larger or smaller to fit/accommodate your needs.  You can also highlight text, insert between words/letters.  Highlighted text is available for changing its font, color, size, cutting/pasting etc. 
    To get OUT of the EDIT text mode, click the check box on the tool column above or type enter (not return) or type cmd-return (MAC), ctrl-return (WIN).  If you want to cancel any changes to an existing text box click the ex-circle on the tool column or press the esc key (top left of keyboard-escape key)
    OK, THE MAIN POINT:
    To make an effect that looks like a text box that is filled, bordered, semi-transparent etc., you will have to create an object shape (box) and place it just behind (under) the text box.  Linking the two allows you to move them around easily.  The drawback is that, when you need a larger box, you’ll have to alter the size of both boxes and possibly re-center them to each other (I know it’s sort of dumb to have so many steps just to get a shaded text box or bordered one.)
    Begin by selecting the Rectangle shape tool and draw a shape on the screen of any size.  In the layers pallet a layer is created with two items (layer thumbnail and vector mask) Double click the one on the left the layer thumbnail).  Change its color to a light one such as baby blue or yellow.
    Now select the text tool and click once over that shape.  A text box is created exactly the same size of the rectangle (any shape will work too).
    Type some text into that box and change the font type, size and color to something you might use regularly.  Check to see that the text color is black (can be changed later).  The text automatically wraps around when you reach the edge of this box and fits well (inside margins can be altered by pixel later).
    Now link the two boxes to one another.  Shift-click each layer in the layers pallet to select both and choose the link button at the bottom of the window for layers or go to Layers>Link Layers.  Now when you move one it will move the other too!
    Using the paragraph tools you can center text, indent first line, and add space between paragraphs.  Except the first paragraph seems too close to the top of the colored rectangle; doesn’t it?  Photoshop won’t add extra leading (horizontal space) between the text box and the top of the first paragraph.
    There are two ways to fix this:
    1.     Select the text tool and click inside the existing text then hover the pointer just above the little box/tab in the top center of that rectangle and bring it down just a bit.
    2.     Or you could unlink the two layers (to unlink just click link again while one of the two layers is selected in pallet) and move the colored rectangle up just a bit.
    In the first instance it was not necessary to unlink the boxes.  This is the advantage because altering the colored rectangle without unlinking will distort your text as will altering the text box if you are not in object text mode (see intro.)
    Ok, some advantages:
    Now that you have this set up you can use the background box (colored rectangle) to make other effects.  Select it as a separate layer but you won’t have to unlink it.  To make the box semi-transparent change either the layer OPACITY or the layer FILL (found in the layer pallet).
    To create a border box:
    1.     Select the colored rectangle box and under Layers>Styles>Blending Options (or just double click in an open area of the layer pallet for that shape.)
    2.     Select Stroke, change:  Fill Type color, Color black, Size 4, Position inside, Blend Mode normal, Opacity 100%. Click OK/Apply
    3.     Back in the layer pallet, change the Fill to 0% and you will just have a border with attached text box.  You may have to alter the inside text box again depending on the thickness of that border especially if you made the Position to be inside to keep the sharpness of the rectangle.
    4.     Yes this will work with other shapes and even custom shapes.  Remember to draw the shape first and immediately place a new text box over it BEFORE any other alteration is done.  This ensures that Photoshop creates a text box exactly the same size/dimension of your chosen shape.  It even makes margins fit irregular shapes like triangles.
    5.     Try it! Or try using Indesign!
    There. I fixed that for you.

  • I am making a graduation video for my cousin using Final Cut Pro. I have photos layered over videos, and I was wanted to find out how you can add a border around the photos so they stand off of the video. Anyone know what I could do?

    I am making a graduation video for my cousin using Final Cut Pro. I have photos layered over videos, and I was wanted to find out how you can add a border around the photos so they stand off of the video. Anyone know what I could do?

    You would need an image editor to edit the images and add a border to the image first before importing them into Final Cut.
    Cheapest and very good image editor?
    PIxelmator.
    Located in the Mac App Store. $14.99 USD.
    Here is the Pixelmator website to give you an overview of the app.
    http://www.pixelmator.com/
    Good Luck!

  • Making border of cell  invisible in JTable

    Hi i want to make border of cell invisible in JTable
    any help appreciated
    thanks in advance

    Create a renderer with no border - http://java.sun.com/docs/books/tutorial/uiswing/components/table.html#editrender .

  • Making  Pop up window border solid  in NW04s

    Hi ,
    i created a pop window using the following code:
         IWDWindowInfo myWinInfo =
         wdComponentAPI.getComponentInfo().findInWindows("ABCWindow");
         IWDWindow myPopupWindow =
         wdComponentAPI.getWindowManager().createWindow(myWinInfo, true);
         myPopupWindow.setWindowPosition(350, 80);
         myPopupWindow.setWindowSize(350, 400);
         myPopupWindow.setTitle(dialogTitle);
         myPopupWindow.open();
    The opened pop up window shows a dotted border .
    Is there any way we can make window border solid instead of dotted?
    Regards
    Radhika
    Edited by: Radhika Kuthiala on May 7, 2010 2:08 PM

    Hi,
    Please try with the below:
    IWDWindowInfo windowInfo = wdComponentAPI.getComponentInfo().findInWindows("PopupWin");
    IWDWindow popup = wdComponentAPI.getWindowManager().createModalWindow(windowInfo);

  • Changing colors on a border and making border wider

    I am using Adobe Photoshop Elements 2.0. When I choose the ripple frame under effects, it puts a white small ripple around the border. Is there any way to change the rippled border to a different color? Also, is there any way to make the ripple larger around the border? Thanks for any suggestions you may have. I tried the splatter frame but it wasn't any wider.

    Cheryl,<br /><br />It can be done but the effect isn't as good as it can be using other techniques. FWIW, I'd just skip down to the other methods.<br /><br />If you're determined to use the ripple frame, Jay Arraich's site has a tut on how to do it.<br /><br />Look for "How do I make the Frame effects in the Effects palette wider on large images?"  here:<br /><br />http://www.arraich.com/elements/pse_hhow1.htm#resize_frame<br /><br />You won't be able to use the replace color command on it as the command won't work on black or white.  You could copy the enlarged ripple effect into your clipboard then paste it into a solid color fill adjustment layer to colorize it.<br /><br />To do that, you would select<All; Edit<Copy the black and white frame in normal blend mode.  Create the solid color fill adjustment layer.  You will need to hold in the Alt key and click on the adjustment layer mask.  (If done correctly, it the document will go white as you are looking directly at the mask.)  Next, you paste (Edit<Paste) the frame you copied into the mask.  If the frame is reverse of what it should be then invert the mask...control I.  To remove focus from the mask, alt click it again...or just click on another layer in the layers palette. <br /><br />Two quick simple ways to create photograpic edges...<br /><br />Method 1:<br /><br />1. Create a blank layer over your image. <br />2. Use brush tool to paint an edge.  Try one of the brushes from the "Thick Heavy Brush Set".<br /><br />Method 2:<br /><br />1. Create a Solid Color Fill Adjustment layer over your image.<br />2. Turn on your Grid.<br />3. Use Rectangular Marquee to draw out a border selection.<br />4. Fill Selection with Black...(adjustment layer is highlighted in layers palette).<br />5. Deselect before going to step 6...<br />6. To create the edge effects, run filters on the adjustment layer mask.  Note:  Only filters that operate in grayscale will work on a mask.  (Try maybe Splatter and Sprayed Strokes filters.)<br /><br />There are other methods but these two will get you started...and in my opinion produce <b>much</b> better results than the ripple frame.<br /><br />HTH,<br />Terri

  • Can I disable the feature which gives an image in an image map a 1 pixel blue border, thus displacing all the image links on the image map by 1 pixel and revealing gaps between all the images making up the image map?

    i. e. can I remove the blue outline glow in focus in the browser?

    i. e. can I remove the blue outline glow in focus in the browser?

  • Could I have some help with making these two files merge?

    Copyright - Trademarking - Prohibiting further use of these files (Unless you are helping me) - Etc..
    Hello, I'm back with another problem and if you read the last post you would have realized that I shortened the code. My goal is to replace my spacer and header with a single header that I based my design around. I just can not get this too work with the rest of the document I have had too many attempts. I will post my header files in 'RED' to begin with and the files I need to combine in 'BLUE'
    Preview of Header:
    Link to the Header HTML Coding:
    Expertpcguides.com
    Link to CSS Coding of the Header:
    http://www.expertpcguides.com/css/header-styling.css
    Example of one of the Html pages that I need to merge:
    /* This Html file is part of the ExpertComputerGuides.com Website Copyright - Trademarked etc.*/
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>About Us</title>
            <link rel="stylesheet" href="css/merging-reset.css" type="text/css" media="screen" />
            <link rel="stylesheet" href="css/merging-style.css" type="text/css" media="screen" />
            <link href='http://fonts.googleapis.com/css?family=Open+Sans%7CBaumans%7CArvo%7CRoboto' rel='stylesheet' type='text/css' />
            <link rel="shortcut icon" href="customfavicon.ico" type="image/x-icon" />
            <!--[if lt IE 9]>
                <style>
                    header
                        margin: 0 auto 20px auto;
                    #four_columns .img-item figure span.thumb-screen
                        display:none;
                </style>
            <![endif]-->
    </head>
      <body>
    <header>           
                <h1 class="style5">Expertpcguides.com</h1>
              <p class="style6">Technology Explained.</p>
    <select id="alternative_menu" size="1">
                    <option>Home</option>
                    <option>About</option>
                    <option>Contact us</option>
                    <option>Login/Register</option>
                    <option>Forums</option>
    <option>Privacy Policy</option>
                    <option>Disclaimer</option>
                    <option>Legal Notice</option>
                </select>
                <nav>
                <h2 class="hidden">Our navigation</h2>
                    <ul>
                        <li><a href="index.php" class="style19">Home</a></li>
                      <li><a href="about-us.html" class="style19">About</a></li>
                      <li><a href="contact-us.html" class="style19">Contact us</a></li>
                      <li><a href="javascript:void(0)" class="style19">Login/Register</a></li>
                      <li><a href="forums/index.php" class="style19">Forums</a></li>
                  </ul>
              </nav>
            </header>
                    <section id="spacer"> 
            <h2 class="hidden">Dolor sit amet</h2>         
                <p><span class="class3"><a href="articles/dictionary.html" class="style22">Dictionary </a></span><span class="style19">|</span><span class="class4"> <a href="articles/articles.html">Articles </a></span><span class="style19">|</span><span class="class5"> <a href="articles/computerhistory.html">History of the PC</a></span><span class="style19"> |</span><span class="class6"> <a href="articles/freedownloads.html">Free Downloads</a></span></p>
              <div class="search">
    <form id="searchbox_000429658622879505763:gczdzyghogq" action="https://www.google.com/cse/publicurl?cx=000429658622879505763:gczdzyghogq">
    <input value="000429658622879505763:gczdzyghogq" name="cx" type="hidden"/>
    <input value="FORID:11" name="cof" type="hidden"/>
    <input id="q" style="width:150px;" name="q" size="70" type="text" />
    <input value="Search" name="sa" type="submit"/>
    </form>
    </div>
        </section>
    <section id="boxcontent">
    <section id="four_columns">
                <h2 class="style20">
                    About Us</h2>   
                <p class="style10">We are an online non-profit organisation who are continously increasing in numbers, thanks to you guys. With multiple articles providing information into PC personalisation, Problem removal, Tips &amp; tweaks and general help you are sure to find something helpful to you. </p>
                <p class="style10">We have a motto 'Technology Explained.' and this is exactly what we wish to stand by. We offer in-depth tutorials that focus on providing that little-bit of information which no other site will include. </p>
                <p class="style10">Our goal is to combine multiple sites, so that you can receive more specific information which no other site will provide. In saying this, we certainly don't just copy and paste other peoples articles, but may use some of the concepts from other sites with our own wording or interpretation. If some of our wording alligns up with another website this is likely because the topic was broad and every website will have similar information.</p>
                <p class="style10"> </p>
        <div><h2 class="style20">General Questions and Answers:</h2></div>
                <p class="style12"> </p>
                <p class="style17">Can I email you guys?</p>
        <p class="style14">You certainly can. But on a busy day you should probably post your thoughts in the forums. We aim to answer every relevant email within 24 hours. In the forums we generally rely on other users to help eachother out, but we may step in if we know the answer.</p>
                <p class="style14"> </p>
                <p class="style17">When and why did you start this site?</p>
        <p class="style13"><span class="style14">This site was started on the 12th of the 7th, 2014. The intention behind this development was to create a website that would be functional with a variety of articles for many users. Worst case scenario, the authour would have a neat offline guide for all of his problems.</span></p>
        <p class="style13"> </p>
                <p class="style17">Would  you be able to write articles for us?</p>
        <p class="style13"><span class="style14">More than likely, just contact us and we will consider your inquiry.</span></p>
                <p class="style13"> </p>
                <p class="style17">Can I write articles for you?</p>
        <p class="style13"><span class="style14">Less than likely, the articles on this site are in the copy of one person making access to others difficult. Pointing out clear influencies and spelling errors is appreciated, more information about this is </span><a href="create-a-page.html" class="style60">here.</a></p>
        <p class="style13"> </p>
                <p class="style17">Can I republish your articles?</p>
        <p class="style13"><span class="style14">No way. Making this website took ages and because of that substancial amount of time spent, every single sentence on this sight is copyright. In saying this though some topics may be broad, and there may be only one way to word the situation at hand for example opening the start menu is generally something which will sound exactly the same on multiple sites.</span></p>
        <p class="style13"> </p>
                <p class="style17">Where do you guys get these ideas from?</p>
        <p class="style13"><span class="style14">Most of these ideas come from what we had once searched up, user suggestions, or what we think other people might search up. This was done with the intention of linking multiple searches into one site, that many people would have the ability to  access. </span></p>
                <p class="style13"> </p>
                <p><span class="style17">How many people are making this site?</span></p>
        <p><span class="style14">At this point in time, there is one person developing on the site. Which is why all helpful contribution made by internet strangers is appreciated.</span></p>
                <p> </p>
                <p><span class="style17">What program did you use to make this website?</span></p>
        <p><span class="style14">Adobe Dreamweaver CS3.</span></p>
      </section>
    </section>
    <section id="text_columns">
    <section class="column2"></section>
            </section>
    <footer>
      <h2 class="hidden">Our footer</h2>
          <section id="copyright">
            <h3 class="hidden">Copyright notice</h3>
            <div class="wrapper">
              <div class="social"> <a href="index.html"><img src="img/G.png" alt="G" width="25"/></a> <a href="index.html"><img src="img/U.png" alt="U" width="25"/></a> <a href="index.html"><img src="img/I.png" alt="I" width="25"/></a> <a href="index.html"><img src="img/D.png" alt="D" width="25"/></a> <a href="index.html"><img src="img/E.png" alt="E" width="25"/></a> <a href="index.html"><img src="img/S.png" alt="S" width="25"/></a> </div>
            &copy; Copyright 2014 by Expertpcguides.com. All Rights Reserved. </div>
    </section>
          <section class="wrapper">
            <h3 class="hidden">Footer content</h3>
            <article class="column hide">
              <h4>Site Links</h4>
                <div class="class2">
                  <p><a href="web-contributors.html" class="style18">Developers/Contributors</a></p>
              </div>
              <div class="class2">
                  <p><a href="create-a-page.html" class="style18">Create a page</a></p>
                </div>
              <div class="class2">
                <p><a href="point-system.html" class="style18">Rewards System</a></p>
              </div>
              <div class="class2">
                <p><a href="privacy" class="style18">Privacy</a></p>
              </div>
                                 <div class="class1">
                <p><a href="site-map.html" class="style18">Site Map</a></p>
              </div>
            </article>
            <article class="column midlist2">
              <h4 class="style4">Follow Us</h4>
              <ul class="style4">
      <li><div class="class2">
        <p><img src="img/Facebook-logo.png" alt="Facebook Image" width="32" height="34"/><span class="style31"><a href="https://www.facebook.com/expertpcguides" class="style31"> Facebook</a></span></p></div></li>
    <li><div class="class2">
                  <p><img src="img/Twitter-Logo.jpg" alt="Twitter Image" width="30" height="33"/><a href="https://twitter.com/ExpertPcGuides" class="style31"> Twitter</a></p></div>
    <li>
         <li><div class="class2">
        <p><img src="img/Google+Logo.jpg" alt="Google + Image" width="31" height="35"/><a href="https://plus.google.com/115474035983654843441" class="style31"> Google Plus</a></p></div></li>
      <li><div class="class2">   
        <p><img src="img/Pininterest-Logo.png" alt="Pininterest Image" width="33" height="34" ><a href="http://www.pinterest.com/expertpcguides/" class="style31"> Pininterest</a></p></div>
      <li>
              </ul>
            </article>
            <article class="column rightlist">
              <h4>Interested in Exclusive Articles?</h4>
                <div class="class2">
                  <p><a href="login.html" class="style18">All you need to do is login/register</a></p>
              </div>
            </article>
          </section>
    <section class="wrapper"><h3 class="hidden">If you are seeing this, then the site is losing stability</h3></section>
            </footer>
    </body>
    </html>
    'Merging-Style.css' File:
    http://www.expertpcguides.com/css/merging-style.css
    'Merging-Reset.css' File:
    http://www.expertpcguides.com/css/merging-reset.css
    Thanks for the help in advance.

    You're not getting any help because your HTML & CSS code is pretty messy.  It's like asking an interior designer to make over a very untidy bedroom.  It's not going to happen until you clean things up.
    I would start with just the basic HTML code like this.  Avoid those redundant style10, style19, style108 tags.    You really don't need them.  HTML selectors provide you with all the hooks you need for most things.  Also, you should run a spell check.  I saw errors but I didn't fix them.
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Expert PC Guides</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans%7CBaumans%7CArvo%7CRoboto' rel='stylesheet' type='text/css' />
    <link rel="shortcut icon" href="customfavicon.ico" type="image/x-icon" />
    <style>
    /**CSS RESET**/
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    img { vertical-align: bottom }
    ol, ul { list-style: none; }
    /**LAYOUT STYLES**/
    body {margin:0;}
    header {margin:0; }
    header h1 {}
    header h2 {}
    /**top nav**/
    nav { margin: 4% }
    nav li { display: inline }
    nav li a {
        margin: 1%;
        padding: 1%;
        text-decoration: none;
    nav li a:visited { }
    nav li a:hover, nav li a:active, nav li a:focus { }
    /**search bar**/
    section.top {
        background: #1A3BE5;
        overflow: hidden;
    section.top li {
        float: left;
        margin: 1.5%;
    section.top li a { color: #FFF }
    section.top li:after {content: '| ';}
    .search { float: right; }
    /**main content**/
    article { }
    article h3 {margin:0; padding:0 }
    article p { }
    /**Q&A definition lists**/
    dl { margin: 2%; }
    dt {
        font-size: 125%;
        color: #1A3BE5;
        font-weight: bold;
    dd {
        font-size: 90%;
        color: #333;
        margin-left: 4%
    footer {
        background: #333;
        color: #CCC
    /**3 columns**/
    footer aside {
        width: 33%;
        float: left;
        padding: 0 2%
    /**footer links**/
    footer a {
        color: #EAEAEA;
        text-decoration: none
    footer a:hover {text-decoration: underline}
    footer ul li { line-height: 1.5 }
    footer h4 {margin:0 }
    footer p { }
    /**clear floats**/
    .clearing {
        clear: both;
        display: block
    </style>
    </head>
    <body>
    <header>
    <h1>Expertpcguides.com</h1>
    <h2>Technology Explained</h2>
    <!--top menu-->
    <nav>
    <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="about-us.html">About</a></li>
    <li><a href="contact-us.html">Contact us</a></li>
    <li><a href="javascript:void(0)">Login/Register</a></li>
    <li><a href="forums/index.php">Forums</a></li>
    </ul>
    </nav>
    </header>
    <!--search bar-->
    <section class="top">
    <h3>Search Bar</h3>
    <ul>
    <li><a href="articles/dictionary.html">Dictionary</a></li>
    <li><a href="articles/articles.html">Articles</a></li>
    <li><a href="articles/computerhistory.html">History of the PC</a></li>
    <li><a href="articles/freedownloads.html">Free Downloads</a> </li>
    </ul>
    <form class="search" id="searchbox_000429658622879505763:gczdzyghogq" action="https://www.google.com/cse/publicurl?cx=000429658622879505763:gczdzyghogq">
    <input value="000429658622879505763:gczdzyghogq" name="cx" type="hidden"/>
    <input value="FORID:11" name="cof" type="hidden"/>
    <input id="q" style="width:150px" name="q" size="70" type="text" />
    <input value="Search" name="sa" type="submit"/>
    </form>
    <!--end search bar-->
    </section>
    <article>
    <h2>About Us</h2>
    <p>We are an online non-profit organisation who are continously increasing in numbers, thanks to you guys. With multiple articles providing information into PC personalisation, Problem removal, Tips &amp; tweaks and general help you are sure to find something helpful to you. </p>
    <p>We have a motto 'Technology Explained.' and this is exactly what we wish to stand by. We offer in-depth tutorials that focus on providing that little-bit of information which no other site will include. </p>
    <p>Our goal is to combine multiple sites, so that you can receive more specific information which no other site will provide. In saying this, we certainly don't just copy and paste other peoples articles, but may use some of the concepts from other sites with our own wording or interpretation. If some of our wording alligns up with another website this is likely because the topic was broad and every website will have similar information.</p>
    <h2>General Questions and Answers:</h2>
    <!--Q&A definition lists-->
    <dl>
    <dt>Can I email you guys?</dt>
    <dd>You certainly can. But on a busy day you should probably post your thoughts in the forums. We aim to answer every relevant email within 24 hours. In the forums we generally rely on other users to help each other out, but we may step in if we know the answer.</dd>
    </dl>
    <dl>
    <dt>When and why did you start this site?</dt>
    <dd>This site was started on the 12th of the 7th, 2014. The intention behind this development was to create a website that would be functional with a variety of articles for many users. Worst case scenario, the authour would have a neat offline guide for all of his problems. </dd>
    </dl>
    <dl>
    <dt>Would  you be able to write articles for us?</dt>
    <dd>More than likely, just contact us and we will consider your inquiry.</dd>
    </dl>
    <dl>
    <dt>Can I write articles for you?</dt>
    <dd>Less than likely, the articles on this site are in the copy of one person making access to others difficult. Pointing out clear influencies and spelling errors is appreciated. <a href="create-a-page.html" class="style60">Click here for more information.</a></dd>
    </dl>
    <dl>
    <dt>Can I republish your articles?</dt>
    <dd>No way. Making this website took ages and because of that substancial amount of time spent, every single sentence on this sight is copyright. In saying this though some topics may be broad, and there may be only one way to word the situation at hand for example opening the start menu is generally something which will sound exactly the same on multiple sites.</dd>
    </dl>
    <dl>
    <dt>Where do you guys get these ideas from?</dt>
    <dd>Most of these ideas come from what we had once searched up, user suggestions, or what we think other people might search up. This was done with the intention of linking multiple searches into one site, that many people would have the ability to  access. </dd>
    </dl>
    <dl>
    <dt>How many people are making this site?</dt>
    <dd>At this point, there is one person developing the site, which is why all helpful contributions made by internet strangers is appreciated.</dd>
    </dl>
    <!--end article-->
    </article>
    <!--begin footer-->
    <footer>
    <p> <a href="index.html"><img src="img/G.png" alt="G" width="25"/></a> <a href="index.html"><img src="img/U.png" alt="U" width="25"/></a> <a href="index.html"><img src="img/I.png" alt="I" width="25"/></a> <a href="index.html"><img src="img/D.png" alt="D" width="25"/></a> <a href="index.html"><img src="img/E.png" alt="E" width="25"/></a> <a href="index.html"><img src="img/S.png" alt="S" width="25"/></a> </p>
    <!--begin 3 columns-->
    <aside>
    <h4>Site Links:</h4>
    <ul>
    <li><a href="web-contributors.html" class="style18">Developers/Contributors</a></li>
    <li><a href="create-a-page.html" class="style18">Create a page</a></li>
    <li><a href="point-system.html" class="style18">Rewards System</a></li>
    <li><a href="privacy" class="style18">Privacy</a></li>
    <li><a href="site-map.html" class="style18">Site Map</a></li>
    </ul>
    </aside>
    <aside>
    <h4>Follow Us</h4>
    <ul>
    <li><img src="img/Facebook-logo.png" alt="Facebook Image" width="32" height="34"/><a href="https://www.facebook.com/expertpcguides" class="style31"> Facebook</a></li>
    <li><img src="img/Twitter-Logo.jpg" alt="Twitter Image" width="30" height="33"/><a href="https://twitter.com/ExpertPcGuides" class="style31"> Twitter</a>
    <li><img src="img/Google+Logo.jpg" alt="Google + Image" width="31" height="35"/><a href="https://plus.google.com/115474035983654843441" class="style31"> Google Plus</a> </li>
    <li><img src="img/Pininterest-Logo.png" alt="Pininterest Image" width="33" height="34" ><a href="http://www.pinterest.com/expertpcguides/" class="style31"> Pininterest</a> </li>
    </ul>
    </aside>
    <aside>
    <h4>Interested in Exclusive Articles?</h4>
    <ul>
    <li><a href="login.html">Login/Register</a></li>
    </ul>
    </aside>
    <!--end 3-columns-->
    <p class="clearing">&copy; 2014 by Expertpcguides.com. All rights reserved. </p>
    </footer>
    </body>
    </html>
    Once you've got all your HTML pages cleaned up, it should be a simple matter to style.
    Nancy O.

  • SWF Export, no font showing in Acrobat and zoom border problem (Acrobat & Reader) - Indesign CS6

    Hi Everyone,
    If anyone could help me on this that would be great, I've spent hours on the forums and manuals to no avail.
    I'm making an interactive PDF brochure in Indesign for one of our new products and I'm having issues (actual or perceived??!!) with the SWF export and PDF creation.  I'm placing animations and video in the INDD, exporting it as an SWF (with the text option as Flash Classic Text) and then opening the SWF (not importing to a word doc or anything, just opening the SWF) with Acrobat using the advanced options to import the video resources and to enable the content when the page is opened.  I then save the file as a PDF.  In the PDF everything works as it should, the animations, the buttons, the video plays and so on.  Great.. hmm not quite.
    The trouble I am having is that all the content of the SWF when viewed in Acrobat seems to be getting rasterised/flattened - is this correct?  After the SWF is opened, Acrobat indicates no fonts in the fonts tab in the document properties so when the SWF is zoomed in Acrobat, or the saved PDF in Reader, the font gets pixelated and the document is not searchable/text can not be highlighted.  The images are not selectable either - it is as if the entire page has been flattened to one image.  Is there a way to stop this so that the SWF opened with Acrobat retains the font and individual images like a normal PDF?  Do I have to open the SWF in Flash first to set some parameters or something?  Is there something I am doing wrong when exprting the SWF from Indesign?  I think I have tried about every possible export combination.  When I open the .HMTL (exported at the same time as the SWF from Indesign) in a browser, the same happens.  All the animations work but the text appears to be rasterised/flattened/not searchable.  Sorry if I'm not using the correct terminology.
    I have tried importing the SWF back into another new INDD and exporting that as an interactive PDF but then the video does not work.  I suppose I could try exporting all the individual animations as SWFs, importing them all and trying to get them to work with the video but I can see that will take quite some time and does not seem to be a guaranteed solution from what I have read on the forums - video playback being the issue.
    Another problem is that when the SWF, or saved PDF, is zoomed in Acrobat/Reader between approx 150% and 210% a thick white border appears in the document and the content is squashed into the middle creating a slightly pixelated and narrow page.  When I zoom out from the page I get a small white line on the right hand border at around 70% zoom.  Please see images.  Does anyone have any idea why this is happening and what I can do to fix it?
    On another, sort of related topic, my timing panel went blank yesterday and was not showing any animations in documents that it had been used to order and synch animations on page load as well as new documents.  The panel was blank.  I updated to V8.0.1 and the panel sprang back into life - hope that helps anyone else finding the same problem.
    I am not very familiar with Indesign/Acrobat/Flash so I guess all the above could be what I'm doing or I could be asking  really dumb questions - apologies from a newbie.
    Best,
    Emily

    Hi All,
    I have now pretty much solved all the issues by creating the SWF in Flash rather than Indesign.  I would advise anyone looking to create an interative PDF with animation and interactivity to go with Flash from the start.  While Flash is a little more involved to create the same effects as Indesign, the extra time taken will ensure a more controllable and better looking PDF in terms of text quality, scalability and so on.  Plus you will not spend days trying to get video to work along side imported SWF etc in Indesign.  One of the best controls in Flash is being able to set the stage.scaleMode for the document so the PDF still looks crisp when zooming, no white borders etc.  So, create the .fla, export to .SWF, open the .SWF with Acrobat, modify the advanced settings to enable start on page load and save as a PDF.  If you don't know Flash, I didn't a couple of days ago, watch a couple of tutorials on Youtube.. buttons, tweens, embedding video and you'll be ready.  Don't be put off by ActionScript, there are really handy Code Snippets in CS6 that do all the heavy lifting for you.
    Sorry Indesign!
    Best,
    Em

  • Sidebar moving over right border of website and outside of main container

    Hi
    I'm doing a website and have a question.
    I have a left nav bar, a fluid center column and an absolute positioned right sidebar.
    The sidebar is set to clear left and float right.
    However the sidebar moves over to the right and extends past the right border on some browsers.
    It moves out of the main container and I would like it to remain within it.
    Does anyone know how I can fix it so that the sidebar stays within the white area and does not move to the right?
    Thanks for your help!!!!
    Here is a screen shot
    When the browser window gets a little smaller the sidebar goes back to where I want it.
    Here is a link to my test page online:
    http://elynncohen.com/index2.html
    and here is my code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Your Career Direction Career and College Counseling</title>
    <meta name="Keywords" content="career counseling, college counseling, job search, career choice, college options, career options, work, jobs, new opportunities, career change, new career, new job" />
    <meta name="Description" content="Your Career Direction :: Career and College Counseling" "Considering your college choices & career options" "Preparing for the world of work after college" "Seeking a new position to further your career"
    "In-transition and considering new opportunities"
    "Seeking to make a significant and meaningful career change"  />
    <meta name="Publisher" content="Your Career Direction, LLC" />
    <meta name="Copyright" content="Copyright 2012, Your Career Direction, LLC. All rights reserved." />
    <meta name="Author" content="Lisa Mark" />
    <meta name="Language" content="en-US" />
    <meta name="distribution" content="global" />
    <meta name="revisit-after" content="10 days" />
    <meta name="Robots" content="All" />
    <link rel="Index" href="index.html" />
    <link rel="Site Map" href="sitemap.html" />
    <script type="text/javascript" src="//use.typekit.net/ifb2bte.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <style type="text/css">
    <!--
    body {
        margin: 0;
        padding: 0;
        color: #000;
        font-size: 100%;
        line-height: 1.4;
        background-image: url(images/background.gif);
        background-repeat: repeat;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
        padding-right: 15px;
        padding-left: 15px;
    .container .sidebar1 h3 {
        padding-left: 0px;
        color: #C60651;
        font-size: x-large;
    h1 strong {
        color: #C60651;
        font-size: 90%;
        font-family: "Binary ITC Bold";
    h1 strong em {
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
        color:#414958;
        text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
        color: #4E5869;
        text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
        width: 80%;
        max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
        min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
        background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
        margin-top: 0;
        margin-bottom: 0;
        margin-right: auto;
        margin-left: auto;
        border-right-width: thick;
        border-left-width: thick;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: #C60651;
        border-left-color: #C60651;
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
        padding-top: 40px;
    #Quote {
        float: right;
        clear: left;
        margin-right: 1%;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
        float: left;
        width: 20%;
        padding-bottom: 10px;
        margin-top: 40px;
        border-top-color: #FFF;
        border-left: #FFF;
        margin-left: 25px;
        background-color: #FFF;
        font-family: museo-sans;
    arial;
        max-width: 200px;
        min-width: 180px;
        position: absolute;
    .content {
        float: left;
        margin-top: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10;
        font-family: museo-sans;
    arial;
        margin-right: 250px;
        margin-left: 220px;
    .container .content p {
        padding-top: 0px;
    .sidebar2 {
        float: right;
        width: 20%;
        background-color: #D3CCB2;
        margin-top: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0px;
        border-top-color: #FFF;
        border-right-color: #FFF;
        border-bottom-color: #FFF;
        border-left-color: #FFF;
        border-right-width: 5px;
        font-family: museo-sans;
    arial;
        font-size: 90%;
        position: absolute;
        clear: left;
        right: 12%;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
        padding-top: 0px;
        padding-right: 25px;
        padding-bottom: 15px;
        padding-left: 40px;
        font-family: museo-sans; arial;
        font-size: 100%;
        color: #666;
    .container .content p {
        font-family: museo-sans;
    arial;
        padding-top: 0px;
        padding-left: 17px;
        padding-bottom: 0px;
    #Quote {
        float: right;
        clear: both;
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
        list-style: none; /* this creates the space between the navigation on the content below */
        font-family:museo-sans; arial;
        line-height: 250%;
    .nav {
        font-family: museo-sans;
    arial;
        padding-left: 0px;
    ul.nav li {
        font-family: museo-sans; arial;
        padding-bottom: 10px;
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
        display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
        text-decoration: none;
        color: #333333;
        background-color: #FFF;
        font-family: museo-sans; arial;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 10px;
        padding-left: 15px;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
        color: #C60651;
        font-family:museo-sans; arial;
        background-color: #FFF;
        background-image: url(images/navbar2.gif);
        padding-bottom: 10px;
    .content img {
    /* ~~The footer ~~ */
    .footer {
        position: relative;/* this gives IE6 hasLayout to properly clear */
        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
        padding-top: 0px;
        padding-right: 0;
        padding-bottom: 10px;
    /* ~~miscellaneous float/clear classes~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .container .content {
        width: 50%;
        font-size: large;
        font-family: museo-sans; arial;
    #footer {    width: 100%;
        background-color: #FFF;
    .container .sidebar2 h4 img {
        padding-left: 20px;
        padding-top: 0px;
    .sidebar2 p img {
        border: medium solid #C60651;
    #Insert_logo2 {
        border-top-width: 4px;
        border-right-width: 4px;
        border-bottom-width: 4px;
        border-left-width: 4px;
        border-top-color: #fff;
        border-right-color: #fff;
        border-bottom-color: #fff;
        border-left-color: #fff;
    .container .content p .content strong {
        font-family: museo-sans; arial;
    .container .content .content {
        font-family: museo-sans; arial;
    .container .content ul li strong {
        font-family: museo-sans;
    arial;
        font-size: 95%;
        line-height: 150%;
        list-style-type: disc;
    .container .content ul {
    test {
        font-family: "Binary ITC Bold";
    .container .sidebar2 p img {
        margin-right: auto;
        margin-left: auto;
        border-top-width: medium;
        border-right-width: medium;
        border-bottom-width: medium;
        border-left-width: medium;
        border-top-color: #C60651;
        border-right-color: #C60651;
        border-bottom-color: #C60651;
        border-left-color: #C60651;
    li strong {
        line-height: 130%;
        list-style-type: circle;
        color: #978980;
    .container .content ul {
    .container .sidebar1 .nav {
        margin-top: 10px;
        margin-bottom: 10px;
    .sidebar1 .nav li {
        padding-bottom: 10%;
    .nav li a {
        background-image: url(images/navbar2.gif);
        background-repeat: no-repeat;
        background-position: right center;
        left: auto;
        right: auto;
        clip: rect(auto,auto,auto,auto);
    .container .sidebar1 .nav li a {
    .container .sidebar1 h6 {
        padding: 0px;
        color: #000000;
    #footer h3 strong {
        font-size: 60%;
        color: #978980;
    .container .content p {
        padding-right: 0%;
        padding-left: 0%;
        font-size: 85%;
    .container .sidebar2 p {
        padding-right: 8%;
        padding-left: 8%;
        padding-top: 5px;
    #Insert_logo2 #Insert_logo2 {
        padding-left: 15px;
    .container .content ul {
        color: #C60651;
    h6 {
        color: #978980;
        font-family: museo-sans;
    arial;
        font-size: 82%;
        padding-left: 20%;
        text-align: left;
        text-indent: 8px;
    .nav li a {
        padding-bottom: 10px;
    h8 {
        font-family: museo-sans; arial;
        font-size: 100%;
    h4 {
        font-family: museo-sans;
    arial;
        font-size: 100%;
        color: #C60651;
        padding-left: 17px;
        padding-top: 5px;
        padding-bottom: 0px;
    .container .content p {
        padding-left: 17px;
        padding-right: 30px;
    .sidebar1 h8 strong {
        font-size: 80%;
        font-family:museo-sans; arial;
    .container .sidebar1 h7 {
        font-size: 40%;
        color: #978980;
    h7 {
        font-family: museo-sans; arial;
        font-size: 15%;
    .container .sidebar1 h8 {
        font-family: museo-sans; arial;
    .sidebar2 p img {
        min-width: 200px;
        max-width: 100%;
    .container .content img {
        padding-left: 3%;
    img {
        position: static;
        text-align: left;
    body,td,th {
        font-family: museo-sans; arial;
    h5 {
        font-size: 150%;
        color: #C60651;
        padding-left: 0px;
        font-family:museo-sans; arial;
    .container .content p {
        padding-left: 17px;
        padding-right: 30px;
        font-size: 87%;
    .container .sidebar2 p {
        font-size: 90%;
    .container .sidebar1 .nav li {
        font-family: museo-sans;
    arial;
    .container .sidebar1 .nav li a {
        padding-left: 0px;
        margin-bottom: 0px;
        height: 30px;
    li a {
        padding-left: 2px;
    -->
    </style><!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]--></head>
    <body><script type="text/javascript">
    function pageWidth() {
    return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
    function pageHeight() {
    return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
    </script>
    <div class="container">
      <div class="header"><!-- end .header -->
        <p class="clearfloat"><a href="#index.html" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Your Career Direction Logo" name="Insert_logo" width="50%" id="Insert_logo2" style="background: #FFF
        ; display:block;" /></a></p>
        <div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
        <p class="clearfloat"> </p>
    </div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">High School Students</a></li>
          <li><a href="#">College Students</a></li>
          <li><a href="#">Parents/Educators</a></li>
          <li><a href="#">Professionals</a></li>
          <li><a href="#">Bio</a></li>
          <li><a href="#">Q &amp; A Blog</a></li>
          <li><a href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="content">
    <p>Given today's competitive job market, global economy, and changed corporate culture,
    we can no longer depend upon others to ensure our professional futures. Choosing or
    changing your career direction requires self-reflection, career education and an action plan.</p>
    <img src="images/Whether-you-are-.gif" alt="Whether you are considering your college choices and career options" width="197" height="31" align="left">
    <ul>
          <br><br><li><strong>Considering your college choices &amp; career options</strong></li>
          <li><strong>Preparing for the world of work after college</strong></li>
          <li><strong>Seeking a new position to further your career</strong></li>
          <li><strong>In-transition and considering new opportunities</strong></li>
          <li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
        </ul>
    <img src="images/Onethingisforsureraster.gif" width="352" height="49" alt="One thing is for sure, we all want to direct our own careers, our own lives!">
    <br><p> Building a successful and rewarding career requires linking your interests, education and experience with employment trends, growth industries, and career choices. It takes making smart decisions about your college major, vocational training and continuing education options. With enthusiasm, persistence and top notch job search skills, you can succeed in finding a path to career that is right for you.</p>
    <p> We are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go and become what you want to be.</p>
    <img src="images/yourcareerourpassionraster.gif" width="441" height="20" alt="At Your Career Direction, YOUR career is our passion!"> </div>
      <div class="sidebar2">
        <p><img src="images/Counselingastudent.gif" width="100%" alt="Lisa Mark counseling a student"></p>
        <p>Our mission is to help you explore, choose and create your direction for an exciting and rewarding career path.</p>
         <p>We incorporate our experience with today's job market and career counseling expertise with your passions and interests. We'll introduce you to new career ideas, target companies and generate job and internship opportunities for you.</p>
         <p>We provide step by step guidance to ensure your success during the college application, job interview
    and decision making process.
    </p>
    </div>
      <div class="footer">
        <div id="footer">
          <h6 align="left"> Your Career Direction, LLC •  96 Harvard Avenue, Maplewood, N.J. 07040 • (973) 996-0207 • [email protected]</h6>
             </div>
        <p> </p>
      <!-- end .footer --></div>
    <!-- end .container --></div>
    </body>
    </html>

    Absolute positioning will always cause you problems so it's best to avoid unless absolutely necessary.
    Having said that, your layout issues were a straight-forward fix. Modify your style sheet with the below sections and and it should be ok. You might need to modify your CSS for smaller screens as once you reduce the browser window to about 500px, the right sidebar disappears. Something to be aware of.
    .sidebar1 {
        float: left;
        width: 20%;
        padding-bottom: 10px;
        margin-top: 40px;
        border-top-color: #FFF;
        border-left: #FFF;
        margin-left: 25px;
        background-color: #FFF;
        font-family: museo-sans; arial;
        max-width: 200px;
        min-width: 180px;
        position: absolute;
    .content {
        float: left;
        margin-top: 40px;
        margin: 40px 0 0 0;
        padding:10px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10;
        font-family: museo-sans; arial;
        margin-right: 250px;
        margin-left: 220px;
        width: 50%; /* You can increase this to 55%, or add a left and right margin to space the elements */
        font-size: large;
    .sidebar2 {
        float: right;
        float:left;   
        width: 20%;
        background-color: #D3CCB2;
        margin-top: 40px;
        padding: 10px 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0px;
        border-top-color: #FFF;
        border-right-color: #FFF;
        border-bottom-color: #FFF;
        border-left-color: #FFF;
        border-right-width: 5px;
        font-family: museo-sans; arial;
        font-size: 90%;
        position: absolute;
        clear: left;
        right: 12%;
    .sidebar2 p img {
        min-width: 200px; /* This needs to be removed or made smaller if you are keeping it - or set a min-width on sidebar2 */
        max-width: 100%;
        width:100%;
        height:100%;
    .container .content {
        width: 50%;
        font-size: large;
        font-family: museo-sans; arial;
    EDIT:// I meant to say, you should probably spend some time tidying up your CSS as they are not in any obvious order and can get confusing with multiple styles for the same element. Having a clean and easy to understand CSS sheet makes it easier for you to figure out what is wrong. Will help you enormously in the long run.
    Message was edited by: Rik

  • How can I create a white border around figures that are in an image? (CS 6; examples+image included)

    Hi,
    I have CS6 and am wondering how to create a white ("comic style"?) border around figures in an image, as in the examples below. I don't wish to include the black shadow of the border, just the white part.
    Examples:
    Here's the image I'd like to alter, making a white border around the outline of all five figures:
    I researched for quite a while but could find no instructions. It would be very much appreciated if someone knows and would be kind enough to share the technique! Thank you.

    If you make the image a layer (opposed to Background)...
    You could Select the blue with the Magic Wand as Semaphoric says, then fill with white.  Then choose Select - Modify Selection - Contract, and mask or delete the remaining pixels.  The Contract operation will give you a nice border the size you choose.
    For extra credit, you could use Refine Edge to make the selection more accurate.
    Click to see the image  against a dark background.
    -Noel

Maybe you are looking for

  • Error when loading the data from PSA to ODS......

    Hi BW guru's, i am facing one problem while loading the data from PSA to ODS.so please help me in this regard. Please give a step by step guidelines for me... the error while loading the data from PSA to ODS is "There are no PSA tables for these sele

  • Recovery and Partitions

    Hi, I have a T530. C is my primary operating drive Q is Lenovo recovery drive I shrunk C and created a logical partition for data with a different drive letter. If I use Lenovo's recovery software, when it restores factory state to C drive wil it ove

  • Response Message ID Error

    Scenario:RFC TO JDBC (Syncronous ) Error: Below error is coming in Response Message ID. Added one new field  "EXPIRED" in DATA TYPE  and mapped it with EXPIRED field in RFC but when I checked in SXMB_MONI whether this object is working fine or not .

  • Ipod video 60 GB won´t charge from USB

    Hi my ipod won´t charge thru usb cable instead it will deplete the whole battery, I have tried connecting it in several ports, several computers and with 3 different usb cables with no luck, I noticed it will only charge thru my old firewire charger

  • Portal with CUA userbase

    Hi, Our Scenario: We are using portal with CUA userbase. But, now we want to use the portal for a Non-CUA system users ( this system is not part of CUA) How can I set up the portal authentication ? Can I setup two user bases ? Please advice