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 8 of 8
  1. #1
    Junior Member
    Join Date
    Oct 2009
    Posts
    2
    Member #
    20253
    I am new to HTML and I am trying to make a website for a business. To make links on a banner I used an AP Div with text as a hyperlink. When I view the page in a browser the text jumps to different locations. Is there a better way make links or to put text where I want it. Or is there a way to make the AP divs stay where I put them. Also at the top of the screen there is some text. How do I get rid of it? I posted a screen shot of the web page and the problems I am having. I also posted my Dreamweaver code below that. Thanks a lot in advance for your help with this.

    http://i9.photobucket.com/albums/a79...66/Capture.jpg

    HTML Code:
    <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
    <!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"><!-- InstanceBegin template="/Templates/index1.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    <style type="text/css">
    <!--
    body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        color: #000000;
        background-color: #000;
        background-image: url(../Pictures/bg1.jpg);
        background-repeat: repeat-x;
    }
    .oneColLiqCtrHdr #container {
        width: 800px;
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        border: 1px solid #000000;
        text-align: left; /* this overrides the text-align: center on the body element. */
        background-color: #EAEAEA;
    }
    .oneColLiqCtrHdr #header {
        padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
        background-color: #D6D6D6;
        background-image: url(file:///C|/Users/Ryan/Desktop/Banner.jpg);
        width: 750px;
        position: relative;
    }
    .oneColLiqCtrHdr #header h1 {
        margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
        padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
        position: relative;
        height: 100px;
        width: auto;
    }
    .oneColLiqCtrHdr #mainContent {
        background-color: #DBDBDB;
        width: 780px;
        padding-left: 20px;
    }
    .oneColLiqCtrHdr #footer {
        padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        background:#DDDDDD;
        width: 780px;
    } 
    .oneColLiqCtrHdr #footer p {
        margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
        padding: 10px 0;
    }
    #apDiv1 {
        position:absolute;
        width:629px;
        height:40px;
        z-index:1;
        left: 140px;
        top: 72px;
    }
    #apDiv2 {
        position:absolute;
        width:200px;
        height:115px;
        z-index:1;
        left: 206px;
        top: 345px;
    }
    #apDiv3 {
        position:absolute;
        width:589px;
        height:29px;
        z-index:2;
        left: 308px;
        top: 93px;
    }
    #apDiv4 {
        position:absolute;
        width:200px;
        height:115px;
        z-index:3;
        left: 314px;
        top: 170px;
    }
    #apDiv5 {
        position:absolute;
        width:72px;
        height:28px;
        z-index:1;
        left: 1px;
        top: 0px;
    }
    #apDiv6 {
        position:absolute;
        width:87px;
        height:29px;
        z-index:2;
        left: 72px;
        top: 1px;
    }
    #apDiv {
        position:absolute;
        width:72px;
        height:28px;
        z-index:1;
        left: 79px;
        top: 1px;
    }
    -->
    </style>
    <link href="../Stylesheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    #apDiv7 {
        position:absolute;
        width:90px;
        height:28px;
        z-index:3;
        left: 308px;
        top: 94px;
    }
    #apDiv8 {
        position:absolute;
        width:360px;
        height:57px;
        z-index:3;
        left: 406px;
        top: 227px;
    }
    #apDiv9 {
        position:absolute;
        width:577px;
        height:39px;
        z-index:3;
        left: 330px;
        top: 86px;
    }
    a:link {
        color: #871D20;
    }
    a:hover {
        color: #C60;
    }
    #apDiv10 {
        position:absolute;
        width:532px;
        height:29px;
        z-index:1;
        left: 579px;
        top: 92px;
    }
    #apDiv11 {
        position:absolute;
        width:138px;
        height:21px;
        z-index:2;
        left: 459px;
        top: 643px;
        font-size: 10px;
    }
    #apDiv12 {
        position:absolute;
        width:213px;
        height:19px;
        z-index:3;
        left: 1013px;
        top: 643px;
        font-size: 10px;
    }
    -->
    </style>
    </head>
    
    <body class="oneColLiqCtrHdr">
    <div id="container">
      <div id="header">
        <h1><img src="../Pictures/Banner.jpg" width="780" height="120" /></h1>
        
      <!-- end #header --></div>
      <!-- InstanceBeginEditable name="EditRegion3" -->
      <div id="mainContent">
        <h1> Gallery</h1>
        <h1>&nbsp;</h1>
        <p>&nbsp;</p>
        <p>&nbsp; </p>
        <p>&nbsp;</p>
        <h2>&nbsp;</h2>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <!-- end #mainContent -->
      </div>
      <!-- InstanceEndEditable -->
      <div id="footer">
    
      <p><a href="index.html">Home</a>| <a href="page1.asp">Services</a> | <a href="gallery.html">Gallery</a> | <a href="About.html">About Us</a> | <a href="page2.html">Contact Us</a></p>
        <p>&nbsp;</p>
        <div id="apDiv10"><a href="index.html">Home</a>| <a href="Services.html">Services</a><a href="page1.asp"></a> | <a href="gallery.html">Gallery</a> | <a href="About.html">About Us</a> | <a href="Contact.html">Contact Us</a><a href="page2.html"></a>    </div>
        <div id="apDiv11"> M&amp;L Jewelers 2009</div>
        <div id="apDiv12">Website designed by RKcomputers </div>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    <!-- InstanceEnd --></html>

  2.  

  3. #2
    Senior Member redefyned1's Avatar
    Join Date
    Oct 2009
    Location
    Dallas Texas
    Posts
    102
    Member #
    20249
    Liked
    5 times
    Place your header image as the background for your header in your CSS. Use an unordered list to create your navigation inside your <div id="header></div>

    You should really put your CSS in a separate file and link to your style sheet. This keeps the file size down for your page.

    To remove the text showing at the top, remove it out of your code. It is on the very first line.

    Ken

  4. #3
    Junior Member
    Join Date
    Oct 2009
    Posts
    2
    Member #
    20253
    As mentioned before I am very new to HTML. I am using dreamweaver to design my webpage. I still am having difficulty figuring out how to get my menu bar (or whatever you call it) to look like how I have it without jumping around a lot. You mentioned that I should create an unordered list, but it seems like that list only goes vertical and not horizontal. Could you be precise on how I can go about doing this. I changed by header background so my banner shows. Thanks so far for your help.

  5. #4
    Senior Member redefyned1's Avatar
    Join Date
    Oct 2009
    Location
    Dallas Texas
    Posts
    102
    Member #
    20249
    Liked
    5 times
    Hello Ryan,

    I'll help you out with this when I get home from work. Can you email me the background image for the header and the main body?

    Ken

  6. #5
    Senior Member redefyned1's Avatar
    Join Date
    Oct 2009
    Location
    Dallas Texas
    Posts
    102
    Member #
    20249
    Liked
    5 times
    Here is a simplified version without the use of AP Divs. AP Divs are very hard to be consistent from browser to browser.

    You will need to place your two images in a folder called "images" without the quotation marks. I removed your template regions to make it easier to modify.

    CSS - copy the code below and save it as "style.css" and place it in a folder called "css". If not, adjust the href location of your stylesheet which is located in the <head> section. I left all of the comments you had in the stylesheet.

    HTML Code:
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-color: #000;
    background-image: url(/images/bg1.jpg);
    background-repeat: repeat-x;
    }
    #container  {
    width: 800px;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-color: #EAEAEA;
    }
     #header {
        background: #000 url(/images/Banner.jpg) no-repeat;
        height: 35px;
        padding: 85px 10px 0px 115px;
    }
     #mainContent {
        background-color: #DBDBDB;
        padding-left: 20px;
        height: 400px;
    }
     #footer {
        background:#DDDDDD;
        height: auto;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
    } 
    a:link {
    color: #871D20;
    }
    a:hover {
    color: #C60;
    }
    
    
    
    
    [U]Take this code and save it as your index.html file.[/U]
    
    <!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>Untitled Document</title>
    
    <link href="/css/style.css" rel="stylesheet" type="text/css" media="screen, projection" />
    </head>
    
    <body>
    <div id="container">
    
        <div id="header">
            <a href="index.html">Home</a> | <a href="page1.asp">Services</a> | <a href="gallery.html">Gallery</a> | <a href="About.html">About Us</a> | <a href="Contact.html">Contact Us</a>
        </div>
    
        <div id="mainContent"></div>
    
        <div id="footer">
        <p><a href="index.html">Home</a>| <a href="page1.asp">Services</a> | <a href="gallery.html">Gallery</a> | <a href="About.html">About Us</a> | <a href="page2.html">Contact Us</a><br />
         M&amp;L Jewelers 2009 Website designed by RKcomputers</p> 
        </div>
    
    </div>
    </body>
    </html>

    Let me know if it works for you.

    Ken

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Hello - I am a new member here and I have been reading the posts with great interest.
    I am dismayed to realize I do not know what an AP div is. Is it very different from a regular div?

    Thanks
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    Senior Member redefyned1's Avatar
    Join Date
    Oct 2009
    Location
    Dallas Texas
    Posts
    102
    Member #
    20249
    Liked
    5 times
    AP Divs are absolutely positioned Div tags. That means you assign coordinates specifying their exact location. I am not a big fan of these because it is hard to control them across different browsers.

    I prefer creating regular divs and modifying the look and feel of them using CSS.

    Do a sGoogle search for AP Div vs DIV and you will see different points of view on this.

  9. #8
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    GAK! I feel so fooloish. I am used to the term "position, absolute" and did not make the leap to the capitalized abbreviation! Thanks for the explanation, and for not laughing!
    I too tend to use CSS for positioning - with a single div as a container, and then put my other divs inside that - it seems to simplify the layout and I usually get what I want, with a bit of tweaking on margins, etc.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


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
  •  

Search tags for this page

how to insert text into ap div using dreamweaver
,

how to make an ap div stay in place

Click on a term to search for related topics.
All times are GMT -6. The time now is 11:17 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com