CSS - Using Media Query To Remove Widget!

Hi,

I have created a accordion menu using a spry widget built into Dreamweaver CS3. However I want to amend this so that the menu is collapsed until the user clicks on a category.

Do I have to amend the CSS or the javascript to make it collapsed to begin with?

Any help would be appericated.


Thanks
Gary

Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page.
I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets.

I've tried adjusting z-index in each li, ul.
I'm still really new at this, so I'd appreciate any help and specific guidance you can offer.

Website: crossfit-hr.com

CSS code (source from CSS MENU MAKER):
.menu{
width:945px;
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:12px;
font-weight:bold;
font-color:#FF0000;
z-index:200;
}
.menu ul{
background:url(removed for thread) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
z-index:200;
}
.menu li a{
color:#000000;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#FF0000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:150px;
z-index:10000;
/*top:.5em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:150px;
z-index:200;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 8px 0px 8px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#FF0000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
z-index:200;
}
.menu #current{
background:url(removed for thread) top left repeat-x;
color:#FFFFFF;
}
=========================

HTML code for Widget:
<div class="menu">
<ul>
<li><a id="current" href="(removed for thread)" target="_self" >Home</a>
</li>
<li><a href="" target="_self" >Methods & Results</a>
<ul>
<li><a href="(removed for thread)" target="_self">Our Methods</a></li>
<li><a href="(removed for thread)" target="_self">See the Results</a></li>
</ul>
</li>
<li><a href="" target="_self" >How to Start</a>
<ul>
<li><a href="(removed for thread)" target="_self">Starting Options</a></li>
<li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li>
</ul>
</li>
<li><a href="" target="_self" >Schedule & Prices</a>
<ul>
<li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li>
<li><a href="(removed for thread)" target="_self">Prices</a></li>
</ul>
</li>
<li><a href="(removed for thread)" target="_self" >Coaches</a>
</li>
<li><a href="" target="_self" >Admin & Media</a>
<ul>
<li><a href="(removed for thread)" target="_self">Online Payments</a></li>
<li><a href="(removed for thread)=0" target="_self">Release Form</a></li>
<li><a href="(removed for thread)" target="_self">CFHR Photos</a></li>
<li><a href="(removed for thread)" target="_self">CFHR Videos</a></li>
</ul>
</li>
<li><a href="(removed for thread)" target="_self" >Contact</a>
</li>
</ul>
</div>

===================

How do I apply a css drop shadow around the search widget generated by this script code?
Code:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('dfacd65d-6514-4845-ad81-7249d33a6280');</script>
<noscript>Get the <a href="http://www.widgetbox.com/widget/college-search">College search</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://support.widgetbox.com/">More info</a>)</noscript>

Hello,
I am running wordpress and I have a Twitter Widget known as Twitter Widget Pro.
What I've done is that I made a graphic (a little TV with a twitter bird on top) to serve as a background image but be positioned right behind my Twitter widget so the twitter feed fits inside the tv.
I got this positioned correctly on the front page in my style.css sheet.
But as I go to my other pages: photos, travels, etc. the format of my site changes and therefore the background image (tv) and the Twitter feed don't align properly.

How can I code the background image of the tv and the twitter widget to align properly together on all my pages?
Would I have to insert the image into the actual twitter-widget-pro code itself?

My website is: (w w w.stefantrego.com)

Thanks a lot for the help!
-Stefan

I'm using the Spry tabbed panels widget on a website. I would like to center align the horizontal tabs. The default setting is left align. And I'm able to right align it.

Here is part of the css code:

.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%;
}

.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}

.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 2px 6px 6px 6px;
margin: 0px 0px 0px 0px;
list-style: none;
border-left: solid 1px #999;
border-bottom: solid 1px #CCC;
border-top: solid 1px #CCC;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
background-image: url(../sprylight.png);
color: #333333;


I've tried changing the "padding" under the ".TabbedPanelsTabGroup" rule to "auto". This causes the tabs to kind of be centered, but not exactly. Also, one of the tabs breaks apart from the row and spills over to the next line.

Any help would be very much appreciated.

From what I see, I can do the samething without it. So when exactlly would I used it? Thanks.

Hello,

I understand that there are at least 7+ media types for CSS and more may be added later.

http://www.w3.org/TR/REC-CSS2/media.html

I want a special stylesheet for print but all other media should use the same stylesheet. Code:

<style type="text/css" media="print">@import "print.css";</style>
<style type="text/css" media="all except print">@import "main.css";</style>

The following is a bad idea because it does not cover media that may be added in the futu Code:

<style type="text/css" media="aural, braille, embossed, handheld, projection, screen, tty, tv">@import "main.css";
<style type="text/css" media="print">@import "main.css";

Hi,
I am trying to serve another menu than my hover dropdown menu to touchscreens, and I am trying to do it using @media
First I tried to only add a max-width using display none,
it worked when I clicked but sometimes when the next page opened the page opened with the menu open, so I added an @media for the min-width also, and I think, not 100% sure that it works now.

So I wonder If I want to have a diferent style for a class or div do I have to put @media on all classes or should it be enough to do only on one of them.
Also Im not sure if the max-widht is to high, I did as I wanted to include tablets in non hover, but dont want to exclude pcs....

Well this is what I got so far,
the css for the menu:
Code:

@media screen and (max-width: 1025px){
#menu ul ul .level2{ display:none}
#menu ul ul .level3 { display:none}
#menu ul ul .level4 { display:none}
#menu ul ul .level5 { display:none}
#menu ul ul .level6 { display:none}
#menu ul ul .level7 { display:none}
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: none;} 
}

@media screen and (min-width: 1025px){
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: block;} }

 

Thanks

I've set up a simple responsive design at [redacted] (my first such attempt at responsive design). The media queries seem to work fine when I resize my browser. However, when using my phone it seems to work with Opera Mini but not Opera Mobile or Androids built in browser. Ok, I guess I can't post the URL so hopefully this is something that someone has experienced before and can point me in the right direction.

I put together the following site ... http://www.themax.co/

I am trying to create a style sheet for the PRINT pages, but I ran into some problems (the main site looks fine, but the print page doesn't).

First, go to the page...
http://www.themax.co/?page_id=6
When you go to print, and look at the print preview (in Firefox). most of the content is pushed to the second page. I assume this is because of the style .pagesidebox (which is a column that spans the entire page) ... I think this is causing the rest of the content to go to the next page. Any idea how to fix this?

Second, I have a logo that goes against the black background (on the website) and a white logo that is supposed to appear on the print page. So, in the print.css stylesheet, I called the background-image to point to the new image. However, the new image is not showing up when printing. I assume this is because the image is a BACKGROUND image, and the print settings are set to NOT show backgrounds. Is there a way around this (using CSS)? Since there are two logos (one on white, and one on black), I can't place the image inside the html page (I have to use CSS).

Please let me know. Thanks!

Basically I'm trying to create a word processor feel on a web page.
I need a contentEditable div/iframe that will display as legal paper size sections, like a word processor would. So that when the text starts to over flow page 1, it would move to page 2, etc...

Any ideas?

I'm willing to pay for a good solution at this point...

I've looked over my syntax a hundred times, but I can't get the print preview in IE to match the style declarations I've put in my css document. None of them work, so obviously it's something i've messed up in the overall structure of the code, and not minor errors.

This is at the end of my .css document that I linked to my html:

Code:

 @media print {body {font-family: arial, helvetica, sans-serif}
               a {text-decoration: none; color:pink}
               img {border-width: 0px}
               #hideprint {display: none}
               #instruction {display: none}
               #lpmap {page-break-after: always}
               .notes {page-break-inside: avoid; margin: 30px 30px 30px 30px; }}

Thanks

What i am trying to do is when the user tries to print out the HTML document, then the printer prints out what is in this:

<link rel=alternate media=print href="printthis.doc">

It works in IE but it doesn't work in Mozilla Firefox.

Does anyone know a way on how this is done in Mozilla Firefox or even both...??

Cheers,

Jackson

Hi,
Opened a new post as its better.
I am trying to do things for smaller devices such as mobiles and tablets.
If I add something very simple in the stylecheat to the @media query such as background color of the body using this:
@media screen and (max-device-width: 2000px){
body { width:766px; margin:auto; background-color:#00FF00;}}
Or if I do this wich seem to have the same affect:
@media screen and (max-width: 2000px){body { width:766px; margin:auto; background-color:#00FF00;}}
I dont get the green background on the body, I only get it on my pc, on my samsung mini, on blackberry I dont get the green background and using adobe advice central on samasung tab and ipone 4 and maybe some more I get it, on the rest no background color.
This is so strange, I imagen all have greater width than 2000px.

If I set to max-width to 500 px I dont get it on my samsung mini either...????? it have a very small resolution, only 240 x something.

I just dont get it

I dont have any background color declared except the one in the @media query

I've got a pain of a problem.

Firstly I've got my styles as
Code:

<!-- styles that need applying in all browser (including IE/NS 4.x)
<link ... />
<!-- styles that need applying in modern browsers (IE 5> etc.) -->
<style type="text/css" media="screen">
	@import "/screen.css";
</style>
<style type="text/css" media="print">
	@import "/print.css";
</style>

The problem is that IE 5 & 5.5 seem to ignore the media attribute on the style blocks so they include all the styles.

I read somewhere that using @media will solve this problem, so I did:

Code:

<!-- styles that need applying in all browser (including IE/NS 4.x)
<link ... />
<!-- styles that need applying in modern browsers (IE 5> etc.) -->
<style type="text/css">
	@media screen {
		@import "/screen.css";
	}
	@media print {
		@import "/print.css";
	}
</style>

This works fine in IE 5.x and IE 6, but now for some reason Firefox (1.0.7) is not including ANY of the imported sheets. However if I add normal rules within the @media ... {} sections then they are applied.

Can anybody verify this, and does anyone have a solution?

Thanks in advance,

-D