|
CSS - Auto Resizing Background
Hi,
I have a quick question which should be cleared up soon enough. However i'm confused. I make a content layer and wish to make the contents height at 100%, so it will cover the hole screen (height wise). So i thought .. the simple code following would solve it. CSS: Code: #content {
position:absolute;
width:800px;
height:100%;
overflow:inherit;
z-index:1;
background-image:url(../images/content.png); background-repeat:repeat-y;
left: 100px;
top:0px;
visibility: visible;
}
Obviously not seeing as the content ends up a few milimeteres in height. Any help would be fantastic. Regards, Joe. EDIT: I have however .. got it to work in FF .. IE seems to be a problem now though. Similar TutorialsHi all! I got a three column div lay-out with a wrapper around these three column divs. At the moment, all columns have a fixed width and are floating to the left. Now I want the center column to auto-resize when I make my browser screen smaller. I already tried "width: auto;" but then it places the center column below the left column in stead of next to it. Does anyone have an idea on how to solve this problem? Thanks! Ok, first problem: How would I go about creating a div container that auto-resized (and works with all browsers)? I can just set the left and right margins to work with newer browsers, but I need it to work for IE etc. Currently, I am using a table for this, but due to the many colspans and rowspans, the height and width settings are buggy and my borders will not show up right. Besides that, I would much rather do it with divs anyway, because it's smaller and easier. Second problem: How would I create a paragraph that would act like this: If it was under 500px high, it would shrink to fit. If it was over that, it would add a scroll bar with overflow? What I have: Code: p.code {
font-family: "Courier New", serif;
font-size: 8px;
height: auto;
width: 600px;
border-size: 1px;
border-color: #46516F;
border-style: ridge;
padding: 5px;
overflow: auto; }
(obviously doesn't work...) Anyone know how to get your website's background to resize as the page is manually resized when using IE? It resizes properly on both on mac and PC using Firefox, Safari, and Opera, but not IE (on PC). Thanks Hey all, I have a couple of related questions. First off, is there a way to automatically resize a div or any other element to be the size of the background image. Basically I am trying to do all my images in the stylesheet to allow for easy skinning. I've been doing stuff like: Code: #myDiv {
background:url(graphics/cat.jpg);
height:75px;
width:75px;}
But manually setting the height and width gets really tedious after a dozen or so images. And a related question: manually setting the size of a div doesn't seem to work if I have display set to inline. I get divs that are zero width and zero height. But when I remove that line it works fine, except that I'd rather they be inline elements for positioning purposes. Thanks in advance. For some reason I cannot explain, IE6 is re-sizing (shrinking) a div when you mouse-over the second-to-last link in it when the a:hover css sets a background-color!? Mouse-over the second-to-last link here (about this site): URL Mousing over the last link restores it, and if you go from the last link to the second last link it does not shrink it. It's not doing it in Firefox, and it doesn't do it if the bottom link is not the last bit of text on the page. This page has the same problem, except if you go down to the second-last link in September 2004, it does not exhibit this behavior, because the last link in the September 2004 div is not the last line of text in it. URL Help appreciated. I'm going crazy! I've had an issue in the past where the background image creeps, or hangs, when resizing the window. To explain what I mean, check out this page: http://ridersresto.com/ this is the background image: http://ridersresto.com/images/main_bg.gif when you slowly resize the image, you will notice the background image on both sides of the page closing and opening a 1px gap. here is the CSS for the BG image: Code: body {
margin: 0;
padding: 0;
background-color: #131313;
color: white;
background-image: url(http://ridersresto.com/images/main_bg.gif);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: top center;
}
.frame {
margin: 0 auto 0 auto;
padding: 0;
width: 778px;
background-color: #000000;
color: white;
}
Code: <body> <div class="frame"> </div> </body> Is there a more efficient way of accomplishing this effect? I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways? Thanks, Carlos Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
<div id="navbar">
<p>testing</p>
<p>testing</p>
<p>testing</p>
</div>
</div>
</body>
</html>
My CSS Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #000;
margin-top: 17px;
margin-bottom: 15px;
}
#header {
background-image: url(images/header.jpg);
margin:0 auto;
height: 167px;
width: 810px;
background-repeat: no-repeat;
}
#maincontent {
background-image: url(images/coatedmetalsm.jpg);
background-repeat: repeat;
margin:0 auto;
width: 810px;
height: auto;
}
#navbar {
float: left;
width: auto;
position: relative;
}
I am building a custom form control that behaves more or less like a <select> menu. For the dropdown portion of the menu, I need to set a max-height. If the dropdown contains enough options to go beyond the max-height a vertical scrollbar should appear. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Custom Auto-Complete</title>
<script type="text/javascript">
<!--
function initPage()
{
}
-->
</script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
}
input {
width: 200px;
background: #f4f4f4;
border: 1px solid #999;
font-size: .9em;
/*
*/
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cAutoCompleteCtl {
position: relative;
/*
border: 3px solid red;
*/
}
.cAutoCompleteCtl input {
margin: 0 5px 0 0;
display: block;
float: left;
}
.cAutoCompleteCtl a.dwnarrow {
width: 15px;
height: 15px;
border: 1px solid #999;
background: url(images/downarrow.gif)
no-repeat;
background-position: center center;
background-color: #efefef;
float: left;
display: block;
font-size: 1px;
text-decoration: none;
}
.cAutoCompleteCtl .acCtlDropdwn {
position: absolute;
top: 20px;
left: 0px;
z-index: 100;
visibility: visible;
min-width: 300px;
max-width: 600px;
height: auto;
max-height: 200px;
background: #fff;
padding: 5px;
border: 1px solid #999;
overflow: auto;
/*
width: 400px;
*/
}
* html .cAutoCompleteCtl .acCtlDropdwn {
width: expression( this.scrollWidth < 330 ? "300px" : ( this.scrollWidth > 620 ? "600px" : "auto" ) );
height: expression( this.scrollHeight < 20 ? "200px" : ( this.scrollHeight > 301 ? "300px" : "auto" ) );
}
.cAutoCompleteCtl .acCtlDropdwn a {
white-space: nowrap;
display: block;
text-decoration: none;
padding: 2px 5px;
color: #000;
border: 1px solid #fff;
}
.cAutoCompleteCtl .acCtlDropdwn a.lastOption {
}
.cAutoCompleteCtl .acCtlDropdwn a:hover {
background: #f5f5f5;
border: 1px solid #b3b3b3;
}
-->
</style>
</head>
<body onload="initPage();">
<div class="cAutoCompleteCtl clearfix">
<input type="text" /><a href="" class="dwnarrow"> </a>
<div class="acCtlDropdwn">
<!--<a href="#">options here options here options here options here options here options here options here options here options here options here options here</a>-->
<a href="#">options here</a>
<a href="">Boulder Logic</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
</div>
</div>
</body>
</html>
I'm seeing some unexpected behaviour ihn Firefox. When the page is loaded for the 1st time, the height of the dropdown portion of the menu is only large enough to see 1 option and no scrollbars are displayed. If I hit refresh (without holding the Shift key), the menu's height goes to its max-height and displays as expected. The only property I could find that has any effect on this behaviour is overflow. If I remove it all together or set it to scroll, it displays at the correct height. Unfortunately, neither of these are an option since they will not produce the desired scrolling behaviour. Can anyone see where I'm going wrong? I have been asked to create a font resize on a website. I can do the basics of it but I'm running into a couple snags Question 1 In my stylesheet, I have: Code: #centerCol {
float: left;
color: #333;
font-size: 10px;
padding: 10px 10px 10px 15px;
}
And in my code I have a function that contains: Code: document.getElementById('centerCol').style.fontSize = '12px';
It works fine to resize the centerCol ID but what if I want to only resize the <p> tags in the centerCol ID? Question 2 Is there a way to resize without the use of Javascript? Everything I've found so far includes it. Sup all. Im trying to make a website but it keeps resizing when I expand and retract me webbrowser. So Far this is my code PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Free UFC PPV</title> <style type="text/css"> body { background-color: #CCC; font-family: Tahoma; } #holder { width: 75%; padding: 10px; border: 1px solid; text-align: left; } #img{ background-image:url(images/header.png); } #login { width: 100%; font-family: Tahoma; font-size:15px; text-align: right; color: Black; border: 1px solid; } </style> </head> <body> <center> <div id="holder" style="width:75%"> <a href="index.php"> <img src="images/header.png" alt="Header Image" width="1024" height="150" /></a> <div id="login" style="100%" > <form action=""> Login:<input name="userlog" type="text" /> Password:<input name="passlog" type="text" /> <input name="btn_sub" type="button" value="Login" /> </form> </div> </div> </center> </body> </html> What can I do to stop resizing? I'm looking to basically replicate the design of Engadget. Not entirely, just the real basic design of it. I'm trying to figure out how to use 4 different images (a right header, left header, left footer, right footer) to construct a site that resizes in different browsers to look good. How do I do this? I'm familiar with CSS and html. I want to make the images in Fireworks and slice them, but after I do that and have the html how do I do things like using a wrapper? Thanks for any help you can offer. Alright, this seems to be tricky, but here's the story: I've got a photography gallery I made for a friend, and the last thing that needs to be taken care of is cross-browser compatability. I'm down to one problem of image resizing for thumbnails in IE. I've seen a few solutions, but none of them seem to work, so maybe I'm just doing things wrong, but then again no site has talked about resizing both horiz. and vert. For the site, any image thrown on the page needs to be resized to no greater then 105x100. But please, don't tell me to use PHP for this - I'm very attached to the fact that the entire site weighs in at under 300 lines. Thanks, Brian Ziemek Hi there! I am tweaking a WordPress template to fit a blog for a roleplaying game. The template is a three-column, fixed-width one. It looks fine on my tiny 17" monitor at work, but at home on my 22", the blog is very small and sits in the center of the page. (The content section is just 904px wide.) Is there a way to tweak the style.css file in order to give the columns percentage widths instead of absolute pixel widths, so that the center "content" area will resize properly according to the reader's resolution/monitor size/window size? I have some experience with CSS and I'm usually pretty good at tweaking pre-existing CSS to fit my needs, but this is something that's a bit beyond me. I can't put a direct URL in my post, but here's a snippet of the CSS file: Code:
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}
body{
font-family: Arial, Helvetica, Georgia, Sans-Serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #fff url();
color: #fff;
}
h1, h2, h3, h4, h5, h6{
font-family: Arial, Helvetica, Georgia, Sans-Serif;
font-size: 16px;
}
a{
text-decoration: underline;
color: #08441e;
}
a:hover{ text-decoration: none; }
a img{ border: 0; }
abbr, acronym{ border: 0; }
address, dl, p{ padding: 10px 0 0; }
blockquote{
margin: 10px 10px 0;
background: #fffada url(images/bg_blockquote.gif) no-repeat 5px 7px;
color: #736926;
}
blockquote p{
padding: 10px 10px 10px 20px;
}
blockquote blockquote{
margin: 10px 20px;
background: #fff;
color: #333;
}
blockquote blockquote p{ padding: 10px; }
code{
background: #f9f9f9;
}
dt{
font-weight: bold;
}
dd{
padding: 0 0 5px 15px;
}
hr{
clear: both;
margin: 15px 0 5px;
width: 100%;
border: 0;
height: 1px;
text-align: left;
background: url(images/bg_comment_bottom.gif) no-repeat;
}
small{
font-size: 10px;
}
input, textarea{
font-family: Arial, Helvetica, Georgia, sans-serif;
font-size: 12px;
padding: 2px;
}
input#author, input#email, input#url, textarea#comment{
border: 1px solid #cbb945;
background-color: #fffadb;
padding: 3px;
}
input#author, input#email, input#url{
margin: 0 5px 0 0;
}
#container, #header, #menu, #menu ul li, #menu ul li a, #pagetitle, h1, #syndication, .pagewrapper, .page, .wrapper, .narrowcolumnwrapper, .narrowcolumn, .content, .post, .entry, .browse, sidebar{
text-align: left;
vertical-align: top;
}
#container{
margin: 0 auto;
width: 904px;
padding: 10px 0 0;
}
#header{
margin: 0 0 10px;
float: left;
width: 904px;
height: 250px;
background: url(images/bg_header.gif) no-repeat left bottom;
color: #333;
}
#menu ul{
margin: 0;
padding: 0 0 0 175px;
list-style: none;
}
#menu ul li{
float: left;
margin: 0 5px 0 0;
font-size: 14px;
font-weight: bold;
background: url(images/bg_tab_right.gif) no-repeat right top;
color: #ffffff;
}
#menu ul li a{
display: block;
padding: 14px 20px 10px;
text-decoration: none;
background: url(images/bg_tab_left.gif) no-repeat left top;
color: #ffffff;
}
#menu ul li a:hover{
text-decoration: underline;
}
#pagetitle{
clear: both;
width: 904px;
height: 250px;
}
}
#pagetitle h1 a{
text-decoration: none;
color: #fff;
}
.pagewrapper{
margin: 0 0 10px;
float: left;
width: 904px;
background: #fff url(images/bg_page_bottom.gif) no-repeat left bottom;
color: #333;
}
.page{
float: left;
padding: 0 5px 5px;
background: url(images/bg_page_top.gif) no-repeat;
}
.wrapper{ /* This wrapper class appears only on Page and Single Post pages. */
float: left;
width: 500px;
}
.narrowcolumnwrapper{
margin: 5px 0 0;
float: left;
width: 500px;
background: #fff url(images/bg_narrowcol.gif) repeat-y;
}
.narrowcolumn{
float: left;
width: 500px;
background: url(images/bg_narrowcol_bottom.gif) no-repeat left bottom;
}
.content{
float: left;
width: 500px;
background: url(images/bg_narrowcol_top.gif) no-repeat left top;
}
Thank you! I fixed it on my own, thanks for the multitude of responses, not. http://hmv.co.in/temp/html/boxes.html when the content of the box of either left and right boxes in the above page is diff... the boxes margin is also changed... how can i make both the boxes of the same siz so tht theres blank space in the box tht has less content Hey people. I've been desperatly searching for a fix for the bug in my CSS, but I don't know what I'm doing wrong. Here is a link to the the testfile: http://users.skynet.be/bert_fonteyn...iek/index.html. The page validates as valid XHTML. Now here is the bug in Windows (I have not tested it in Mac yet), both in Netscape 7 as in IE 6. Shrink your window, so you have a horizontal scrollbar. Scroll to the right, and you will notice there is a white area which can 't show the backgroundtile for some 60 px wide. The content (which is white) is there however... Can someone please tell me what I'm doing wrong? Greetz, Bert hello people, im stuck. i have a simple layout in html, it works fine in html but when i try to use css to layout the page i cant get the centre cell to resize while the top and bottom don't. here is my html page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td height="52" bgcolor="#009999"> </td> </tr> <tr> <td bgcolor="#FF9933"> </td> </tr> <tr> <td height="52" bgcolor="#009999"> </td> </tr> </table> </body> </html> can anyone help? can css do this? Paul Sully the stuck I have attached the file, If you Open a File using that, the Textarea was styled to go to 90% (<textarea style="width:100%;height:90%;"></textarea>) this is designed only to work in IE! Can someone please help me? Thank you, In advance Zero Here is the code for what is basically the masthead for the top of a web page. It uses tables, and expands and contracts to fit the browser as the viewer re-sizes. Quote: <table width="100%"> <tr> <td><IMG src="images/banner_left_end.gif"></td> <td width="100%" background="images/some_background.gif" align="middle" valign="center"> <!-- middle cell at 100% to push the left and right cells to the browser edges --> </td> <td><IMG src="images/banner_right_end.gif"></td> </tr> </table> What I would like to do is get rid of the table and use DIV tags and CSS to do this, but I'm having trouble figuring out how to push the left image to the left and the right image to the right to make it grow and contract as the browser re-sizes. How is this done? |
|||||||