|
CSS - @media How Does It Work, Please Help Am Desperate?
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 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 CSS alignment urgent help needed I only have 10 hours to hand in this assignment that I have been stuck on for 4 days, the instructions are so unclear! I need to apply a style sheet to a web page given and the question I am stuck on asks me to align the image and words under it to the right. I do not understand what the command I am supposed to use to tell it to move to the right are. Here is the markup for it: <DIV class=figure> <IMG alt="A happy face" src="Ex2-1_files/happy.png"> <P class=caption> Figure 1: Doesn't this make you happy? </P></DIV> I know its align: right; But what is the whole command I put in textpad? Tahnks so much! Hi guys, I recently started adding content to my website (www dot web-share dot org dot uk) but I have noticed that when the content overflows on the page, the divs do not follow suit! I have tried every trick in the book which includes at least 3 hours worth of searching for solutions that involving clearing, removing floating and use min-width but none of them work! I am pulling my hair out on this one... Please help before I go bauld! CSS File: Source of http:// www dot web-share dot org dot uk/Themes/Default/Original.css HTML File: Source of http:// www dot web-share dot org dot uk/index.php?a=news&id=1 Thanks in advance, Chris Hello, I am a recent learner to css and web development. I am using a studiopress theme on a wordpress site. the site is erashowcaseweb THe problem i am having is with the nav bar. in firefox and ie 8 it looks great, in ie 7 it does not and unfortunately my boss uses 7 lol. the strange thing is when i edit this code. #menu-default-menu { position: relative; top: -80px !important; left: 0pxpx; padding: 0 0 0 30px; to say 0px it aligns in ie 7 perfectly and ruins it in firefox and ie 8. ty for any help at all. i can't post any urls or attack files but if anyone has the time to pm me i will gladly send u the stylesheet and link. Hi, I have an issue that has been tormenting me to the sharp rusty end of my chair. I set the indexTableHeader class to width:100%, and in IE6 it does what i want, it doesnt leave the edge of the screen, but in FF 2.0 it Always extends out by the width of the div element beside it, making it nearly useless. In IE7 it is even worse, it clears the left div, and goes to the bottom. The goal is to have what it looks like in ie 6. I know the css code is pretty long, but if someone could give it a couple looks and let me know what they think that would be awesome. I really appreciate it. Thanks-Dave Code: <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
html {
padding:0;
margin:0;
border:0;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
}
body {
padding:0;
margin:0;
border:0;
font-size:12px;
background-color: #A2C4EA;
}
#head {
margin:0;
width:100%;
height:60px;
background-color: #A2C4EA;
background-image: url(/holimages/hein75b.gif);
background-position: left;
background-repeat: no-repeat;
}
/*
*/
/* Nav menu, */
#submenu {
text-align: center;
background-color:#566d96;
width:100%;
}
#submenu ul {
display:block;
list-style-type: disc;
background-repeat: repeat-x;
margin:0;
}
#submenu ul li {
display: inline;
padding-right: 20px;
}
#submenu ul li a {
text-decoration: none;
font-size:12px;
color: #fff;
}
#submenu ul li a:hover {
text-decoration: none;
color: yellow;
}
#submenu h2 {
color:white;
font-size:12px;
display:inline;
margin-right:12px;
}
/*Guide bar */
#guide{
font-size:12px;
background-color:#fff;
width: 100%;
text-align: left;
margin:0;
}
#guide ul {
list-style-type: disc;
background-repeat: repeat-x;
margin:0;
}
#guide ul li {
display: inline;
padding-right: 0px;
}
#guide ul li a {
font-size:12px;
text-decoration: none;
color: blue;
}
#guide ul li a:hover {
text-decoration: none;
color: red;
}
#logo{
float:left;
position:fixed;
}
#cit_nav{
right:0;
float:right;
}
/* Scroll Div */
#ScrollDiv {
height: 410px;
overflow: auto;
}
/* this is the overall style of the content pane */
/* Content pane */
#content {
font-size:14px;
background-color:#A2C4EA;
overflow:auto;
}
#content h2{
font-weight: lighter;
font-variant: normal;
font-size: 20px;
background-color:#333366;
color:#fff;
margin:0;
padding:3px;
padding-left:20px;
}
#content h3{
font-weight: lighter;
font-variant: normal;
font-size: 14px;
background-color:#333366;
color:#fff;
margin:0;
}
#content a{
text-decoration:none;
}
#content a:visited{
text-decoration:none;
}
/* Contact us Page */
#contact-us{
background-color:#DDDDFF;
}
/* this holds anyhting that is regarded as "call next" */
#content-container{
width:100%;
}
/* */
/* Index Page */
/* This is the table that holds the headings */
#headerWrapper{
}
.indexTableHeader {
background-color:#566d96;
display: table;
width:100%;
}
/* This is the cell that holds the Headers for the Index Page */
.
/* This is the table that holds the content #566d96 #DDDDFF*/
.indexTable {
width:100%;
background-color:#566d96;
display: table;
font-size:14px
}
#sub-menu2 {
font-size: 12px;
float:left;
width:170px;
border-right:2px none #000;
border-bottom:2px none #000;
padding-left:10px;
padding-bottom:20px;
display:block;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
color: #FFFFFF;
background-color:#566d96;
border-top-style: solid;
border-left-style: none;
border-top-width: 1px;
border-top-color: #FFFFFF;
}
#sub-menu2 h2 {
font-weight: lighter;
font-variant: normal;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-top-color: #99cc00;
border-right-color: #99cc00;
border-bottom-color: #99cc00;
border-left-color: #99cc00;
font-size: 20px;
background-color:#566d96;
}
#sub-menu2 a:link {
font-size: 12px;
text-decoration: none;
color: #CCCCCC;
}
#sub-menu2 a:visited {
color: #CCCCCC;
font-size: 12px;
}
#sub-menu2 a:hover {
font-size: 12px;
color: #FFFFFF;
}
.indented{
margin:0 0 0 -1.5em;
}
/*----LEGACY CSS */
pre {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>
rere</title>
<style type="text/css">
.accessibility
{
display: none;
}
</style>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
</head>
<body>
<div id="wrapper">
<form id="holform" name="holform" action="HeinOnlineForm">
<div id="head">
<a href="#skipto" title="Skip repetitive navigation links" accesskey="2"><span class="accessibility">Skip repetitive navigation links</span></a>
<div id="logo">
</div>
<div id="cit_nav">
<table border="0" cellpadding="0" cellspacing="0"
>
<tr><td valign="top">
Select RERE <br/>
<select name="collection"
onchange="collectionselecter(this.options[this.selectedIndex].value);"
style="font-size:9pt;width:225;font-weight:bold;color:#006633">
<option value="journals"
>
DDDDDD/option>
</select>
</td>
<td valign="top">
</td>
</tr>
</table>
</div>
</div>
<div id="container">
<div id="submenu">
<ul>
<li>
<a href="/front/x"
class="nav"
title="Home">
Home
</a>
</li>
<li><a href="Search?collect"
class="nav"
title="Display search options for this collection">
Search
</a></li>
<li> <a href="SearchH"
class="nav"
title="Review Previous Searches">
Search History
</a></li>
<li>
<a href="Help?collectio"
class="nav"
title="Display Help for this collection">
Help
</a></li>
<li><a href="ContactInfo"
class="nav"
title="Use e-mail to send comments to HeinOnline Technical Support">
Contact Us
</a></li>
<li>
<a href="#" onclick="toggleDiv()"
class="nav"
title="Printer Friendly Version">
Printer Friendly
</a>
</li>
</ul>
</div>
<a name="skipto"></a>
<div id="content">
<div id="guide">
<ul>
<li>
<a href="">trtrtrtrtrt >> </a>
</li>
<li><a href="#">wewewewewe >> </a> </li>
<li> <a href="#"> - wewewewewew
>> </a> </li>
</ul>
</div>
<div id="sub-menu2">
<h2>Navigation</h2>
<ul class="sub-list">
<li class="sub-list-element">Quick Locator</a></li>
<li class="sub-list-element">Simple Search</a></li>
<li class="sub-list-element">Advanced Search</a></li>
<li class="sub-list-element">
</ul>
<div align="center"><img src="../../images/narablue.gif" width="120" height="122" >
</div>
</div>
<div id="content-container">
<h2 >Titles
</h2>
<div id="headerWrapper">
<table class="indexTableHeader" >
<tr >
<td width="50%" align="center" border="0" >
<h3>Number </h3>
</td>
<td width="50%" align="center" border="0" >
<h3>Name </h3>
</td>
</tr>
</table>
</div>
<div id="ScrollDiv">
<table width="100%" class="indexTable" cellspacing="1" cellpadding="2">
<tr >
<td width="50%" align="center" style="height:0px;">
</td>
<td width="50%" align="center" style="height:0px;">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
<div id="foot">
</div>
</div>
</body>
</html>
Hi all, I made a recent post having trouble with a three column layout. Its not really had much attention however it wasn't really clear what i was asking. I wanted the two outside columns which only contained background images to be hiden in the background from the viewpoint. You can see my original post here, it includes two diagrams: http://forums.devshed.com/css-help-...ion-584924.html Now I have edited the layout to a single column and used the images on the sides as borders. I am still having the same problem so I am now wandering if I can force the browser to centre on the main column... This would leave overhang on ether side but its only images to make the site look better. Currently the site will look good using a wide resolution but on standard 1024x768 i want the centre of the column to be in the middle of the browser window on load. Can I do it with css? javascript or ajax? If in javascript or ajax could you please like me a tutorial or something as i have no ability in those categories! Any help is great. Cheers. Hey everyone! This is my first post here as I am bordering on throwing my laptop out of the window so I'm in dire need of some help! My problem is - I have a background image which consists of 2 columns and a main content area. I want this to be tiled vertically and to fill the width of the page (but not repeat.) But no matter what I try it will just hugely overflow the browser horizontally and so I'm only seeing the left column and half of the center part. This is a scaled down version of the image I'm using: ht tp://ww w.frontier-music.co.uk/example2.jpg This is driving me absolutely mental as I just expected there to be a quick fix for keeping the image within the browser size! This is the sort of thing I'm after: ht tp://ww w.frontier-music.co.uk/example.jpg If anyone could offer any sort of help I would be hugely greatfull as I'm having a bit of trouble getting my head around all of this code! ht tp://ww w.teddyzoo.com - This is a pretty similar background effect to what I'm after, the based my background image around theirs to try and work out what they had done! Many thanks in advance Josh EDIT - Sorry about the broken links, I wasn't allowed to post working ones. 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. 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! 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 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. Hi all, I am developing a website and kiosk display hardware. I want to target the kiosk display using a specific stylesheet. What is the best way? @media display and height:??px and width ??px or using @media ???kiosk??? etc. What other specifics can I target to define which style sheet is used? Thanks for any help. Dale. 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 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. 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 Or do I have to replicate every CSS class in print? That would double the size of my CSS file! What's the correct way? Will this work as I hope? Code:
div.news {
width:690px;
padding:10px;
margin:0;
float:left;
background-color: #DDDDDD;
}
.button_div {
width:180px;
padding:10px;
background-color:#953956;
cursor:pointer;
}
.body_text {
color:#284186;
line-height:130%;
font-size:11px;
}
@media print {
div.news {background-color:#EEEEEE;}
.button_div {display:none;}
.body_text {color:#000000;}
}
Also, is it ok to do this? Any issues I should be aware of? Code:
// CSS
p.italic {font-style: italic;}
p.large {font-size: 150%;}
// HTML
<p class="italic large">Italic and large.</p>
Thanks, 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 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 |
|||||||