squem
05-30-2004, 12:43 PM
Hi everyone! I'm new here so i'm not sure if this is the right forum for this but here i go.....
After waiting 4 months for my sister to do my site for me, i decided i'm not completely computer illiterate and decided to try myself (with just a little help from lissa). having done most of it, I sent a link to my sister to have a look and give me an opinion only to find out it looks completely different on her screen (menu is appearing at the top of the screen instead of to the left). We cant work out why, has anybody got any suggestions?
Rosey
05-30-2004, 12:45 PM
probably a different browser, what's your link?
squem
05-30-2004, 01:05 PM
is there any easy way to stop it?
Rosey
05-30-2004, 01:14 PM
well your coding might be a little off so seeing your page would help
squem
05-31-2004, 11:40 AM
this is the basic layout http://www.squem.co.uk/basic.html .
its supposed to have the image and links down the left. thanks for the help!
i dont get how you want to have it?
the image and menu to the left and the content to the right?
it is all in the center for me at the moment?
Well, I had a go...
I converted the DIV layers to a table because im not use to DIV layers yet
this works good for smaller screen resoultions, but once it gets bigger it looks funny :(
its a start on help, it turned out how you wanted it :)
PS. I made the Info section as the main content as it was too big to fit in a side menu on its own.
<html>
<head>
<title>SQUEM.CO.UK- Jewellery by Emma Farnworth</title>
<META NAME="description" CONTENT="contemporary jewellery">
<META NAME="keywords" CONTENT="contemporary jewellery, stamps, bottle tops, dice, found objects">
<META NAME="author" CONTENT="Emma Farnworth">
<style type="text/css">
A:link
{ text-decoration: none: color:#660099; }
A:visited
{ text-decoration: none; color:#9900cc; }
A:active
{ text-decoration: none; color:#660099; }
A:hover
{ text-decoration: none; color:#990066;
background-image: url(yourimage.gif);
background-color: #ffffff;
h1 {font-family: verdana;
color: #000000; }
p {font-family: verdana;
color: #000000; }
body
{ background: #ffffff;
font-family: verdana;
color: #000000 ;
letter-spacing: 1 pt;
font-weight: normal;
font-size: 11 pt;
td
{ font-family: verdana;
color: #000000;
letter-spacing: 1pt;
font-weight: normal;
font-size: 11 pt;
padding: 1cm;
bordercolor="#FF9999"
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#menu {
position: absolute;
top: 5px;
left: 5px;
padding: 0px;
width: 150px;
font-family: verdana;
color: #000000 ;
letter-spacing: 1 pt;
font-weight: normal;
font-size:10 pt;
}
#content {
margin-left: 200px;
padding: 0px;
margin-right: 15px;
}
</style>
</head>
<body>
<table border="0" height="100%" width="100%">
<tr>
<td>
<img src="picdibr2.gif" width="150" height="150">
<p><b>Links</b>
<br>
<br>
<a href="http://www.squem.co.uk/main.html">Home</a>
<br>
<a href="http://www.squem.co.uk/about.html">About</a>
<br>
<a href="http://www.squem.co.uk/brace.html">Bracelets</a>
<br>
<a href="http://www.squem.co.uk/ear.html">Earrings</a>
<br>
<br>
More coming soon!
<br>
<a href="http://www.squem.co.uk/order.html">Ordering info</a>
</td>
<td>
<center>
<b>Info</b>
<br>
<br>
A small selection of work is available to buy at:
<br>
<br>
<br>
<b>f1 Gallery</b>
<br>23 - 26 Warstone Lane
<br>Birmingham
<br>B18 6JQ
</center>
</td>
</tr>
<tr>
<td colspan="2">
<center>
All images, designs and content
<br>
© emma farnworth 2004
<br>
<a href="mailto: webbie@squem.co.uk" target="_blank">Contact</a>
</center>
</td>
</tr>
</table>
</body>
</html>
Rosey
05-31-2004, 12:52 PM
The problem is in your css, you have a few closing } missing so it messes up the rest of your css and your positioning.
Here:
td
{ font-family: verdana;
color: #000000;
letter-spacing: 1pt;
font-weight: normal;
font-size: 11 pt;
padding: 1cm;
bordercolor="#FF9999"
Should be:
td
{ font-family: verdana;
color: #000000;
letter-spacing: 1pt;
font-weight: normal;
font-size: 11 pt;
padding: 1cm;
border: 1px solid #FF9999; }
and this
body
{ background: #ffffff;
font-family: verdana;
color: #000000 ;
letter-spacing: 1 pt;
font-weight: normal;
font-size: 11 pt;
should be
body
{ background: #ffffff;
font-family: verdana;
color: #000000 ;
letter-spacing: 1 pt;
font-weight: normal;
font-size: 11 pt;}
and
A:hover
{ text-decoration: none; color:#990066;
background-image: url(yourimage.gif);
background-color: #ffffff;
should be
A:hover
{ text-decoration: none; color:#990066;
background-image: url(yourimage.gif);
background-color: #ffffff; }
SYSOX
05-31-2004, 01:31 PM
SYSOX - web hosting (http://www.sysox.com/)
edit: ^^ above post should be removed for advertising?
I feel so stupid, I just did a trial of fixing the code roseys way on my own computer and can confirm that the page looks how you wanted it :(
squem
05-31-2004, 07:04 PM
thankyou so much! I feel silly now but my sister didnt spot it either and she's been doing this for a while!