...

View Full Version : newbie with sore head!



colinmc8
11-08-2008, 11:33 PM
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/Bao%20Button.gif"width="267" height="79" ALT="BAOS" border="0"></a>
</div>

</div>

</body>

</html>

Thanks for your time.

twodayslate
11-08-2008, 11:38 PM
Use the code tags
[co*de][/cod*e]


http://bonrouge.com/~home
http://www.w3schools.com/css/

Avril
11-09-2008, 06:17 PM
The div you don't understand should start with
<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.

colinmc8
11-09-2008, 07:21 PM
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.

bazz
11-09-2008, 08:45 PM
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.



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

colinmc8
11-09-2008, 10:17 PM
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!


<!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/Bao%20Button.png"width="267" height="79" ALT="BAOS" 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="BAOS" 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.

bazz
11-09-2008, 11:35 PM
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.



<!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

colinmc8
11-10-2008, 11:32 AM
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


#content {
padding:0;
margin : 0;
border:0;
position:absolute;
top: 20;
left: 12;
z-index: 1;
visibility: show;">
}

does this interact with this part


<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.

bazz
11-10-2008, 03:07 PM
Oops Colin, I meant to remove that inline style so this is what I was meaning to give you



<!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

_Aerospace_Eng_
11-10-2008, 03:44 PM
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.

bazz
11-10-2008, 03:48 PM
good catch Aero. I missed it.

bazz

colinmc8
11-10-2008, 05:40 PM
Can you explain what that means, units and quirks mode.



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.

colinmc8
11-12-2008, 06:26 PM
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.

jerry62704
11-12-2008, 08:25 PM
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

bazz
11-12-2008, 10:23 PM
A DOCTYPE won't necessarily help you in this case though, Jerry is correct to say you should be using one. :cool:

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

_Aerospace_Eng_
11-13-2008, 08:46 AM
View the source.

http://www.cssplay.co.uk/layouts/background.html

colinmc8
11-13-2008, 10:14 AM
As for your imaging issue, I don't think there is an easy way unless you make the images have a transparent background.

When I made the images in photoshop i made the background transparent, is that what you mean? or is there another term in coding about transparent backgrounds for images.
I think I might be making life hard for myself, I can get it to look ok in ie7 but when I resize the page much smaller it just looks silly.
At this stage I'm just experimenting but as I'm laying out the foundations I want to start off right and not end up scrapping all the time i've spent.
I think I'll have a look at different design ideas. any suggestions are welcome. thanks for all your help.

Colin.

bazz
11-13-2008, 05:53 PM
lol, whatever I suggest, it is worth doing what Aero suggests. 'Aero' is internet-speak for wizardry, I think :)

always excellent advice from him.

bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum