First Template Page check

[Siddan]

Heya... the page (http://www.eurorider.se/testserver/se/index1.php)

not sure if this is the correct subject for this thread. But it is not a site review, yet, and would just like to read some opinions if this is a good acceptable start to develop other pages from this template.

There is only one bug as I can see and it is the footer. When you resize it to a smaller window so you get the vertical scroll, and then scroll to the right then you see the fotter is cut off.
... not a bug but the page does exactly not fit in a 800x600 screen resolution monitor but fits nicely in a 1024 at least. I thought there would be too much hazzle for the browsers to work with this minimum-width thing.

Otherwise think if the swedish text as another Lorem ipsum text upgrade :)

Here is the content of the css file for easier preview

HTML {height:100%}
BODY {
/* background-color: #BCDADC; */
background-color: #9CCECE;
font: normal 10pt verdana,arial;
color:#000080;
margin:0px; padding:0px; height:100%;
}
A {text-decoration:none; color:#3366FF; font-weight:bold;}
A:hover {text-decoration:underline;}

/* MENY */

#TopborderLeft {
position:absolute;
top:0px; left:-2px;
width:234px; height:57px;
margin:0px; padding:0px;
background:url(../images/menu/topborderleft.gif) no-repeat;
}
#Topborder {
position:absolute;
top:0px; left:232px;
width:670px; height:57px;
margin:0px; padding:0px;
background:url(../images/menu/topbordermitt.gif);
}
IMG#Cornerlogo {
position:absolute;
top:0px; left:0px;
}
#Stars {
position:absolute;
top:175px;
left:0px;
width:147px; height:143px;
background:url(../images/menu/bg_stars.gif)
}
#Stars IMG {position:absolute; top:32px; left:32px}
#Meny li#StarsMargin {padding-top:180px !important; padding-top:160px;}

#Meny {
margin:3px 0px;
height:565px;
border:solid #113 0px;
background:url(../images/menu/bg_menu.jpg);
padding:0.1em 0px;
}
#Meny A, #Meny A:visited {
width:100%;
display:block;
color:#000080;
font-weight:600;
}
#Meny A:hover {
color:#0000C4;
text-decoration:none
}
#Meny li {
behavior:url(images/menu/CSSNavIEHover.htc); }
#Meny ul {
display:block;
margin:1em 0px;
padding:0px 1ex;
width:11em;
}
#Meny li {
display:block;
list-style-type:none;
padding:0.2em 1ex;
}
#Meny li:hover #Meny li.hover {
background:#FFFFFF;
}
#Meny ul.sub1, #Meny ul.sub2, #Meny ul.sub3 {
position:absolute;
z-index:1;
margin:-0.7em 0px 0px 10em; /* avstånd till Subruta */
border:solid #A4C5C7 1px;
padding:1em 0.5em;
background:#B8D5D7 url(../images/menu/menubgstar.gif) no-repeat center;
display:none;
}
#Meny ul.root li:hover ul.sub1, #Meny ul.root li.hassubhover ul.sub1 {
display:block;}
#Meny ul.sub1 li:hover ul.sub2, #Meny ul.sub1 li.hassubhover ul.sub2 {
display:block;}
#Meny ul.sub2 li:hover ul.sub3, #Meny ul.sub2 li.hassubhover ul.sub3 {
display:block;}

#Meny li.hassub {
background:url(../images/menu/menustar.gif) no-repeat 95% 50%;}
#Meny li.hassub:hover, #Meny li.hassubhover {
background:url(../images/menu/menustar1.gif) no-repeat 95% 50%;}

/* MENY end */

/* PAGE TEMPLATE */

* html #wrapper {height:100%}
#wrapper {
min-height:100%;
width:850px;
}
#Header {
height:65px;
}
#Left {
float:left;
display:inline;
margin-top:-24px;
width:165px;
height:568px;
}

#Main {
position:relative;
margin-left:170px;
width:675px;
}
#Right {
float:right;
width:150px;
}
#Content {
width:500px;
margin-right:150px;
}
H3 {
text-align:center;
font-size:1.3em;
font-weight: bold;
}



/* PAGE TEMPLATE end */


#clearfooter {
clear:both;
height:35px;
overflow:hidden;
}
#footer {
position:absolute;
height:54px; width:100%;
margin-top:-54px;
color:#738586;
background:url(../images/menu/footerbg.gif) repeat-x;
}
#footWrap {width:850px; text-align:center}
#footLeft {float:left; margin:-12px 0 0 100px; line-height:1em}
#footMid {float:left; margin-left:85px;}
#footer H5 {margin:20px 0 0 0; font-size:1em; line-height:1.3em}
#footer A {color:#738586; text-decoration:none}
#footer A:Hover {color:#586667;}
#creator {margin-top:-7px;}

#footRight {
float:right;
width:130px; height:54px;
margin-top:-37px;
font-size:0.65em;

background:url(../images/menu/footerright.gif)
}




/* PAGE TEMPLATE end */

[BonRouge]

Siddan,
Just a few comments then...
I think it looks really good. Nice design.
However... <A href="#" style="cursor:hand"><DIV ID="TopborderLeft"></DIV></A>
<DIV ID="Topborder">
<IMG src="images/menu/topborderendstar.jpg" align="right" border="0" hspace="0" vspace="0" alt=""></DIV>
</DIV>
You can't put 'a' tags around a div. There are ways to do that though - you could use javascript to make the div 'clickable' or you could put object tags around the div.
Also, why not take the deprecated tags out? 'align', 'border', 'hspace' and 'vspace' really shouldn't be there.
One other thing is the big use of javascript for the image rollovers. It's not so important as the images are not really essential, but you might be better doing those rollovers with CSS...
I hope this helps.

[Siddan]

Hi Bon, thanks for the reply.

You were right about image on the top. I have removed the uneccessary tags and the linking of the whole DIV. Just found another solution to make the logo clickable. I just put another transparent gif over it and linked that one instead.

About the menu hover images... I can´t really find a way to use pure css and for it to work in IE aswell. I kinda like it to be there, otherwise it looks quite empty

[BonRouge]

Yeah, as I said, I don't think it's a major problem - the page looks good and most people have javascript enabled anyway...

I don't have time to try to implement it for you right now, but if you're interested in using pure CSS for that, here's a way to do it (http://bonrouge.com/br.php?page=faq#tooltips) - just play with the positioning.

[Siddan]

that was a nice example and I have even already implemented it... but it is sadly enough buggy in IE :/ at least with images

I have altered the css a tiny bit so it will fit under the sub menues... but are there perhaps another way without having to repeat.. regarding with the A.Star span positioning

A.Star span {
display:none;
position:absolute;
top:15.5em; left:2.4em;
padding:0;
background-color:none;}
A.Star span span {
display:none;
position:absolute;
top:-5.2em; left:-11.2em;
padding:0;
background-color:none;}
A.Star span span span {
display:none;
position:absolute;
top:-4.9em; left:-10.9em;
padding:0;
background-color:none;}


each added span represent each sub menu level

[BonRouge]

Good point. I hadn't thought about that. In my example, there's this line : a.tooltip {
position:relative;
} That makes the absolute-positioned elements relative to the 'a' tag. If you remove that, it should be relative to somethin higher up - maybe relative to the wrapper or to the body. If that's the case, then the position would be the same for every image and you wouldn't have to worry so much. I think that's the answer.

I hope this helps.

[Siddan]

yes, that line I have removed at the beginning. But still the a.tooltip needs to be position:absolute and then adjust its parameters, which is quite obvious..

but for a sub menu that is slighter to the right needs its own "a.tooltip span" to position it at the same spot as the previous root menu...

still no news on the IE front, tho?

[Siddan]

perhaps there are some script that it may only load this javascript image menu when it detects IE... and for FF it will run the all so pure css

don´t even know where to begin the search... hmm

[Siddan]

ok bon rouge... leaving tomorrow for the whole week, so whenever you can you could check the CSS image hover effect at the menu why it seems so buggy in IE. ... link is at the top

[BonRouge]

OK - I'll find some time before next week. I am sorry for not getting back to you sooner - like I said somewhere, I'm reeaaalllly busy.

[Siddan]

hehe yes I know you are, and you even mentioned it and I can perfectly understand.

I don´t mind using the javascript hover though and I still can implement this in the future so it doesn´t hold me back at least.

I just discovered why my laptop have different margins all over the page. It only appears when I use the EM size... if I set everything in PX then it will look the same as on my stationary.... go figures. No EM for me anymore. Eventho I hear it is the best so all monitors with different displays may have the option to see the smallest text a bit bigger but I have tested with many different displays and fixed px is perfect

[toicontien]

You can't put 'a' tags around a div. There are ways to do that though - you could use javascript to make the div 'clickable' or you could put object tags around the div. ...
Or use an <a> tag and set its display property to block in CSS.