View Full Version : CSS3 Shadow Block Menu
Hi. Im using this script:
http://www.dynamicdrive.com/style/csslibrary/item/css3_shadow_block_menu/
but i run into one small problem.
My desktop screen setting are 1280 x 1024 and under this settings ccs menu is set OK, but if i use lower or different graphics settings,
ccs menu will not "adapt" automatically. Text and boxes will be smaller or bigger and if i someone would use internet explorer then the last "box" would be partly enshrined so instead of box with edge you can see just upper and lower line of menu.
How to correct this ?
Thank you in advance!
A.
ajfmrf
04-30-2013, 03:38 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.
Beverleyh
04-30-2013, 05:11 AM
".shadowblockmenu ul li a" has a border-right property so the buttons should be clearly seperated in any browser. The CSS3 shadow is visible in IE9+ but in IE8 and under, they have the border fallback.
If you wanted to mockup a "fake" CSS3 shadow for lesser versions of IE, you can always use a "lte IE8" stylesheet that includes a background image or other CSS styling. http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
You can also use media queries to wrap menu buttons at certain screen-width break-points with a max-width property. http://css-tricks.com/css-media-queries/
The problem is purly in screen settings. I tested on different computers/browsers/screen setings.
I can build this in some lower resolution and upload on web hosting server, but if someone would have stronger or lower resolution i will end up in the same situation. This is my test web site: ct-soft(dot)eu
Beverleyh
05-04-2013, 02:22 PM
I'm not sure what you're saying. Also, the address you posted isnt loading for me (replacing dot with .)
When you alter the screen display/resolution settings you alter the available pixels, so media queries should still work fine when targetting specific widths. Use your main stylesheet to target widths of e.g. 1024 pixels or greater, but then use media queries to target a lower resolution/narrower screen width with special CSS that wraps text and narrows the menu buttons so they all fit better horizontally when the screen gets too small. Here's a tutorial for more info: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
For a working example, see this: http://www.dronfield.derbyshire.sch.uk/mobile/ Resize the browser and see how the menu text wraps, buttons narrow, and overall font size decreases, as the browser window gets smaller. It works if you alter the screen resolution display settings too.
Just put whole text (with http and www ) it will load
ajfmrf
05-05-2013, 02:44 PM
this is the source.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<frameset rows="710*" cols="*,126" framespacing="0" frameborder="no" border="0" bordercolor="#003366">
<frameset rows="*" cols="132,720*" framespacing="0" frameborder="no" border="0" bordercolor="#666699">
<frameset rows="*,1" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="lijeva_boja.htm" name="leftFrame1" scrolling="No" noresize="noresize" id="leftFrame1" title="leftFrame1" />
<frame src="goreSrednjaNaslov.html" name="bottomFrame7" scrolling="No" noresize="noresize" id="bottomFrame7" title="bottomFrame7" />
</frameset>
<frameset rows="*,16" cols="*" framespacing="0" frameborder="no" border="0">
<frameset rows="43,*" cols="*" framespacing="0" frameborder="no" border="0">
<frameset rows="36,*" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="goreSrednja2.html" name="topFrame3" scrolling="No" noresize="noresize" id="topFrame3" title="topFrame3" />
<frame src="goreSrednja_sitna.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
</frameset>
<frame src="sredinaGlavna.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<frame src="donjaSredina.html" name="bottomFrame2" scrolling="No" noresize="noresize" id="bottomFrame2" title="bottomFrame2" />
</frameset>
</frameset>
<frame src="krajnjeDesna.html" title="" />
</frameset>
<noframes><body>
</body></noframes>
</html>
Looks like a lot to do..................
Looks like a lot to do..................[/QUOTE]
** this is part of old test code and part can be deleted but this has nothing to do with ccs menu.
A.
Beverleyh
05-06-2013, 08:24 AM
This is very confusing.
In your first post you mention the CSS menu along with screen settings and resolution, yet your latest response says the problem is nothing to do with the CSS menu.
Your second post says the problem is specifically to do with screen settings BUT you have totally side-stepped/ignored my suggested solution relating to width (resolution) specific media queries, that you can use to adapt your CSS layout at smaller sizes. Consequently, your problem is now even more unclear.
If you would like help, you need to respond to the replies we give you - acknowledge what is and isn't pertinent to your question and try to clarify when we say that we are not sure about what you mean.
At the moment it is evident that we do not understand what your problem is, both in the fact that I and ajfmrf are unsuccessfully gleaning anything useful from your posts, AND that no one else has so far attempted to reply to your thread to offer their advice. You need to help us to help you.
Please explain very precisely what the problem is - what is it that is happening that you don't like, and what it is that you'd like to happen instead. If needs be, provide a mockup image to illustrate.
Of course we would like to help you but we can't if we do not understand what the issue is, and what might seem perfectly obvious to you, sadly isn't to us.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.