CSS - Resizing Issue

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

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

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

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!

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?

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

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?

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.

Trying to use jQuery UI aqccordions for a simple news widget on a site. I have created my widget and everything works and looks great but when I click a widget the containing div resizes and makes the whole page bump down a bit.

I dont want to use any hard coded dimesnsions that are longer than the box since it would lose its effect. I need to keep the whole div able to resize whith the screen reolution.

Code:

<div id="newsAccordion" class="ui-accordion ui-widget ui-helper-reset">
 <h3 style="line-height:0.3;" class="accordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" id="accordionTitle1">
  <span class="widgetHeadline">Add news article 1 here</span>
 </h3> 						
 <div class="accordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="accordionContent1" style="padding: 2px 5px;" > 							
 <span>News article 1 content</span>					
 </div> 						 						
 <h3 style="line-height:0.3;" class="accordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" id="accordionTitle1">
  <span class="widgetHeadline">Add news article 2 here</span>
 </h3> 						
 <div class="accordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="accordionContent2" style="padding: 2px 5px;"> 
 <span class="rightJustifiedAccordion">News article 2 content here</span>
 </div> 						 			 <h3 style="line-height:0.3;" class="accordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" id="accordionTitle1"><span class="widgetHeadline">News article 3</span></h3> 						<div class="accordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="accordionContent2" style="padding: 2px 5px;"> 							<span>News article 3 content here</span> 						 </div> 					
</div>

Thanks in advance,

Jim

All right, so I am not new to programming of any sort, but I am fairly new to using CSS to construct a layout without tables of any sort. I am having a little problem with my layout. I have a parent div element that is acting as a container for other div elements.

Right now the layout is just a wireframe so I can easily get everything set so I can continue building. Each element has a border so they can be easily seen. It is he

http://www.thewellofdreams.com/wodtest/

The CSS Code used:
Code:

body
{
	text-align: center;
	background-color: #FFFFFF;
}

#Container
{

	text-align: center;
	margin: 0px auto;
	border: #000000 1px solid;
	min-height: 700px;
	height: expression(this.scrollHeight < 700? "600px" : "auto" );
	/*border-top: none;
	border-bottom: none;
	border-left: none;
	border-right: none;*/
	position: relative;
	width: 800px;

}

#Top
{
	left: 50px;
	top: 50px;
	width: 700px;
	height: 25px;
	position: absolute;
	border: #000000 1px solid;
	/*border-top: none;
	border-bottom: none;
	border-left: none;
	border-right: none;*/
	text-align: center;
}

#Content
{
	top: 78px;
	left: 50px; 
	min-height: 600px;
	height: expression(this.scrollHeight < 600? "600px" : "auto" );
	width: 700px;
	border: #000000 1px ridge;
	/*border-top: none;
	border-bottom: none;*/
	position: absolute;
	text-align: left;
	font: italic 14px arial;
	
}

The HTML Source:
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" />

<link rel="stylesheet" href="css/basestyle.css" />
<link rel="stylesheet" href="css/.css" />

<title>Well of Dreams</title>

</head>

<body>


		


<div id = "Container">
	
<div id = "Top">

</div><!-- End Top -->

<div id = "Content">
(Note: this area is filled by a PHP statement that just spits out the same word over and over again to expand the div tag.  Eventually content will fill this space.)
</div><!-- End Content -->

</div><!-- End Container -->

</body>
</html>

I have looked all over the internet for a solution but it seems that every tutorial I can find is concerned with the child elements resizing to fill the parent element, not the other way around which is what I am looking for here. Anyone got any ideas?

Hi 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!

Hi All,

I'm new here so here's my problem:

Ive created a style sheet with the thumbs-style that resizes pictures.

.thumbs {
border: 2px solid #524b2f;
position: static;
height: 80px;
width: auto;
}
body {
background-color: #f5f0ec;
font-family: Verdana, Arial, Helvetica, sans-serif;
scrollbar-face-color : #f5f0ec;
scrollbar-highlight-color : #aca899;
scrollbar-3dlight-color : #f5f0ec;
scrollbar-shadow-color : #aca899;
scrollbar-darkshadow-color :#f5f0ec;
scrollbar-track-color : #f5f0ec;
scrollbar-arrow-color : #524b2f;

}
.text1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #524b2f;
font-style: normal;
font-weight: bold;
text-transform: none;
font-variant: normal;
text-decoration: none;
}

.text2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #524b2f;
}
.titel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #524b2f;
text-decoration: underline;
}

Everything works fine on my computer. But load the page on the server the resizing doesn't work anymore.

Here's the link http://www.sleuyter.be/04/lay04-1.htm

When i right click on the thumbs in the I-frame and select properties than they resize to the specified size in the CSS-sheet.

On my pc everything is ok , what can it be with the server?

Who can help me?

Thx,

ROY

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.

I'm having some problems when I resize a window from full size and make it smaller in width. I have a stationary graphic that remains in position even if the user scrolls the window up and down, which is what it is supposed to do. However, when I reduce the width of the overall window, the background now scrolls right and left and the graphic covers things it is not supposed to. Is there a way to allow the graphic to scroll right and left if the window can be scrolled right and left but to leave the graphic stationary otherwise?

Here's what I have in the style sheet:

Code:

.pagegraphic{
	float:left;
	height:173px;
	position: fixed;	/* this keeps the coin fixed and allows the background to scroll behind it */
	width:170px;
	z-index:99;
}

Another problem that occurs when the user can scroll horizontally. When the user resizes and then scrolls right, the background of the window is cut off on the right to the size of the resized window, so you only see a white background past that point.

Any suggestions are appreciated.