Jump to content


Photo

Images/Text not scaling to screen width


Best Answer WebOutGateway, 07 August 2014 - 09:55 PM

Hi, apacheguy!

Try this:

<!DOCTYPE html>
<html>
<head>
<style media="screen" type="text/css">
/* <!-- */
body{
 margin: auto;
 width: 100%;
 padding: auto;
}

#container{
 width: 980px;
 height: auto;
 margin: auto;
}
.clear{
 clear:both;
}

#grid{
 padding: 100px;
 margin: auto;

}

.grid-element{
  width: auto;
  padding: 0px 44px 0px 44px;/*sets the padding for the right and left sides*/
  display: inline-block;
  margin: auto;

}

a.clickable-div {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;
}

.img {
  height:auto; 
  width:inherit;
  max-height:100%;
  max-width:100%;
}

.button {
  color: #900;
  font-weight: bold;
  font-size: 150%;
  text-transform: uppercase;
  display: block;
  width: 50%;
}

/* --> */
</style>
</head>

<body>
 <div id="container">
   <div id="grid">
     <div class="grid-element" align="center">
       <img src="wog.jpg" class="img">
       <h1>Hue Lamp 1</h1>
     </div>

     <div class="grid-element" align="center">
       <a href="action.php?light=2&state=false">
       <img src="wog.jpg" class="img"></a>
       <h1>Hue Lamp 2</h1>
     </div>

     <div class="grid-element" align="center">
       <a href="action.php?light=3&state=false">
       <img src="wog.jpg" class="img"></a>
       <h1>Hue Lamp 3</h1>
     </div>
   </div> /*end div #grid*/

   <div align="center">
      <form method="POST" action="action.php">
        <input type="hidden" name="scene" value="02b12e930-off-0">
        <input type="submit" value="Scene 1" class="button">
      </form>

      <br/> /*instead of <p>*/
      <form method="POST" action="action.php">
        <input type="hidden" name="off">
        <input type="submit" value="All Off" class="button">
      </form>
   </div>
 </div> /*end of div #container*/
</body>
</html>

I've set the style of the <body> section. I've created another <div> for the whole content which is the #container. I've set your #grid's padding to 100px and the margin with auto. Also your .grid-element's width, padding. display and margin.

I hope this helps. Thank you.

Go to the full post


  • Please log in to reply
2 replies to this topic

#1 apacheguy

apacheguy

    Advanced Member

  • Members
  • PipPipPip
  • 107 posts

Posted 07 August 2014 - 08:02 PM

Ok, first off CSS is definitely not my strong suit so bear with me here.  This is my code:

<style media="screen" type="text/css">
	/* <!-- */

	.clear{
		clear:both;
	}
		 
	#grid{
		width: 100%;
	}
	 
	.grid-element{
		width:33%;
		float:left;
	}
	
	a.clickable-div {
		display: block;
		height: 100%;
		width: 100%;
		text-decoration: none;
	}
	
	.img {
		height:auto; 
		width:inherit;
		max-height:100%;
		max-width:100%;
	}
	
	.button {
		color: #900;
		font-weight: bold;
		font-size: 150%;
		text-transform: uppercase;
		display: block;
		width: 50%;
	}
	
	/* --> */
</style>
<div id="grid"><div class="grid-element" align="center">
				<img src="images/light_offline.png" class="img">
				<p><h1>Hue Lamp 1
			</h1></div><div class="grid-element" align="center">
				<a href="action.php?light=2&state=false">
					<img src="images/light_off.png" class="img"></a>
					<p><h1>Hue Lamp 2
			</h1></div><div class="grid-element" align="center">
				<a href="action.php?light=3&state=false">
					<img src="images/light_off.png" class="img"></a>
					<p><h1>Hue Lamp 3
			</h1></div></div><p>
<div align="center">
	<form method="POST" action="action.php">
		<input type="hidden" name="scene" value="02b12e930-off-0">
		<input type="submit" value="Scene 1" class="button">
	</form>
	<p><form method="POST" action="action.php">
		<input type="hidden" name="off">
		<input type="submit" value="All Off" class="button">
	</form>
</div>

This is the browser output.  A couple things are wrong:

 

1. Why aren't the images scaling so they are all the same size?  I assigned the same CSS class to each of the images but they are all appearing differently.  The original images are all the same size.

 

2. Why are my buttons in the far right corner?  I want to have them centered below the images so as to prevent the horizontal scroll bar, which I hate.

 

 

Attached Files


Edited by apacheguy, 07 August 2014 - 08:04 PM.


#2 WebOutGateway

WebOutGateway

    Member

  • Members
  • PipPip
  • 20 posts

Posted 07 August 2014 - 09:55 PM   Best Answer

Hi, apacheguy!

Try this:

<!DOCTYPE html>
<html>
<head>
<style media="screen" type="text/css">
/* <!-- */
body{
 margin: auto;
 width: 100%;
 padding: auto;
}

#container{
 width: 980px;
 height: auto;
 margin: auto;
}
.clear{
 clear:both;
}

#grid{
 padding: 100px;
 margin: auto;

}

.grid-element{
  width: auto;
  padding: 0px 44px 0px 44px;/*sets the padding for the right and left sides*/
  display: inline-block;
  margin: auto;

}

a.clickable-div {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;
}

.img {
  height:auto; 
  width:inherit;
  max-height:100%;
  max-width:100%;
}

.button {
  color: #900;
  font-weight: bold;
  font-size: 150%;
  text-transform: uppercase;
  display: block;
  width: 50%;
}

/* --> */
</style>
</head>

<body>
 <div id="container">
   <div id="grid">
     <div class="grid-element" align="center">
       <img src="wog.jpg" class="img">
       <h1>Hue Lamp 1</h1>
     </div>

     <div class="grid-element" align="center">
       <a href="action.php?light=2&state=false">
       <img src="wog.jpg" class="img"></a>
       <h1>Hue Lamp 2</h1>
     </div>

     <div class="grid-element" align="center">
       <a href="action.php?light=3&state=false">
       <img src="wog.jpg" class="img"></a>
       <h1>Hue Lamp 3</h1>
     </div>
   </div> /*end div #grid*/

   <div align="center">
      <form method="POST" action="action.php">
        <input type="hidden" name="scene" value="02b12e930-off-0">
        <input type="submit" value="Scene 1" class="button">
      </form>

      <br/> /*instead of <p>*/
      <form method="POST" action="action.php">
        <input type="hidden" name="off">
        <input type="submit" value="All Off" class="button">
      </form>
   </div>
 </div> /*end of div #container*/
</body>
</html>

I've set the style of the <body> section. I've created another <div> for the whole content which is the #container. I've set your #grid's padding to 100px and the margin with auto. Also your .grid-element's width, padding. display and margin.

I hope this helps. Thank you.


Edited by WebOutGateway, 07 August 2014 - 10:00 PM.


#3 apacheguy

apacheguy

    Advanced Member

  • Members
  • PipPipPip
  • 107 posts

Posted 08 August 2014 - 12:31 AM

Brilliant!  I just made a few minor changes to your code, but it is finally where I want it to be.  Your code had the images in 1 column with 3 rows, but I wanted that switched to 3 columns and 1 row.  Here is the resulting CSS:

<style media="screen" type="text/css">
/* <!-- */
		body{
		 margin: auto;
		 width: 100%;
		 padding: auto;
		}

		#container{
		 width: 100%;
		 height: auto;
		 margin: auto;
		}

		#grid{
		 padding: 100px;
		 margin: auto;
		}

		.grid-element{
		  width: 33%;
		  display: inline-block;
		  margin: auto;
		}

		a.clickable-div {
		 display: block;
		 height: 100%;
		 width: 100%;
		 text-decoration: none;
		}

		.img {
		  height:auto; 
		  width:inherit;
		  max-height:50%;
		  max-width:50%;
		}

		.button {
		  color: #900;
		  font-weight: bold;
		  font-size: 150%;
		  text-transform: uppercase;
		  display: block;
		  width: 50%;
		}
	
	/* --> */
</style>





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com