CSS - Resizing P Tag Within The Id

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.

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

I fixed it on my own, thanks for the multitude of responses, not.

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

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">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FF9933">&nbsp;</td>
</tr>
<tr>
<td height="52" bgcolor="#009999">&nbsp;</td>
</tr>
</table>
</body>
</html>

can anyone help? can css do this?

Paul Sully the stuck

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

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?

Hi, is there any way to achieve this effect (pseudocode) with CSS?

if (image width > 100)
add property width="100" to all img tags


ie. i want to make all images larger than 100 pixels scale down

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

Hello everybody, I present myself, I'm Alessandro a new member from Italy.
I found this forum very useful.
Hope to find good answers following topics and hope to help someone when I'm able to.
Ciaooooo

I have this issue for the moment:

I have a homepage layout with 3 columns with an images and captions inside everyone.
I have a subtitle also, and I want the subtitle extends orizzontally over the div without resizing it and without rollbars.

see a screenshot he http://www.alessandroboselli.it/foto/screenshot.jpg

and here is the involved CSS code:

Code:

/* Homepage layout --- start */
#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 980px;
}

#side-left {
	float: left;
	width: 300px;
}

#center { 
	float: left;
	width: 300px;
}

#side-right {
	float: right;
	width: 380px;
}
/* Homepage layout --- end */


/* Homepage images --- start */
.homepageimage {
	position:relative;
	float:left; /* optional */	
	top:40px;
	-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f');
}
.homepageimage a {
	text-decoration: none;
	float: left;
}
.homepageimage a .homepageimagetitle {
	display: block;
	font-family: 'Molengo', Arial, serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	text-shadow: none;
	text-decoration: none;
	letter-spacing: 0.050em;
	word-spacing: 0em;
	line-height: 1.2;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 5px;
	margin: 0;
	width: 190px;
	/*position: absolute;
	right: 20px;
	bottom: 20px;
	filter:alpha(opacity=65);
	opacity:.65;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}

.homepageimage a .homepageimagesub {
  	display: block;
 	font-family: 'Buda', serif;
 	font-size: 22px;
 	font-style: normal;
 	font-weight: 400;
 	text-shadow: none;
 	text-decoration: underline;
 	text-transform: none;
 	letter-spacing: 0.007em;
 	word-spacing: 0em;
 	line-height: 1.15;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 215px;
	left: 0px;
	padding: 5px;
	margin: 0;
}

I need to add a background picture to my web form. I want that the picture should be dynamically resized to the client area of the browser, when the page loads
How to do it using CSS?

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

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...)

Howdy.

I have a div layer acting as the container for the contents of a page. Its contents basically include one div with a long paragraph of text, and one div with a small picture and some miscellaneous information underneath it -- this div is floated to the left. I am running into a problem though.

Provided the paragraph div is longer than the floated div, the container resizes to fit all of the information. However, if the paragraph div is too short and the floated div extends longer on the page, the container does not resize.

Any thoughts?

Thanks!