|
CSS - @media Within Style Tag In Html
Hi
Apologies if this is in the wrong forum but it stradles CSS, HTML and PHP. Is it possible to use @media within a style tag in html like so: <div style="@media screen { background-image: url(<?php echo $imageurl; ?>); background-repeat: repeat-x; background-position: left bottom;}"></div> The reason I am not not using it in the stylesheet directly is because I echo out all my template images dynamically with php. It seemed to work initially but then stopped. Anyone done this before? Garrett Similar TutorialsHi folks, I am getting this error and it makes little sense to me. I am getting the following warning... Ensure web pages print well. No Print links or CSS print styles were found on the site. Usability.gov 2:9 , Add a CSS style sheet for print media, or include a print media section in the current style sheet. here is my code <link href="style.css" rel="stylesheet" type="text/css" media="screen, print"> Thanks once again in advance for any suggestion or help! whonoes Hi, I have a style shete which contains multiple styles for differnet devices - however i am habing problems with the "handheld" media type - it wil lonly display the 1st style of the sheet (if you know what i mean). I have enclosed my code Code:
@media handheld
{
.frmInput
{
width: 1em;
height: 1.3em;
border: 0.1em solid #00004F;
background-color: #F2F2FF;
color:#000000;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.2em;
font-weight:bold;
background-color: #000033;
color:#000000;
}
}
If testing it using visual studio.net 2005's pocket pc 2003 emulator. Can anybody help ?? thanks in advance Andy For reasons of compliance with the SEC, I can't use cascading style sheets, but rather, I have to generate style attributes for each individual element (e.g.
Code:
<p style="width:436pt; margin:0pt; padding:6pt 0pt 0pt 20pt;
font-family:serif; font-weight:normal; color:#000000;
font-size:10pt; text-align:left; font-style:normal;
line-height:12pt; background-color:#FFFFFF;" >text </p>
don't get me started on how rediculous this is). Its stupid, but it works. What I can't figure out is how to apply something like Code: <style type="text/css" media="print">
hr {visibility:hidden}
</style>
to <hr style" ??? "/> any suggestions would be much appreciated -LG Hi I have some css styles that work like I want when displayed in a browser but when I print the screen to a PDF, almost all the info is lost, reverting to a single long column of text. Do you need to define separate 'screen' and 'print' versions of a style? If so, how do you include them in a page? Do you have to jump through any special hoops to insure the browser uses the correct media type (screen/print) for the correct media? TIA Hi. First of all i am new to CSS styling . I am using asp.net and i have created an html table in wich i added some treeviews, labels and stuff. I aslo created a StyleSheet where i wanna add style to a specific label within the table. Maybe it's very simple but i don't know what else to do, i am trying to do that by ours. For instance, #Label1 { color:Orange; } it's not working, if has no effect. Label1 is the name of the label. I think i'm not refering correct the Label. Should i add a reference to the table too? i tried something but it were wrong I have been trying various methods to change the color of the scrollbar of an object in my HTML page. However it remains at gray. The HTML code is as follows: <OBJECT NAME="foo" CLASSID="qeroeure" STYLE="scrollbar-base-color:red" CODEBASE="blah" WIDTH="700" HEIGHT="500" BORDER="3">"Cannot load image control." </OBJECT> This does not change the scrollbar color to red. What do I do to change the scrollbar color Hey all, i can't find out anywhere if i can use css to change the style of html menus and buttons...Id just like the menu to look a little different, ie different button and different colour background and text..etc any ideas or help would be appreciated thanks RF I have a form that displays the filled in results in an email but using all html. This is difficult to read for the user. Can this be easily corrected? Maybe apply a style sheet or something? It looks like: Code: <html> <head> <title>Moonbounce Adventures Order Form</title> </head> <body> Name: name<br /> Company: <br /> Address: add<br /> City: town - State: de - Zip: 19809<br /> E-Mail Address: name@.net<br /> Daytime Phone: 666-666-666<br /> Fax: <br /> Date of Event: 06/04/2005<br /> I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! From what I see, I can do the samething without it. So when exactlly would I used it? 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. 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"; 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! 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 In the media=print style sheet I want to change the location of the div containing the material to be printed. Using this in the print style sheet does not move the div. #divname {position: absolute; left:50px; top:100px; width:200px;} Can a div be moved with a new style sheet. 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 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 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 been running into a problem where iPod Touch and iPad are applying styles from media queries they shouldn't be. This seems to be a bug, but maybe I'm doing something wrong. Here's a simple test page: Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mobile test</title>
<style>
@media screen and (max-device-width: 480px){
/* ipod/iphone */
BODY {background: orange;}
}
@media screen and (max-device-width: 1024px){
/* ipad */
BODY {background: green;}
}
</style>
</head>
<body>
</body>
</html>
This shows green on the iPad, and green on the iPod. If I change to something crazy: Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mobile test</title>
<style>
@media screen and (max-device-width: 480px){
/* ipod/iphone */
BODY {background: orange;}
}
@media screen and (max-device-width: 6000px){
/* ipad */
BODY {background: green;}
}
</style>
</head>
<body>
</body>
</html>
iPod: green iPad: green If I switch the order: Code:
@media screen and (max-device-width: 1024px){
/* ipad */
BODY {background: green;}
}
@media screen and (max-device-width: 480px){
/* ipod/iphone */
BODY {background: orange;}
}
Correct. iPad: green iPod: orange Back to crazy: Code:
@media (max-device-width: 60000px){
/* ipad */
BODY {background: green;}
}
@media (max-device-width: 4800000px){
/* ipod/iphone */
BODY {background: orange;}
}
iPod: orange iPad: orange I COULD go back and refactor my code to put all the iPad specific stuff first, but I'm hesitant to do that with a system that seems broken. Is it actually broken, or am I doing something wrong? Both devices are running iOS 4.3. |
|||||||