image height |
image height |
MindyT |
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; } |
Christian J |
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
|
MindyT |
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.
|
MindyT |
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
|
MindyT |
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 |
pandy |
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. |
MindyT |
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?
|
MindyT |
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
|
pandy |
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. |
pandy |
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%} |
MindyT |
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 |
pandy |
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. |
MindyT |
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.
|
MindyT |
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.
|
Lo-Fi Version | Time is now: 29th March 2024 - 08:30 AM |