Help - Search - Members - Calendar
Full Version: image height
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
MindyT
Hi, on http://anothermileministries.net/homeTest.php how can I get the image in sidebar2 the same height as the screen height?

Htnl code
CODE

<!DOCTYPE HTML>
<?php
    require_once("functions.php");
?>
    <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">
<style type="text/css">
article {
    margin-left: auto;
    margin-right:auto;
    width:600px;
    padding-top:  20px;
    padding-bottom:20px;
}
</style>
</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">
    <?php headerMenu(); ?>

     </header>
    <div id="mainContent">
    <article>
<video width="640" height="360" controls>

    <source src="assets/barbie.mp4" type="video/mp4">
    <source src="assets/barbie.ogv" type="video/ogg" autoplay>
  <object type="application/x-shockwave-flash" data="/mov/player.swf"  
width="320" height="240">  
        <source src="assets/._barbie.mp4" type="video/mp4">
    <param name="allowfullscreen" value="true">  
    <param name="allowscriptaccess" value="always">  
    <param name="flashvars" value="file=/mov/scene.mp4">  
    <!--[if IE]><param name="movie" value="/mov/player.swf"><![endif]-->  
    <img src="/img/scene-preview.jpg" width="320" height="240" alt="Video">  
    <p>Sorry but your browser doesn't support HTML5 video.</p>  
  </object>  
</video>
</article>
     </div>
    <!-- end .content --></div>
    <div class="sidebar2">
    <img src="assets/road.jpg" width="100%" height="100%" alt="road" />
<!-- end .sidebar2 --></div>
    <footer>
    </footer>
<!-- end .container --></div>
</body>/
</html>


css code
CODE

/*@charset "utf-8";
CSS Document */
html, body {
    margin:0;
    height: 100%;
    border:dashed;
    border-color:  #969;
}
/* ~~ 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: 15%;
    height:100%;
    margin-bottom:auto;
    border:dotted;
    border-color:#C0C;
    background-image: url(assets/road.jpg);
    background-repeat: no-repeat;
    margin-bottom:auto;
}
.content {
    padding: 10px 0;
    width: 60%;
    float: left;
}
nav {
    background-color: #B1977C;
    width: 200px;
    margin-left:auto;
    margin-right:auto;
}
[color=#FFFF00]
.sidebar2 {
    float: right;
    width: 20%;
    background-image: url(assets/road.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
}[/color]
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 */
}
#photos {
    margin-right:auto;
    margin-left:auto;
    width:400px;
    padding:5px;
}
#mainContent {
    background-color: #e6dace;
    height: 100%;
    width: 100%;
    margin-left:auto;
    margin-right:auto;
}
Christian J
Sidebar2 must be 100% high as well. See also http://css-discuss.incutio.com/wiki/Hundred_Percent_Height
MindyT
I added the height 100% but nothing changed.
MindyT
min-height didn't help either
MindyT
I tried the javascript option and it didn't do anything either. The link to that page is http://anothermileministries.net/test.php and here the code

CODE

<!DOCTYPE HTML>
<?php
    require_once("functions.php");
?>
    <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">
<style type="text/css">
article {
    margin-left: auto;
    margin-right:auto;
    width:600px;
    padding-top:  20px;
    padding-bottom:20px;
}
</style>
<script type="text/javascript">  
var isIE5=navigator.userAgent.toUpperCase().indexOf("MSIE 5")!=-1;

var targetElementID="sidebar1", targetElementStyleOffset=80;

function adjustHeight() {
  if (document.getElementById) {
    var targetElement=document.getElementById(targetElementID),
        documentHeight, totalOffset;

    if (targetElement) {
      documentHeight=document.documentElement.offsetHeight;
      if (targetElement.offsetHeight<documentHeight-targetElement.offsetTop) {
        if (isIE5)
          totalOffset=targetElement.offsetTop;
          else totalOffset=targetElement.offsetTop+targetElementStyleOffset;
        targetElement.style.height=String(documentHeight-totalOffset)+'px';
      }
    }
  }
}

window.onresize=adjustHeight;
window.onload=adjustHeight;
</script>
</head>
<body>
  <div class="container">
    <div id="sidebar1">
    <img src="assets/road.jpg" width="200" height="200" alt="road" />
<!-- end .sidebar1 --></div>
  <div class="content">
    <?php headerMenu(); ?>

<script type="text/javascript">adjustHeight();</script>
</body>
</html>
pandy
To make the 100% height thing work, every element that your target element (the image) is nested inside must have the height 100%, all the way up to HTML. That's because the height is a percentage of the containing element's height. If that element has no explicit height, a percentage of it becomes meaningless and the height defaults to auto.
http://www.w3.org/TR/CSS2/visudet.html#propdef-height

You need all of these selectors. The image will be distorted and look crappy though...

CODE
html, body, .container, .sidebar2, .sidebar2 img   { height: 100% }


Use that with the first page you posted. Ditch the JavaScript.
MindyT
That did work but is there anyway to keep the picture portioned?
MindyT
Here's what the page looks like now. The concept is right but I dont like how it looks. does anyone have any suggestions? http://anothermileministries.net/homeTest.php
pandy
Delete the width and height you have in the IMG tag and it will scale proportionally. You may want to add the below rule or you'll get a horizontal scrollbar.

CODE
.sidebar2    { overflow: hidden }


You will need a wide browser window to see the whole image though.
pandy
I can't figure out a way to center the image given the circumstances, but you could nudge it to the left with a negative margin until you think it looks acceptable in different browser window sizes.

CODE
.sidebar2 img  { margin-left: -35%}
MindyT
it 's close but why isn't sidebar1 the same as sidebar2? The code is
[cosde]html, body, .container, .sidebar1, .sidebar2, .sidebar2 img {
height:100%;
}
[/code]
pandy
You also need '.sidebar1 img'.

Do you understand those selectors? '.sidebar2 img' matches any image inside another element with the class sidebar2. So it does not match the image in the left bar. You need to target that image specifically with the selector above.
MindyT
I am so sorry. That does make sense now. I guess I was looking at the code for too long, sorry. sad.gif
MindyT
I am so sorry, but now the background image wants to be behind the mainContent as well. I worked on it last night, took a break and looked at it this morning and I can't figure out why its doing that. I tried moving sidebar1 outside the container div but that didn't help. What I dont understand is sidebar2 's syntax is the same but it doesn't overlap into the mainContent area.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.