|
CSS - @media Max And Min-width
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 Similar TutorialsHi 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, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? From what I see, I can do the samething without it. So when exactlly would I used it? Thanks. Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html 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! 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'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 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... 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 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. Is there a way to detect whether someone is using a mobile device, and write specific CSS according to whether the viewer is using a computer or Iphone/ Blackberry or other mobile device? Any links or info is appreciated. thanks - 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. 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 |
|||||||