CSS - Dynamic Css (wildcard?)

I want to have a web page with a list on it that dynamically resizes to fit the browser viewport with a minimum distance between list items. Here's an example I faked in TextPad:

Normal view:



User enlarges browser:



User shrinks browser:



How would I accomplish this in HTML/CSS?

Thanks!

Hi

I'm trying to CSS a dynamic table using Dreamweaver CS4 the problem i have is to set my css i have to have 2 rows 1 odd 1 even and dreamweaver only gives me 1. I've added a second row which just remains blank. Can anyone help

Heres my html / PHP:

<div class="donation_table">
<table>
<thead>
<tr>
<th>FAMILYNAME</th>
<th>FAMILYCODE</th>
<th>DONATION</th>
<th>DATE</th>
</tr>
</thead>
<?php do { ?>
<tbody>
<tr>
<td><?php echo $row_Recordset3['FAMILYNAME']; ?></td>
<td><?php echo $row_Recordset3['FAMILYCODE']; ?></td>
<td>$<?php echo $row_Recordset3['DONATION']; ?></td>
<td><?php echo $row_Recordset3['DATE']; ?></td>
</tr>
<tr class="rowline">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<?php } while ($row_Recordset3 = mysql_fetch_assoc($Recordset3)); ?>
</table>
</div>

And heres my PHP code

$maxRows_Recordset3 = 25;
$pageNum_Recordset3 = 0;
if (isset($_GET['pageNum_Recordset3'])) {
$pageNum_Recordset3 = $_GET['pageNum_Recordset3'];
}
$startRow_Recordset3 = $pageNum_Recordset3 * $maxRows_Recordset3;

mysql_select_db($database_MafiaLive, $MafiaLive);
$query_Recordset3 = "SELECT FAMILYNAME, FAMILYCODE, DONATION, `DATE` FROM donations ORDER BY DONATION DESC";
$query_limit_Recordset3 = sprintf("%s LIMIT %d, %d", $query_Recordset3, $startRow_Recordset3, $maxRows_Recordset3);
$Recordset3 = mysql_query($query_limit_Recordset3, $MafiaLive) or die(mysql_error());
$row_Recordset3 = mysql_fetch_assoc($Recordset3);

if (isset($_GET['totalRows_Recordset3'])) {
$totalRows_Recordset3 = $_GET['totalRows_Recordset3'];
} else {
$all_Recordset3 = mysql_query($query_Recordset3);
$totalRows_Recordset3 = mysql_num_rows($all_Recordset3);
}
$totalPages_Recordset3 = ceil($totalRows_Recordset3/$maxRows_Recordset3)-1;

Thank you

Daniel

Thank you for your time and assistance. I am working on building my first website in 2 years.

I am very interested in developing a good site interface with standard code that may be easily edited later. Specifically, I am interested in creating dynamic navigation menus that will be supported by as many browsers as possible. I have seen dynamic menus created with javascript, but I know I don't want to do that since some browsers do not support it/or do not have it enabled by default.

Can you comment on whether or not CSS would be a good solution to get around this problem? I have never used CSS to create menus in the past, but it seems very useful for standardizing a site interface. I am also open to other suggestions, what would you do to accomplish this task?

Hi all-

I am building a tableless site out of divs/css and cant seem to get the one div positioned properly. I need to make the site as dynamic and liquid as possible so absolute positioning (i.e. width:320px; etc) is out of hte question...

http://verticalextreme.com/about/hours_pricing.html

i am trying to have the HOURS div and hte PRICING div inline with each taking up 50% of the main content width

i currently have the following css:

Code:

#hours {
	display: inline;
	clear: none;
	width: 50%;
}

#pricing {
	clear: none;
	display: inline;
	width: 50%;

}

Thanks for any help in advance - rock on

I have the task of creating a question with multiple correct answers without using form checkboxes (for reasons I won't go into here.)

I've made a simple question that works by replacing the src of a tickbox image with a ticked one when that answer is selected. It works in IE5.5 and Firefox but in IE6 the images show when the page loads, then disappear on clicking and don't come back.


Can anyone suggest why?

I've stripped out all the branding etc and put the basic page at http://www.normanlamont.com/test/mu...pages/index.htm

Here's the code that does it:
Code:

function markup(which) {
// toggle tickbox on and off until submit
if (document.getElementById('c' + which).className=="chosen") {
		document.getElementById('tick' + which).src="../q_images/tickbox_0.gif";
		document.getElementById('c' + which).className="not_chosen";
		selected[which-1]=0;
		}
	else {
		document.getElementById('c' + which).className="chosen";
		document.getElementById('tick' + which).src="../q_images/tickbox_1.gif";
		selected[which-1]=1;
		}
}

Hi.

I would like to create a gradient similar to the microsoft website.

http://www.microsoft.com/downloads

Look how the gradients at the top and bottom of the page work. Im sure this is not simply repeating an image.

Does anyone know how this works?
or can point me in the direction of a tutorial on how to achieve this?

I looked at the microsoft site in Opera and NS, and the dynamic grad only seems to work in IE.

So im guessing that you can also set a bkgnd image?
for the other browsers?

many thanks.

Ok im trying to have a division that expands with the content however, although this works in IE if i dont specify a height, in browsers like firefox the background color just stops even though the content carries on.

Code:

<div id="content"></div>

Code:

div#content
{
   background-color: #F3F3F3;
}

ive tried adding height: 100% but it doesnt make any difference

Hi All,

I've got one of those wonderful CSS/javascript flyout menu's running on my website which is causing me a little bit of grief in Firefox and Safari.

Firefox and Safari seem to be placing the 2nd and 3rd level items of the menu underneath all the other content on the page and therefore can't be seen. Seems to work well on Opera and IE.

Here are the screen shots of what is happening in each browser:

http://dev.platforminteractive.com.au/cssissue/css_ff.jpg - firefox
http://dev.platforminteractive.com.au/cssissue/css_opera.jpg - opera
http://dev.platforminteractive.com.au/cssissue/css_ie.jpg - ie

You can take a look at the site and the coding behind it at http://dev.platforminteractive.com.au - just in development atm but this nav is causing me some grief.

Hello all,

I'm trying to create a site using all css positioning but I'm running into some problems that to me, shouldn't even be problems.

The main issue I'm having is getting a container div's height to expand based on the height of divs nested inside the container. Vut all I get is the nested divs flowing outside of the container div.

I don't have any code to share, because I have it so screwed up right now it wouldn't even help explain my issue.

I'm going for a 3 column design, that is wrapped by said container div, and the container divs height would be based on the height of the longest div nested within.

I've done alot of searching on the web, and the answer seems to be that this can't be done. But I'm giving it one more try here.

I'm also a bit confused about relative positioning. Say that my conatiner div actually worked, and the height adjusted appropriatly. I have a left column, and a right column. both are position relative to the container. But when I do this, it seems to come out that the right columns top positioning is relative to the left columns positioning.

If I design everything based on viewable browser area, and allow scrolling when necassery, css is a dream. But thats not very practical. It seems that css great for static websites, but not quite up to par for anything dynamic.

Once I calm down and I'm not so frustrated, I'll start over and post some code if my explaination isn't descriptive enough.

Any input would be appreciated!

:-)

Despite looking through the forum, having problems with dynamically creating an external CSS file. Can any one explain?

Basically I currently have a CSS file:
Code:

.normal
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size:   11px;
    }

.userdef
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size:   12px;
    color:       #FF0000;
    font-weight: 800;
    }

.big
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size:   12px;
    }

I have set the site up so that the user can define there own colour of text for the userdef style, but im unsure how I can put this colour variable into the CSS file. I'm guessing I have to rename it into a .php file... but how will the browser still know its a CSS file??


Thanks very much for your help

If I have the following:

<span id="span1"></span>
<span id="span2"></span>


If I set the width of span1, I want to have span2 adjust it's width to be the same automaticly. Something dynamic or a variable.

For example in simple terms.

span1.width = 150px;
alert(span2); would show 150px also.

Hope that make sense.


Thanks

I'm kind of new at the whole CSS thing (though I have lots of other web programming experience) and I was wondering if it's possible to create an inline dynamic table.

Basically what I want to be able to do is have the user enter in a number and hit enter (or a button) and have a table with that many rows (and a set number of columns) appear on the page without the page being reloaded.

Is this possible to do with CSS in a way that most browsers support? If there is, can someone point me to a resource that would have information such as this?

Thanks!

Hi all,
I need my data to display like the states on this page: http://www.designfirms.org/directory/Internet_Design/Web_Design

How do I achieve this using css and no tables? Can anyone help? I am using php/mysl to generate the data and this is the current code to pull the info:

<table border="0" cellpadding="3" cellspacing="0" width="100%" id="table1">
<tr valign="top">
<td>

PHP Code:
<?             
$sql = "SELECT * FROM db"; 
$execute = MYSQL_QUERY($sql); 
$numrows = MYSQL_NUMROWS($execute); 

$counter = 0; 
$increment = 1; 

// Loop throuch all the categories with parent id = 0 
for ($i=0; $i <$numrows; $i++) 
{ 
    $rs = MYSQL_FETCH_ARRAY($execute); 
    $counter = $counter + $increment; 
    
    $category_name = $rs["cname"]; 
    $category_url2 = str_replace(' ', '-', $category_name);
    $category_url = strtolower($category_url2);

    //echo $counter; 
    if ($counter == 4) 
    { 
// close the last row and start a new row 
    $counter = 1; 
    echo "</td><td>"; 
?> 

<span class="med">> <a href="/directory/<?=$category_url?>.html"><?=$category_name?></a><br></span>
<?     
    } 
   else 
    { 
?> 
<span class="med">> <a href="/directory/<?=$category_url?>.html"><?=$category_name?></a><br></span>
    <?     
    // end of the if counter statement 
    } 
    ?> 
<? 
// end of the for loop 
}    
?>



</tr>
</table>

The NEW results would need to display in the <div id="center"></div> area. Any help would be much appreciated.

Well I honestly have no idea which forum to stick this in so I'll start here? As the title says I'm trying to make a simple css tab menu, except I'm making it very difficult lol.

The problem that I'm having is not only must the tabs be able to expand and contract depending on the content/word inserted, and also if a new category is created it must create another tab. There will always be one tab present labeled home/index/etc., centered in the design.
Like this

As a new category/page is created/included via php a new tab shows and they stay centerd.
Like this

This goes on to make a total of six tabs. As of right now I was planning on using these mac style tabs for the tab images but that seems to be whats making this the most diffucult.Especially since I wanted to use a diffrent tab image for the tabs when they are selected.

This would be pretty straightforward in a table layout but I'm really trying for a completely css page. I would greatly appreciate any advice if this even sounds possible the way I described, some other way possibly, or if I'm just shooting for a pipedream.

Thanks very much in advance.

I'm creating an area that will have code snippets in it, I want it to scroll horizontally (wrapping may make the code inaccurate in some languages), but vertically I want the height of the area to grow dynamically. An example can be seen on this page:

http://scratchprojects.com/2006/02/sample_article_tic_tac_toe_p02.php

The problem is, in IE, if there is a horizontal scroll bar, it doesn't make quite enough room, so you have to scroll vertically as well. Shrink your browser window so the code snippet at the bottom of the page doesn't fit and you'll see the two scrollbars appear. In Firefox and Opera, just the horizontal scrollbar shows up.

Here's the basics of the code:

Code:

<div class="code">
<pre class="codeblock">Private Sub menuAboutTTT_Click(ByVal sender _
As System.Object, ByVal e As System.EventArgs) Handles menuAboutTTT.Click
	MessageBox.Show("Tic-Tac-Toe v1.0" & vbCrLf & _
		"See how this and other programs work at" & _
		vbCrLf & "http://www.scratchprojects.com")
End Sub ' menuAboutTTT_Click</pre>
</div>

Here's the style sheet:

Code:

.code {
	text-align: center;
	margin: 15px;
}

.codeblock {
	text-align: left;
	background: #fff;
	border: 1px;
	border-style: inset;
	width: 99%;
	height: auto;
	overflow: auto;
}

Any help would be appreciated. Thanks.