Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    newbie with sore head!

    Hi,
    I just started learning html about 5 days ago and figuring things out on my own is getting stressful.
    So this is what I have, A background image which is being fixed and stretched, with a z index of -1.
    Then my content is inside a div and has a z index of 1.
    So now all my content has to go inside <div id="content">HERE</div> But thats where I get lost.
    I want to position an imaged link using a div and its not working basically cause I don't know how!...I feel sorry for me, I'm also very hungry!!

    Well here is the relevant code, I'm sure you will laugh.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>
    <head>
    <title>Colin Campbell</title>

    <style type="text/css">

    html, body {height: 100%;margin: 0;padding: 0;}

    img#bg {position:fixed;top:0;left:0;width:100%;height:100%;}

    #content {position:relative;z-index: 1;}


    </style>

    <!--[if IE 6]>
    <style type="text/css">
    html { overflow-y: hidden; }
    body { overflow-y: auto; }
    img#bg { position:absolute; z-index:-1; }
    #content { position:static; }
    </style>
    <![endif]-->
    </head>
    <body>
    <img src="bgimage.jpg" alt="background image" id="bg" />

    <div id="content">

    <a href="mailto:myemail@blah.com"><b>Email Colin!<b></a>



    <div> THIS IS THE SECTION I DON'T UNDERSTAND
    style="
    top: 20;
    left: 12;
    position: absolute;
    z-index: 1;
    visibility: show;">
    <a href="http://my website.com/Banos.html"><img src="http://mywebsite.com/Bańo%20Button.gif"width="267" height="79" ALT="BAŃOS" border="0"></a>
    </div>

    </div>

    </body>

    </html>

    Thanks for your time.

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Use the code tags
    [co*de][/cod*e]


    http://bonrouge.com/~home
    http://www.w3schools.com/css/
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    The div you don't understand should start with
    Code:
    <div style top: 20 etc. etc.
    This gives the tags for the division the link and the image from the external site is placed in.

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    Thanks for those tips. I'm not sure how to place the code tags, I tried all of the poibilities I could think of.
    The thing is when everything appears as it should (without code showing on the page) the imaged link does not get placed into the correct position? almost as if that part of the code is being ignored.
    Also when I view the page in firefox the image doesn't display properly.
    Thanks again for your time.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    No, what twodayslate meant was for you to put your posted message code, inside code tags.

    if you were to try to quote this post of mine, you will see the code tags in it and you will also see as you readthis, how that makes it display.

    Code:
    The code tags make this show like this.
    Can you give us a link to your page? It can be quicker and easier for us to help you if you have a link.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Shameful! I suppose its a good thing I can laugh at myself.

    Right heres the code (now with another imaged link which I will have to position when I find out how) within the infamous code tags!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    
    <html>
    <head>
    <title>Colin Campbell</title>
    
    <style type="text/css">
    
    html, body {height: 100%;margin: 0;padding: 0;}
    
    img#bg {position:fixed;top:0;left:0;width:100%;height:100%;}
    
    #content {position:relative;z-index: 1;}
    
    
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    html { overflow-y: hidden; }
    body { overflow-y: auto; }
    img#bg { position:absolute; z-index:-1; }
    #content { position:static; }
    </style>
    <![endif]-->
    </head>
    <body>
    <img src="bgimage.jpg" alt="background image" id="bg" />
    
    <div id="content">
    
    <a href="mailto:colinmc8@hotmail.com"><b>Email Colin!<b></a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    <div
    
    
    style="
    top: 20; 
    left: 12; 
    position: absolute; 
    z-index: 1; 
    visibility: show;">
    <a href="http://colincampbell.blackapplehost.com/Banos.html"><img src="http://colincampbell.blackapplehost.com/Bańo%20Button.png"width="267" height="79" ALT="BAŃOS" border="0"></a>
    
    <a href="http://colincampbell.blackapplehost.com/Cocinas.html"><img src="http://colincampbell.blackapplehost.com/Cocina%20Button.png"width="280" height="120" ALT="BAŃOS" border="0"></a>
    
    
    </div>
    
    </body>
    
    </html>
    Here is the link to my site, http://colincampbell.blackapplehost.com/

    If you click on the 'COCINAS' image I have uploaded a photoshop image of where I intend to put the links.

    Thanks.

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    How does this suit?

    I have amended it a bit and so you should see how to put all the styling cues in the css at the top.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    
    <html>
    <head>
    <title>Colin Campbell</title>
    
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    border:0;
    }
    
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family : "Palatino Linotype", sans-serif, helvetica;
    }
    
    body {
    background: url(bgimage.jpg);
    }
    
    #content {
    padding:0;
    margin : 0;
    border:0;
    position:absolute;
    top: 20; 
    left: 12; 
    z-index: 1; 
    visibility: show;">
    }
    
    #content {
    padding:0;
    margin : 0;
    border:0;
    font-family: 
    }
    
    
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    html { overflow-y: hidden; }
    body { overflow-y: auto; }
    img#bg { position:absolute; z-index:-1; }
    #content { position:static; }
    </style>
    <![endif]-->
    </head>
    <body>
    
    <div id="content">
    <a href="mailto:colinmc8@hotmail.com"><b>Email Colin!</b></a>
    </div>
    
    <div style="top: 20;left: 12;position: absolute;z-index: 1;visibility: show;">
    <a href="http://colincampbell.blackapplehost.com/Banos.html"><img src="/BaƱo%20Button.png" alt="BAƑOS" title="BAƑOS"></a>
    <a href="http://colincampbell.blackapplehost.com/homepage.jpg"><img src="/Cocina%20Button.png" alt="COCINAS" title="COCINAS"></a>
    </div>
    
    <div id=''>
    </div>   
    
    <div id=''>
    Free Hosting by <a href="http://www.blackapplehost.com">BlackAppleHost.com</a>
    </div>
    </body>
    </html>
    Don't forget that all page content must go between the body tags.
    I haven't checked it visibly but you will likely find that the content div doesn;t go far down the page. Thats because it hasn't got much inside it yet.

    And when you declare a font, make sure you show several different ones. People do not have the same fonts installed so it is necessary to provide a few fall-back fonts.

    Also, don't get overly concerned with z-index. with the background now declared correctly, as a background and not an html image, the other things will always be on top.

    bazz
    Last edited by bazz; 11-09-2008 at 11:42 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for doing that bazz,

    I'm still scratching my head about the position of the links though. They don't comply with the stated positions? (go where they're supposed to)

    The section you wrote here
    Code:
    #content {
    padding:0;
    margin : 0;
    border:0;
    position:absolute;
    top: 20; 
    left: 12; 
    z-index: 1; 
    visibility: show;">
    }
    does this interact with this part
    Code:
    <div style="top: 20;left: 12;position: absolute;z-index: 1;visibility: show;">
    <a href="http://colincampbell.blackapplehost.com/Banos.html"><img src="/BaƱo%20Button.png" alt="BAƑOS" title="BAƑOS"></a>
    <a href="http://colincampbell.blackapplehost.com/homepage.jpg"><img src="/Cocina%20Button.png" alt="COCINAS" title="COCINAS"></a>
    </div>
    if so do I need to put all my imaged liks in a seperate div and write out a seperate #content part to interact with it...so to speak?
    The reason being is all the links will be staggered across the page.
    Last edited by colinmc8; 11-10-2008 at 11:35 AM.

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Oops Colin, I meant to remove that inline style so this is what I was meaning to give you

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    
    <html>
    <head>
    <title>Colin Campbell</title>
    
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    border:0;
    }
    
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family : "Palatino Linotype", sans-serif, helvetica;
    }
    
    body {
    background: url(bgimage.jpg);
    }
    
    #content {
    padding:0;
    margin : 0;
    border:0;
    position:absolute;
    top: 20; 
    left: 12; 
    z-index: 1; 
    visibility: show;">
    }
    
    #content {
    padding:0;
    margin : 0;
    border:0;
    font-family: 
    }
    
    
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    html { overflow-y: hidden; }
    body { overflow-y: auto; }
    img#bg { position:absolute; z-index:-1; }
    #content { position:static; }
    </style>
    <![endif]-->
    </head>
    <body>
    
    <div id="content">
    <a href="mailto:colinmc8@hotmail.com"><b>Email Colin!</b></a>
    </div>
    
    <div id=''>
    <a href="http://colincampbell.blackapplehost.com/Banos.html"><img src="/BaƱo%20Button.png" alt="BAƑOS" title="BAƑOS"></a>
    <a href="http://colincampbell.blackapplehost.com/homepage.jpg"><img src="/Cocina%20Button.png" alt="COCINAS" title="COCINAS"></a>
    </div>
    
    <div id=''>
    </div>   
    
    <div id=''>
    Free Hosting by <a href="http://www.blackapplehost.com">BlackAppleHost.com</a>
    </div>
    </body>
    </html>
    Each div should have either an id or a class. Then you can set its style elements in the head of the page. 'id' - for blocks which appear just once and 'class' for those which may be repeated more than once in the same page.

    Think of divs as sections of a page. so if your page was made of paper, you might section it off into boxes of varying sizes?

    The '#content' part in the style, controls the called, id='content'.
    Thats how css works with (x)html.

    Others can chip in about how best to achieve your aim with regard to the 'diagonal' images. You may need either to use 'imagemapping' or to put them into separate divs and position them 'absolutely'. BUt there can be down-sides to that when it comes to the subject of fluid design.


    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You MUST use units. The top and left values in the code provided won't do anything if the browser isn't in quirks mode meaning has no doctype or has a partial doctype.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    good catch Aero. I missed it.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #12
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you explain what that means, units and quirks mode.

    Edit:

    Don't worry I added px units for the positioning and that done the trick.

    For now I think I will manage (FOR NOW!!!) don't go too far.

    Thanks alot to everyone for helping.
    Last edited by colinmc8; 11-10-2008 at 06:07 PM.

  • #13
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm back!
    I have another question. I have looked around for info on this but the solution I found was the wrong one.
    So, I have my background image which needs to be stretched to accomadate different resolution settings, the thing is, now I have my images (which are links) on the screen, and the page is resized the images are out of proportion to the background.
    What tdo I need to do so they are a size relative to the backgroung image?

    Thanks.
    Colin.

  • #14
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Quirks mode is the IE fallback to their earlier "standards" and should be avoided. What it means is the IE browser will make assumptions about your code that might have been true in 1999. The problem is the assumptions from the 90s don't apply to any other browser today. The results are the page will format differently, wildly differently, depending on the browser used.

    The solution is to include a DOCTYPE command at the top of the page. This forces IE to behave as other browsers do resulting in a more consistent look of your page between browsers.

    HTH,Jerry
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #15
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    A DOCTYPE won't necessarily help you in this case though, Jerry is correct to say you should be using one.

    I don't think 'should' says it strongly enough - I consider it a must do these days.

    As for your imaging issue, I don't think there is an easy way unless you make the images have a transparent background. then it will look simply as though you have text on the background image and the text shouldn't skew as resolutions change.


    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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