Results 1 to 7 of 7

Thread: Text over Image with Nvu

  1. #1
    Registered
    Join Date
    Jun 2010
    Location
    Texas
    Posts
    3
    Rep Power
    0

    Red face Text over Image with Nvu

    i was wondering if anyone could tell me how to place Text over a Image in Nvu or Kompozer?

    What I had was a Image with the title of the page it leads to on it,
    I used Paint Shop pro to add that title to the photo, What I would LIKE to do is not have to use Paint shop to change the text or title whenever I need too.
    is there a way to do this without having to go to the Source?

    i started using the Layers button and thought that was working until i opened it to View it in the Browser.

    any help would be greatly appreciated.

    as far as web building goes I'm a complete noob

  2. #2
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    Not in Solomons anymore.
    Posts
    3,442
    Rep Power
    21
    You mean like this? I use this graphic, harborview800x65.jpg (JPEG Image, 800x65 pixels), on my site (link in sig). I use CSS to overlay the text 'somdcomputerguy' on that image. I'll post the CSS code shortly, or look at it and try to piece it out yourself, I'm about to eat..
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  3. #3
    Registered
    Join Date
    Jun 2010
    Location
    Texas
    Posts
    3
    Rep Power
    0
    yes I think thats what I'm looking for.

    if I can puzzle out how to do it hehe

  4. #4
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    Not in Solomons anymore.
    Posts
    3,442
    Rep Power
    21
    Basically, the text (in a div classed 'header' ) is just written over (the 'left' and 'top' properties) the image. The image has it's own CSS (classed as 'x'), but this has nothing to do with the 'overwriting' thing.
    This bit of CSS
    PHP Code:
    img.x{width39.375emheight4.0625empositionfixedleft5%; top2%; padding3pxborder1px solid black;}
    .
    header {positionfixedleft6.5%; top3%; background#ffffff; color: #191970; font-family: tahoma, arial, helvetica, serif; font-size: .8em; font-variant: small-caps; font-weight: bold;} 
    and this bit of HTML
    PHP Code:
    <a href="index.php"><img class="x" src="graphics/harborview800x65.jpg" title="click here to (re)load my homepage" alt="[logo that links to home page]"></a>
    <
    div class="header">SoMDcomputerguy</div
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  5. #5
    Registered
    Join Date
    Jun 2010
    Location
    Texas
    Posts
    3
    Rep Power
    0
    I'm having a hard time figuring out how to use the CSS

    the text appears for me under the image instead of over?

    are there any CSS tutorials you would recomend?

    as I may have mentioned I'm a complete noob at this lol

  6. #6
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    Not in Solomons anymore.
    Posts
    3,442
    Rep Power
    21
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  7. #7
    Mod.. with bite.. Croc Hunter's Avatar
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    7,332
    Rep Power
    26
    Did you ask on the Kompozer support forum? I know it's supported SVG images for ages now so it may also support DIV layers and auto create CSS files through it's WYSIWYG editor mode. Will save you coding headaches.
    Croc Hunter MSC :

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •