The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> image height
MindyT
post Nov 15 2013, 02:56 PM
Post #1


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 15 2013, 04:14 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Sidebar2 must be 100% high as well. See also http://css-discuss.incutio.com/wiki/Hundred_Percent_Height
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Nov 16 2013, 04:32 PM
Post #3


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



I added the height 100% but nothing changed.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Nov 16 2013, 10:01 PM
Post #4


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



min-height didn't help either
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Nov 17 2013, 11:08 AM
Post #5


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



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>


This post has been edited by MindyT: Nov 17 2013, 11:14 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 17 2013, 12:40 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Nov 17 2013, 01:04 PM
Post #7


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



That did work but is there anyway to keep the picture portioned?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Nov 17 2013, 01:21 PM
Post #8


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 17 2013, 01:27 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 17 2013, 01:38 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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%}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Nov 17 2013, 01:49 PM
Post #11


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



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]

This post has been edited by MindyT: Nov 17 2013, 01:50 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 17 2013, 02:44 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Nov 17 2013, 07:59 PM
Post #13


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



I am so sorry. That does make sense now. I guess I was looking at the code for too long, sorry. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Nov 18 2013, 09:18 PM
Post #14


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 08:30 AM