Jump to content

pretesh

Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by pretesh

  1. On the W3Schools website page 'How TO - Shrink Navigation Menu on Scroll' tutorial it shows how to use Javascript to shrink the nav-bar. The 'CompanyLogo' also shrinks but this is text not an actual logo. What kind of Javascript would I need for a shrinking logo that was for example a jpg image? Is this a difficult thing to do? Any help on this would be great as I want to do this for my own website design and I'm new to Javascript.
  2. When using box-sizing border-box on images do I have to use specific dimensions (e.g width: 100px, height: 200px) for it to work properly? I'm building a site with responsive images next to each other but separated by a border. It works fine on the left and right borders but the top and bottom borders are not contained within the image thus pushing other images next to it out of sync. This issue is really frustrating as I have googled to find a solution but found nothing, not even someone with the same problem. My image sizes are Width: 100% and height: auto. Is this not allowed for box-sizing border-box? Can anyone provide a fix for this as I can't use outline or box shadow for what i want to do? Here is my html and css, i've also uploaded screen grabs of my issue: <div id="rightCol"> <img src="./images/pa.jpg"/> <img src="./images/game.jpg"/> <img src="./images/spine.jpg"/> </div> <div id="leftCol"> <img src="./images/truck.jpg"/> <img src="./images/ccc.jpg"/> <img src="./images/box.jpg"/> </div> #rightCol { width: 50%; height: auto; float: right; } #rightCol img { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border-left:2px solid white; border-bottom: 4px solid white; display: block; } #leftCol { width: 50%; height: auto; } #leftCol img { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border-right:2px solid white; border-bottom: 4px solid white; display: block; }
×
×
  • Create New...