Jump to content

Images/Text not scaling to screen width


apacheguy
Go to solution Solved by WebOutGateway,

Recommended Posts

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.

 

 

post-33762-0-47852300-1407459859_thumb.png

Edited by apacheguy
Link to comment
Share on other sites

  • Solution

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
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.