Jump to content

Search the Community

Showing results for tags 'dynamic response'.



More search options

  • 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

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 2 results

  1. Hello all, I am trying to resize an image, so that it fits when viewed on a screen with a resolution size of between 800 and 1023px. I would like the size of the image to change depending on the size of the screen - i.e. bigger when 1023 and smaller when 800. As such, I have tried to use the max-width: % command and the max-width: auto command hoping that the image will re-scale when I reduce the screen size but I have had no success. A problem seems to be when I reduce the size of the window, my right element which has property float: left moves down beneath the left element when the screen is reduced in size instead of reducing in size itself. I use the following code. I further specify img and p and have tried also changing their max width to a % but this has not proven successful. #contentbox_left {/*three content boxes*/max-width: 70%; margin: 0; padding: 0; border: 0; float: left; } Can anybody tell me what I'm not doing right? Many thanks for reading this post.
  2. 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; } }
×
×
  • Create New...