Jump to content

Search the Community

Showing results for tags 'screen size'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 4 results

  1. Hello all, I'm trying to create a site in CSS which uses the @media only screen command to display an output depending on the size of the screen which the site is being viewed from - i.e dynamic response. I am altering a tutorial to suit my needs and in the initial tutorial there are three size specifications which were set up: @media only screen and (max-width : 480px)@media only screen and (min-width : 481px) @media only screen and (min-width : 1024px) I wanted to add to this and create a fourth rule for screen sizes between 800 and 1024 and so added the following command and set up CSS rules under it: @media only screen and (min-width : 800px) To see that this was 'working' under the CSS rules for the command I set it up so one image wouldn't display under these settings: #slideshow { display: none; } This appeared to work with the image disappearing at what I guessed was about 800px (I am testing be just resizing my browser). However, the problem is that it doesn't come back when the browser size is then extended above 1024px. It seems like the rule applied for @media only screen and (min-width : 800px) is affecting the preceding @media only screen and (min-width : 1024px) CSS styles. I appear to have noticed something similar when I was sizing images for certain @media commands, but that's perhaps another post for another day (although hopefully related). Any advice or suggestions would be much appreciated. Many thanks for reading. I will post all the CSS for that I've put under the @media commands below in case there's something in there causing a prob: nav ul { padding: 0px; }/* low resolution 480 px and below for smart phones*/@media only screen and (max-width : 480px) { p {color: rgb(0,0,0);} body {background: rgb(244,244,244);} #master { width: 100%; margin: 0 auto; background: rgb(255, 255, 255); border: 0; overflow: hidden; /* add to the parent element, to crop out anything that would otherwise exceed its size.*/ } header { height: 70px; padding-left: 10px; padding-top: 10px; background-color: #F60; } header img{ height: 100%; width:auto; } nav { text-align: center; padding: 10px 5px ; border: thin solid #F60; font-family: Meiryo; background-color: #F96; } nav * {font-size:12;} /*remove spacing produced by display: inline-block; between li */ nav li { display: inline; margin-left: 10px; font-size: 100%; line-height:160%; font-family: Meiryo; } nav li a { color: #000; text-decoration: none; line-height: 10px; /* matches height of nav*/ } #slideshow { width: 100%; margin: 0px auto; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } #slideshow img { width: 100%; border: none; } /* #slideshow {display: none;} this is basically saying don't display the slideshow div for the low resolution screen*/ #contentbox_left {/*three content boxes*/ width: 100%; margin: 0px auto; border: none; padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; text-align: center; } #contentbox_left p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; margin-top: 0px; margin-left: 0px; padding-top: 0px; padding-left: 0px; } #contentbox_left img { max-width: 100%; height: auto border: none; margin-top: 0px; margin-left: 0px; padding-top: 0px; padding-left: 0px; text-align: center; } #contentbox_left h2 { font-family: Arial, Helvetica, sans-serif; color: #F30; font-size: 110%; } #contentbox_middle { width: 100%; margin: 0px auto; border: none; padding-top: 10px; padding-left: 0; padding-right: 0; padding-bottom: 10px; border: 0; text-align: center; } #contentbox_middle p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_middle img { max-width: 100%; height: auto border: none; } #contentbox_middle h2 { font-family: Arial, Helvetica, sans-serif; color: #F30; font-size: 110%; } #contentbox_right { width: 100%; margin: 0px auto; border: none; padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; text-align: center; } #contentbox_right p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_right img { max-width: 100%; height: auto border: none; } #contentbox_right h2 { font-family: Arial, Helvetica, sans-serif; color: #F30; font-size: 110%; } .widebox{/*put in a slider or other image here in here*/ width: 100%; margin: 0px auto; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px;; } .widebox img{ width: 100%; border: none; } article{width: 95%; margin-left: 10px; margin-bottom: 60px; } .news{margin-bottom: 20px;} .news h2 {font-size: 120%; margin-bottom: 5px;} .news h2 a {text-decoration: none; color: rgb(189,30,44); } .news p {line-height: 160%;} .newsmeta {font-size:70%; margin-top: 10px; float:right; font-family: verdana;} .newsmeta a {color: rgb(189,30,44);} footer { height: 50px; margin-bottom: 0px; margin-top:0px; padding-bottom: 0px; padding-top:0px; background-image: url(footer_background.jpg); margin-top:0px; background-repeat: repeat-x; color: #FFF; } #lowerfooter { height: auto; padding-top: 0; margin-top: 0; background-color: #F60; padding-left: 20px; font-family: Meiryo; font-size:80%; overflow: hidden; padding-bottom: 100px; } .lowerfooter_innerbox { float: left; margin-top: 0px; padding-right: 12px; font-size: 90%; color: #FFF; margin-right: 12px; } .lowerfooter_innerboxright { float: left; margin-top: 0px; font-size: 9px; color: #FFF; font-size: 90%; } }/* medium resolution 481 px and above until 800px*/@media only screen and (min-width : 481px) {*{/* for better control over the defaults and ensuring there are no spaces.*/ margin:0; padding:0; } p {color: rgb(0,0,0);} body {background: rgb(255,255,255); margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } /*the actual background*/ header { height: 80px; background-image: url(2_HeaderBG.jpg); padding-left: 10px; padding-top: 10px } nav ul, nav li {margin: 0; padding: 0; text-indent:0; list-style-type: none;} nav { height:30px; font-family: Meiryo; background-color: #F96; border: thin solid #F60; vertical-align: middle; text-align: center; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } nav ul, nav li {margin: 0; padding: 0; text-indent:0; list-style-type: none;} nav li { display: inline-block; margin-left: 10px; font-size: 110%; line-height: 160%; } nav li a { display: inline-block; color: #000; font-size: small; text-decoration: none; line-height: 10px; /* matches height of nav*/ } #master { border: none; width: 100%; height:auto; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color: rgb(255,255,255); overflow: hidden; /* add to the parent element, to crop out anything that would otherwise exceed its size.*/ } #slideshow { width: 100%; margin: 0px; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } #slideshow img { width: 100%; background-color: none; border: none; } #contentbox_left {/*three content boxes*/ padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; float: left; } #contentbox_left p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_left img { max-width: 100%; height: auto border: none; } #contentbox_left h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_middle { padding-top: 10px; padding-left: 0; padding-right: 0; padding-bottom: 10px; border: 0; float: left; } #contentbox_middle p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_middle img { max-width: 100%; height: auto border: none; } #contentbox_middle h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_right { padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; float: left; } #contentbox_right p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_right img { max-width: 100%; height: auto border: none; } #contentbox_right h2{ font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #photostrip{/*this could be removed if we decide to use single image photos - this would have the advantage of being able to specify how many per row and also allow them to be able to be shrunk to fit*/ width: auto; height:auto; border: none; padding-bottom: 10px; padding-top: 10px; float: left; } .widebox{/*put in a slider or other image here in here*/ width: 100%; margin: 0px auto; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px;; } .widebox img{ width: 100%; border: none; } article{ width: 95%; margin-left: 10px; float: left; } .news{ margin-bottom: 20px;} .news h2{font-size: 120%; margin-bottom: 5px;} .news h2 a {text-decoration:none; color: rgb(189,30,44);} .newsmeta {font-size: 70%; margin-top:5px; float: right; font-family: verdana;} .newsmeta a {color: rgb(189,0,44);} footer { height: 50px; margin-bottom: 0px; margin-top:0px; padding-bottom: 0px; padding-top:0px; background-image: url(footer_background.jpg); margin-top:0px; background-repeat: repeat-x; color: #FFF; } #lowerfooter { height: auto; padding-top: 0; margin-top: 0; background-color: #F60; padding-left: 20px; font-family: Meiryo; font-size:80%; overflow: hidden; padding-bottom: 100px; } .lowerfooter_innerbox { float: left; margin-top: 0px; padding-right: 12px; font-size: 100%; color: #FFF; margin-right: 12px; text-align: left; } .lowerfooter_innerboxright { float: left; margin-top: 0px; font-size: 9px; color: #FFF; text-align: right; } }/* larger medium resolution 800 px and above until 1023px*/@media only screen and (min-width : 800px) {*{/* for better control over the defaults and ensuring there are no spaces.*/ margin:0; padding:0; } p {color: rgb(0,0,0);} body {background: rgb(255,255,255); margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } /*the actual background*/ header { height: 80px; background-image: url(2_HeaderBG.jpg); padding-left: 10px; padding-top: 10px } nav ul, nav li {margin: 0; padding: 0; text-indent:0; list-style-type: none;} nav { height:30px; font-family: Meiryo; background-color: #F96; border: thin solid #F60; vertical-align: middle; text-align: center; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } nav ul, nav li {margin: 0; padding: 0; text-indent:0; list-style-type: none;} nav li { display: inline-block; margin-left: 10px; font-size: 110%; line-height: 160%; } nav li a { display: inline-block; color: #000; font-size: small; text-decoration: none; line-height: 10px; /* matches height of nav*/ } #master { border: none; width: 100%; height:auto; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color: rgb(255,255,255); overflow: hidden; /* add to the parent element, to crop out anything that would otherwise exceed its size.*/ } #slideshow { display: none; } #slideshow img { width: 100%; background-color: none; border: none; } #contentbox_left {/*three content boxes*/ padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; float: left; } #contentbox_left p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_left img { max-width: 100%; height: auto border: none; } #contentbox_left h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_middle { padding-top: 10px; padding-left: 0; padding-right: 0; padding-bottom: 10px; border: 0; float: left; } #contentbox_middle p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_middle img { max-width: 100%; height: auto border: none; } #contentbox_middle h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_right { padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; float: left; } #contentbox_right p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_right img { max-width: 100%; height: auto border: none; } #contentbox_right h2{ font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #photostrip{/*this could be removed if we decide to use single image photos - this would have the advantage of being able to specify how many per row and also allow them to be able to be shrunk to fit*/ width: auto; height:auto; border: none; padding-bottom: 10px; padding-top: 10px; float: left; } .widebox{/*put in a slider or other image here in here*/ width: 100%; margin: 0px auto; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px;; } .widebox img{ width: 100%; border: none; } article{ width: 95%; margin-left: 10px; float: left; } .news{ margin-bottom: 20px;} .news h2{font-size: 120%; margin-bottom: 5px;} .news h2 a {text-decoration:none; color: rgb(189,30,44);} .newsmeta {font-size: 70%; margin-top:5px; float: right; font-family: verdana;} .newsmeta a {color: rgb(189,0,44);} footer { height: 50px; margin-bottom: 0px; margin-top:0px; padding-bottom: 0px; padding-top:0px; background-image: url(footer_background.jpg); margin-top:0px; background-repeat: repeat-x; color: #FFF; } #lowerfooter { height: auto; padding-top: 0; margin-top: 0; background-color: #F60; padding-left: 20px; font-family: Meiryo; font-size:80%; overflow: hidden; padding-bottom: 100px; } .lowerfooter_innerbox { float: left; margin-top: 0px; padding-right: 12px; font-size: 100%; color: #FFF; margin-right: 12px; text-align: left; } .lowerfooter_innerboxright { float: left; margin-top: 0px; font-size: 9px; color: #FFF; text-align: right; } }/* high resolution 1024 px and above*/@media only screen and (min-width : 1024px) { *{/* for better control over the defaults and ensuring there are no spaces.*/ margin:0; padding:0; } p {color: rgb(0,0,0);} body {background: rgb(255,255,255); margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } /*the actual background*/ header { height: 80px; padding-top: 10px; padding-left: 160px; background-image: url(2_HeaderBG.jpg); background-repeat: repeat-x; } nav ul, nav li {margin: 0; padding: 0; text-indent:0; list-style-type: none;} nav { height:30px; font-family: Meiryo; background-color: #F96; color: #000; border: thin solid #F60; vertical-align: middle; text-align: center; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } nav * {font-size:0;} /*remove spacing produced by display: inline-block; between li */ nav li { display: inline-block; padding-top: 10px; } nav li a { display: inline-block; color: #000; font-size: small; text-decoration: none; line-height: 10px; /* matches height of nav*/ padding: 0 15px; /*text-decoration: none;*/ } #master /*the box we work in*/ { border: none; width: 1024px; height:auto; background-color: rgb(255,255,255); margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #slideshow{ width: 100%; margin: 0px; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } #slideshow img {/*image goes in here - this is the main image at the top*/ width: 100%; background-color: none; border: none; } #contentbox_left {/*three content boxes*/ width: 328px; padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; float: left; } #contentbox_left p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_left img { margin-bottom: 10px; border: none; } #contentbox_left h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_middle { width: 328px; padding-top: 10px; padding-right: 20px; padding-left: 20px; padding-bottom: 10px; border: 0; float: left; } #contentbox_middle p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_middle img { margin-bottom: 10px; border: none; } #contentbox_middle h2{ font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_right { width: 328px; padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right:0; border: 0; float: left; } #contentbox_right p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_right img { margin-bottom: 10px; border: none; } #contentbox_right h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #photostrip{/*this could be removed if we decide to use single image photos - this would have the advantage of being able to specify how many per row and also allow them to be able to be shrunk to fit*/ width: auto; height:auto; border: none; padding-bottom: 10px; padding-top: 10px; float: left; } .widebox{/*put in a slider or other image here in here*/ width: 100%; margin: auto; border: none; padding-bottom: 10px; } article { width: 940px; margin-left: 10px; margin-bottom: 50px; } .news {margin-bottom: 20px;} .news h2 {font-size:120%; margin-bottom: 5px;} .news h2 a {text-decoration:none; color: rgb(189,30,44);} .newsmeta {font-size:70%; margin-top: 5px; float: right; font-family:verdana; } .newsmeta a {color: rgb(189,0,44);} footer { height: 50px; margin-bottom: 0px; margin-top:0px; padding-bottom: 0px; padding-top:0px; background-image: url(footer_background.jpg); margin-top:0px; background-repeat: repeat-x; color: #FFF; } #lowerfooter { height: 200px; padding-top: 0; margin-top: 0; background-color: #F60; padding-left: 160px; font-family: Meiryo; font-size:80%; overflow: hidden; padding-bottom: 100px; } .lowerfooter_innerbox { float: left; height: 300px; width: 300px; margin-top: 20px; padding-right: 12px; font-size: 100%; color: #FFF; margin-right: 12px; text-align: left; } .lowerfooter_innerboxright { float: left; height: 300px; width: 380px; margin-top: 20px; font-size: 9px; color: #FFF; text-align: right; } }
  2. Hello Internet, I am struggling with what I am guessing is a relatively simple concept. I have looked at some tutorials on W3 and did general searches on the internet. The effect I am trying to accomplish it to have the image I supply as a background image scale with the screen size - screen size meaning 100% vs 75% vs 50%. In the attachment the Tan area is an image I want to scale with the screen size. My primary two constraints are: 1. I want the background color to be a dark gray 2. I also want the tan image that is 1000px wide centered in the screen. The height is irrelevant because it’s the sides that are important to me. The height can be any size. If the screen is at 100% or at 25% the height needs to fill the whole screen. I have tried many things - height:auto, height:100%, em, divs... many different things. If you can direct me to a tutorial or help in any way I would appreciate it. I did include a file that shows the effect I am looking for.Screen size.pdf
  3. I believe this is a CSS layout problem, because it's a problem between all my pages. I have a jello-format website with 5 image-based hyperlinks. I am on my homepage at a certain screen size. I click on any hyperlink to view another screen. To my demise, my hyperlinks and text are suddenly larger because my screen-size did not carry from my homepage to my current screen. I would like each visitor to see my pages in sync of eachother, for my hyperlinks on each page to be the same size. It would be a pain for them to resize the screen to their desire. However - I'm beginning to believe that I don't have power over this and that I should just have a fixed web design. Please tell me that I am wrong.
  4. I think I am ready to roll out the first version of my site. I looked at my site on three different computers in my house and they all chose to format my web content differently. I am using a margin float command to place three table sidebyside but when I open up my site on other computers (not the one i made my site on) it formats it differently. How do I ensure that my site automatically sizes its ouput to keep the site looking the same always on every computer?
×
×
  • Create New...