I wonder if anyone can help me me with this one that involves something I would like to do RE shadow text and the shadow text -moz-box-shadow: & -webkit-box-shadow:
This is the Teddy Bear Web Page
If you look at my page there in what we might call early or pre beta or some such description like that (in that you can get cartoons but the site IMHO is not really online yet as the index page is thankfully still blocking too much notice if it) you will see in the "what are referred to as " “Mega Menus” the text has shadows that use the moz box shadow and webkit shadow effects.
What I would like to do is to recreate that effect on the top bar menu that is a copy of the Google top bar menu which has had the code left in for a drop down if needed later but has had the drop down menu part removed from the html page.
I do not presently know how to do that (make the top text shadow effect that is) so could someone please run me (and future readers (so post code as I will leave that beta page there - I wrote the title of this thread so it works hopefully) thorough how to achieve this?
I think it would look rather nice to have the text with a shadow to match the mega menu drop down text.
I am aware I am using the “current” code wrong in the top bar btw but tbh I don’t really know how to do it the proper way and I like it as it looks, it works and so OK I am using current wrong hey ho if I knew how to fix it I would.
Now the other problem with this page is there is in Google Chrome something strange going on with the blue BG colour on the title bar and the thee columns that are above the footer.
This has me baffled!!!
I changed (as far as I can tell) all the colours in the CSS to f5f5f5 or in that range and still in Chrome this blue BG displays.
It does not do so in IE nor FF only Chrome so what gives?
A third thing is - I believe I have an absolute position attribute in the Google like top menu CSS that from previous threads I am aware is likely not needed and so are there any things in that css sheet I can change - should change or that I need to address?
Including that absolute thing that is present?
Aha I sussed the blue BG at last
Anyone any idea on the top nav text shadow please?
I’m not sure I understand your text-shadow question… If you want to give that upper menu a white text-shadow, you could just do something like this:
.current a {
/* all the other rules */
text-shadow:1px 1px 1px white
}
Thanks sdleihssirhc I meant to post I didn’t need to do that now as I changed the text colour (still going to give the above a go though!)
I just went round a friends house to look at things in various browsers like IE 7 IE 8 and others and to see how things look in a wide screen and OMG what a balls up. The top menu text looks awful and way to the left so needs to be centered/justified
I have three solutions (I think) but not sure how to do them exactly
I can (if I remember correctly) put a margin to make the menu items centred or put a justify in the div tags somehow? or I can simply justify the top menu (I think that was what he said?)
Q is How do I do that then?
Also rather strangely even though I fixed the blue BG display in Chrome in IE 7 nd IE 8 the problem is there again. Darned thing has me really baffled this time
The blue problem is weird, but straightforward (is that actually possible?). It looks like you declare the background three times:
background: #014464;
background: -moz-linear-gradient(top, #F5F5F5, #CCC);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F6F5F5), to(#EDEDED));
That first declaration is your blue color. And because IE doesn’t understand the other two rules, it just sticks with the first one.
As for the centering… That’s a little more complicated. The easiest way is to just give the container a margin-left and a margin-right of “auto”, but that requires also being able to explicitly declare the container’s width.
So the next step is to use display: inline-block instead of float: left. Then you give the container text-align: center, so your CSS will look something like this:
.menu ul {
/* other rules */
text-align:center
}
.menu ul li {
/* other rules */
display:inline-block;
*display:inline; zoom:1 /* IE fix */
}
But if you check that out, there will be a gap in between the buttons… and that’s because there’s white space in your HTML, in between the <li> elements. So if you take that space out, and make your HTML look something like this…
<div class="menu">
<ul>
<li class="current">
<a href="http://doubletteds.com/beta.html">Cartoon Teddy Bears</a>
</li><li class="current">
<a href="http://wacico.com/cartoons/">Cartoon Gallery</a></li><li class="current">
<a href="http://www.doubletteds.co.uk/exclusive-teddy-bears-cartoons.htm">Personalised Cartoons</a>
</li><li class="current">
<a href="http://kd-mains.com/cartoon-designer.htm">Cartoon Design & Creation</a>
</li><li class="current">
<a href="http://twitted.co/twitted-tweety-twitter/free-stuff/">Free Stuff</a>
</li><li class="current">
<a href="http://www.doubletteds.co.uk/cartoon-advertising-d-t-teds.htm">Cartoon Advertising</a>
</li><li class="current">
<a href="http://kd-mains.com/contact-keith-d.htm">Contacts</a>
</li>
</div>
…then that should center it in most browsers.
@sdleihssirhc man that’s brilliant thanks!
I did all the above and loaded and it seem to be fine. I can’t check IE 7 & * here nor wide screen but it is not broken so I think I did it all right?
Who would have thought blanlk space could have been so important?
One thing I think I have noticed during this though is that, as you said “sdleihssirhc”, there are three declarations for the BG’s
Now how they are written I remember editing three of those (in gradients and now a fourth in the first one that IE 7 understands only).
I wouldn’t have written #333 though as I always write 6 numbers though I think I may have actually done so for the first time in the CSS on this page.
The reason I only used 6 was because I saw three not display properly once and a difference with six so stuck with 6.
Anyway I get the impression I probably wrote those colours making no real sense.
By that I mean I think there is a dullness about so called gradient and I think there may be an edit in that gradient there that could make the basic colour have a sort of metallic looking effect. Do you get with I mean?
As you (all) may have gathered I am not exactly a web designer (SEO is my thing though I still advertise web design of course but just out source if I can’t do something myself). ) as I just find nice free stuff and throw it together and wing it as I learn along the way.