|
CSS - Scaling Block Of Color, Height In %
I am just trying to create a simple layout, where there are specific
margins around two color boxes. I'd like the color boxes to fill the space between the margins, 100% and to each take of 50% of height. I have kind of faked it...but I know there must be a better way. Any help would be great. Thanks. http://www.skimdesign.com/projects/mnomentana/ I have also reworked the code a bit, finding that if the position isn't "absolute" somewhere, the boxes won't show at all. Not sure why this is. But here is the reworked code: body { margin:20px 15px 10px 100px; font-family: trebuchet, verdana, sans-serif; } #leftcontent { float:left; width:25%; background:#fff; } #rightcontent { position: absolute; width:75%; height:100%; min-height:100%; } #green{ height:50%; min-height:50%; background-color:#CCFF33; } #grey{ height:50%; min-height:50%; background-color:#999999; } thanks. Similar TutorialsHello, I'm new to these forums and I have a question. I am making a website (c-pj.net/lowercase/), and I'm having a problem. If I add too many posts or make a post to long it goes off the page, or at least the text does. What I mean by that is that the text ends up going onto the header and past my content holder image. Can anyone take a look at the source code, and my style sheet and tell me how I could make the height of my content area scale to the proper size, when I try to set it to auto it doesn't display at all. This could be caused by the fact that my content are is absolutely positioned but I'm just looking for some advice hopefully you guys understand my question. My style sheet is located he c-pj.net/lowercase/stylesheets/default.css Hi, I am having a problem with some getting a div to scale to the full height that I want it to. Any help would be much appreciated. Here is the link to the page in question: http://www.paultheillustrator.com/template.html Basically, I have 3 divs (wrapped in another div), floating left of each other. The left and right div are simply background shading images. The center div is where the content (on this page, my blog) is. The centre div and wrapper div heights are set to auto (as I want them to expand with the amount of content in the centre div). However, because of this, the left and right divs (which have no content, just a repeating background image), do not appear. Currently I have their height set to 100%. Any solutions would be much appreciated! Thanks, Paul Here is the CSS: Code:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../images/bg.gif);
background-repeat: repeat;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
line-height:14px;
color:#666666;
}
html, body {
height:100%;
}
#centre-right a:link {
color: #000000;
text-decoration: none;
background-color:#FFFF00;
}
a:visited {
text-decoration: none;
color: #000000;
background-color:#FFFF00;
}
a:hover {
text-decoration: underline;
color: #333333;
}
a:active {
text-decoration: none;
color: #44C3F3;
background-color:#FFFF00;
}
h2{
/*letter-spacing:-1px;*/
color:#999999;
font-family: Arial, Helvetica, sans-serif;
line-height:20px;
font-weight:100;
font-size:24px;
margin-left:-2px;
}
#overall_wrapper{
width:737px;
height:auto;
margin:0px auto;
}
#main_top{
width:737px;
background-image:url(../images/top-main.png);
background-repeat:no-repeat;
height:198px;
}
#menu_wrapper{
width:737px;
}
#left_bar{
width:28px;
height:auto;
background-image:url(../images/bg_left-strip.png);
background-repeat:repeat-y;
float:left;
}
#centre{
background-color:#FFFFFF;
height:auto;
width:681px;
float:left;
}
#centre-left{
width:168px;
height:100%;
float:left;
margin-left:28px;
margin-top:28px;
margin-bottom:28px;
}
#centre-right{
width:428px;
height:auto;
float:left;
margin-left:28px;
margin-top:28px;
margin-bottom:28px;
}
#dots{
margin-top: 14px;
width:70px;
height:14px;
background-image:url(../images/arrows-dots.gif);
float:left;
}
#centre-right .blog{
margin-top: 14px;
float:left;
width: 334px;
margin-left:14px;
}
.header-text{
}
#right_bar{
width:28px;
height:100%;
background-image:url(../images/bg_right-strip.png);
background-repeat:repeat-y;
float:left;
}
#footer{
width:737px;
height:257px;
background-image:url(../images/footer.png);
float:left;
}
Hey, I been wondering, when using XHTML Strict, what is considered the correct way of making a block level element (like a division) and the document body fill-out/fit the browser window vertically? The way I've been accomblishing this is by using javascript to set the height of the body when-ever the page is loaded and resized, though using something like this(of course, using document.documentElement.clientHeight for IE and using a more sane variable name for the sum of the top and bottom margins ) Code: document.body.style.height = (window.innerHeight - sumOfTopAndBottomBodyMargins) + "px"; and and setting the block level elements css height property to 100%. This works, but its lame! When resizing, the block level element doesn't get resized before you are done resizing and the appropriate event is fired. Not very 21th century. So, to sum up.. can some friendly soul please enlighten me on how I can do this in a decent way using only CSS? Cheers Hi! Is it possible to align vertically block elements in a fixed-height (unknown) container? If not, this is a serious shortcoming of the css model of placing objects on the screen. Thanks! Hi everybody Is there a way to inherit the height of a surrounding table cell? <td> <a href="..." style="display: block;">...</a> <!-- Should have the same height as the td --> </td> Thanks for help :-) Josh I've made an image to explain my problem pretty well : imgur dot com /n8uOX (apparently I am not allowed to posts links , however its kinda hard for me to explain the problem so its easier to just show it) basically i want my page to always be rendered as I intended it to. I am pretty sure my coding is quite bad and thats what caused the problem , yet if anyone have any way to fix this please post in this thread. Thanks Got it sorted now Thanks - Dan. How come IE obeys fixed and em font sizes and firefox doesn't? I want all my site text to be scaleable apart from the navigation text which I gave a fixed size of 10px. In IE the scaling is observed and all fonts are em apart from the navigation. In firefox however it scales ALL fonts which is very annoying. Is this a known problem? Is there a way to tell a browser to NOT zoom it when the user tries to zoom the text... I ask because I use text in a menu bar that I do not want to scale at all. Thanks I am writing my site in XHTML 1.1 (application/xhtml+xml) entirely using ems. The page scales really nicely with browser text resizes however all of my rounded corners (background images), image bullet points, and any other background images do not. Is there any way to specify the background image width in ems? I think I'm going to have to mix presentational images with content otherwise. Hi all, I have a problem in scaling images, I re-size all images by -50% to make them act as thumbnails at the following address: http://www.magic-photography.co.uk/photoselector.html It works fine in Chrome using the following simple CSS: Code: a img { border: none; height: 50%; width:auto; text-align: left; }
however in IE/Firefox the images do not re-scale at all. Very very grateful for any help offered. Thanks Hello everyone, Ive been trying to reconstruct a web design from a photoshop design and it has bars going down the side of a center container where the content is, the problem im having is when the text and such in the content 'rule' goes over one line, prior to what i thought would happen, only the content 'rule' scales to the amount of text and the container rule does nothing. Is there a way to make the container scale with the content and have the bars scale with the container...? Heres the css and the html Code:
#container
{
margin-left: auto;
margin-right: auto;
top: 0;
width: 875px;
margin-top: -8px;
padding: 0;
overflow: visible;
background: #FFFFFF;
}
#secondbar
{
margin-left: 102px;
margin-right: auto;
width: 40px;
top: 0;
position: absolute;
background: #4D220F;
}
#bar
{
margin-left: 6px;
margin-right: auto;
width: 96px;
top: 0;
position: absolute;
/*[empty]height:;*/
background: #E3C98E;
}
#thirdbar
{
margin-left: 123px;
margin-right: auto;
width: 21px;
top: 0;
position: absolute;
background: #7F8FA6;
}
#content
{
margin-left: 154px;
margin-right: auto;
top: 0;
width: 709px;
position: absolute;
background: #FFFFFF;
}
Code: <head> <title>Test</title> <link rel="stylesheet" type="text/css" href= "styles.css"> </head> <body bgcolor="f4f1ea"> <div id="container"><div id="bar"> </div><div id="secondbar"> </div><div id="thirdbar"> </div> <div id="content"> </div></div> </body> Thanks for any help, sorry if its a bit confusing Xidus I have an image I want to display in a <td> cell, that scales with the cell dimensions. How do I do that? Prior to doing any serious mobile work, I learned if you had an image that was mostly decorative and didn't need to be read as part of the content, you used a background image. In today's world you have to support many mobile devices. There's a nice trick with <img> tags where you give them a max-width of 100%, and they will scale down proportionately on mobile devices. As far as I can tell, there isn't quite as good of a solution for background-images. Say I have a background image in a div, and I set the dimensions to match the background size - 600 x 300. To allow it to scale down on mobile devices, I set a max-width of 100%. But that doesn't scale the background image down, just crops it. So I set background-size: contain, which makes the background scale, but the div is still 300px tall. And that's where I run into the problem. How do I tell the div to only be as tall as its background? Am I missing something? Hi: I am having trouble implementing a background image using CSS for compatibility with IE7, and if possible, IE6. In my CSS, I have the following code defined Code:
body{
margin:0px;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: black;
background-color:#fff;
background-image: url(../images/bg.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: absolute;
background-size: 100%;
}
/*
body{
margin:0px;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: black;
background: #fff url(../images/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
*/
The results work fine in Chrome, Safari and Firefox on both PC and Mac. However, the image does not scale and gets cropped in IE7. I have tried it two different ways, both of which are in the code, and one of which is commented out. Neither way works properly with IE7. Does anyone have a solution to this that they could share with me. Thanks. Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! Hello everybody! I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS: HTML (I only included the very basic structure): <html> <body> <div class="container"> <div id="content"> <div id="..."></div> <div id="..."></div> <div id="..."></div> <div id="..."></div> </div> </div> </body> </html>` CSS: html, body { height: 100%; font-family: Arial; font-size: 10px; color: #000000; background: #FFF url(../../images/body.png) no-repeat center 40px; margin: 0; position: relative;} .container { height: 100%; width: 960px; margin-right: auto; margin-left: auto; position: relative;} #content { width: 939px; min-height: 100%; position: relative; top: 210px; left: 6px; box-shadow: 0px 0px 8px #666; -moz-box-shadow: 0px 0px 8px #666; -webkit-box-shadow: 0px 0px 8px #666; background-color: #FFF;} I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies? Thank you so much in advance for your help. Hello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar. So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks... Code:
div.divBox1
{
width: 286px;
height: 359px;
float: left;
}
div.divClearFloat
{
clear: both;
height: 0px; /* For IE Stupidity (it added some spaces after clearing the float) */
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
div.divDottedLineAdvertisementSeperator1
{
width: 575px;
height: 3px;
background-color: #ff0000;
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
Code: <div class="divBox1"> <div style="margin-bottom:-360px;"> <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;"> <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;"> </div> </div> <div class="divClearFloat"></div> <div class="divDottedLineAdvertisementSeperator1"></div> |
|||||||