Annoying CSS align problem.

Before anything, an image I made to explain:
I'm just learning CSS pretty much by having a play, then I'll google anything I get stuck with but can't find an answer for this.
Sorry the code is on another computer so any syntax errors please ignore, I know it's not a syntax problem by the way I just don't know what to do.
OK, so as you can see where the white text is, thats where I want to type. I could put an AP div in there but know that both bad practice and wont be fluid/liquid.
I have tried setting the image as a BG, centering it, adding another div and changing the left-margin to the appropriate amt then going down with the space bar but this brings the image down with it.
I've tried floating an extra div
I've had extra divs in and out of the div with the background in.
I've tried changing the Z-index of them both, still same problem.
I'm sure it's simple to some but can't think what to go with!

Start with a basic, pre-built  2-col layout.  If you want text superimposed on images, you'll need to put those images in the division's background.
EXAMPLE - (view page source to see the HTML and CSS code)
http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Similar Messages

  • Having a image alignment problem using clearbox

    Hi,
    I'm having an image alignment problem. I cannot figure it out. I'm using the clearbox - lightbox dreamweaver widget. Using Dreamweaver CS6.
    Actual page located here. Any help would be appreciated.
    http://dirtysouthink.com/gallery/dustin2.html

    This has very little to do with Dreamweaver. DW is merely a tool to assist you in building a web site. It is purely a matter of styling (CSS).
    When I look at the structure, I see
    BODY-CONTENT (width: 490px)
         GALLERY (width: 452px)
              CONTAINER (width: 500px)
                   ITEM (width: 150px)
    From this I can deduce that:
    GALLERY will fit inside BODY-CONTENT
    CONTAINER will NOT fit inside GALLERY or BODY-CONTENT
    ITEM will fit three times into CONTAINER
    To start with, I would reduce the size of the CONTAINER so that it fits inside of its parent. Then I would adjust the width of the ITEM so that only two of them fit inside of the CONTAINER.

  • Same alignment problem! can ANYONE help??

    Hi guys i still need help with my alignment problem! My nav
    bar lokos good in the preview window of fireworks
    CLICK
    HERE TO VIEW THE NAV BAR IN FIREWORKS
    but when previewed in a browser or exported into dreamweaver,
    the navbar is all out of order
    CLICK
    HERE TO VIEW THE NAV BAR IN DREAMWEAVER
    Can anyone tell me what is going on?? i really need to launch
    the website ASAP.
    Thankyou!

    10totti wrote:
    > Hi guys i still need help with my alignment problem! My
    nav bar lokos good in
    > the preview window of fireworks
    >
    >
    http://img97.imageshack.us/my.php?image=nav1yp1.jpg
    I hate being harassed by ads and will not review images on
    the image
    shack site any longer. Post the screen shot or original file
    to your
    personal site.
    Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
    http://www.projectseven.com
    Fireworks Newsgroup:
    news://forums.projectseven.com/fireworks/
    CSS Newsgroup: news://forums.projectseven.com/css/
    Design Aid Kits:
    http://www.webdevbiz.com/pwf/index.cfm

  • Banner Alignment Problem

    I am having an alignment issue with a website that I recently built using dreamweaver.
    http://bacs.myweb.uga.edu
    There is not an alignment problem on the front page (index.html), but subsequent pages (http://bacs.myweb.uga.edu/currentstudents.html) change the alignment of the banners below the tabs for each section.  Screen resolutions of 1280X800 do not have any alignment issues, but pretty much any other resolution changes the alignment.  Is there a solution to this problem?  Rather than posting all the code, you should be able to get it from the links above.  Thanks in advance.
    Frustrated in Athens,
    Aldo

    html
    <body>
    <div id="wrapper">
    </div>
    </body>
    css
    #wrapper {
    width: /*the width of your content */
    margin:0 auto; /*this will centre align it*/
    padding:0;

  • Alignment problem in converting smartform printpreview into PDF

    Hi all,
    I am getting some alignment problem in converting smartform printpreview into PDF format, i.e the format of PDF is different from printpreviw of smartform.
    kindly suggest something so that alignment is not changed while converting to PDF.
    Regards,
    Sumalatha

    use below f.m to convert it into 255 characters....
         CALL FUNCTION 'QCE1_CONVERT'
            TABLES
              t_source_tab         = i_tline
              t_target_tab         = so_ali[]
            EXCEPTIONS
              convert_not_possible = 1
              OTHERS               = 2.

  • Annoying Ipod Synching Problem!!!- Laptop Crash- Now On Another Comp

    I Have a Very Annoying and frustrating Problem with my Ipod Classic (80GB). Recently my laptop Crashed and i got all the music onto my main computer now. The Problem now is getting the music onto my ipod. I Synched it to the computer, Therefore It erases my music from the ipod and synchs it to new itunes. But everytime i try to get the music onto the ipod it either, connects them disconnects, Has a Unkown error Or when i've Waited for ages getting all the music on to it, It says A required file is missing and so your ipod cannot be Syched AND i end up with nothing on the ipod and lots of wasted time
    Someone Plz Help.
    I reset my ipod and tried it in CD mode but it still didn't work!
    What Should I Do?
    Message was edited by: TigerMegz

    +I tried various troubleshooting steps and each time when plugging the iPod in Itunes it starts up and it takes maybe 1 minute trying to recognize it when the computer crashes and reboots automatically going to the black screen and doing a file dump.+
    I'm curious about this point. Is there any flash of a blue screen at any point here? (That's a more familiar sort of thing to be seeing prior to the system doing a restart after a serious error.)

  • Alignment problem on abap report after Unicode conversion

    Hi,
    I've recently convert my system to unicode. Now my user is complaining the aged debtor report (ABAP) is having a column alignment problem when displaying the Japanese character.
    I'm not sure what to do now. Have anyone experience this and let me know how can I sove the problem?
    /Eida

    Hi,
    you need to regenerate the data
    For this regeneration, you start the program RKETREGP with the parameter
    application class 'KK', subclass '01' and table name 'KKROBJ'.
    br, Guido

  • CSS Float Problem

    Hi All, 10 years since I've been on here (in the days of tables) I have, I'm sure a very basic css float problem in the footer and hopefully someone could take the time to review it for me.  I have checked everything but can't find the problem.  Thanks in advance;
    example of problem here  http://davidbrown.ipower.com/template/template.htm
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Our Jewelry Retail Secrets - Thank You</title>
    <link href="../stylesheet/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .H1_black {color: #000000}
    p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 25px;
    font-weight: normal;
    color: #000000;
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    .headlinetxt_colour {color: #FF6600}
    .style1 {color: #ff6600}
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="wrapperfix">
        <div id="toporange_bg">login</div>
      </div>
       <div id="wrapperfix_top_grey">
        <div id="top_grey_content_wrapper">
          <div id="big_logo"></div>
          <div id="welcome_user">Welcome "username here"</div>
        </div>
      </div>
      </div>
        <div id="main_content">
          <p>
            <!--main body content goes here -->
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <p> Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. </p>
      </div>
        <div id="footer_container">
          <div id="footer">
            <div id="footer_left">Footer Left</div>
            <div id="footer_centre">Footer Centre</div>
          <div id="footer_right">Footer Right</div></div>
        </div>
    </body>
    </html>
    #footer_container {
    background-color: #333333;
    width: 100%;
    top: 0px;
    margin: 0px;
    padding: 0px;
    #footer {
    background-color: #666666;
    min-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
    width: 1000px;
    height: 150px;
    overflow: hidden;
    clear: both;
    margin-top: 0px;
    margin-bottom: 0px;
    position: relative;
    #footer_left {
    float: left;
    width: 33%;
    margin: 0px;
    padding: 0px;
    height: 150px;
    #footer_centre {
    width: 33%;
    height: 150px;
    margin: 0px;
    padding: 0px;
    float: left;
    #footer_right {
    float: left;
    width: 33%;
    height: 150px;
    margin: 0px;
    padding: 0px;

    I still don't see the #footer_left rule in the CSS in the online example at
    http://davidbrown.ipower.com/template/template.htm

  • Paper Alignment problems!

    I have a HP F4280 all in one printer, just recently when doing any type of printing, everything is printed but comes off alignment, that is not straight on the page. How can I fix this paper alignment problem? I've had this printer for 2 years now and just recently the alignment is off, I haven't done anything different!

    The troubleshooting page here may help.
    Bob Headrick,  HP Expert
    I am not an employee of HP, I am a volunteer posting here on my own time.
    If your problem is solved please click the "Accept as Solution" button ------------V
    If my answer was helpful please click the "Thumbs Up" to say "Thank You"--V

  • Spot healing brush alignment problem

    Using Photoshop CS4 (11.0) on a Mac with 10.5.6. Sometimes the spot healing brush works as expected. However, after working for a while, the alignment seems to be off--I hover the cursor over the spot I want to retouch, but when I click the mouse the area retouched is a bit (1/4" or so) below the spot healing brush cursor. If I quite and restart Pshop the problem goes away. This is with the spot healing brush--not the one where you need to select where to clone from. Is something wrong, or is there a new feature I don't know about that's causing this? I've used the spot healing brush quite a bit with CS3.
    If anyone has any thoughts, I'd appreciate hearing them. This is getting frustrating.

    I think you are talking about a different issue here. This problem is not specific to the spot healing brush.
    @ OP: The brush alignment problem is very real and I have it frequently when working with larger files (approximately >500MB in memory). I have two macs, a macbook (GMA X3100) and a mac pro (ATI Radeon HD 2600 XT). So two completely different hardware arrangements that have the exact same problem.This is clearly not a problem with graphics cards.
    Drawing with any tool like: brush (any brush - dodge/burn, blur, eraser etc.), lasso (any lasso), line, crop tool etc. will result in a misalignment of about 0,5 cm directly downward. However, clicking on menus and dialogue boxes works as expected. Switching off OpenGL features in PS WILL NOT PREVENT THE PROBLEM (if I shout, maybe Adobe will hear...). The same problem appears whether I'm using a Wacom tablet or a mouse. It even appears when the Wacom driver is uninstalled.
    So, if Adobe is not acknowledging the problem it's safe to assume it will be featured in CS5 as well.
    @ Jim: Sorry, I would have posted in the other thread but your link does not work anymore.

  • Can I fix the alignment problems my Color LaserJet CP1518ni is having? The red does not line up.

    Can I fix the alignment problems my Color LaserJet CP1518ni is having?  The red does not line up.  I have installed the latest updates, etc.  Calibrating does not help.  The printer is only a few years old.  What gives?
    This question was solved.
    View Solution.

    Please be aware that this forum is a peer to peer support forum, it is not a direct link to HP support.
    I have a similar issue with a Laserjet cp1525nw, it was mostly corrected by removing and reseating the toner cartridges.
    Bob Headrick,  HP Expert
    I am not an employee of HP, I am a volunteer posting here on my own time.
    If your problem is solved please click the "Accept as Solution" button ------------V
    If my answer was helpful please click the "Thumbs Up" to say "Thank You"--V

  • Alignment problems in JSF datatable

    Hi,
    In my JSF data-table, i have few alignment problems.
    For Example, I have 4 columns, Emp-Id, First-Name,Last-name and Age.
    What happens is, sometimes, the value in the First-Name cell moves into the Last-Name cell, leadiing to alignment problems. But this is not happening always. Occasionlly this happens.
    I tried with iFrames and also by having fixed width for each cell, then also this problem is persisting.
    Is it something to do with the datatable display in JSF?
    Any suggestions/ideas on how to resolve this problem would be of immense help.
    Thanks

    Hi
    What happens if you delete the text and retype in and change alignment ?
    Does the same issue happens with all sub menu items ?
    Please provide the site url.
    Thanks,
    Sanjit

  • Keynote 9 and objects alignment problems

    Why keynote does not align object using the first one selected as stated in the user guide?
    It will rather use the highest one for top, the lowest one for bottom and a ponderate value for all objects for middle.
    Same problem for left center right.
    If I do align top with an order like (1 being the 1st selected, 2 the 2nd and 3 the 3rd).
         2                                             1     2          3
    1                       I end up with                              Rather than 1     2          3
                   3
    If I do align top with
         3                                             2     3          1
    2                      I end up with                               Rather than
                   1                                                                                      2     3          1
    Can this be changed somewhere?
    This is just not logical at all. The first object should be the reference for the alignment.
    There also is a problem with distribution, it uses the farthest left and the farthest right in Horizontal distribution rather
    than first and last selected.
    This is against the documentation.
    Cheers.
    Joffrey.

    Hello.
    Thanks for your reply. Indeed, these alignment guides are a powerful and great tool that I use all the time.
    Nevertheless when it comes to aligning a big amount of shapes, I can't be bothered doing it one by one.
    In the manual of Keynote 09' it is written page 89 and 90:
    Quickly Aligning Objects Relative to One Another
    You can use menu commands to quickly move objects on the same slide in alignment or space them equally apart. First, you must select all the objects you want to align (hold down the Shift or Command key as you click each object to select it).
    To align selected objects:
    m    To align the objects with each other, choose Arrange > Align Objects and then choose one of the alignment options in the submenu.
    Left:  Positions objects so that their left edges align vertically to the first object you select.
    Center:  Positions objects so that their centers align vertically to the first object you select.
    Right:  Positions objects so that their right edges align vertically to the first object you select.
    Top:  Positions objects so that their top edges align horizontally to the first object you select.
    Middle:  Moves objects vertically so that their centers align horizontally to the first object you select.
    Bottom:  Positions objects so that their bottom edges align horizontally to the first object you select.
    There is a discrepency between the manual and what Keynote actually does.
    I know there are lots of way to circumvent this alignment problem, I would just want to know if there is a place, in a config file, may be where this can be switch from topper to first one for example in case of an align top.
    Any other tools such as Omnigrafle, Axure, Visio, Adobe suites, you name it, do it using the first selected object. I whish Keynote would act as expected.

  • CSS Align right problem

    Hi
    I am using the following css to align a div to the right hand
    side of the
    page:
    #headerRight { RIGHT: 10px; MARGIN-RIGHT: 0px; POSITION:
    absolute; TOP: 5px;
    align: right; border: 0; width: 235px;}
    The above seems to work well, except for one small annoying
    problem. If the
    content of the page is wide and causes the horizontal scroll
    bar to appear,
    then the div seems to work as it appears 10px from the right
    side of the
    window. However if I move the horizontal scroll bar over to
    the right, then
    the div doesnt move accordingly.
    If I then resize the browser window, then the div moves and
    always lines up
    10px from the edge no matter what size the window is.
    Anyone know where I am going wrong, or need any more
    information?
    Thanks
    Brendan
    Rate your experiences with your UK and Ireland builders at
    http://www.ratethebuilder.co.uk
    =========================================

    Solved the problem by using the following javascript code:
    function scrollDetect(){
    document.getElementById("headerRight").style.left =
    document.body.clientWidth - 245 + document.body.scrollLeft;
    setInterval("scrollDetect()", 500);
    Where 245 is the width of the div.
    Only problem is that the code probably isnt cross browser at
    the moment, but
    I'll work on that.
    Thanks again for all your help.
    Rate your experiences with your UK and Ireland builders at
    http://www.ratethebuilder.co.uk
    =========================================
    "RateTheBuilder" <[email protected]>
    wrote in message
    news:[email protected]...
    > Osgood
    >
    > Sorry, would love to post a url, but content is
    sensitive.
    >
    > Basically I have a div which stretches the width of the
    page which
    > contains the header details. Then on top of this div but
    to the very right
    > of the page I have a div that I have absolute
    positioning set. This div
    > must remain the set distance from the right of the
    screen (10px) even when
    > the user is scrolling horizontally.
    >
    > Thanks for your time so far and I hope I've shed a
    little more light.
    >
    > Brendan
    > ______________________________________________
    > Rate your experiences with your UK and Ireland builders
    at
    >
    http://www.ratethebuilder.co.uk
    > =========================================
    >
    > "Osgood" <[email protected]> wrote in
    message
    > news:[email protected]...
    >> RateTheBuilder wrote:
    >>
    >>> Osgood
    >>>
    >>> There is no content on the same level as the div
    to the right, but the
    >>> content below the div may extend the width of
    the page. There are other
    >>> divs on the same level as the one I want to keep
    right and I have the
    >>> problem div above them, so that is why I used
    absolute positioning.
    >>
    >> Sorry i'm lost.
    >>
    >> You say you have no content on the same level as the
    div to the right and
    >> then say there are other divs on the same level as
    the one you want to
    >> keep right?
    >>
    >> Can you post a url to the page in question?
    >>
    >
    >

  • CSS vertical-align problem

    I cant figure out why the valign isnt working on my page..
    http://www.v4.skiingbc.info/pages/skiarea2.php?Name=Test1212&TrailMaps=X&FS=√&LP=√
    CSS Sheet:
    http://v4.skiingbc.info/v4.css
    I want all text to be middle aligned in the table cells... If
    someone could take a look at the code that would be really
    appreciated..
    In Dreamweaver the text is middle aligned, it just doesnt
    work in IE7

    You have this on the page:
    <td height="79"
    <valign="top">
    try changing it to thos:
    <td height="79" valign="top">
    you also have this:
    <option selected="selected">Select Card
    Type</option>
    option selected>Search By Card Type
    </option>
    make it like this:
    <option selected="selected">Select Card
    Type</option>
    Ken Ford
    Adobe Community Expert
    Fordwebs, LLC
    http://www.fordwebs.com
    "Monica101" <[email protected]> wrote in
    message news:f0foos$n7u$[email protected]..
    > I've got text in a table that won't align at the top:
    >
    > <td height="79"valign="top"><table width="150"
    border="0" cellpadding="0"
    > cellspacing="0" class="Side_Links">
    >
    > It looks fine in Dreamweaver, but displays verticaly in
    the center of the
    > table. I've been working in Dreamweaver for years and
    never had this problem. I
    > tried fixing it w/ css:
    >
    > vertical-align: top;
    >
    > This didn't work either.
    >
    > Page:
    >
    >
    http://www.capitalinternet.com/~mycredit/template.php
    >
    > Thanks!
    >
    >

Maybe you are looking for