Register

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

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Jan 2012
    Posts
    4
    Member #
    30698
    i am building a simple webpage and i know little about html or css coding. i am using dreamweaver and all i want my webpage to have is a background image with text over it and 2 links. i already have the background image and text set up on it and i know the codes to create a link. but i cannot figure out how to move the link to where i would like it on the page. for example, when i create the link it will go to a random spot on the page, but i need it in a specific spot. can anyone help me out?

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    Hard to say without seeing the actual web page.
    Do you have the page uploaded online somewhere?

    Typically, you break your page up into sections ... eg. <div>..</div>
    Those sections define the areas of your page. You place content within
    those, and the content stays there.


  4. #3
    Junior Member
    Join Date
    Jan 2012
    Posts
    4
    Member #
    30698
    i dont have it uploaded but here is the code i have so far. all i want is a simple webpage with a background pic and text. i would like to have links right below the text, but i cannot figure out how to move them to specific areas

    <!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>asdf</title>

    <body>
    <img src="file:///C|/Users/Owner/Desktop/image001.jpg" width="1000" height="658" />

    </body>
    </html>

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    That's not setting the image as a background image, that's just putting an image on the page.

    You'll need CSS to set an image as the background and do what you are asking to do.

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    Here's a simple template to get you started ....

    Code:
    <!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>asdf</title>
    <style>
    body{
    margin:0px auto;
    width:1000px;
    height:658px;
    background:url(file:///C|/Users/Owner/Desktop/image001.jpg) no-repeat;
    text-align:center;
    }
    #content{
    background-color: transparent;
    width:1000px;
    height:658px;
    text-align:left;
    }
    #nav{
    background-color: transparent;
    width:200px;
    border:2px solid #fff;
    float:left;
    }
    #main{
    background-color: transparent;
    padding:0px 0px 0px 50px;
    float:left;
    }
    .paragraph{
    padding:20px;
    font-family:arial;
    font-size:13pt;
    }
    </style>
    <body>
    <div id="content">
    <div id="nav">
    <a href="#">Link One</a><br />
    <a href="#">Link Two</a><br />
    </div>
    <div id="main">
       <div class="paragraph">
       fkld kldjf  ldsjf  ldskfj  dsfljk  eioj fodsi nfds l df sdlkf  weri  dflml
       </div>
    </div>
    <div style="clear:both"></div>
    </div><!-- end content -->
    </body>
    </html>


  7. #6
    Junior Member
    Join Date
    Jan 2012
    Posts
    4
    Member #
    30698
    thanks for the starting point mlseim. i was able to change the links to what i want, but coding does not click with me whatsoever so i need some more help. say i want this as a background image:
    http://imageshack.us/f/638/fuhgwebpage001.jpg/
    where would it go?
    Also, how could i move the link text to a specific spot on the image?

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    See this example ...
    http://www.catpin.com/fuh

    Right-click and view "source" to see the HTML.

    A somewhat simplified example, but it uses CSS positioning.


  9. #8
    Junior Member
    Join Date
    Jan 2012
    Posts
    4
    Member #
    30698
    once again mlsiem saving the day. so i switched the links to what i want, but i cant figure out how to position them under where i want them. they just go to a random spot. is there a code to make them adjust to a specific spot?

  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    You looked at my example?

    You'll see in the CSS styling, the <div> is positioned on the page (wherever you want it to be).
    The upper left corner is the 0,0 reference.



Remove Ads

Posting Permissions

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