...

View Full Version : How to set the background colour and center the image..



effpeetee
12-28-2007, 10:27 AM
I know it sounds daft; but my attempts to set the backgound colour have not succeeded. I must be suffering from too much Xmas Pud. Help appreciated. I know the code is messy, I am trying to adapt a program.

Frank

http://www.exitfegs.co.uk/ExpMenu.html


{
margin: 0;
padding: 0;
border:0;
}
body
{
width:100%;
height:100%
background-color: #555555;
color: #ffffff;
font: 900 10px/1.4 "Lucida Sans", Verdana, Arial, sans-serif; font-size: 8.5px;
font-weight:900;
}

abduraooft
12-28-2007, 12:32 PM
You missed the semicolon after height

height:100% ;
background-color: #555555;

effpeetee
12-28-2007, 01:04 PM
You missed the semicolon after height

height:100% ;
background-color: #555555;
Thanks abduraooft .

I now have 20:20 hindsight vision.
Pity my real sight is not as good.

What would I do without the Forum and its members?

Frank

abduraooft
12-28-2007, 01:12 PM
Hmm... I know, and I'd like to remind you about CSSValidator (http://jigsaw.w3.org/css-validator), which can effectively help in similar situations :thumbsup:

effpeetee
12-28-2007, 02:02 PM
Hmm... I know, and I'd like to remind you about CSSValidator (http://jigsaw.w3.org/css-validator), which can effectively help in similar situations :thumbsup:
Cor! The original has been validated. I must have accidentally removed the ;

How do I centre/position the image. Do I need another DIV? or can I use an existing one?


Frank.

abduraooft
12-28-2007, 02:48 PM
Remove all absolute positions (and related top, left etc) from img and add

text-align:center; to #home (div)

effpeetee
12-28-2007, 02:55 PM
Remove all absolute positions (and related top, left etc) from img and add

text-align:center; to #home (div)
I don't have any of these except on the home icon. Am I missing something again?

http://www.exitfegs.co.uk/ExpMenu.html

Frank

abduraooft
12-28-2007, 03:07 PM
remove in red from

<img width="64" height="32" src="home.jpg" alt="return to the home page" style="z-index: 900; left: 468px; position: absolute; top: 6px;"/>
and add a style to your

<div id="home">
.........
</div>
as
#home{text-align:center;}

effpeetee
12-28-2007, 03:23 PM
I still cannot make it work. Sorry.

Frank

http://www.exitfegs.co.uk/ExpMenu.html

abduraooft
12-28-2007, 03:35 PM
It seems to be almost(?) centered for me.
But you've missed * selector in

{
margin: 0;
padding: 0;
border:0;
}
and there are 71 errors (mostly due to wrong nesting of <div> and <ul>) (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.exitfegs.co.uk%2FExpMenu.html&charset=%28detect+automatically%29&doctype=Inline&group=0) in your markup!

effpeetee
12-28-2007, 03:40 PM
Yes, I'll have to deal with the rubbish. It is my "Sources" program being modified.
I'll sort that out first and see where that gets us.

Many thanks for your patience.

http://www.exitfegs.co.uk/ExpMenu.html

Frank

EDIT I have tidied it up but I still cannot get the image centered. It still goes to the left

Excavator
12-28-2007, 06:44 PM
Good morning Frank,
Lots of extra stuff in there... not sure what else you had in mind but, since it's not a linked CSS file I removed all the extra and re-arranged the markup a bit.
There was no home icon, you can add that.

To center the images your linking to, you'll need to make a page for each one to center in. The way it is now, your just linked to the image and you have no control over that.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
background-color: yellow;
color: #ffffff;
font: 900 10px/1.4 "Lucida Sans", Verdana, Arial, sans-serif;
text-align: left;
}
* {
margin: 0;
padding: 0;
border: none;
}
#menu, #menu2 {
width: 29%;
background-color:#551100;
padding: 5px;
}
#menu {
float: left;
margin-left: 5%;
}
#menu2 {
float: right;
margin-right: 5%;
}
.links {
clear: left;
margin: 10px 0 0 15px;
}
a:link {
color: #FFF;
text-decoration:none;
}
a:visited, a:hover, a:active {
color: #FFFF00;
}
</style>
</head>
<body>
<div id="menu">
<ul class="links">
<li><a href="http://www.exitfegs.co.uk/1.jpg">Tolpuddle martyrs museum.</a></li>
<li><a href="http://www.exitfegs.co.uk/4.jpg">Higher Came Farm.</a></li>
<li><a href="http://www.exitfegs.co.uk/7.jpg">In a Japanese Garden.</a></li>
<li><a href="http://www.exitfegs.co.uk/steve6.jpg">Steve, relaxing on the Bluebell Railway.</a></li>
</ul>
<!--end menu--></div>
<div id="menu2">
<ul class="links">
<li><a href="http://www.exitfegs.co.uk/10.jpg">A bridge somewhere.</a></li>
<li><a href="http://www.exitfegs.co.uk/12.jpg">Lawrence of Arabia is buried here.</a></li>
<li><a href="http://www.exitfegs.co.uk/13.jpg">Alresford High Street.</a></li>
<li><a href="http://www.exitfegs.co.uk/16.jpg">Swanage - Sea front.</a></li>
</ul>
<!--end menu2--></div>
</body>
</html>

effpeetee
12-28-2007, 08:08 PM
Thank you for your help. Your code is the best to date.
But what I am trying to do is:
To use a text to link to the main jpg and then link back to the original showing of the texts. At present I am using html to present the main image. It works fine accept the as I use the same images in more than one list, it means different html page for each menu that I need to return to. I have nearly 100 html pages which I have repeated four times in order to use in three seperate menus. eg 101a, 101b, 101c. As each page is identical is seems rather silly. Being able to link from the image by linking to its DIV would mean that I could just show the image without an unnecessary html page to carry it, in order to use the pages link.

Basically I need a text line, linked to main image (jpg) linked back to thumbnails. Nothing else used. I did it once. I linked to a div. I have lost the original program and I am saddled with an 82 year old forgetary. (memory?)

This is the nearest so far. Picture is centred and the icon is visible.

http://www.exitfegs.co.uk/ExpMenu2.htm

Frank

_Aerospace_Eng_
12-28-2007, 08:57 PM
Sounds like you need to start looking into using something more dynamic. Does your web host support php?

effpeetee
12-28-2007, 09:37 PM
Sounds like you need to start looking into using something more dynamic. Does your web host support php?

Yes PHP is available to me.

At the moment I am not very much use with php although I do have a book - "Learning PHP & MySQL by Michele E.Davis & A Phillips."
I will need to get reading. What do you suggest I should do?

Frank

_Aerospace_Eng_
12-28-2007, 10:28 PM
Something like this

<?php
// set main url here, ending forward slash is needed, leave blank if images aren't in a folder
$imagedirectory = "";

// create image variable using the part from url=
$theimg = $_GET['url'].'.jpg';

// concatenate $pathtoimages and $theimg
$fullpath = $imagedirectory.$theimg;

// check to see if the file exists on your server so people can just use any random file
$display = (file_exists($fullpath)) ? '<img src="'.$theimg.'" width="800" height="600" alt="">' : 'There is no image that matches your request.';

// if the url= isn't set then set the display to none
$show = (isset($_GET['url']) && file_exists($fullpath)) ? 'block' : 'none';

// create the style="display" part
$style = 'style="display:'.$show.'"';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-Latn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Text to image menu.</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2007-12-26">
<meta name="Revised" content="2007-12-26">
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
html {
background: yellow;
color: black;
font: 16px/1.2 sans-serif;
}
a {
color: blue;
text-decoration: none;
outline: none;
}
a:visited {
color: purple;
}
a img {
border: none;
}
#header {
margin: 0 0 1em;
}
#home {
text-align:center;
position:absolute;
top:8px;
width:100&#37;;
z-index:0;
}
.menu {
list-style: none;
margin-bottom:1em;
float:left;
margin-left:10em;
display:inline;
position:relative;
z-index:1;
}
.menu a {
display: inline;
}
.menu a:hover {
background: black;
color: #cff;
}
.menu2 {
float:right;
margin-right:10em;
display:inline;
}
#image {
margin:auto;
clear:both;
height:600px;
width:800px;
background: #eee;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="home"><a href="<?php echo $_SERVER['PHP_SELF'];?>"><img height="32" alt="return to the home page" src="home.jpg" width="64"></a></div>
<ul class="menu">
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?url=1">Tolpuddle martyrs museum</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?url=12">Lawrence of Arabia is buried here</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?url=13">Alresford High Street</a>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?url=16">Swanage - Sea front</a></li>
</ul>
<ul class="menu menu2">
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?url=4">Higher Came Farm.</a> </li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?url=7">In a Japanese Garden.</a> </li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?url=steve6">Steve,on the Bluebell Railway.</a> </li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?url=17">Horsted Keynes Station.</a></li>
</ul>
</div>
<div id="image" <?php echo $style; ?>><?php echo $display; ?></div>
</div>
</body>
</html>

Save that with a .php extension. Upload it to your webhost and click the links. The image should show up underneath the links. If the image doesn't exist nothing will show up.

effpeetee
12-29-2007, 11:44 AM
http://www.exitfegs.co.uk/Texttoimage.php

Thanks Aero,

As you can see, It works a treat. :thumbsup:
I'll alter the background colour to something less startling (why on earth did I pick yellow?:D) and start to learn PHP. Your comments are also very helpful.

On my screen there is some surplus on the right. Can I reduce it. I am using 1024x768

Thanks again,

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum