Results 1 to 9 of 9

Thread: CSS3 Shadow Block Menu

  1. #1
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS3 Shadow Block Menu

    Hi. Im using this script:

    http://www.dynamicdrive.com/style/cs...ow_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.

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    594
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.
    Thanks,

    Bud

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,946
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    ".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-...ly-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/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,946
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    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/dhtmltu...aqueries.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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Just put whole text (with http and www ) it will load

  7. #7
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    594
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    this is the source.
    Code:
    <!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..................
    Thanks,

    Bud

  8. #8
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,946
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Css3 horizontal menu Problem
    By bigcity in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-14-2013, 11:57 AM
  2. IE9 and CSS3 Semi Opaque Menu
    By janetb in forum CSS
    Replies: 2
    Last Post: 12-17-2012, 01:40 PM
  3. CSS3 animated vertical slanted menu
    By WKDfm in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 12-03-2012, 09:19 AM
  4. Can this scrolling menu be done in CSS3 only?
    By DragonTheory in forum CSS
    Replies: 0
    Last Post: 09-08-2010, 02:54 PM
  5. Replies: 0
    Last Post: 11-19-2009, 07:42 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •