Jump to content

side images

mindapolis

By mindapolis
in CSS Help

Recommended Posts

mindapolis Advanced Member

mindapolis

Posted
Posted

Hi, on http://anothermileministries.net/homeTest.php what do I need to do to get the side images too be the same height as the screen? 

@charset "utf-8";
/* CSS Document */

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;/*original width 80%;
	max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	background: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */

.sidebar1 {
	float: left;
	width: 20%;
	background: #93A5C4;
	margin-bottom:auto;
}
.content {
	padding: 10px 0;
	width: 60%;
	float: left;
}
nav {
	background-color: #B1977C;
	width: 200px;
	text-align: center;
 }
.sidebar2 {
	float: left;
	width: 20%;
	background: #93A5C4;
}
header {
	background-color: #735435;
}

/* ~~The footer ~~ */
.footer {
	padding: 10px 0;
	background: #6F7D94;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}

/
header {
}
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */

<![endif]-->

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="lon.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="container">
  <div class="sidebar1">
	<img src="assets/road.jpg" width="200" height="200" alt="road" />

<!-- end .sidebar1 --></div>
  <div class="content">
	<header> 
   	  <img src="assets/logo.jpg" width="439" height="135" alt="logo ">
<nav>
  <a href="homeTest.php" tabindex="1" accesskey="H">Home</a>
  <a href="aboutMe.php" tabindex="2" accesskey="A">About Me</a>
  <a href="contact.php" tabindex="3" accesskey="C">Contact Me</a>
</nav>
	<figure>
    	<img src="assets/couple.jpg" width="80" height="71" alt="couple"><!--picture came from https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&oq=family+&gs_l=img.3..0l10.60419.60720.0.65568.7.4.0.0.0.0.144.316.3j1.4.0....0...1ac..26.img..4.3.172.EfFzboI_D4w&q=family#hl=en&q=couple+&tbm=isch&imgdii=_ -->
        <img src="assets/forgiveness.jpg" width="100" height="67" alt="forgive "><!--this picture came from https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&q=forgiveness&oq=forg&gs_l=img.1.0.0l10.432338.531398.0.538817.11.8.3.0.0.0.174.1071.0j8.8.0....0...1ac.1.26.img..0.11.1084.JlerqVJLo-4#facrc=_&imgdii=_&imgrc=ebKrSk37ZGr6aM%3A%3BG0_SPpfIYVo-4M%3Bhttp%253A%252F%252Fpaulocoelhoblog.com%252Fwp-content%252Fuploads%252F2012%252F06%252Fforgiveness.jpg%3Bhttp%253A%252F%252Fpaulocoelhoblog.com%252F2012%252F06%252F06%252Fforgiveness%252F%3B432%3B288 -->
      <img src="assets/men.jpg" width="100" height="64" alt="men"><!-- image can be found on https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&q=men%27s+group&oq=men%27s+gr&gs_l=img.3.1.0l4j0i10j0l2j0i10j0l2.10469.34358.0.43322.11.9.1.1.2.1.181.1108.1j8.9.0....0...1ac.1.26.img..2.9.817.y7_Q2DlUg2g#facrc=_&imgdii=_&imgrc=pbDQwD5VV-4dyM%3A%3BYfceYvmaZLzjsM%3Bhttp%253A%252F%252Fwww.heartofthecitychurch.org%252Fimg%252Fhow_we_connect_men.jpg%3Bhttp%253A%252F%252Fwww.heartofthecitychurch.org%252Fhow_we_connect.php%3B428%3B273 -->
      <img src="assets/family.jpg" width="100" height="67" alt="family "> <!--image came from https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&oq=family+&gs_l=img.3..0l10.60419.60720.0.65568.7.4.0.0.0.0.144.316.3j1.4.0....0...1ac..26.img..4.3.172.EfFzboI_D4w&q=family#facrc=_&imgdii=_&imgrc=OkMHJw64_lvMhM%3A%3Bsn0JIiafz_FTMM%3Bhttp%253A%252F%252Fwww.imgion.com%252Fimages%252F01%252FComplete-Familiy-.jpg%3Bhttp%253A%252F%252Fwww.imgion.com%252Fimg%252Ffamily%252Fpage%252F16%252F%3B1600%3B1066-->
       </figure>
     </header>
  
    <!-- end .content --></div>
    <div class="sidebar2"> 
    <img src="assets/road.jpg" width="200" height="200" alt="road" />
<!-- end .sidebar2 --></div>
    <div class="footer">
    <!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Link to comment
https://forums.phpfreaks.com/topic/282288-side-images/
Share on other sites
mindapolis Advanced Member

mindapolis

Posted
  • Author
Posted

I edited the css file a little, but still no go. 

@charset "utf-8";
/* CSS Document */

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;/*original width 80%;
	max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	background: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */

.sidebar1 {
	float: left;
	width: 20%;
	background: #93A5C4;
	margin-bottom:auto;
}
.content {
	padding: 10px 0;
	width: 60%;
	float: left;
}
nav {
	background-color: #B1977C;
	width: 200px;
	margin-left:auto;
	margin-right:auto;
 }
figure (
	margin-right: auto;
	margin-left: auto;
)
.sidebar2 {
	float: left;
	width: 20%;
	background: #93A5C4;
}
header {
	background-color: #735435;
}

/* ~~The footer ~~ */
.footer {
	padding: 10px 0;
	background: #6F7D94;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}

-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */

<![endif]-->
Link to comment
https://forums.phpfreaks.com/topic/282288-side-images/#findComment-1450287
Share on other sites
mindapolis Advanced Member

mindapolis

Posted
  • Author
Posted

I got the left sidebar to look right but I have I no idea why the right side wants to take the rest of the page. 

@charset "utf-8";
/* CSS Document */

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;/*original width 80%;
	max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	background: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */

.sidebar1 {
	float: left;
	width: 20%;
	background-image: url(assets/road.jpg);
	background-repeat: no-repeat;
}
.content {
	padding: 10px 0;
	width: 60%;
	float: left;
}
nav {
	background-color: #B1977C;
	width: 200px;
	margin-left:auto;
	margin-right:auto;
 }
figure (
	margin-right: auto;
	margin-left: auto;
)
.sidebar2 {
	float: 	right;
	width: 20%;
	background-image: url(assets/road.jpg);
	background-repeat: no-repeat;

}
header {
	background-color: #735435;
}

/* ~~The footer ~~ */
.footer {
	padding: 10px 0;
	background: #6F7D94;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}

-->

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="lon.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="container">
  <div class="sidebar1">
	<img src="assets/road.jpg" width="100%" height="100%" alt="road" />

<!-- end .sidebar1 --></div>
  <div class="content">
	<header> 
   	  <img src="assets/logo.jpg" width="109" height="135" alt="logo ">
<nav>
  <a href="homeTest.php" tabindex="1" accesskey="H">Home</a>
  <a href="aboutMe.php" tabindex="2" accesskey="A">About Me</a>
  <a href="contact.php" tabindex="3" accesskey="C">Contact Me</a>
</nav>
	<figure>
    	<img src="assets/couple.jpg" width="80" height="71" alt="couple"><!--picture came from https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&oq=family+&gs_l=img.3..0l10.60419.60720.0.65568.7.4.0.0.0.0.144.316.3j1.4.0....0...1ac..26.img..4.3.172.EfFzboI_D4w&q=family#hl=en&q=couple+&tbm=isch&imgdii=_ -->
        <img src="assets/forgiveness.jpg" width="100" height="67" alt="forgive "><!--this picture came from https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&q=forgiveness&oq=forg&gs_l=img.1.0.0l10.432338.531398.0.538817.11.8.3.0.0.0.174.1071.0j8.8.0....0...1ac.1.26.img..0.11.1084.JlerqVJLo-4#facrc=_&imgdii=_&imgrc=ebKrSk37ZGr6aM%3A%3BG0_SPpfIYVo-4M%3Bhttp%253A%252F%252Fpaulocoelhoblog.com%252Fwp-content%252Fuploads%252F2012%252F06%252Fforgiveness.jpg%3Bhttp%253A%252F%252Fpaulocoelhoblog.com%252F2012%252F06%252F06%252Fforgiveness%252F%3B432%3B288 -->
      <img src="assets/men.jpg" width="100" height="64" alt="men"><!-- image can be found on https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&q=men%27s+group&oq=men%27s+gr&gs_l=img.3.1.0l4j0i10j0l2j0i10j0l2.10469.34358.0.43322.11.9.1.1.2.1.181.1108.1j8.9.0....0...1ac.1.26.img..2.9.817.y7_Q2DlUg2g#facrc=_&imgdii=_&imgrc=pbDQwD5VV-4dyM%3A%3BYfceYvmaZLzjsM%3Bhttp%253A%252F%252Fwww.heartofthecitychurch.org%252Fimg%252Fhow_we_connect_men.jpg%3Bhttp%253A%252F%252Fwww.heartofthecitychurch.org%252Fhow_we_connect.php%3B428%3B273 -->
      <img src="assets/family.jpg" width="100" height="67" alt="family "> <!--image came from https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&oq=family+&gs_l=img.3..0l10.60419.60720.0.65568.7.4.0.0.0.0.144.316.3j1.4.0....0...1ac..26.img..4.3.172.EfFzboI_D4w&q=family#facrc=_&imgdii=_&imgrc=OkMHJw64_lvMhM%3A%3Bsn0JIiafz_FTMM%3Bhttp%253A%252F%252Fwww.imgion.com%252Fimages%252F01%252FComplete-Familiy-.jpg%3Bhttp%253A%252F%252Fwww.imgion.com%252Fimg%252Ffamily%252Fpage%252F16%252F%3B1600%3B1066-->
       </figure>
     </header>
  
    <!-- end .content --></div>
    <div class="sidebar2"> 
	<img src="assets/road.jpg" width="100%" height="100%" alt="road" />
<!-- end .sidebar2 --></div>
    <div class="footer">
    <!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>



</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */

<![endif]-->
Link to comment
https://forums.phpfreaks.com/topic/282288-side-images/#findComment-1450331
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • 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.